/* ===== tokens ===== */
:root{
--cream:#FBF4EC;
--cream-2:#F6ECE1;
--plum:#4B2140;
--plum-2:#6B2F58;
--plum-deep:#331228;
--pink:#E9B9C7;
--pink-soft:#F3D9DE;
--pink-pale:#F7E3E8;
--gold:#C9A15B;
--green:#4F6B47;
--ink:#3A2433;
--ink-soft:#7A6272;
--card-shadow: 0 10px 24px rgba(75,33,64,0.10);
--radius-lg:26px;
--radius-md:18px;
--radius-sm:12px;
color-scheme: light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --cream:#241723; --cream-2:#2C1B2A; --plum:#F3D9E4; --plum-2:#E7B9CE; --plum-deep:#FBF4EC;
  --pink:#8A5468; --pink-soft:#4A2E3D; --pink-pale:#37232E; --ink:#F3E7EE; --ink-soft:#C9AFBE;
  --card-shadow: 0 10px 24px rgba(0,0,0,0.35); color-scheme: dark;
}
}
:root[data-theme="dark"]{
--cream:#241723; --cream-2:#2C1B2A; --plum:#F3D9E4; --plum-2:#E7B9CE; --plum-deep:#FBF4EC;
--pink:#8A5468; --pink-soft:#4A2E3D; --pink-pale:#37232E; --ink:#F3E7EE; --ink-soft:#C9AFBE;
--card-shadow: 0 10px 24px rgba(0,0,0,0.35); color-scheme: dark;
}

/* ===== base ===== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  background:var(--cream); color:var(--ink); font-family:'Jost', sans-serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input{font-family:inherit;}

.wrap{max-width:460px; margin:0 auto; background:var(--cream); min-height:100vh; position:relative;}

/* ===== header ===== */
/* ---------- Header ---------- */
header{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px; background:var(--cream);}
.icon-btn{width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:var(--plum);}
.icon-btn svg{width:22px; height:22px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:52px; height:52px; flex:none; display:block; border-radius:50%;}
.brand-text h1{font-family:'Dancing Script', cursive; font-size:29px; font-weight:700; color:var(--plum); line-height:1;}
.brand-text p{font-size:9.5px; letter-spacing:.16em; color:var(--ink-soft); margin-top:4px; font-weight:500;}
.header-nav{display:none;}
.header-actions{display:flex; align-items:center; gap:2px;}
.cart-wrap{position:relative;}
.cart-badge{position:absolute; top:2px; right:2px; background:var(--plum); color:var(--cream); font-size:9px; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600;}
/* ---------- Bottom nav ---------- */
nav.bottom{position:sticky; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); background:var(--cream); border-top:1px solid var(--pink-soft); padding:10px 4px calc(10px + env(safe-area-inset-bottom,0px)); z-index:5;}
nav.bottom a{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:10.5px; color:var(--ink-soft); font-weight:500;}
nav.bottom a svg{width:20px; height:20px;}
nav.bottom a.active{color:var(--plum);}

/* ===== home ===== */
/* ---------- Hero ---------- */
.hero{position:relative; margin:0 14px 22px; border-radius:var(--radius-lg); overflow:hidden; padding:20px 20px 44px;
  background:radial-gradient(120% 90% at 88% 20%, rgba(233,185,199,.55), transparent 60%), linear-gradient(155deg, var(--pink-pale) 0%, var(--cream-2) 55%, var(--pink-soft) 100%);}
.hero h2{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size:27px; line-height:1.16; color:var(--plum); max-width:74%;}
.hero p.sub{margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--ink); max-width:66%;}
.hero-values{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap;}
.hero-value{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11.5px; color:var(--plum); font-weight:500;}
.hero-value svg{width:19px; height:19px; color:var(--plum-2);}
.hero-divider{width:1px; height:26px; background:rgba(75,33,64,.25);}
.hero-cta{margin-top:16px; display:inline-flex; align-items:center; gap:10px; background:var(--plum); color:var(--cream); padding:12px 22px; border-radius:999px; font-size:14px; font-weight:500;}
.hero-cta svg{width:15px; height:15px;}
.hero-cta.small{padding:11px 20px; font-size:13px; margin-top:18px;}
.hero-art{position:absolute; right:8px; bottom:30px; width:41%; height:auto; aspect-ratio:1; border-radius:50%; filter:drop-shadow(0 14px 20px rgba(51,18,40,.25));}
.hero-dots{position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:6px;}
.hero-dots span{width:6px; height:6px; border-radius:50%; background:rgba(75,33,64,.28);}
.hero-dots span.active{background:var(--plum); width:16px; border-radius:4px;}

