/*

Theme Name: Card Catcher (Storefront Child)

Theme URI: https://example.com

Description: Custom child theme for Card Catcher WooCommerce shop, built on Storefront.

Author: Card Catcher

Template: storefront

Version: 1.0.0

Text Domain: cardcatcher-child

*/



@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');



/* ── Design tokens ─────────────────────────────────────────────── */

:root {

  --color-navy: #00284C;

  --color-navy-light: #003a6e;

  --color-mint: #CAFCE1;

  --color-mint-dark: #9EE8C3;

  --color-pink: #F19AB7;

  --color-purple: #461959;

  --color-footer-text: #73b2ec;

  --font-display: 'Baloo 2', sans-serif;

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

}



body {

  font-family: var(--font-body);

  color: var(--color-navy);

  background: #ffffff;

}



.font-display,

h1, h2, h3, h4, h5,

.site-title,

.button,

.woocommerce a.button,

.woocommerce button.button {

  font-family: var(--font-display);

}



a { text-decoration: none; }



/* ── Marquee bar (Pomalá rotácia s veľkými medzerami) ─────────── */

.marquee-bar {

  overflow: hidden;

  background: var(--color-pink);

  padding: 10px 0;

  width: 100%;

}

.marquee-track {

  display: flex;

  width: max-content;

  /* Zmenené na 45s = podstatne pomalší pohyb */

  animation: marquee 50s linear infinite; 

}

.marquee-group {

  display: flex;

  align-items: center;

}

.marquee-item {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 13px;

  text-transform: uppercase;

  color: var(--color-navy);

  /* Zvýšené na 120px = veľký priestor medzi položkami */

  padding: 0 120px; 

  display: flex;

  align-items: center;

  gap: 100px;

  white-space: nowrap;

}

@keyframes marquee {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}

/* ── Top header ────────────────────────────────────────────────── */

.site-header-top {

  background: var(--color-navy);

  padding: 12px 24px;

}

.site-header-inner {

  max-width: 1280px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 16px;

}

.site-logo img { height: 76px; object-fit: contain; display: block; }

.site-search { flex: 1; max-width: 640px; margin: 0 auto; position: relative; }

.site-search input[type="search"],

.site-search input[type="text"] {

  width: 100%;

  border-radius: 12px;

  padding: 10px 48px 10px 20px;

  font-size: 14px;

  font-family: var(--font-body);

  background: rgba(202,252,225,0.15);

  color: #fff;

  border: 1.5px solid rgba(202,252,225,0.3);

}

.site-search input::placeholder { color: rgba(255,255,255,0.7); }

.site-search button {

  position: absolute;

  right: 4px;

  top: 50%;

  transform: translateY(-50%);

  width: 36px;

  height: 36px;

  border-radius: 8px;

  background: var(--color-pink);

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}

.header-icons { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.header-icons a { color: #fff; position: relative; display: flex; }

.header-icons a:hover { color: var(--color-mint); }

.cart-count {

  position: absolute;

  top: -8px;

  right: -8px;

  background: var(--color-pink);

  color: var(--color-navy);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 11px;

  border-radius: 999px;

  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.mobile-nav-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; }



/* ── Nav bar ───────────────────────────────────────────────────── */

.site-nav {

  background: var(--color-mint);

  border-bottom: 1px solid var(--color-mint-dark);

  padding: 0 24px;

}

.site-nav-inner {

  max-width: 1280px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 48px;

}

.main-nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }

.main-nav-links a {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 15px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--color-navy);

  padding: 4px 0;

  border-bottom: 2px solid transparent;

  transition: border-color 0.2s;

}

.main-nav-links a:hover { border-color: var(--color-purple); }

.social-pills { display: flex; align-items: center; gap: 8px; }

.social-pill {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 6px 12px;

  border-radius: 999px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 12px;

  color: #fff;

  transition: transform 0.2s;

}

.social-pill:hover { transform: scale(1.05); }

.social-pill.instagram { background: #F19AB7; }

.social-pill.facebook { background: #1877F2; }

.social-pill.discord { background: #5865F2; }



/* ── Hero ──────────────────────────────────────────────────────── */

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

.hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; height: 440px; }

.hero-slider {

  position: relative;

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0,0,0,0.25);

}

.hero-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 0.7s ease;

}

.hero-slide.active { opacity: 1; z-index: 1; }

.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

