/* css/styles.css — NS Candles (mobile-first, polished) */
:root{
  --bg:#f6f1ea;
  --card:#fff;
  --text:#1a1a1a;
  --muted:#6b6b6b;
  --gold:#c5a572;
  --border:#e6ddd3;

  --container:1100px;
  --gap:16px;
  --radius:16px;
}

/* -------- Base -------- */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans","Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:0 auto; padding:12px}

/* -------- Header / Nav -------- */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#f6f1ea; /* pevné pozadí pro mobilní webview (FB/IG) */
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding-top:env(safe-area-inset-top); /* iPhone noč */
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.brand img{height:32px; width:auto; opacity:.95}

/* Scrollovatelná „pills“ navigace */
.main-nav{
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:4px; scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{
  display:inline-block;
  padding:10px 14px; border-radius:999px;
  text-decoration:none; font-weight:600; color:var(--text);
  border:1px solid transparent; background:transparent; white-space:nowrap; font-size:15px;
}
.main-nav a:hover{background:var(--card); border-color:var(--border)}
.main-nav a.active{
  background:#fff; border-color:var(--border);
  box-shadow:0 4px 10px rgba(0,0,0,.04);
}

/* -------- Hero -------- */
.hero{
  display:grid; gap:18px; align-items:center; margin-top:16px;
  grid-template-columns:1fr; /* mobile first */
}
.hero-card{
  background:var(--card); padding:22px; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.hero h1{font-family:"Playfair Display",serif; font-size:32px; margin:0 0 8px}
@media (max-width:360px){ .hero h1{font-size:28px} }
.hero p{color:var(--muted); margin:0 0 16px}
.hero img{border-radius:12px}

/* -------- Buttons & links -------- */
.btn,.cta{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  transition:transform .18s ease, filter .18s ease;
  text-align:center;
}
.btn:hover,.cta:hover{transform:translateY(-1px)}
.btn-primary,.cta{
  background:linear-gradient(180deg,#d8c29a,var(--gold));
  border-color:#b89b66; color:#fff;
}
.btn-block{display:block; width:100%}

/* -------- Grid of products -------- */
.grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); /* 2 sloupce už na menších telefonech */
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.08)}
.card img{width:100%; aspect-ratio:4/3; object-fit:cover; border-bottom:1px solid var(--border)}
.card .p{padding:14px}
.card h3{margin:0 0 8px; font-size:16px; font-weight:700}
.price{font-weight:700; color:#3b3b3b}
.muted{color:var(--muted)}

/* -------- Forms -------- */
.input, textarea{
  width:100%; padding:14px 16px; border-radius:12px; min-height:44px;
  border:1px solid var(--border); background:#fff; font-size:16px;
}
.input:focus, textarea:focus{
  outline:none; box-shadow:0 0 0 4px rgba(197,165,114,.15); border-color:#b89b66;
}

/* -------- Tables -------- */
.table-wrap{width:100%; overflow-x:auto} /* mobile scroll */
.table{width:100%; border-collapse:collapse}
.table th,.table td{
  padding:12px; border-bottom:1px solid var(--border); vertical-align:top; text-align:left;
}
.table th{font-weight:600; white-space:nowrap}
.text-right{text-align:right}
.nowrap{white-space:nowrap}

/* -------- Detail produktu -------- */
.product-gallery{display:grid; grid-template-columns:1fr; gap:14px}
.product-layout{display:grid; gap:24px}
.qty{display:flex; gap:8px; align-items:center}
.qty input{max-width:120px}

/* -------- Košík -------- */
.cart-summary{position:sticky; top:84px}

/* -------- Admin helpers -------- */
.admin-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.admin-grid{display:grid; grid-template-columns:1fr; gap:18px; align-items:start}
.badge{
  display:inline-block; padding:4px 10px; border:1px solid var(--border);
  border-radius:999px; background:#f4efe6; font-size:12px
}

/* -------- Footer -------- */
.site-footer{
  background:var(--bg);
  border-top:1px solid var(--border);
  margin-top:40px;
  color:#6b6b6b;
}
.site-footer strong{color:#b89c6d; font-weight:600}

/* -------- Typography -------- */
h1,h2,h3{letter-spacing:.2px}
h1{font-family:"Playfair Display",serif; font-size:36px; margin:0 0 10px}
h2{font-size:28px; margin:0 0 14px}
h3{font-size:20px; margin:0 0 10px}
.section{margin:30px 0}

/* -------- Breakpoints -------- */

/* ≥ 600px — trochu větší karty/paddingy */
@media (min-width:600px){
  .container{padding:var(--gap)}
  .hero h1{font-size:40px}
  .card img{aspect-ratio:4/3}
  .product-layout{grid-template-columns:1.1fr 1fr}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
}

/* ≥ 800px — hero vedle sebe, admin layout 2 sloupce */
@media (min-width:800px){
  .hero{grid-template-columns:1.2fr 1fr}
  .admin-grid{grid-template-columns:1fr 1.6fr}
  .site-header{backdrop-filter:none} /* šetří výkon i tak */
}

/* ≥ 1100px — lehké oddechy na desktopu */
@media (min-width:1100px){
  .container{padding:20px}
  .hero h1{font-size:42px}
  .brand img{height:40px}
}

/* --- Clickable product card (detail po kliku kdekoliv) --- */
.product-card{
  cursor: pointer;                      /* ukaž, že je klikací */
  border-radius: var(--radius);
}
.product-card:focus,
.product-card:focus-visible{
  outline: 2px solid var(--gold);       /* viditelný focus pro klávesnici */
  outline-offset: 2px;
}

/* přátelštější hover (naváže na .card:hover) */
.product-card:hover{
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

/* jistota: klik uvnitř formuláře se má chovat normálně (košík) */
.product-card form,
.product-card button,
.product-card input,
.product-card select,
.product-card textarea,
.product-card a{
  cursor: auto;                          /* ať to na ovládacích prvcích není „ruka“ */
}