/* ---------- Category icon strip ---------- */
.cat-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:6px 14px 30px; text-align:center;}
.cat-strip .item{padding:0 4px; display:block;}
.cat-strip .circle{width:56px; height:56px; border-radius:50%; background:var(--pink-pale); display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.cat-strip .circle svg{width:23px; height:23px; color:var(--plum);}
.cat-strip h3{font-size:13.5px; font-weight:600; color:var(--plum); line-height:1.25; margin-bottom:6px;}
.cat-strip p{font-size:10.5px; color:var(--ink-soft); line-height:1.4;}

/* ===== components ===== */
/* ---------- Product grid ---------- */
.section-pad{padding:0 14px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pcard{border-radius:var(--radius-md); overflow:hidden; background:var(--cream-2); box-shadow:var(--card-shadow); display:flex; flex-direction:column;}
.pcard .art{aspect-ratio:1/0.95; position:relative;}
.pcard .art svg{width:100%; height:100%;}
.pcard .body{padding:14px 12px 16px; text-align:center;}
.pcard h4{font-size:14.5px; font-weight:600; color:var(--plum); margin-bottom:10px;}
.pcard .btn{display:inline-flex; align-items:center; gap:6px; background:var(--plum); color:var(--cream); font-size:11.5px; font-weight:500; padding:8px 16px; border-radius:999px;}
.pcard .btn svg{width:11px; height:11px;}
.pcard .btn.ghost{background:transparent; border:1px solid var(--plum); color:var(--plum);}

/* ---------- Promo banner ---------- */
.promo{margin:26px 14px; border-radius:var(--radius-md); overflow:hidden; background:var(--cream-2); display:flex; align-items:stretch; box-shadow:var(--card-shadow);}
.promo .art{width:34%; flex:none;}
.promo .art svg{width:100%; height:100%;}
.promo .art img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%;}
.promo .content{padding:14px 12px; display:flex; flex-direction:column; justify-content:center; gap:10px; flex:1;}
.promo .content p{font-family:'Dancing Script', cursive; font-size:19px; color:var(--plum); line-height:1.2; font-weight:600;}
.promo .btn{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; background:var(--plum); color:var(--cream); font-size:11.5px; font-weight:500; padding:9px 14px; border-radius:999px; white-space:nowrap;}
.promo .btn svg{width:13px; height:13px;}

/* ---------- Newest products ---------- */
.newest-head{display:flex; align-items:baseline; justify-content:space-between; padding:6px 14px 14px;}
.newest-head h3{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size:20px; color:var(--plum);}
.newest-head a{font-size:12px; color:var(--plum-2); font-weight:500; display:inline-flex; align-items:center; gap:4px;}
.newest-head a svg{width:11px; height:11px;}
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0 14px 26px;}
.thumb{aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; background:var(--cream-2); display:block;}
.thumb svg{width:100%; height:100%;}

