/* Sladkarnici Roza — theme component styles, ported 1:1 from the approved static prototype */

.section-tight{ padding:40px 0; }

.panel-rose, .panel-vanilla, .panel-ganache{ border-radius:var(--radius-lg); padding:32px; }
.panel-rose h1, .panel-rose h2, .panel-rose h3, .panel-rose h4,
.panel-ganache h1, .panel-ganache h2, .panel-ganache h3, .panel-ganache h4{ color:var(--vanilla-deep); }
.panel-rose p, .panel-rose li, .panel-rose span,
.panel-ganache p, .panel-ganache li, .panel-ganache span{ color:var(--vanilla-deep); }
.panel-rose{ background:var(--rose-dust-700); border:1px solid var(--gold-500); }
.panel-rose strong, .panel-rose .panel-highlight{ color:var(--gold-300); }
.panel-rose a:not(.btn){ color:var(--gold-300); }
.panel-vanilla{ background:var(--vanilla); border:var(--border-rose); color:var(--ganache-700); }
.panel-vanilla h1, .panel-vanilla h2, .panel-vanilla h3, .panel-vanilla h4{ color:var(--rose-900); }
.panel-vanilla p, .panel-vanilla li{ color:var(--ganache-700); }
.panel-vanilla strong, .panel-vanilla .panel-highlight{ color:var(--rose-dust-700); }
.panel-ganache{ background:var(--ganache-700); border:1px solid var(--gold-500); }
.panel-ganache strong, .panel-ganache .panel-highlight{ color:var(--gold-300); }
.panel-ganache a:not(.btn){ color:var(--gold-300); }

/* ---------- Topbar ---------- */
.topbar{ background:var(--rose-950); color:rgba(255,255,255,.72); font-size:.72rem; letter-spacing:.02em; overflow:hidden; }
.topbar-row{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px; gap:16px; }
.topbar a{ color:rgba(255,255,255,.72); }
.topbar a:hover{ color:var(--gold-300); }
.topbar-left{ display:flex; align-items:center; gap:14px; }
.topbar-left a, .topbar-left span{ display:inline-flex; align-items:center; gap:6px; }
.topbar-left svg, .topbar-right svg{ width:12px; height:12px; color:var(--gold-500); }
.topbar-sep{ width:1px; height:11px; background:rgba(255,255,255,.2); }
.topbar-right{ display:flex; align-items:center; gap:18px; justify-content:flex-end; }
.topbar-social{ display:flex; gap:10px; }
.topbar-social svg{ width:13px; height:13px; color:var(--gold-500); }
@media (max-width:640px){ .topbar-left span:not(:first-child), .topbar-sep{ display:none; } }

/* ---------- Header ---------- */
#site-header{ position:sticky; top:0; z-index:200; }
.site-header-bar{ background:var(--vanilla); border-bottom:1px solid rgba(150,57,79,.1); }
.header-row-v2{ display:flex; align-items:center; gap:28px; padding-top:14px; padding-bottom:14px; transition:padding .2s ease; position:relative; }
#site-header.scrolled .header-row-v2{ padding-top:9px; padding-bottom:9px; box-shadow:var(--shadow-sm); }
.logo-v2{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:none; }
.logo-v2-img{ height:56px; width:auto; object-fit:contain; flex:none; transition:height .2s ease; }
#site-header.scrolled .logo-v2-img{ height:44px; }
.logo-v2-tag{ font-family:var(--font-serif); font-style:italic; font-size:.7rem; color:var(--gold-500); white-space:nowrap; }
#site-header.scrolled .logo-v2-tag{ display:none; }

.main-nav{ display:flex; align-items:center; flex:1; }
.main-nav > ul{ display:flex; gap:22px; width:100%; justify-content:center; }
.main-nav a{ font-size:.85rem; font-weight:400; letter-spacing:.01em; color:var(--ink-700); position:relative; padding:8px 0; display:inline-block; white-space:nowrap; }
.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--gold-500); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.main-nav a:hover{ color:var(--rose-700); }
.main-nav a:hover::after, .main-nav .active > a::after{ transform:scaleX(1); }
.main-nav .active > a{ color:var(--rose-700); font-weight:500; }
.main-nav li.has-drop{ position:relative; }

