/*
Theme Name: Šťastíčko
Theme URI: https://stasticko.sk
Author: PhoneTech s.r.o.
Description: Bloková téma značky Šťastíčko — magnetky, kľúčenky a kryty s vlastnou fotkou. Pekná, farebná, jednoduchá a plná šťastia. Farby, písmo a rozostupy sú v theme.json; tu je len to, čo bloky nevedia.
Version: 0.3.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stasticko
*/

/* Písmo Nunito je zabalené v téme (assets/fonts, licencia OFL) — nič sa
   nesťahuje od Googlu, návštevník neposiela IP adresu tretej strane. */

/* ── hero: slnečný prechod + konfety z čistého CSS ─────────────────── */
.st-hero {
  position: relative; overflow: hidden;
  background: var(--wp--preset--gradient--slnko);
  border-radius: var(--wp--custom--radius--large);
}
.st-hero::before {
  /* jeden pseudo-prvok, veľa bodiek: každá dvojica v box-shadow je jedna konfeta */
  content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  pointer-events: none;
  background: var(--wp--preset--color--accent);
  box-shadow:
    4vw   3rem  0 2px var(--wp--preset--color--accent),
    12vw  1.5rem 0 0   var(--wp--preset--color--mint),
    22vw  4rem  0 3px var(--wp--preset--color--pink),
    36vw  1rem  0 1px var(--wp--preset--color--secondary),
    58vw  2.5rem 0 2px var(--wp--preset--color--accent),
    71vw  5rem  0 0   var(--wp--preset--color--primary),
    84vw  1.2rem 0 3px var(--wp--preset--color--mint),
    93vw  4.5rem 0 1px var(--wp--preset--color--pink);
}
.st-hero h1 { letter-spacing: -0.02em; }
.st-hero .st-podtitul { max-width: 34ch; }
@media (max-width: 600px) { .st-hero::before { display: none; } .st-hero { border-radius: var(--wp--custom--radius--medium); } }

/* ── karty: biele, zaoblené, každý produkt má svoj tón ───────────────── */
.st-karta {
  background: #fff;
  border-radius: var(--wp--custom--radius--large);
  box-shadow: 0 1px 2px rgba(43, 35, 64, .05), 0 14px 34px -20px rgba(43, 35, 64, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.st-karta:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(43, 35, 64, .05), 0 22px 44px -20px rgba(43, 35, 64, .35); }
.st-karta--mint { background: var(--wp--preset--color--mint-svetla); }
.st-karta--sky  { background: var(--wp--preset--color--sky-svetla); }
.st-karta--pink { background: var(--wp--preset--color--pink-svetla); }
.st-karta--sun  { background: var(--wp--preset--color--sand); }

.st-krok-cislo {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 999px;
  font-weight: 900; font-size: 1.1rem; color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--accent);
}
.st-karta--sky  .st-krok-cislo { background: var(--wp--preset--color--secondary); color: #fff; }
.st-karta--pink .st-krok-cislo { background: var(--wp--preset--color--pink); color: #fff; }
.st-karta--mint .st-krok-cislo { background: var(--wp--preset--color--mint); color: #fff; }

/* ── pás dôvery: farebná bodka pred každým bodom ─────────────────────── */
.st-dovera { border-top: 1px solid var(--wp--preset--color--linka); border-bottom: 1px solid var(--wp--preset--color--linka); }
.st-dovera p { margin: 0; padding-left: 1.4rem; position: relative; }
.st-dovera p::before { content: ""; position: absolute; left: 0; top: .45em; width: .8rem; height: .8rem; border-radius: 50%; background: var(--wp--preset--color--accent); }
.st-dovera .st-dot-sky::before  { background: var(--wp--preset--color--secondary); }
.st-dovera .st-dot-mint::before { background: var(--wp--preset--color--mint); }
.st-dovera .st-dot-pink::before { background: var(--wp--preset--color--pink); }

/* ── štítok „Vyrobené na Slovensku“ — malý, slnečný ─────────────────── */
.st-stitok {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .8em; border-radius: 999px;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small); font-weight: 800;
}

/* ── obrysové tlačidlo v koralovej ───────────────────────────────────── */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-tmava); background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: #fff; }

/* ── WooCommerce: tlačidlá a ceny v tóne značky ──────────────────────── */
.wc-block-components-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.woocommerce ul.products li.product .button,
.single-product .single_add_to_cart_button { border-radius: 999px; font-weight: 800; }
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price { color: var(--wp--preset--color--contrast); font-weight: 800; }
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img { border-radius: var(--wp--custom--radius--medium); }

/* Personalizovaný tovar sa objednáva cez konfigurátor, nie cez formulár produktu. */
.single-product.st-potlac-produkt form.cart { display: none; }

/* ── reliéfna UV tlač: ukážka z čistého CSS (vrstvy s tieňom = vystúpený motív) ── */
.st-relief { background: var(--wp--preset--color--sand); border-radius: var(--wp--custom--radius--large); }
.st-stitok--mint { background: var(--wp--preset--color--mint); color: #fff; }
.st-relief-demo { max-width: 320px; margin: 0 auto; text-align: center; }
.st-relief-demo__telo {
  background: #fff; border-radius: 22px; padding: 14px;
  box-shadow: 0 2px 4px rgba(43, 35, 64, .08), 0 24px 40px -22px rgba(43, 35, 64, .45);
  transform: perspective(900px) rotateX(18deg) rotateZ(-4deg);
}
.st-relief-demo__foto {
  position: relative; height: 210px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, var(--wp--preset--color--sky-svetla), var(--wp--preset--color--secondary) 55%, var(--wp--preset--color--mint) 100%);
}
.st-relief-demo__vrstva {
  position: absolute; border-radius: 50%;
  background: var(--wp--preset--color--accent);
  box-shadow: 0 1px 0 rgba(43, 35, 64, .10), 0 3px 0 rgba(43, 35, 64, .12), 0 8px 12px -4px rgba(43, 35, 64, .35), inset 0 -3px 0 rgba(43, 35, 64, .08);
}
.st-relief-demo__vrstva--1 { width: 150px; height: 150px; left: 22px; bottom: -40px; background: var(--wp--preset--color--pink); box-shadow: 0 1px 0 rgba(43,35,64,.10), 0 2px 0 rgba(43,35,64,.12), 0 6px 10px -4px rgba(43,35,64,.3); }
.st-relief-demo__vrstva--2 { width: 96px;  height: 96px;  left: 120px; bottom: 30px; background: var(--wp--preset--color--accent); }
.st-relief-demo__vrstva--3 { width: 46px;  height: 46px;  left: 150px; bottom: 96px; background: #fff; box-shadow: 0 2px 0 rgba(43,35,64,.12), 0 5px 0 rgba(43,35,64,.14), 0 12px 16px -6px rgba(43,35,64,.45); }
.st-relief-demo__popis { margin: 1rem 0 0; color: var(--wp--preset--color--mute); font-size: var(--wp--preset--font-size--small); }
@media (max-width: 600px) { .st-relief { border-radius: var(--wp--custom--radius--medium); } .st-relief-demo__telo { transform: none; } }

/* ── stránka produktu s konfigurátorom ────────────────────────────────── */
.st-produkt .wp-block-post-title { letter-spacing: -0.02em; }
.st-produkt .wc-block-components-product-price { font-weight: 800; }

/* ── drobnosti ───────────────────────────────────────────────────────── */
:where(.wp-site-blocks) a:where(:not(.wp-element-button)) { text-underline-offset: .18em; text-decoration-thickness: 2px; }
.st-mute { color: var(--wp--preset--color--mute); }