/* ========================================================================
   Rámovanie Obrazov Rám — pop-art comic styling
   ======================================================================== */

:root{
  --c-burgundy: #6e1f33;
  --c-burgundy-dark: #45101f;
  --c-rose: #e08aa0;
  --c-rose-light: #f6dbe3;
  --c-champagne: #f3e6cf;
  --c-champagne-dark: #e3cc9c;
  --c-ink: #2a1016;
  --c-paper: #fdf7ee;
  --c-gold: #b8884f;
  --c-line: #2a1016;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --radius: 10px;
  --shadow-ink: 6px 6px 0 var(--c-line);
  --shadow-ink-sm: 3px 3px 0 var(--c-line);
  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ overflow-x: clip; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family: var(--font-display); line-height:1.1; margin:0 0 .5em; }
p{ margin:0 0 1em; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; }
button{ font-family: inherit; }

.container{
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

:focus-visible{
  outline: 3px solid var(--c-burgundy);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* honeypot field */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  opacity:0;
  height:0;
  width:0;
  overflow:hidden;
}

/* ---------- halftone / texture helpers ---------- */
.halftone{
  background-image: radial-gradient(var(--c-line) 1px, transparent 1.4px);
  background-size: 10px 10px;
  opacity:.14;
  position:absolute;
  inset:0;
  pointer-events:none;
}

.grain-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  mix-blend-mode: overlay;
  opacity:.5;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  justify-content:center;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: 2.5px solid var(--c-line);
  font-weight:700;
  font-size: .95rem;
  letter-spacing:.01em;
  cursor:pointer;
  background: var(--c-champagne);
  color: var(--c-ink);
  overflow:hidden;
  isolation:isolate;
  min-height:44px;
  transition: color .25s ease, transform .15s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  left:-100%;
  background: var(--c-ink);
  z-index:-1;
  transition: left .3s ease;
}
.btn:hover::before, .btn:focus-visible::before{ left:0; }
.btn:hover, .btn:focus-visible{ color:var(--c-champagne); }
.btn:active{ transform: translateY(2px); }

.btn-primary{ background: var(--c-burgundy); color:var(--c-champagne); border-color: var(--c-line); }
.btn-primary::before{ background: var(--c-ink); }
.btn-primary:hover{ color:#fff; }

.btn-ghost{ background: transparent; }
.btn-dark{ background: var(--c-ink); color: var(--c-champagne); border-color: var(--c-champagne); }
.btn-dark::before{ background: var(--c-rose); }
.btn-dark:hover{ color: var(--c-ink); }

.btn-sm{ padding:.55em 1.1em; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---------- icon sprite usage ---------- */
.icon{ width:1.3em; height:1.3em; stroke:currentColor; fill:none; stroke-width:1.8; vertical-align:-.25em; }

/* ======================= HEADER ======================= */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: var(--c-paper);
  border-bottom: 3px solid var(--c-line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .7rem 0;
}
.brand{
  display:inline-flex;
  align-items:center;
  color: var(--c-ink);
}
.brand svg{ width: 176px; height: 36px; flex:none; }
.footer-brand .brand{ color: var(--c-champagne); }

.nav-primary{ display:flex; align-items:center; gap:1.6rem; }
.nav-primary a{
  position:relative;
  font-weight:600;
  font-size:.95rem;
  padding:.3em 0;
}
.nav-primary a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height:2px;
  width:100%;
  background: var(--c-burgundy);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.nav-primary a:hover::after, .nav-primary a.active::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:.9rem; }
.cart-link{
  display:flex;
  align-items:center;
  gap:.4em;
  font-weight:700;
  border:2px solid var(--c-line);
  border-radius:999px;
  padding:.45em .9em;
  min-height:44px;
}
.cart-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.5em;
  height:1.5em;
  border-radius:50%;
  background: var(--c-burgundy);
  color:#fff;
  font-size:.75rem;
  font-family: var(--font-mono);
}
.cart-count.bump{ animation: bump .35s ease; }
@keyframes bump{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }

.menu-toggle{
  display:none;
  width:44px; height:44px;
  border:2px solid var(--c-line);
  border-radius:8px;
  background: var(--c-champagne);
  position:relative;
  cursor:pointer;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:"";
  position:absolute;
  left:10px; right:10px;
  height:2px;
  background: var(--c-ink);
  transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle span{ top:21px; }
.menu-toggle span::before{ top:-7px; }
.menu-toggle span::after{ top:7px; }
.menu-toggle[aria-expanded="true"] span{ background:transparent; }
.menu-toggle[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-primary{
    position:fixed;
    inset: 0 0 0 30%;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1.4rem;
    background: var(--c-champagne);
    border-left:3px solid var(--c-line);
    padding: 6rem 2rem 2rem;
    top:0;
    transform: translateX(100%);
    visibility:hidden;
    transition: transform .3s ease, visibility .3s ease;
    z-index:49;
  }
  .nav-primary.open{ transform: translateX(0); visibility:visible; }
  .nav-primary a{ font-size:1.1rem; }
  .menu-toggle{ display:block; }
}

@media (max-width: 480px){
  .brand svg{ width:140px; height:29px; }
  .header-actions{ gap:.5rem; }
  .cart-link{ padding:.4em .6em; gap:.3em; }
  .menu-toggle{ width:40px; height:40px; }
}

/* ======================= FOOTER ======================= */
.site-footer{
  background: var(--c-ink);
  color: var(--c-champagne);
  margin-top: 5rem;
  position:relative;
}
.footer-top{
  padding: 3.5rem 0 2rem;
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 2rem;
}
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
.footer-brand p{ color: #d8c3ba; max-width:26ch; margin-top:.8rem; }
.footer-col h3{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--c-rose); margin-bottom:1em; }
.footer-col ul{ display:flex; flex-direction:column; gap:.6em; }
.footer-col a{ color:#eadfd6; }
.footer-col a:hover{ color: var(--c-rose); text-decoration:underline; }
.newsletter-form{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.newsletter-form input{ flex:1; min-width:10rem; }
.footer-bottom{
  border-top:1px solid #4a2c33;
  padding: 1.2rem 0 2rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
  font-size:.8rem;
  color:#c7b2a9;
}
.footer-bottom a{ color:#eadfd6; }

/* ======================= FORM ELEMENTS ======================= */
.field{ margin-bottom: 1.2rem; display:flex; flex-direction:column; gap:.4em; }
.field label{ font-weight:700; font-size:.9rem; }
.field input, .field textarea, .field select{
  font: inherit;
  padding:.75em .9em;
  border-radius: 8px;
  border: 2px solid var(--c-line);
  background: #fff;
  accent-color: var(--c-burgundy);
  min-height:44px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field-error{ color:#9c1c2e; font-size:.82rem; min-height:1em; }
.form-note{ font-size:.82rem; color:#5b3a40; }
.form-success{
  background: var(--c-rose-light);
  border:2px solid var(--c-line);
  border-radius: var(--radius);
  padding:1rem 1.2rem;
  margin-top:1rem;
  font-weight:600;
}
.form-fail{
  background:#fdeceb;
  border:2px solid #9c1c2e;
  color:#6e1420;
  border-radius: var(--radius);
  padding:1rem 1.2rem;
  margin-top:1rem;
  font-weight:600;
}
fieldset{ border:2px solid var(--c-line); border-radius: var(--radius); padding:1rem 1.2rem; margin: 0 0 1.2rem; }
legend{ font-weight:700; padding: 0 .4em; }
.radio-row{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.radio-row label{ display:flex; align-items:center; gap:.5em; font-weight:500; min-height:44px; }

/* ======================= COOKIE BANNER ======================= */
.cookie-banner{
  position:fixed;
  left:1rem; right:1rem; bottom:1rem;
  max-width: 640px;
  margin-inline:auto;
  background: var(--c-ink);
  color: var(--c-champagne);
  border: 2.5px solid var(--c-champagne);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  box-shadow: 8px 8px 0 rgba(0,0,0,.25);
  z-index: 200;
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  align-items:center;
  justify-content:space-between;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ margin:0; font-size:.88rem; flex: 1 1 260px; }
.cookie-banner a{ text-decoration:underline; color: var(--c-rose); }
.cookie-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-actions .btn-ghost{ color: var(--c-champagne); border-color: var(--c-champagne); }
.cookie-actions .btn-ghost::before{ background: var(--c-champagne); }
.cookie-actions .btn-ghost:hover{ color: var(--c-ink); }

/* ======================= HERO ======================= */
.hero{
  position:relative;
  background: linear-gradient(135deg, var(--c-burgundy) 0%, #8a2b44 55%, var(--c-rose) 100%);
  color: var(--c-champagne);
  overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  padding-bottom: 5rem;
}
.hero .container{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items:center;
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}
@media (max-width: 860px){ .hero .container{ grid-template-columns: 1fr; } }
.hero h1{
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  margin-bottom:.4em;
}
.hero .lede{ font-size: 1.15rem; max-width: 34ch; color: #f6e6dd; }
.hero-actions{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }

/* ======================= SECTIONS / DIAGONAL LAYOUT ======================= */
.section{ padding: 5rem 0; position:relative; }
.section-tight{ padding: 3.2rem 0; }
.section-champagne{ background: var(--c-champagne); clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%); margin-top:-4vw; }
.section-paper{ background: var(--c-paper); }
.section-ink{ background: var(--c-ink); color: var(--c-champagne); clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); margin-top:-3vw; }
.section-rose{ background: var(--c-rose-light); clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); margin-top:-3vw; }

.section-head{ max-width: 48rem; margin-bottom: 2.6rem; }
.kicker{
  display:inline-block;
  font-family: var(--font-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--c-burgundy);
  background: var(--c-champagne);
  border: 2px solid var(--c-line);
  border-radius: 999px;
  padding: .3em .9em;
  margin-bottom: .9em;
}
.section-ink .kicker{ background: var(--c-rose); color: var(--c-ink); }
.section-head h2{ font-size: clamp(1.9rem, 4vw, 2.8rem); }

/* speech bubble callouts */
.bubble{
  position:relative;
  background:#fff;
  border: 2.5px solid var(--c-line);
  border-radius: 18px;
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-ink-sm);
  font-weight:600;
}
.bubble::after{
  content:"";
  position:absolute;
  left: 2rem; bottom:-14px;
  width:0; height:0;
  border: 14px solid transparent;
  border-top-color:#fff;
  filter: drop-shadow(0 2px 0 var(--c-line));
}

/* ======================= REVEAL ======================= */
.reveal{ opacity:1; transform:none; }
.reveal.js-hide{ opacity:0; transform: translateY(26px); clip-path: inset(0 0 15% 0); transition: opacity .7s ease, transform .7s ease, clip-path .7s ease; }
.reveal.js-hide.in-view{ opacity:1; transform:none; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){
  .reveal.js-hide{ transition:none; opacity:1; transform:none; clip-path:none; }
}

/* ======================= CARDS / GRID ======================= */
.panel-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 980px){ .panel-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .panel-grid{ grid-template-columns: 1fr; } }

.service-card{
  background:#fff;
  border: 2.5px solid var(--c-line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-ink-sm);
  display:flex;
  flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-ink); }
.service-card .media{ aspect-ratio: 4/3; overflow:hidden; position:relative; border-bottom:2.5px solid var(--c-line); }
.service-card .media img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.service-card:hover .media img{ transform: scale(1.08); }
.service-card .body{ padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.service-card h3{ font-size:1.15rem; }
.service-card .meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:auto; padding-top:.6rem; }
.price-tag{ font-family: var(--font-mono); font-weight:700; font-size:1.05rem; color: var(--c-burgundy); }
.duration-tag{ font-size:.78rem; color:#6b4a51; }

.strip{
  display:flex;
  gap:1.2rem;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.strip .service-card{ flex: 0 0 min(78vw, 300px); scroll-snap-align:start; }
@media (min-width: 981px){ .strip{ display:grid; grid-template-columns: repeat(4,1fr); overflow:visible; } .strip .service-card{ flex:unset; } }

/* ======================= FRAMER FEATURE ======================= */
.framer{
  background: #fff;
  border: 3px solid var(--c-line);
  border-radius: 18px;
  box-shadow: var(--shadow-ink);
  padding: 1.6rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
}
@media (max-width: 860px){ .framer{ grid-template-columns: 1fr; } }
.framer-preview{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--c-champagne-dark);
  border-radius: 12px;
  padding: 1.2rem;
  min-height: 320px;
}
.framer-preview canvas{ max-width:100%; border-radius: 4px; }
.framer-upload{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  text-align:center;
  cursor:pointer;
  border-radius:12px;
}
.framer-upload.has-image{ display:none; }
.swatch-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.swatch{
  width:44px; height:44px;
  border-radius:50%;
  border: 2.5px solid var(--c-line);
  cursor:pointer;
  padding:0;
  min-height:unset;
}
.swatch[aria-pressed="true"]{ outline:3px solid var(--c-burgundy); outline-offset:2px; }
.framer-controls .field{ margin-bottom:1rem; }
.framer-controls h3{ font-size:1rem; margin-bottom:.4rem; }
.range-row{ display:flex; align-items:center; gap:.8rem; }
.range-row input[type=range]{ flex:1; accent-color: var(--c-burgundy); }

/* ======================= ABOUT / GENERIC CONTENT ======================= */
.content-page .container{ padding: 3rem 0 4rem; max-width: 56rem; }
.content-page h1{ font-size: clamp(2rem, 5vw, 3rem); }
.content-page h2{ font-size:1.4rem; margin-top:2rem; }
.content-page ul{ padding-left: 1.3rem; margin-bottom:1em; }
.content-page li{ margin-bottom:.4em; list-style: disc; }

.page-hero{
  background: var(--c-champagne);
  border-bottom: 3px solid var(--c-line);
  padding: 3rem 0;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.page-hero .container{ max-width: 56rem; }
.page-hero p{ max-width: 42ch; }

/* ======================= PRODUCT / CART / BASKET PAGES ======================= */
.product-detail{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items:start; padding: 3rem 0; }
@media (max-width: 860px){ .product-detail{ grid-template-columns:1fr; } }
.product-detail .media{ border: 3px solid var(--c-line); border-radius: 14px; overflow:hidden; box-shadow: var(--shadow-ink); aspect-ratio: 4/3; }
.product-detail .media img{ width:100%; height:100%; object-fit:cover; }
.product-info .price-tag{ font-size:1.6rem; }
.qty-row{ display:flex; align-items:center; gap:.8rem; margin: 1.4rem 0; }
.qty-row button{ width:44px; height:44px; border-radius:8px; border:2px solid var(--c-line); background: var(--c-champagne); font-size:1.2rem; cursor:pointer; }
.qty-row input{ width:3.5rem; text-align:center; border:2px solid var(--c-line); border-radius:8px; height:44px; font: inherit; }

.cart-table{ width:100%; border-collapse: collapse; margin-bottom:2rem; }
.cart-table th{ text-align:left; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#6b4a51; padding-bottom:.6rem; border-bottom:2px solid var(--c-line); }
.cart-table td{ padding: .9rem 0; border-bottom:1px solid #e3d2c4; vertical-align:middle; }
.cart-item-info{ display:flex; align-items:center; gap:.8rem; }
.cart-item-info img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:2px solid var(--c-line); }
.remove-btn{ background:none; border:none; color:#9c1c2e; font-weight:700; cursor:pointer; text-decoration:underline; }
.cart-summary{ display:flex; justify-content:flex-end; }
.cart-summary dl{ display:grid; grid-template-columns: auto auto; gap:.4rem 1.5rem; font-size:1.05rem; min-width:16rem; }
.cart-summary dt{ color:#6b4a51; }
.cart-summary .total dt, .cart-summary .total dd{ font-weight:700; font-size:1.3rem; color: var(--c-burgundy); }
.empty-cart{ text-align:center; padding:4rem 0; }

.checkout-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:2.4rem; align-items:start; }
@media (max-width:860px){ .checkout-grid{ grid-template-columns:1fr; } }
.order-review{ background: var(--c-champagne); border:2.5px solid var(--c-line); border-radius: var(--radius); padding:1.4rem; }
.order-review ul{ margin: 1rem 0; display:flex; flex-direction:column; gap:.5rem; }
.order-review li{ display:flex; justify-content:space-between; font-size:.92rem; }

/* ======================= FAQ ======================= */
.faq-item{ border-bottom: 2px solid var(--c-line); }
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  font-size:1.05rem;
  padding: 1.1rem 0;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  min-height:44px;
  align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color: var(--c-burgundy); flex:none; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ padding-bottom:1.2rem; color:#4a2a30; }

/* ======================= 404 ======================= */
.error-page{ text-align:center; padding: 6rem 0; }
.error-page .code{ font-family: var(--font-display); font-size: clamp(5rem,20vw,9rem); color: var(--c-burgundy); margin:0; }

/* ======================= SEALS / DIVIDERS ======================= */
.divider{ width:100%; height:auto; display:block; margin: 2.5rem 0; color: var(--c-line); }
.seal{ width:120px; height:120px; color: var(--c-line); flex:none; }
.ornament{ width:140px; height:21px; color: var(--c-burgundy); display:block; margin-bottom: .6rem; }

.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; }
@media (max-width: 760px){ .steps{ grid-template-columns:1fr; } }
.step{ background:#fff; border:2.5px solid var(--c-line); border-radius: var(--radius); padding:1.4rem; box-shadow: var(--shadow-ink-sm); }
.step .num{ font-family: var(--font-display); font-size:2.2rem; color: var(--c-rose); }

.badge-row{ display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center; }