/* ===== pages ===== */
/* ---------- Generic sub-pages ---------- */
.view[hidden]{display:none;}
.page{padding:20px 14px 30px; animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.back{color:var(--plum-2); font-size:13px; font-weight:500; margin-bottom:14px; display:inline-flex; align-items:center; gap:6px;}
.page-title{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size:24px; color:var(--plum);}
.page-sub{font-size:13px; color:var(--ink-soft); margin-top:8px; max-width:85%;}
.empty-note{margin-top:20px; font-size:12px; color:var(--ink-soft); text-align:center;}
.center-page{display:flex; flex-direction:column; align-items:center; text-align:center;}
.center-page .back{align-self:flex-start;}
.empty-icon{width:64px; height:64px; border-radius:50%; background:var(--pink-pale); display:flex; align-items:center; justify-content:center; color:var(--plum); margin:18px 0 14px;}
.empty-icon svg{width:28px; height:28px;}
.page .grid-2{margin-top:16px;}
.cat-list{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.cat-row{display:flex; align-items:center; gap:12px; background:var(--cream-2); border-radius:var(--radius-md); padding:12px 14px; box-shadow:var(--card-shadow);}
.cat-row-icon{width:40px; height:40px; border-radius:50%; background:var(--pink-pale); display:flex; align-items:center; justify-content:center; flex:none; color:var(--plum);}
.cat-row-icon svg{width:18px; height:18px;}
.cat-row-text{flex:1; display:flex; flex-direction:column; gap:2px;}
.cat-row-text strong{font-size:14px; color:var(--plum); font-weight:600;}
.cat-row-text small{font-size:11px; color:var(--ink-soft);}
.cat-row-arrow{color:var(--plum-2); font-size:16px;}
.search-box{display:flex; align-items:center; gap:10px; background:var(--cream-2); border-radius:999px; padding:12px 16px; margin-top:16px; box-shadow:var(--card-shadow);}
.search-box svg{width:18px; height:18px; color:var(--ink-soft); flex:none;}
.search-box input{border:none; outline:none; font-size:14px; color:var(--ink); width:100%;}

/* ===== overlays ===== */
/* ---------- Drawer ---------- */
.drawer-overlay{position:fixed; inset:0; background:rgba(30,10,25,.45); z-index:40; opacity:0; pointer-events:none; transition:opacity .25s;}
.drawer-overlay.show{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; left:0; bottom:0; width:78%; max-width:300px; background:var(--cream); z-index:50; transform:translateX(-105%); transition:transform .3s ease; padding:22px 20px; overflow-y:auto;}
.drawer.open{transform:translateX(0);}
.drawer-close{font-size:22px; color:var(--plum); margin-bottom:14px;}
.drawer-brand{font-family:'Dancing Script', cursive; font-size:24px; color:var(--plum); margin-bottom:18px;}
.drawer-nav{display:flex; flex-direction:column; gap:2px;}
.drawer-nav a{padding:11px 4px; font-size:14px; color:var(--ink); border-bottom:1px solid var(--pink-soft);}
.drawer-nav a.muted{color:var(--plum-2); font-weight:500;}


/* ===== responsive ===== */
/* ---------- Responsive: tablet ---------- */
@media (min-width:700px){
  .wrap{max-width:700px;}
  .grid-2{grid-template-columns:repeat(3,1fr);}
  .cat-strip{gap:14px;}
  .cat-strip .circle{width:64px; height:64px;}
  .cat-strip .circle svg{width:26px; height:26px;}
  .thumbs{grid-template-columns:repeat(6,1fr);}
}

/* ---------- Responsive: desktop ---------- */
@media (min-width:1024px){
  .wrap{max-width:1180px; padding:0 24px;}
  header{padding:24px 0;}
  .icon-btn[data-action="toggle-drawer"]{display:none;}
  .header-nav{display:flex; gap:30px; font-size:14px; font-weight:500; color:var(--ink);}
  .header-nav a.active{color:var(--plum); font-weight:600;}
  nav.bottom{display:none;}

  .hero{display:grid; grid-template-columns:1fr 440px; column-gap:56px; align-items:center; padding:40px 56px; margin:0 0 34px;}
  .hero-copy{grid-column:1;}
  .hero h2{font-size:42px; max-width:520px;}
  .hero p.sub{font-size:16.5px; max-width:460px;}
  .hero-art{grid-column:2; grid-row:1; position:static; width:100%; height:auto; max-width:440px; justify-self:end; filter:drop-shadow(0 20px 30px rgba(51,18,40,.22));}
  .hero-dots{display:none;}

  .cat-strip{max-width:1080px; margin:0 auto; padding:20px 0 54px;}
  .cat-strip h3{font-size:15px;}
  .cat-strip p{font-size:11.5px;}

  .section-pad{padding:0;}
  .grid-2{grid-template-columns:repeat(4,1fr); max-width:1080px; margin:0 auto; gap:18px;}

  .promo{max-width:1080px; margin:50px auto;}
  .promo .art{width:26%;}
  .promo .content{padding:22px 28px;}
  .promo .content p{font-size:24px;}

  .newest-head{max-width:1080px; margin:0 auto; padding:6px 0 18px;}
  .thumbs{grid-template-columns:repeat(8,1fr); max-width:1080px; margin:0 auto; padding:0 0 50px; gap:14px;}

  .page{max-width:1080px; margin:0 auto; padding:40px 0 60px;}
  .cat-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
}


/* ===== cart & products ===== */
.pcard .desc{font-size:12px; color:var(--ink-soft); line-height:1.4; margin:-4px 0 8px;}
.pcard .price{font-size:14px; font-weight:600; color:var(--plum-2); margin-bottom:10px;}
.pcard .body{flex:1; display:flex; flex-direction:column; align-items:center;}
.pcard .body form{margin-top:auto;}
.pcard .btn.added{background:var(--green);}
.flash{margin:0 14px 14px; padding:12px 16px; border-radius:var(--radius-sm); background:var(--pink-pale); color:var(--plum); font-size:13px;}
.flash-error{background:#f7d9d9; color:#7a1f1f;}
.cart-page .page-sub{max-width:100%;}
.notice{margin-top:14px; padding:12px 16px; border-radius:var(--radius-sm); background:var(--pink-pale); color:var(--plum); font-size:13px;}
.zones{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
.zone{border:2px dashed var(--pink); border-radius:var(--radius-md); padding:14px; background:var(--pink-pale); transition:background .15s, border-color .15s;}
.zone.drag-over{background:var(--pink-soft); border-color:var(--plum-2); border-style:solid;}
.zone-loose{border-color:var(--ink-soft); background:transparent;}
.zone-head{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.zone-head strong{display:block; font-size:15px; color:var(--plum);}
.zone-head small{font-size:12px; color:var(--ink-soft);}
.zone-edit summary, .add-person summary{cursor:pointer; font-size:12.5px; font-weight:500; color:var(--plum-2); list-style:none;}
.zone-edit summary::-webkit-details-marker, .add-person summary::-webkit-details-marker{display:none;}
.zone-edit[open]{flex-basis:100%;}
.zone-items{display:flex; flex-direction:column; gap:10px;}
.zone-hint{text-align:center; font-size:12.5px; color:var(--ink-soft); padding:16px 0;}
.zone-sub{margin-top:10px; text-align:right; font-size:13px; font-weight:600; color:var(--plum);}
.citem{display:flex; gap:12px; background:var(--cream); border-radius:var(--radius-sm); padding:10px; box-shadow:var(--card-shadow); cursor:grab;}
.citem.dragging{opacity:.45;}
.citem-art{width:64px; height:64px; flex:none; border-radius:10px; overflow:hidden;}
.citem-art svg, .citem-art img{width:100%; height:100%;}
.citem-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.citem-main strong{font-size:13.5px; color:var(--plum);}
.citem-main small{font-size:12px; color:var(--ink-soft);}
.citem-controls{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:4px;}
.qty{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--pink); border-radius:999px; padding:2px 6px;}
.qty button{width:24px; height:24px; font-size:16px; color:var(--plum);}
.qty span{font-size:13px; min-width:14px; text-align:center;}
.assign select{font:inherit; font-size:12.5px; color:var(--ink); background:var(--cream-2); border:1px solid var(--pink); border-radius:999px; padding:5px 10px;}
.link-btn{font-size:12px; color:var(--plum-2); text-decoration:underline;}
.link-btn.danger{color:#a13030; margin-top:6px;}
.add-person{margin-top:18px; border:1px solid var(--pink); border-radius:var(--radius-md); padding:14px; background:var(--cream-2);}
.person-form{display:grid; gap:10px; margin-top:12px;}
.field{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft);}
.field input{font:inherit; font-size:14px; color:var(--ink); background:var(--cream); border:1px solid var(--pink); border-radius:var(--radius-sm); padding:10px 12px; width:100%;}
.person-form .hero-cta{justify-self:start; margin-top:4px;}
.cart-total{margin-top:22px; text-align:right; font-size:16px; color:var(--ink);}
.cart-total strong{color:var(--plum); font-size:19px;}
@media (min-width:1024px){
  .zones{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start;}
  .person-form{grid-template-columns:repeat(2,1fr);}
  .person-form .hero-cta{grid-column:1/-1;}
  .flash{max-width:1080px; margin:0 auto 14px;}
}

/* ===== order / checkout ===== */
.cart-actions{display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-top:14px;}
.hero-cta.disabled{opacity:.45; pointer-events:none;}
.order-layout{display:flex; flex-direction:column; gap:20px; margin-top:16px;}
.field textarea{font:inherit; font-size:14px; color:var(--ink); background:var(--cream); border:1px solid var(--pink); border-radius:var(--radius-sm); padding:10px 12px; width:100%; resize:vertical;}
.summary{background:var(--cream-2); border-radius:var(--radius-md); padding:16px; box-shadow:var(--card-shadow); font-size:13px;}
.summary h3{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:19px; color:var(--plum); margin-bottom:8px;}
.summary-person{margin-bottom:12px;}
.summary-person strong{display:block; color:var(--plum);}
.summary-person small{color:var(--ink-soft);}
.summary-person ul{list-style:none; margin-top:6px;}
.summary-person li{display:flex; justify-content:space-between; gap:10px; padding:2px 0;}
@media (min-width:1024px){
  .order-layout{display:grid; grid-template-columns:1.4fr 1fr; align-items:start; gap:28px;}
  .checkout-form .wide{grid-column:1/-1;}
}

/* ===== favorites ===== */
.pcard .art{position:relative;}
.fav-form{position:absolute; top:8px; right:8px; margin:0;}
.fav-btn{width:34px; height:34px; border-radius:50%; background:rgba(251,244,236,.92); color:var(--plum); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(75,33,64,.18); transition:transform .12s;}
.fav-btn:active{transform:scale(.9);}
.fav-btn svg{width:18px; height:18px; fill:none;}
.fav-btn.on svg{fill:var(--plum-2); stroke:var(--plum-2);}
.fav-empty[hidden]{display:none;}
.search-box input[type=search]{-webkit-appearance:none; appearance:none; background:transparent;}
.search-box input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;}

/* ===== auth / profil ===== */
.auth-page{max-width:520px;}
.auth-form{margin-top:16px;}
.auth-links{margin-top:14px; font-size:13px; color:var(--ink-soft);}
.auth-links a{color:var(--plum-2); text-decoration:underline;}
.check{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink);}
.adm-card-like{margin-top:20px; background:var(--cream-2); border-radius:var(--radius-md); padding:16px; box-shadow:var(--card-shadow);}
.section-h{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:19px; color:var(--plum);}
@media (min-width:1024px){
  .page.auth-page{margin-left:auto; margin-right:auto;}
  .auth-form.person-form{grid-template-columns:1fr;}
}

/* ===== saved persons / verification / delete ===== */
.saved-person{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--pink-soft);}
.saved-person strong{display:block; font-size:14px; color:var(--plum);}
.saved-person small{font-size:12px; color:var(--ink-soft);}
.saved-person .hero-cta{margin-top:0;}
.saved-pick{margin-top:18px; background:var(--cream-2); border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--card-shadow);}
.badge-ok{font-size:12px; color:var(--green); font-weight:500; margin-left:6px;}
.danger-zone summary{cursor:pointer; font-size:13px; color:#a13030; font-weight:500;}
.danger-btn{background:#a13030;}

#search-results{transition:opacity .12s;}
#search-results.is-loading{opacity:.55;}

/* ===== stranica proizvoda ===== */
.pcard .art-link{display:block; width:100%; height:100%;}
.pcard .body h4 a{color:inherit;}
.fav-form.static{position:static;}
.product-page{max-width:1080px;}
.pp-grid{display:grid; gap:20px; margin-top:6px;}
.pp-gallery{outline:none;}
.pp-main{position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; background:var(--cream-2); box-shadow:var(--card-shadow);}
.pp-main img, .pp-main svg{width:100%; height:100%; object-fit:cover; display:block;}
.pp-nav{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(251,244,236,.9); color:var(--plum); font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(75,33,64,.2);}
.pp-nav.prev{left:10px;}
.pp-nav.next{right:10px;}
.pp-count{position:absolute; bottom:10px; right:12px; background:rgba(51,18,40,.6); color:#fff; font-size:11.5px; padding:3px 10px; border-radius:999px;}
.pp-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px;}
.pp-thumb{flex:none; width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; border:2px solid transparent; opacity:.75; background:var(--cream-2);}
.pp-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.pp-thumb.active{border-color:var(--plum-2); opacity:1;}
.pp-crumbs{font-size:12px; color:var(--ink-soft);}
.pp-crumbs a{color:var(--plum-2);}
.pp-title{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600; font-size:28px; color:var(--plum); margin-top:6px; line-height:1.15;}
.pp-price{font-size:22px; font-weight:600; color:var(--plum-2); margin:8px 0 14px;}
.pp-actions{display:flex; align-items:center; gap:12px;}
.pp-desc{margin-top:18px; font-size:14.5px; line-height:1.65; color:var(--ink);}
.pp-desc p{margin-bottom:12px;}
.pp-note{margin-top:14px; font-size:12px; color:var(--ink-soft); background:var(--pink-pale); border-radius:var(--radius-sm); padding:10px 14px;}
@media (min-width:800px){
  .pp-grid{grid-template-columns:1.05fr 1fr; gap:36px; align-items:start;}
  .pp-title{font-size:36px;}
}

/* ===== admin galerija (forma proizvoda) u app.css jer deli tokene ===== */

/* ===== lightbox (uvećana slika) ===== */
.pp-zoomlink{display:block; width:100%; height:100%; cursor:zoom-in;}
.pp-zoom-hint{position:absolute; top:10px; left:10px; width:34px; height:34px; border-radius:50%; background:rgba(251,244,236,.9); color:var(--plum); display:flex; align-items:center; justify-content:center; pointer-events:none; box-shadow:0 2px 8px rgba(75,33,64,.2);}
.pp-zoom-hint svg{width:18px; height:18px;}
html.lb-open{overflow:hidden;}
.lb{position:fixed; inset:0; z-index:100; background:rgba(20,8,17,.94); display:flex; align-items:center; justify-content:center; padding:56px 16px 48px;}
.lb[hidden]{display:none;}
.lb-img{max-width:min(96vw,1400px); max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px); width:auto; height:auto; object-fit:contain; border-radius:var(--radius-sm); box-shadow:0 10px 40px rgba(0,0,0,.5); user-select:none; -webkit-user-drag:none;}
.lb-close{position:absolute; top:10px; right:14px; width:42px; height:42px; border-radius:50%; background:rgba(251,244,236,.14); color:#fff; font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center;}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(251,244,236,.14); color:#fff; font-size:32px; line-height:1; display:flex; align-items:center; justify-content:center;}
.lb-nav.prev{left:10px;}
.lb-nav.next{right:10px;}
.lb-nav[hidden]{display:none;}
.lb-close:hover, .lb-nav:hover, .lb-close:focus-visible, .lb-nav:focus-visible{background:rgba(251,244,236,.3); outline:2px solid #fff; outline-offset:2px;}
.lb-count{position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#fff; font-size:13px;}
@media (max-width:600px){ .lb-nav{width:40px; height:40px; font-size:28px;} .lb{padding:56px 6px 44px;} }

/* ===== plaćanje ===== */
.pay-options{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.pay-options legend{font-size:12px; color:var(--ink-soft); margin-bottom:6px; padding:0;}
.pay-option{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--pink); border-radius:var(--radius-sm); background:var(--cream); cursor:pointer; font-size:13.5px; color:var(--ink);}
.pay-option:has(input:checked){border-color:var(--plum-2); background:var(--pink-pale);}
.pay-option input{margin-top:3px;}
.pay-option strong{display:block; color:var(--plum);}
.pay-option small{display:block; margin-top:2px; font-size:12px; color:var(--ink-soft); line-height:1.4;}
.pay-info p{margin:6px 0;}
.pay-paid{color:var(--green); font-weight:600;}
.pay-qr{background:#fff; padding:6px; border-radius:var(--radius-sm); width:max-content; max-width:100%; margin:10px 0; box-shadow:var(--card-shadow);}
.pay-qr svg{display:block; width:min(280px, 100%); height:auto;}
.pay-dl{margin-top:4px;}
.pay-options .pay-option input[type=radio]{width:auto; flex:none; padding:0; margin:3px 0 0; border:0;}
.pay-options .pay-option span{flex:1; min-width:0;}
.pay-dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13.5px; margin:6px 0;}
.pay-dl dt{color:var(--ink-soft);}
.pay-dl dd{margin:0; overflow-wrap:anywhere;}

/* ===== podnožje ===== */
.site-footer{margin:34px 14px 0; padding:26px 20px 18px; background:var(--cream-2); border-radius:var(--radius-lg) var(--radius-lg) 0 0; color:var(--ink);}
.sf-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 18px;}
.sf-brand, .sf-info{grid-column:1/-1;}
.sf-logo{font-family:'Dancing Script', cursive; font-size:28px; font-weight:700; color:var(--plum); line-height:1;}
.sf-brand p{margin:10px 0 12px; font-size:13px; line-height:1.55; color:var(--ink-soft); max-width:440px;}
.sf-ig{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:var(--plum); color:var(--cream); font-size:13px; font-weight:500;}
.sf-ig svg{width:18px; height:18px;}
.site-footer h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--plum-2); margin-bottom:10px; font-weight:600;}
.site-footer ul{list-style:none; display:flex; flex-direction:column; gap:7px; font-size:13.5px;}
.site-footer li a{color:var(--ink);}
.site-footer li a:hover{color:var(--plum-2); text-decoration:underline;}
.sf-info li{color:var(--ink-soft); line-height:1.5; font-size:13px;}
.sf-info li a{color:var(--plum-2); text-decoration:underline;}
.sf-bottom{margin-top:22px; padding-top:14px; border-top:1px solid var(--pink-soft); font-size:12px; color:var(--ink-soft); text-align:center;}
@media (min-width:700px){
  .site-footer{margin:44px 0 0;}
}
@media (min-width:1024px){
  .site-footer{margin:60px 0 0; padding:38px 40px 20px; border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
  .sf-grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr; gap:30px;}
  .sf-brand, .sf-info{grid-column:auto;}
}

/* ===== pravne stranice ===== */
.legal-page{max-width:820px;}
.legal-text{margin-top:14px; font-size:14.5px; line-height:1.7; color:var(--ink);}
.legal-text h3{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:21px; color:var(--plum); margin:24px 0 8px;}
.legal-text p{margin:0 0 12px;}
.legal-text ul{margin:0 0 12px 20px;}
.legal-text li{margin-bottom:6px;}
.legal-text a{color:var(--plum-2); text-decoration:underline; overflow-wrap:anywhere;}
.legal-other{margin-top:26px; font-size:13px;}
.legal-other a{color:var(--plum-2); text-decoration:underline;}
.terms-check{align-items:flex-start; line-height:1.45;}
.terms-check input{margin-top:3px; width:auto; flex:none;}
.terms-check a{text-decoration:underline; color:var(--plum-2);}
.sf-bottom{display:flex; flex-direction:column; gap:6px; align-items:center;}
.sf-legal a{color:var(--ink-soft); text-decoration:underline;}
@media (min-width:700px){ .sf-bottom{flex-direction:row; justify-content:space-between;} }

/* ===== suptilne animacije dugmadi (hover i klik) ===== */
/* Mekani prelazi na svim dugmadima/linkovima-dugmadima. */
.hero-cta, .pcard .btn, .promo .btn, .sf-ig, .icon-btn, .fav-btn, .qty button, .link-btn, .pp-nav, .pp-thumb, .back, .lb-close, .lb-nav,
nav.bottom a, nav.bottom a svg, .header-nav a, .drawer-nav a, .cat-row, .cat-row-arrow, .cat-strip .circle, .pcard, .pcard .art img, .pcard .art svg, .hero-cta svg, .pcard .btn svg, .promo .btn svg{
  transition:transform .18s ease, box-shadow .2s ease, background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease, padding .18s ease;
}
.pcard .art{overflow:hidden;}
.icon-btn{border-radius:50%;}
.header-nav a{position:relative; padding:2px 0;}
.header-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--plum-2); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;}
.header-nav a.active::after{transform:scaleX(1);}

