/*
Theme Name:   keramicky
Theme URI:    https://keramicky.cz
Description:  Child šablona nad Storefront pro eshop keramicky. Minimalistický, moderní vzhled.
Author:       Silk Road Brand
Template:     storefront
Version:      0.3.3
Text Domain:  keramicky-child
*/

/* ───────────────────────── Základ ───────────────────────── */
:root {
  --km-ink: #1a1a1a;      /* text / tlačítka */
  --km-muted: #7a7a7a;    /* sekundární text, ceny */
  --km-line: #ececec;     /* jemné linky */
  --km-bg: #ffffff;
}

body {
  color: var(--km-ink);
  background: var(--km-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em;
}

a { color: var(--km-ink); }

/* ───────────────────────── Hlavička ───────────────────────── */
.site-header {
  background: var(--km-bg);
  border-bottom: 1px solid var(--km-line);
  padding-top: 1.6em;
  padding-bottom: 1.6em;
}

/* Logo místo názvu webu */
.site-header .custom-logo,
.site-branding .custom-logo {
  max-height: 72px;
  width: auto;
}
.site-header .site-branding {
  margin-bottom: 0;
}

/* Hlavní menu — vzdušné, bez ozdob */
.main-navigation ul li a {
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: .03em;
}

/* Řádek 1 hlavičky: logo vlevo, účet vpravo (zarovnané k okraji obsahu) */
.site-header > .col-full {
  position: relative;
}

/* Účet vpravo nahoře — ikona panáčka místo textu.
   Absolutně k pravému okraji obsahu; right = padding .col-full (Storefront). */
.secondary-navigation {
  position: absolute;
  top: 2.2em;
  right: 2.617924em;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.secondary-navigation .menu-ucet-container,
.secondary-navigation ul,
.secondary-navigation ul li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.secondary-navigation a {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0;                 /* skryje text "účet" */
  line-height: 0;
  color: transparent;
  background: url("assets/user.svg") no-repeat center;
  background-size: contain;
}

/* ───────────────────────── Obsah na celou šířku ───────────────────────── */
#primary,
.woocommerce #primary,
.storefront-full-width-content #primary {
  width: 100%;
  float: none;
  margin: 0;
}
#secondary {
  display: none;
}

/* Drobečky a šum pryč (minimalismus) */
.woocommerce-breadcrumb {
  display: none;
}
.storefront-credit {
  display: none;
}

/* ───────────────────────── Katalog produktů ───────────────────────── */
.site-content {
  padding-top: 2.5em;
  padding-bottom: 3em;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  text-align: center;
  margin-bottom: 3em;
}

.woocommerce ul.products li.product a img {
  margin-bottom: 1em;
  border-radius: 2px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 500;
  padding: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--km-muted);
  font-weight: 400;
}

.woocommerce ul.products li.product .price del {
  opacity: .5;
}

/* Třídění a počítadlo výsledků úplně pryč */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
  display: none;
}

/* ───────────────────────── Tlačítka: ploché, tmavé ───────────────────────── */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--km-ink);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: .02em;
  text-shadow: none;
  box-shadow: none;
  padding: .7em 1.3em;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: #3a3a3a;
  color: #fff;
}

/* ───────────────────────── Patička ───────────────────────── */
.site-footer {
  background: var(--km-bg);
  border-top: 1px solid var(--km-line);
  color: var(--km-muted);
  padding-top: 2.5em;
  padding-bottom: 2.5em;
}

.km-footer {
  text-align: center;
}

/* Instagram – minimalistická ikona (mask umožní změnu barvy na hover) */
.km-social {
  margin: 0 0 1.2em;
}
.km-social a {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: var(--km-muted);
  -webkit-mask: url("assets/instagram.svg") no-repeat center / contain;
  mask: url("assets/instagram.svg") no-repeat center / contain;
  transition: background-color .15s ease;
}
.km-social a:hover {
  background-color: var(--km-ink);
}

.km-footer-menu {
  list-style: none;
  margin: 0 0 .8em;
  padding: 0;
  display: flex;
  gap: 1.8em;
  justify-content: center;
  flex-wrap: wrap;
}

/* :not(.button):not(.components-button) — přebíjí Storefront .site-footer a (0,0,3,1) */
.site-footer .km-footer-menu a:not(.button):not(.components-button) {
  color: var(--km-muted);
  font-size: .9rem;
  text-decoration: none;
}
.site-footer .km-footer-menu a:not(.button):not(.components-button):hover {
  color: var(--km-ink);
}

.km-copy {
  margin: 0;
  font-size: .8rem;
  color: var(--km-muted);
}

/* „powered by silkroad brand" — minimalisticky, stejně jako na dalších webech */
.km-powered {
  margin: .6em 0 0;
}
.site-footer .km-powered a:not(.button):not(.components-button),
.site-footer .km-powered a:not(.button):not(.components-button):hover,
.site-footer .km-powered a:not(.button):not(.components-button):focus {
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--km-muted);
  text-decoration: none;
}

/* ───────────────────────── Kontaktní formulář ───────────────────────── */
.km-kontakt {
  max-width: 560px;
}
.km-kontakt p {
  margin: 0 0 1.2em;
}
.km-kontakt label {
  display: block;
  margin-bottom: .4em;
  font-size: .9rem;
  color: var(--km-muted);
}
.km-kontakt input,
.km-kontakt textarea {
  width: 100%;
  padding: .7em .9em;
  border: 1px solid var(--km-line);
  border-radius: 2px;
  font: inherit;
  background: #fff;
}
.km-kontakt input:focus,
.km-kontakt textarea:focus {
  outline: none;
  border-color: var(--km-ink);
}
.km-hp {
  position: absolute !important;
  left: -9999px;
}
.km-form-ok,
.km-form-err {
  padding: 1em 1.2em;
  border-radius: 2px;
}
.km-form-ok {
  background: #f1f5ee;
  border: 1px solid #cfe0c2;
}
.km-form-err {
  background: #fbeeee;
  border: 1px solid #e2c2c2;
}