.hero-slide-overlay {

  position: absolute; inset: 0;

  background: linear-gradient(to top, rgba(0,40,76,0.85), rgba(0,40,76,0.2) 60%, transparent);

}

.hero-slide-content {

  position: absolute; left: 0; right: 0; bottom: 0;

  padding: 28px 32px;

  display: flex; flex-direction: column; gap: 12px;

}

.hero-badge {

  font-family: var(--font-display); font-weight: 700; font-size: 11px;

  text-transform: uppercase; letter-spacing: 0.1em;

  padding: 4px 12px; border-radius: 999px; width: fit-content;

  background: var(--color-pink); color: var(--color-navy);

}

.hero-title {

  font-family: var(--font-display); font-weight: 800; color: #fff;

  font-size: 34px; line-height: 1.15; white-space: pre-line;

  text-shadow: 0 4px 12px rgba(0,0,0,0.3);

}

.hero-sub { color: rgba(255,255,255,0.85); font-size: 15px; }

.hero-cta {

  font-family: var(--font-display); font-weight: 700; font-size: 14px;

  padding: 10px 24px; border-radius: 12px; width: fit-content;

  background: var(--color-pink); color: var(--color-navy);

  box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}

.hero-arrow {

  position: absolute; top: 50%; transform: translateY(-50%);

  width: 36px; height: 36px; border-radius: 999px;

  background: rgba(0,0,0,0.3); color: #fff; border: none;

  display: flex; align-items: center; justify-content: center; cursor: pointer;

  z-index: 2;

}

.hero-arrow:hover { background: rgba(0,0,0,0.5); }

.hero-arrow.prev { left: 12px; }

.hero-arrow.next { right: 12px; }

.hero-dots { position: absolute; bottom: 12px; right: 16px; display: flex; gap: 6px; z-index: 2; }

.hero-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.45); border: none; cursor: pointer; transition: width 0.3s; }

.hero-dot.active { width: 20px; background: var(--color-pink); }



.hero-side-card {

  position: relative; border-radius: 16px; overflow: hidden;

  background: rgba(0,40,76,0.9);

  padding: 28px; display: flex; flex-direction: column; justify-content: space-between;

  box-shadow: 0 20px 40px rgba(0,0,0,0.25);

}

.hero-side-brand { display: flex; align-items: center; gap: 8px; }

.hero-side-brand img { width: 32px; height: 32px; object-fit: contain; }

.hero-side-brand span { font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--color-mint); }

.hero-side-title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 22px; text-transform: uppercase; line-height: 1.25; margin-top: auto; }

.hero-side-text { color: rgba(202,252,225,0.65); font-size: 14px; line-height: 1.6; margin: 12px 0; }

.hero-side-cta {

  font-family: var(--font-display); font-weight: 700; font-size: 14px;

  padding: 10px 20px; border-radius: 12px; width: fit-content;

  background: var(--color-pink); color: var(--color-navy);

}



/* ── Section divider ───────────────────────────────────────────── */

.section-divider { position: relative; display: flex; align-items: center; justify-content: center; margin: 48px 0; }

.section-divider::before {

  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);

  height: 5px; border-radius: 999px; background: var(--color-pink);

}

.section-divider-label {

  position: relative;

  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;

  font-size: 16px; padding: 12px 40px; border-radius: 16px;

  background: var(--color-pink); color: var(--color-navy);

  border: 2px solid #e080a0;

  box-shadow: 0 10px 20px rgba(0,0,0,0.15);

  display: flex; align-items: center; gap: 12px;

}



/* ── Product grid & cards ──────────────────────────────────────── */

.product-section { max-width: 1280px; margin: 0 auto; padding: 0 24px 48px; }

.product-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

}

@media (min-width: 992px) {

  .product-grid { grid-template-columns: repeat(4, 1fr); }

}

.product-card {

  background: #fff;

  border: 2px solid #000;

  border-radius: 16px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.25s, box-shadow 0.25s;

}

.product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 24px rgba(0,0,0,0.12); }

.product-card-media { position: relative; }

.product-card-media img { width: 100%; height: 192px; object-fit: cover; display: block; }

.product-badge {

  position: absolute; top: 12px; left: 12px;

  font-family: var(--font-display); font-weight: 700; font-size: 11px;

  text-transform: uppercase; letter-spacing: 0.05em;

  padding: 4px 12px; border-radius: 999px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  color: var(--color-navy);

}