/* Hover samo na uređajima sa mišem (na telefonu se ne "lepi" posle dodira). */
@media (hover:hover) and (pointer:fine){
  .hero-cta:not(.disabled):hover, .pcard .btn:not(.ghost):hover, .promo .btn:hover, .sf-ig:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(75,33,64,.22); background-color:var(--plum-2);}
  .pcard .btn.ghost:hover{background-color:var(--pink-pale);}
  .hero-cta:not(.disabled):hover svg, .pcard .btn:hover svg, .promo .btn:hover svg{transform:translateX(3px);}
  .icon-btn:hover{background-color:var(--pink-pale);}
  .fav-btn:hover{transform:scale(1.12); box-shadow:0 4px 12px rgba(75,33,64,.25);}
  .pcard:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(75,33,64,.16);}
  .pcard:hover .art img, .pcard:hover .art svg{transform:scale(1.05);}
  .cat-strip .item:hover .circle{transform:translateY(-3px) scale(1.06); background-color:var(--pink-soft);}
  .cat-row:hover{transform:translateX(4px); box-shadow:0 12px 26px rgba(75,33,64,.16);}
  .cat-row:hover .cat-row-arrow{transform:translateX(4px);}
  .qty button:hover{background-color:var(--pink-pale); border-radius:50%;}
  .link-btn:hover{color:var(--plum); text-decoration-thickness:2px;}
  .pp-thumb:hover{opacity:1; transform:translateY(-2px);}
  .pp-nav:hover{transform:translateY(-50%) scale(1.1); background-color:#fff;}
  .lb-close:hover{transform:scale(1.08);}
  .lb-nav:hover{transform:translateY(-50%) scale(1.08);}
  .back:hover{transform:translateX(-3px); color:var(--plum);}
  .header-nav a:hover::after{transform:scaleX(1);}
  .header-nav a:hover{color:var(--plum);}
  nav.bottom a:hover{color:var(--plum);}
  nav.bottom a:hover svg{transform:translateY(-2px);}
  .drawer-nav a:hover{padding-left:10px; color:var(--plum);}
}