.mega{
  position:absolute; top:100%; left:0; right:auto; transform:translateY(8px); overflow:hidden;
  background:var(--vanilla); box-shadow:var(--shadow-lg); border-radius:var(--radius-card); border:var(--border-rose);
  opacity:0; visibility:hidden; transition:var(--transition-ui); z-index:50;
}
.main-nav li.has-drop:hover .mega, .main-nav li.has-drop:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-narrow{ width:240px; padding:18px; }
.mega h4{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-500); margin-bottom:10px; font-family:var(--font-sans); font-weight:700; }
.mega ul li{ margin-bottom:5px; }
.mega ul a{ display:block; font-weight:400; font-size:.85rem; color:var(--ink-700); padding:6px 8px; border-radius:var(--radius-sm); }
.mega ul a:hover{ color:var(--rose-700); background:var(--vanilla-deep); }
.mega-narrow-cta{ display:inline-flex; margin-top:10px; padding-top:12px; border-top:var(--border-rose-soft); width:100%; font-size:.8rem; }
.mega-narrow-blurb{ font-size:.78rem; color:var(--ink-500); margin-bottom:12px; padding-bottom:12px; border-bottom:var(--border-rose-soft); }

.mega-wide .mega{ width:660px; }
.mega-v2-body{ display:flex; min-height:290px; }
.mega-v2-left{ width:210px; flex:none; padding:14px 0; border-right:var(--border-rose-soft); display:flex; flex-direction:column; }
.mega-fam{ display:flex; align-items:center; gap:11px; padding:10px 20px; background:none; border:none; text-align:left; font-size:.84rem; color:var(--ink-700); border-left:2px solid transparent; transition:var(--transition-ui); cursor:pointer; width:100%; }
.mega-fam svg{ width:17px; height:17px; color:var(--rose-dust-700); flex:none; transition:var(--transition-ui); }
.mega-fam.active, .mega-fam:hover{ background:var(--vanilla-deep); color:var(--rose-700); border-left-color:var(--rose-700); }
.mega-fam.active svg, .mega-fam:hover svg{ color:var(--rose-700); }
.mega-v2-right{ flex:1; padding:22px 26px; }
.mega-panel{ display:none; }
.mega-panel.active{ display:block; animation:megaFade .18s ease; }
@keyframes megaFade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }
.mega-panel h4{ color:var(--fam-accent, var(--rose-700)); margin-bottom:6px; }
.mega-panel-blurb{ font-size:.8rem; color:var(--ink-500); margin-bottom:16px; max-width:360px; }
.mega-panel ul{ display:grid; grid-template-columns:1fr 1fr; gap:2px 20px; }
.mega-panel-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:16px; padding-top:14px; border-top:var(--border-rose-soft); }
.mega-panel-cta .link-arrow{ font-size:.8rem; }
.mega-v2-footer{ border-top:var(--border-rose-soft); padding:12px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mega-v2-footer .link-arrow{ font-size:.8rem; }
.mega-v2-footer svg{ width:15px; height:15px; }

.mega-more .mega{ width:460px; left:50%; right:auto; transform:translate(-50%, 8px); }
.main-nav li.has-drop.mega-more:hover .mega, .main-nav li.has-drop.mega-more:focus-within .mega{ transform:translate(-50%, 0); }
.mega-more-body{ display:flex; }
.mega-more-list{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 22px; padding:16px; align-content:start; }
.main-nav .mega-more-item{ display:flex; align-items:flex-start; gap:11px; padding:12px; border-radius:var(--radius-sm); border-left:2px solid transparent; transition:var(--transition-ui); min-width:0; white-space:normal; }
.mega-more-item:hover{ background:var(--vanilla-deep); border-left-color:var(--gold-500); }
.mega-more-ic{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--vanilla-deep); color:var(--rose-dust-700); }
.mega-more-item:hover .mega-more-ic{ background:var(--vanilla); color:var(--rose-700); }
.mega-more-ic svg{ width:15px; height:15px; }
.mega-more-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mega-more-txt strong{ font-family:var(--font-serif); font-size:.92rem; font-weight:600; color:var(--rose-900); }
.mega-more-txt small{ font-family:var(--font-sans); font-size:.74rem; color:var(--ink-500); line-height:1.4; }
@media (max-width:1080px){ .mega-more .mega{ width:400px; } }

.mega-locations-panel{ width:270px; box-shadow:var(--shadow-md); }
.mega-locations{ padding:20px 22px; }
.loc-group{ margin-bottom:18px; }
.loc-group:last-of-type{ margin-bottom:0; }
.loc-group-label{ display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--rose-700); margin-bottom:8px; }
.loc-group ul{ display:flex; flex-direction:column; }
.loc-group li{ margin:0; }
.main-nav .loc-group a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 4px; color:var(--ganache-700); font-size:.87rem; border-radius:var(--radius-sm); transition:var(--transition-ui); white-space:normal; }
.loc-arrow{ opacity:0; color:var(--gold-500); font-size:.8rem; transition:var(--transition-ui); flex:none; }
.main-nav .loc-group a:hover{ color:var(--rose-700); }
.main-nav .loc-group a:hover .loc-arrow{ opacity:1; }
.loc-divider{ height:1px; background:var(--border-color-default); margin:4px 22px 12px; }
.loc-actions{ display:flex; flex-direction:column; padding:0 22px 18px; }
.main-nav .loc-action{ display:block; font-size:.82rem; font-weight:600; color:var(--ganache-700); padding:6px 0; transition:var(--transition-ui); white-space:normal; }
.main-nav .loc-action:hover{ color:var(--gold-500); }
@media (max-width:1080px){ .mega-locations-panel{ width:250px; } }

