/* ===== E-shop Demo #3 — vlastný charakter (vínovo-zlatý štýl) ===== */
/* ===== Design tokens — Vintage Lux e-shop ===== */
/* ===== op3 NAMESPACE — všetko scoped pod .op3 ===== */

/* Tokens (len pre .op3 vetvu) */
.op3{
  --brand:#541C24;         /* vínovo-hnedá (lux) */
  --brand-2:#7E2C33;       /* tmavší odtieň brandu */
  --accent:#EEC16E;        /* zlatistý akcent */
  --bg:#F8F5F2;            /* jemný krémový podklad */
  --panel:#FFFFFF;         /* panely, karty */
  --fg:#2B2523;            /* text */
  --fg-soft:#7B6F6B;       /* sekundárny text */
  --muted:#B8ACA6;         /* neutrálne detaily */
  --brd:#E0D8D4;           /* jemná bordúra */

  --radius:16px;
  --shadow-sm: 0 3px 10px rgba(84,28,36,.08);
  --shadow:    0 12px 32px rgba(84,28,36,.18);

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --container:1120px;
}

/* Base */
.op3{background:var(--bg);color:var(--fg);font:16px/1.6 var(--font-sans)}
.op3 img{max-width:100%;display:block}
.op3 .op3-h2{font-size:28px;line-height:1.2;margin:0}
.op3 .op3-lead{color:var(--fg-soft)}
.op3 .op3-lead--light{color:#F3ECE6}
.op3 .op3-container,
.op3 .op3-shell,
.op3 .op3-nav__inner,
.op3 .op3-hero__inner,
.op3 .op3-strip__inner,
.op3 .op3-cats,
.op3 .op3-footer__inner{max-width:var(--container);margin:0 auto;padding:0 20px}
.op3 .op3-link{color:var(--brand);text-decoration:none;font-weight:800}
.op3 .op3-link:hover{text-decoration:underline}

/* Buttons */
.op3 .op3-btn{
  --_bg:var(--brand); --_fg:#fff; --_br:transparent;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:12px;border:1px solid var(--_br);
  background:var(--_bg);color:var(--_fg);text-decoration:none;font-weight:800;
  box-shadow:var(--shadow-sm);transition:transform .15s ease, box-shadow .15s ease;
}
.op3 .op3-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.op3 .op3-btn-ghost{--_bg:transparent;--_fg:var(--brand);--_br:var(--brand);box-shadow:none}
.op3 .op3-btn-ghost:hover{background:rgba(84,28,36,.08)}

/* Top strip */
.op3 .op3-strip{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.op3 .op3-strip__inner{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0;font-weight:800}

/* Nav */
.op3 .op3-nav{position:sticky;top:0;z-index:45;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--brd);box-shadow:var(--shadow-sm)}
.op3 .op3-nav__inner{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:10px 0}
.op3 .op3-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.op3 .op3-brand__logo{
  width:36px;height:36px;display:grid;place-items:center;border-radius:10px;
  background:radial-gradient(120% 120% at 30% 20%,#fff,#FBEBD6 35%, var(--accent) 36%, var(--brand) 120%);
  color:#2B2523;font-weight:900;box-shadow:var(--shadow-sm)
}
.op3 .op3-search{display:flex;align-items:center;gap:8px;justify-content:center}
.op3 .op3-search input{
  width:100%;max-width:460px;background:#fff;border:1px solid var(--brd);border-radius:12px;padding:10px 12px;outline:none
}
.op3 .op3-nav__cta{display:flex;align-items:center;gap:10px}
.op3 .op3-cart{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brd);background:transparent;border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--fg);font-weight:800}
.op3 .op3-cart__badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:999px;background:var(--accent);color:#3a2600;display:grid;place-items:center;font-size:.8rem;border:1px solid rgba(0,0,0,.06)}