/* Pritisak (klik/dodir): dugme se blago "utisne". */
.hero-cta:not(.disabled):active, .pcard .btn:active, .promo .btn:active, .sf-ig:active{transform:scale(.96); box-shadow:none;}
.icon-btn:active, .qty button:active, .link-btn:active, .back:active{transform:scale(.92);}
.pp-nav:active{transform:translateY(-50%) scale(.92);}
.lb-close:active{transform:scale(.92);}
.lb-nav:active{transform:translateY(-50%) scale(.92);}
.cat-row:active, .pcard:active{transform:scale(.99);}
nav.bottom a:active svg{transform:scale(.88);}

/* Vidljiv fokus pri kretanju tasterom Tab. */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible{outline:2px solid var(--plum-2); outline-offset:2px;}
.hero-cta:focus-visible, .pcard .btn:focus-visible{outline-offset:3px;}

/* Povratne animacije posle klika (JS dodaje klasu). */
@keyframes heartpop{0%{transform:scale(1);} 40%{transform:scale(1.45);} 70%{transform:scale(.9);} 100%{transform:scale(1);}}
.fav-btn.pop svg{animation:heartpop .4s ease;}
@keyframes addedpop{0%{transform:scale(1);} 45%{transform:scale(1.08);} 100%{transform:scale(1);}}
.pcard .btn.added, .hero-cta.added{animation:addedpop .3s ease;}
@keyframes badgebump{0%{transform:scale(1);} 40%{transform:scale(1.5);} 100%{transform:scale(1);}}
.cart-badge.bump{animation:badgebump .35s ease;}
.is-busy{opacity:.7; pointer-events:none;}