.product-badge.bestseller { background: var(--color-pink); }

.product-badge.new { background: var(--color-mint); }

.product-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

.product-card-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--color-navy); line-height: 1.4; }

.product-card-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

.product-card-price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--color-purple); }

.stock-pill { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: 999px; }

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

.stock-pill.instock { background: rgba(22,163,74,0.1); color: #16a34a; }

.stock-pill.instock .dot { background: #22c55e; }

.stock-pill.outofstock { background: rgba(220,38,38,0.1); color: #dc2626; }

.stock-pill.outofstock .dot { background: #ef4444; }

.stock-pill.onbackorder { background: rgba(217,119,6,0.1); color: #d97706; }

.stock-pill.onbackorder .dot { background: #f59e0b; }



.product-card .button,

.product-card a.add_to_cart_button,

.product-card a.button {

  width: 100%;

  font-family: var(--font-display); font-weight: 700; font-size: 14px;

  padding: 10px 0; border-radius: 12px;

  background: var(--color-navy) !important; color: var(--color-mint) !important;

  border: none; display: flex; align-items: center; justify-content: center; gap: 8px;

  text-align: center;

}

.product-card .button:hover { opacity: 0.9; }



/* ── Why us ────────────────────────────────────────────────────── */

.why-us-section { background: var(--color-mint); padding: 64px 24px; }

.why-us-inner { max-width: 960px; margin: 0 auto; }

.why-us-title { font-family: var(--font-display); font-weight: 800; font-size: 28px; text-transform: uppercase; text-align: center; color: var(--color-navy); margin-bottom: 40px; letter-spacing: 0.03em; }

.why-us-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

@media (min-width: 768px) { .why-us-grid { grid-template-columns: repeat(3, 1fr); } }

.why-us-card {

  background: #fff; border: 2px solid var(--color-navy); border-radius: 16px;

  padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;

}

.why-us-card .icon { font-size: 36px; }

.why-us-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-navy); }

.why-us-card p { font-size: 14px; line-height: 1.6; color: var(--color-navy-light); }



/* ── Newsletter ────────────────────────────────────────────────── */

.newsletter-section { background: var(--color-purple); padding: 56px 24px; text-align: center; }

.newsletter-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.newsletter-inner img { width: 48px; height: 48px; object-fit: contain; }

.newsletter-inner h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; color: #fff; }

.newsletter-inner p { font-size: 14px; color: rgba(255,255,255,0.6); }

.newsletter-form { display: flex; width: 100%; gap: 8px; }

.newsletter-form input {

  flex: 1; border-radius: 12px; padding: 10px 16px; font-size: 14px;

  background: rgba(255,255,255,0.1); color: #fff; border: 1.5px solid rgba(255,255,255,0.2);

}

.newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }

.newsletter-form button {

  font-family: var(--font-display); font-weight: 700; font-size: 14px; white-space: nowrap;

  padding: 10px 20px; border-radius: 12px; background: var(--color-pink); color: var(--color-navy); border: none; cursor: pointer;

}



/* ── Footer ────────────────────────────────────────────────────── */

.site-footer { background: var(--color-navy); padding: 48px 24px 24px; }

.footer-grid {

  max-width: 1280px; margin: 0 auto;

  display: grid; grid-template-columns: 1fr; gap: 32px;

  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1);

}

@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }



/* Logo v pätičke */

.footer-grid img { 

  height: 110px !important; 

  max-width: 280px !important;

  object-fit: contain; 

  object-position: left; 

  margin-bottom: 16px; 

}



/* Globálne nastavenie textov a odkazov v pätičke */

.site-footer,

.site-footer a,

.site-footer p,

.site-footer ul li,

.site-footer ul li a,

.footer-social a,

.footer-bottom,

.footer-bottom span {

  color: #73b2ec !important;

  text-decoration: none !important;

  font-size: 16px;

  line-height: 1.6;

}



/* Nadpisy stĺpcov */

.footer-col h4 { 

  font-family: var(--font-display); 

  font-weight: 800; 

  font-size: 24px !important; 

  text-transform: uppercase; 

  letter-spacing: 0.05em; 

  color: #73b2ec !important; 

  margin-bottom: 18px; 

}



.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

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

.footer-social a { display: flex; align-items: center; gap: 12px; }

.footer-social .icon-circle { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }



.footer-bottom {

  max-width: 1280px; margin: 0 auto; padding-top: 20px;

  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;

  font-family: var(--font-display);

}



.site-footer a:hover {

  opacity: 0.8;

  text-decoration: none !important;

}



/* ── Mobile & SVG fixes ────────────────────────────────────────── */

.site-header-top svg,

.site-nav svg,

.hero-slider svg {

  fill: none !important;

}



/* Správne vyplnenie ikoniek v sociálnych sieťach */

.footer-social svg {

  fill: #ffffff !important;

}

.footer-social svg path {

  fill: #ffffff !important;

}



.site-search svg circle,

.site-search svg line {

  stroke: #00284C !important;

}

.header-icons svg {

  stroke: currentColor !important;

  fill: none !important;

}

.hero-arrow {

  color: #ffffff;

}

.hero-arrow svg {

  stroke: currentColor !important;

  fill: none !important;

}

.social-pill svg path {

  fill: #ffffff !important;

}

.mobile-nav-toggle svg {

  stroke: currentColor !important;

  fill: none !important;

}



@media (max-width: 767px) {

  .hero-grid { grid-template-columns: 1fr; height: auto; }

  .hero-slider { height: 340px; }

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

  .main-nav-links {

    display: none;

    position: absolute; left: 0; right: 0; top: 100%;

    flex-direction: column; align-items: flex-start; gap: 4px;

    background: rgba(202,252,225,0.97); padding: 16px 24px; box-shadow: 0 12px 24px rgba(0,0,0,0.1); z-index: 40;

  }

  .main-nav-links.open { display: flex; }

  .site-nav-inner { position: relative; height: auto; padding: 10px 0; flex-wrap: wrap; }

  .social-pill span { display: none; }

}



/* ══════════════════════════════════════════════════════════

   ROUND 2 FIXES — paste this at the very end of style.css

   ══════════════════════════════════════════════════════════ */

 

/* 1) Slow down the marquee so text is readable */

.marquee-track {

  animation-duration: 48s;

}

 

/* 2) Search icon — pure CSS magnifying glass (no SVG, can't be broken by theme conflicts) */

.icon-search {

  position: relative;

  display: inline-block;

  width: 12px;

  height: 12px;

  border: 2px solid #00284C;

  border-radius: 50%;

  box-sizing: border-box;

}

.icon-search::after {

  content: "";

  position: absolute;

  width: 2px;

  height: 7px;

  background: #00284C;

  bottom: -7px;

  right: -1px;

  transform: rotate(45deg);

  border-radius: 1px;

}

 

/* 3) Hero slider arrows — text glyphs, always visible */

.hero-arrow-glyph {

  font-size: 16px;

  line-height: 1;

  font-weight: 700;

  color: #ffffff;

  display: inline-block;

}

 

/* 4) Make the small logo in the "Objavte novinky" side card bigger / clearer */

.hero-side-brand img {

  width: 44px;

  height: 44px;

  object-fit: contain;

}



/* ══════════════════════════════════════════════════════════

   ROUND 3 FIXES — paste this at the very end of style.css

   (after the ROUND 2 block you already added)

   ══════════════════════════════════════════════════════════ */

 

/* 1) Proper magnifying glass icon — real SVG image, not a CSS shape.

      This overrides/cancels the old "pen-look" icon from Round 2. */

.icon-search {

  width: 16px;

  height: 16px;

  border: none;

  border-radius: 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300284C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}

.icon-search::after {

  content: none;

}

 

/* 2) Stop the slide title / text from overlapping the prev/next arrows */

.hero-slide-content {

  padding-left: 60px;

  padding-right: 60px;

}

 

/* 3) Product cards — full image visible (no cropping), clearer colors, bigger text */

.product-card-media img {

  width: 100%;

  height: 210px;

  object-fit: contain;

  background: #f4f6f8;

  padding: 14px;

  box-sizing: border-box;

}

.product-card-title {

  font-size: 16px;

}

.product-card-price {

  font-size: 24px;

}

.product-card-body {

  padding: 18px;

  gap: 14px;

}

.stock-pill {

  font-size: 12px;

  padding: 5px 12px;

}

.product-badge {

  font-size: 12px;

  padding: 5px 14px;

}

.product-card .button,

.product-card a.add_to_cart_button,

.product-card a.button {

  font-size: 15px;

  padding: 12px 0;

}