/* Hero */
.op3 .op3-hero{background:linear-gradient(180deg,#FFF7F2,#FFFFFF);border-bottom:1px solid var(--brd)}
.op3 .op3-hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:32px 0}
.op3 .op3-hero__copy h1{font-family:var(--font-serif);font-size:clamp(32px,4.6vw,52px);line-height:1.12;margin:0 0 8px}
.op3 .op3-hero__copy h1 span{color:var(--brand)}
.op3 .op3-hero__cta{display:flex;gap:10px;margin-top:12px}
.op3 .op3-hero__tags{display:flex;gap:10px;list-style:none;padding:0;margin:14px 0 0;color:var(--fg-soft)}
.op3 .op3-hero__tags li{border:1px solid var(--brd);padding:.45rem .7rem;border-radius:999px;background:var(--panel)}
.op3 .op3-hero__art{position:relative;min-height:320px}
.op3 .op3-blob{
  position:absolute;inset:0;border-radius:24px;
  background:conic-gradient(from 180deg at 70% 30%,#fff,#FBEBD6 35%,#EEC16E 36%,#fff);
  box-shadow:var(--shadow);
}

/* Category chips */
.op3 .op3-cats{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 18px}
.op3 .op3-cat{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #EEDDC4;border-radius:999px;background:#FFF6EB;text-decoration:none;color:#4A3126;font-weight:800}
.op3 .op3-cat:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);transition:.15s ease}

/* Layout */
.op3 .op3-shell{padding:24px 0}
.op3 .op3-sec{padding:8px 0 24px}
.op3 .op3-sec__head{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}

/* Grid */
.op3 .op3-grid{display:grid;grid-template-columns:260px 1fr;gap:18px}
@media (max-width:980px){.op3 .op3-grid{grid-template-columns:1fr}}

/* Filters */
.op3 .op3-filters{position:sticky;top:72px;background:var(--panel);border:1px solid var(--brd);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm);height:max-content}
.op3 .op3-filters__title{font-weight:900;margin:0 0 8px}
.op3 .op3-f-group{border-top:1px dashed var(--brd);padding-top:10px;margin-top:10px}
.op3 .op3-check{display:flex;align-items:center;gap:10px;margin:6px 0}
.op3 .op3-price{display:flex;gap:10px}
.op3 .op3-price input{width:100%;background:#fff;border:1px solid var(--brd);border-radius:10px;padding:8px 10px}

/* Product grid */
.op3 .op3-products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.op3 .op3-products{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.op3 .op3-products{grid-template-columns:1fr}}

.op3 .op3-card{background:var(--panel);border:1px solid var(--brd);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease}
.op3 .op3-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.op3 .op3-thumb{position:relative;aspect-ratio:4/3;background:#F6EFE8;clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
.op3 .op3-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);filter:saturate(.95);transition:transform .28s ease, filter .28s ease}
.op3 .op3-card:hover .op3-thumb img{transform:scale(1.06);filter:saturate(1)}
.op3 .op3-badges{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.op3 .op3-badge{font-size:.72rem;padding:.3rem .5rem;border-radius:8px;background:#541C24;color:#fff;border:1px solid rgba(255,255,255,.08)}
.op3 .op3-badge--accent{background:var(--accent);color:#3a2600;border-color:rgba(0,0,0,.06)}
.op3 .op3-meta{padding:12px 14px}
.op3 .op3-title{margin:0 0 2px;font-weight:900}
.op3 .op3-desc{color:var(--fg-soft);font-size:.95rem;margin:0 0 8px}
.op3 .op3-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.op3 .op3-price-tag{font-weight:900;font-size:1.05rem;color:var(--brand)}
.op3 .op3-old{color:#A28C84;text-decoration:line-through;margin-left:6px;font-weight:700}
.op3 .op3-actions{display:flex;gap:8px}
.op3 .op3-qty{width:64px;text-align:center;border:1px solid var(--brd);border-radius:10px;padding:8px;background:#fff}

/* Newsletter */
.op3 .op3-news{
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;border-radius:18px;padding:18px;display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center
}
.op3 .op3-news__row{display:flex;gap:10px}
.op3 .op3-news input{width:100%;background:#fff;border:0;border-radius:12px;padding:12px 14px}
@media (max-width:800px){.op3 .op3-news{grid-template-columns:1fr}}

/* Footer */
.op3 .op3-footer{border-top:1px solid var(--brd);background:var(--bg);margin-top:28px}
.op3 .op3-footer__inner{display:grid;gap:10px;grid-template-columns:1fr auto auto;align-items:center;padding:14px 0}
.op3 .op3-footer__brand{display:flex;align-items:center;gap:8px}
.op3 .op3-footer__nav{display:flex;gap:.9rem}
.op3 .op3-footer__nav a{color:var(--fg-soft);text-decoration:none;font-weight:800}
.op3 .op3-footer__nav a:hover{color:var(--brand)}
.op3 .op3-copy{color:var(--fg-soft)}