/* Ko ne voli animacije (podešavanje sistema): sve se isključuje. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important;}
  .pcard:hover, .cat-row:hover, .hero-cta:hover, .pcard .btn:hover{transform:none !important;}
}

/* ---- Cena u KM (BiH) i izbor države na porudžbini ---- */
.price-km{display:block; margin-top:1px; font-size:.82em; font-weight:400; font-style:normal; color:var(--ink-soft);}
.price-km.inline{display:inline; margin-left:4px;}
[data-country-root] [data-show="ba"]{display:none;}
[data-country-root].is-ba [data-show="ba"]{display:revert;}
[data-country-root].is-ba [data-show="rs"]{display:none;}
[data-country-root].is-ba .pay-option[data-method="ips"]{display:none;}
.pay-option:has(input:disabled){opacity:.55; cursor:not-allowed;}

/* ---- Deljenje linka proizvoda ---- */
.share-btn{border:0; cursor:pointer; padding:0;}
.share-btn svg{fill:none;}
.pcard .share-btn.card-share{position:absolute; top:8px; left:8px; right:auto;}
/* Dugmad na slici kartice: polutransparentna pozadina (50%) */
.pcard .fav-btn, .pcard .share-btn{background:rgba(251,244,236,.5);}
.pp-actions .share-btn{box-shadow:0 2px 8px rgba(75,33,64,.18); background:var(--cream-2);}
.toast{position:fixed; left:50%; bottom:96px; transform:translate(-50%,12px); background:var(--plum); color:var(--cream); font-size:13px; padding:10px 18px; border-radius:999px; box-shadow:0 8px 22px rgba(51,18,40,.3); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:90; max-width:90vw;}
.toast.show{opacity:1; transform:translate(-50%,0);}
@media (min-width:1024px){ .toast{bottom:32px;} }
@media (prefers-reduced-motion:reduce){ .toast{transition:none;} }