.header-actions-v2{ display:flex; align-items:center; gap:8px; flex:none; }
.header-search{ position:relative; display:flex; align-items:center; }
.search-panel{ position:absolute; top:calc(100% + 12px); right:-6px; width:280px; z-index:60; background:var(--vanilla); border:var(--border-rose); border-radius:var(--radius-card); box-shadow:var(--shadow-lg); padding:16px; opacity:0; visibility:hidden; transform:translateY(6px); transition:var(--transition-ui); }
.header-search.open .search-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.search-panel-label{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-500); font-weight:700; margin-bottom:10px; }
.search-panel form{ display:flex; align-items:center; gap:8px; border:var(--border-width) solid var(--border-color-default); border-radius:var(--radius-control); background:var(--vanilla-deep); transition:var(--transition-ui); padding:4px 4px 4px 14px; }
.search-panel form:focus-within{ border-color:var(--border-color-hover); }
.search-panel input{ flex:1; border:none; background:transparent; padding:8px 0; font-size:.86rem; color:var(--ink-900); min-width:0; }
.search-panel input:focus{ outline:none; }
.search-panel button{ width:34px; height:34px; border-radius:50%; border:none; background:var(--rose-700); color:var(--vanilla); display:flex; align-items:center; justify-content:center; flex:none; }
.search-panel button:hover{ background:var(--rose-800); }
.search-panel button svg{ width:15px; height:15px; }

