/*
Theme Name: Okvir
Theme URI: https://okvir.me
Author: Okvir
Description: Premium minimalistička tema za prodaju canvas slika. Custom-built, bez page builder-a.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: okvir
*/

/* ===== Dizajn tokeni (Faza 0) ===== */
:root {
  --c-bg: #FFFFFF;
  --c-bg-alt: #F7F5F1;
  --c-ink: #1C1B19;
  --c-ink-soft: #6E6A63;
  --c-accent: #A9873F;
  --c-line: #E8E5DF;
  --c-ok: #3E7C4F;
  --c-err: #B4443C;
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;
  --container: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ===== Fontovi (self-hosted WOFF2 — dodati fajlove u assets/fonts) ===== */
@font-face { font-family: "Fraunces"; src: url("assets/fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ===== Reset i osnove ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--c-ink); background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 5vw, 64px); }
h2 { font-size: clamp(26px, 3vw, 32px); }
h3 { font-size: 24px; }
.muted { color: var(--c-ink-soft); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s4); }
section { padding: var(--s24) 0; }
@media (max-width: 768px) { section { padding: var(--s16) 0; } }

/* ===== Dugmad ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--s8); font: 500 15px var(--font-body);
  letter-spacing: .02em; cursor: pointer; border: 1px solid var(--c-ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn-primary { background: var(--c-ink); color: #fff; }
.btn-primary:hover { background: var(--c-accent); border-color: var(--c-accent); }
.btn-outline { background: transparent; color: var(--c-ink); }
.btn-outline:hover { background: var(--c-ink); color: #fff; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font: 600 22px var(--font-head); letter-spacing: .12em; text-transform: uppercase; }
.logo span { color: var(--c-accent); }
.main-nav { display: flex; gap: var(--s6); }
.main-nav a { font-size: 14px; font-weight: 500; padding: var(--s2) 0; position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--c-ink); transition: width .25s var(--ease);
}
.main-nav a:hover::after { width: 100%; }
.header-actions { display: flex; gap: var(--s4); align-items: center; }
.cart-count {
  background: var(--c-ink); color: #fff; font-size: 11px; min-width: 18px; height: 18px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}

/* Mega-meni */
.mega { position: absolute; left: 0; right: 0; top: 64px; background: #fff; border-bottom: 1px solid var(--c-line);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .25s var(--ease); }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); padding: var(--s8) 0; }
.mega-card { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.mega-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.mega-card:hover img { transform: scale(1.03); }
.mega-card span {
  position: absolute; left: var(--s3); bottom: var(--s3); background: #fff;
  padding: var(--s1) var(--s3); font-size: 13px; font-weight: 500;
}

/* ===== Hero ===== */
.hero { position: relative; min-height: 82vh; display: flex; align-items: center; padding: 0; overflow: hidden; }
.hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 2; max-width: 560px; background: rgba(255,255,255,.92); padding: var(--s12); margin-left: var(--s4); }
.hero-content p { margin: var(--s4) 0 var(--s8); color: var(--c-ink-soft); font-size: 18px; }

/* ===== Mreže ===== */
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s4); }
.grid-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
@media (max-width: 1024px) { .grid-products, .grid-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .grid-products, .grid-cats, .grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* ===== Kartica proizvoda ===== */
.p-card { position: relative; }
.p-card .p-media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--c-bg-alt); }
.p-card .p-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.p-card .p-media img.alt { position: absolute; inset: 0; opacity: 0; }
.p-card:hover .p-media img.alt { opacity: 1; }
.p-card:hover .p-media img.main { transform: scale(1.03); }
.p-card h3 { font-size: 15px; font-family: var(--font-body); font-weight: 500; margin-top: var(--s3); }
.p-card .p-price { font-size: 14px; color: var(--c-ink-soft); margin-top: 2px; }

/* ===== Sekcijski naslovi ===== */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s8); }
.sec-head a { font-size: 14px; border-bottom: 1px solid var(--c-ink); }

/* ===== Boje — swatch filter ===== */
.color-swatches { display: flex; flex-wrap: wrap; gap: var(--s3); }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-line); cursor: pointer; transition: transform .2s var(--ease); }
.swatch:hover, .swatch.active { transform: scale(1.15); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-ink); }

/* ===== Katalog ===== */
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s12); align-items: start; }
.filters { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--s6); font-size: 14px; }
.filter-group h4 { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s3); }
.filter-group label { display: flex; gap: var(--s2); align-items: center; padding: 3px 0; cursor: pointer; color: var(--c-ink-soft); }
.filter-group label:hover { color: var(--c-ink); }
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: 0; z-index: 200; background: #fff; padding: var(--s8); overflow: auto; transform: translateX(-100%); transition: transform .3s var(--ease); }
  .filters.open { transform: none; }
}

/* ===== Stranica proizvoda ===== */
.product-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s12); align-items: start; }
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; } }
.dim-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s4) 0; }
.dim-btn { border: 1px solid var(--c-line); padding: var(--s3); text-align: center; cursor: pointer; font-size: 14px; transition: border-color .2s; }
.dim-btn:hover { border-color: var(--c-ink-soft); }
.dim-btn.active { border-color: var(--c-ink); font-weight: 600; }
.dim-btn small { display: block; color: var(--c-ink-soft); }
.custom-dims { border: 1px solid var(--c-line); padding: var(--s4); margin-top: var(--s2); }
.custom-dims .fields { display: flex; gap: var(--s3); margin-top: var(--s3); }
.custom-dims input { width: 100%; height: 44px; border: 1px solid var(--c-line); padding: 0 var(--s3); font: inherit; }
.price-display { font: 500 28px var(--font-head); margin: var(--s4) 0; }
.scale-hint { background: var(--c-bg-alt); padding: var(--s3) var(--s4); font-size: 13px; color: var(--c-ink-soft); }

/* ===== Kako funkcioniše ===== */
.steps { counter-reset: step; }
.steps .step { counter-increment: step; }
.steps .step::before {
  content: counter(step, decimal-leading-zero); font: 300 40px var(--font-head); color: var(--c-accent); display: block; margin-bottom: var(--s3);
}

/* ===== Footer ===== */
.site-footer { background: var(--c-bg-alt); padding: var(--s16) 0 var(--s8); margin-top: var(--s24); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s8); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s4); }
.footer-grid li { list-style: none; padding: 3px 0; color: var(--c-ink-soft); }
.footer-bottom { border-top: 1px solid var(--c-line); margin-top: var(--s12); padding-top: var(--s6); display: flex; justify-content: space-between; color: var(--c-ink-soft); font-size: 13px; }

/* ===== Mobilna donja traka ===== */
.mobile-bar { display: none; }
@media (max-width: 768px) {
  .main-nav { display: none; }
  .mobile-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    background: #fff; border-top: 1px solid var(--c-line); height: 60px;
  }
  .mobile-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; gap: 2px; }
  body { padding-bottom: 60px; }
}

/* ===== Scroll-reveal animacije ===== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== Instant pretraga ===== */
.search-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(255,255,255,.98); display: none; padding: var(--s16) var(--s4); }
.search-overlay.open { display: block; }
.search-overlay input { width: 100%; max-width: 720px; margin: 0 auto; display: block; font: 400 28px var(--font-head); border: 0; border-bottom: 2px solid var(--c-ink); padding: var(--s3) 0; outline: none; }
.search-results { max-width: 960px; margin: var(--s8) auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
@media (max-width: 768px) { .search-results { grid-template-columns: repeat(2, 1fr); } }