/* ---- Procena dostave ---- */
.ship-est{margin-top:12px; font-size:13.5px; color:var(--ink);}
.ship-est strong{color:var(--plum);}
.ship-est small{display:block; margin-top:2px; font-size:11.5px; color:var(--ink-soft); line-height:1.4;}

/* ---- Najnoviji proizvodi: naziv ispod slike ---- */
.thumb-item{display:block; min-width:0; text-align:center;}
.thumb-item .thumb{display:block;}
.thumb-name{display:block; margin-top:6px; font-size:12px; font-weight:500; line-height:1.3; color:var(--plum); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
@media (min-width:1024px){ .thumb-name{font-size:13px;} }

/* ---- Nedostupan proizvod (zaliha 0): bez prikaza stanja ---- */
.pcard.is-oos .art img, .pcard.is-oos .art svg{filter:grayscale(.85); opacity:.6;}
.oos-badge{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(75,33,64,.85); color:var(--cream); font-size:12px; font-weight:500; letter-spacing:.04em; padding:6px 14px; border-radius:999px; pointer-events:none;}
.btn.is-disabled, .hero-cta.is-disabled{background:var(--ink-soft); color:var(--cream); opacity:.65; cursor:not-allowed; box-shadow:none;}
.oos-note{display:block; margin-top:2px; font-size:12px; color:#9a3a3a; font-weight:500;}

/* ---- Instagram sekcija na početnoj ---- */
.ig-feed{margin:26px 14px;}
.ig-feed .newest-head{margin:0 0 12px; padding:0;}
.ig-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.ig-item{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius-sm); background:var(--cream-2);}
.ig-item img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.ig-badge{position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:50%; background:rgba(251,244,236,.7); color:var(--plum); display:flex; align-items:center; justify-content:center;}
.ig-badge svg{width:15px; height:15px;}
@media (hover:hover) and (pointer:fine){ .ig-item:hover img{transform:scale(1.07);} }
@media (min-width:700px){ .ig-grid{grid-template-columns:repeat(6,1fr); gap:10px;} }
@media (min-width:1024px){ .ig-feed{max-width:1080px; margin:50px auto;} .ig-grid{gap:14px;} }
@media (prefers-reduced-motion:reduce){ .ig-item img{transition:none;} }