.header-icon-btn{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:var(--border-width) solid var(--border-color-default); color:var(--ink-700); flex:none; transition:var(--transition-ui); }
.header-icon-btn svg{ width:17px; height:17px; }
.header-icon-btn:hover{ border-color:var(--border-color-hover); color:var(--gold-500); }
.cart-btn{ position:relative; }
.cart-count{ position:absolute; top:-4px; right:-4px; background:var(--rose-700); color:var(--vanilla); font-size:.6rem; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.burger{ display:none; width:38px; height:38px; border-radius:50%; border:var(--border-width) solid var(--border-color-default); background:transparent; align-items:center; justify-content:center; z-index:160; flex:none; transition:var(--transition-ui); }
.burger:hover{ border-color:var(--border-color-hover); }
.burger span, .burger span::before, .burger span::after{ content:""; display:block; width:15px; height:1px; background:var(--rose-700); position:relative; transition:var(--transition-ui); }
.burger span::before{ position:absolute; top:-5px; }
.burger span::after{ position:absolute; top:5px; }
.nav-overlay{ display:none; position:fixed; inset:0; background:rgba(30,15,18,.4); z-index:140; }
.nav-overlay.show{ display:block; }

@media (max-width:860px){
  .header-row-v2{ padding-top:10px; padding-bottom:10px; gap:10px; }
  .logo-v2-tag{ display:none; }
  .header-search{ display:none; }
  .main-nav{ position:fixed; inset:0 0 0 30%; background:var(--vanilla); flex-direction:column; align-items:flex-start; padding:90px 24px 24px; transform:translateX(100%); transition:.3s; z-index:150; overflow-y:auto; }
  .main-nav.open{ transform:translateX(0); box-shadow:var(--shadow-lg); }
  .main-nav > ul{ flex-direction:column; gap:4px; width:100%; justify-content:flex-start; }
  .main-nav > ul > li{ width:100%; border-bottom:var(--border-rose-soft); }
  .main-nav a{ display:block; padding:14px 4px; color:var(--ink-700); }
  .main-nav a:hover{ color:var(--rose-700); }
  .mega{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; width:auto !important; padding:0 0 10px 14px; display:none; }
  .main-nav li.has-drop.open .mega{ display:block; }
  .mega-v2-body{ flex-direction:column; min-height:auto; }
  .mega-v2-left{ width:100%; flex-direction:row; flex-wrap:wrap; border-right:none; padding:6px 0; }
  .mega-fam{ padding:8px 10px; border-left:none; border-radius:var(--radius-sm); }
  .mega-v2-right{ padding:10px 0; }
  .mega-panel ul{ grid-template-columns:1fr; }
  .mega-v2-footer{ padding:10px 0; border-top:none; }
  .mega-more .mega{ width:auto !important; }
  .mega-more-list{ grid-template-columns:1fr; padding:6px 0; }
  .burger{ display:flex; }
  .footer-grid-v2{ grid-template-columns:1fr 1fr; }
  .store-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:600px){
  .footer-grid-v2{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--rose-950); color:rgba(255,255,255,.75); padding:52px 0 0; border-top:4px solid var(--rose-dust-700); }
.footer-top{ display:flex; align-items:baseline; gap:24px; flex-wrap:wrap; padding-bottom:34px; margin-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1); }
.logo{ display:flex; align-items:center; gap:12px; }
.logo-plate{ display:flex; align-items:center; justify-content:center; flex:none; background:var(--vanilla); border-radius:var(--radius-md); padding:8px 14px; box-shadow:var(--shadow-sm); }
.logo-img{ height:44px; width:auto; object-fit:contain; flex:none; }
.logo-text{ line-height:1.15; display:flex; flex-direction:column; }
.logo-text .slogan{ font-family:var(--font-serif); font-style:italic; font-size:.74rem; white-space:nowrap; color:rgba(255,255,255,.65); }
.footer-tagline{ color:rgba(255,255,255,.55); font-size:.85rem; max-width:440px; margin:0; }
.footer-grid-v2{ display:grid; grid-template-columns:.9fr 1.05fr 1.05fr 1.15fr 1.05fr; gap:28px; padding-bottom:40px; }
.footer-col h4{ color:var(--vanilla); font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; font-family:var(--font-sans); font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.footer-col h4 .accordion-chevron{ display:none; width:14px; height:14px; flex:none; transition:transform .2s ease; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.85rem; color:rgba(255,255,255,.6); }
.footer-col a:hover{ color:var(--gold-300); }
.footer-contact-list a{ display:inline-flex; align-items:center; gap:8px; }
.footer-contact-list svg{ width:13px; height:13px; flex:none; color:var(--gold-300); }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(194,169,126,.35); color:var(--gold-500); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--rose-950); }
.social-row svg{ width:15px; height:15px; }
@media (max-width:600px){
  .footer-col{ border-bottom:1px solid rgba(255,255,255,.1); }
  .footer-col h4{ cursor:pointer; padding:14px 0; margin-bottom:0; }
  .footer-col h4 .accordion-chevron{ display:block; }
  .footer-col.open h4 .accordion-chevron{ transform:rotate(180deg); }
  .footer-col ul{ max-height:0; overflow:hidden; gap:0; transition:max-height .25s ease; }
  .footer-col.open ul{ max-height:320px; padding-bottom:16px; }
  .footer-col ul li{ padding:5px 0; }
  .footer-contact-col .social-row{ max-height:0; overflow:hidden; margin-top:0; transition:max-height .25s ease, margin-top .25s ease; }
  .footer-contact-col.open .social-row{ max-height:60px; margin-top:14px; }
}
.credit-bar{ background:var(--vanilla); border-top:1px solid var(--surface-3); }
.credit-bar-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:14px 24px; font-size:.76rem; color:var(--ganache-700); }
.credit-bar-inner a{ color:var(--ganache-700); font-weight:600; text-decoration:underline; text-decoration-color:transparent; transition:var(--transition-ui); }
.credit-bar-inner a:hover{ color:var(--gold-500); text-decoration-color:var(--gold-500); }
.credit-bar-legal{ display:flex; gap:16px; flex-wrap:wrap; }
.credit-bar-legal a{ font-weight:400; color:var(--ink-500); }
.credit-bar-legal a:hover{ color:var(--rose-700); text-decoration-color:var(--rose-700); }

/* ---------- Hero (homepage) ---------- */
.roza-hero{
  position: relative; min-height: 88vh; display: flex; align-items: center;
  background-image: linear-gradient(rgba(58, 28, 34, .5), rgba(58, 28, 34, .5)), url('https://images.unsplash.com/photo-1517427294546-5aa121f68e8a?auto=format&fit=crop&w=1800&q=80');
  background-size: cover; background-position: center center;
}
.roza-hero-inner{ max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 64px; padding-bottom: 64px; }
.roza-hero-eyebrow{ font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-300); }
.roza-hero-title{ font-size: 54px; color: var(--vanilla); }
.roza-hero-desc{ font-size: 17px; line-height: 1.6; color: rgba(253,250,243,.86); }
@media (max-width: 1024px){ .roza-hero-inner{ max-width: 78%; } .roza-hero-title{ font-size: 42px; } }
@media (max-width: 640px){ .roza-hero-inner{ max-width: 100%; padding: 40px 24px; } .roza-hero-title{ font-size: 32px; } }