:root{
    --ink:#24302a;
    --forest:#2c3d33;
    --forest-deep:#1f2b24;
    --paper:#f3e9dc;
    --paper-dim:#e9dcc8;
    --gold:#c9a227;
    --rose:#cf8792;
    --rose-deep:#b96a76;
    --line: rgba(243,233,220,0.18);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; background:var(--forest) !important; min-height:100%;}
  body{
    margin:0;
    background:var(--forest) !important;
    color:var(--paper) !important;
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    min-height:100vh;
  }
  h1,h2,h3,.script{font-family:'Fraunces', serif;}
  .script-accent{font-family:'Caveat', cursive; color:var(--gold); font-weight:700;}
  a{color:inherit;}
  img{max-width:100%; display:block;}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}

  header{
    position:sticky; top:0; z-index:50;
    background:rgba(31,43,36,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 0;
  }
  @media(min-width:761px){
    .nav{
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:center;
    }
    .nav #navList{ justify-self:start; }
    .nav .logo{ justify-self:center; }
    .nav .burger{ justify-self:end; }
  }
  .logo{
    font-family:'Fraunces', serif; font-weight:700; font-size:1.6rem;
    letter-spacing:0.02em;
    display:flex; align-items:center; gap:8px;
  }
  .logo .dot{color:var(--rose);}
  #navList{list-style:none; display:flex; gap:56px; margin:0; padding:0;}
  #navList a{
    text-decoration:none; font-family:'Fraunces', serif; font-size:1.18rem; font-weight:500; letter-spacing:0.02em;
    color:var(--paper-dim);
    transition:color .2s;
    position:relative;
    padding-bottom:8px;
  }
  #navList a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:2px;
    background:var(--gold);
    transition:width .25s ease;
  }
  #navList a:hover{color:var(--paper);}
  #navList a:hover::after{ width:100%; }
  .burger{display:none; background:none; border:none; color:var(--paper); font-size:1.8rem; cursor:pointer;}

  @media(max-width:760px){
    #navList{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0;
      background:var(--forest-deep);
      max-height:0; overflow:hidden;
      transition:max-height .3s ease;
      border-bottom:1px solid var(--line);
      list-style:none; margin:0; padding:0;
    }
    #navList.open{max-height:300px;}
    #navList li{border-top:1px solid var(--line); list-style:none;}
    #navList a{display:block; padding:18px 28px; font-size:1.1rem;}
    #navList a::after{ display:none; }
    .burger{display:block;}
  }

  .hero{
    padding:72px 0 96px;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
  }
  @media(max-width:900px){ .hero{grid-template-columns:1fr; padding:48px 0 64px; text-align:center;} }
  @media(max-width:480px){
    .card-frame{width:180px; height:426px;}
    .greeting-card.open .card-frame{width:540px;}
    .card-inside{left:180px; width:360px;}
  }

  .eyebrow{
    font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--gold); margin-bottom:18px; display:block;
  }
  .hero h1{
    font-size:clamp(2.3rem, 4.6vw, 3.6rem);
    font-weight:700; line-height:1.08; margin:0 0 22px;
  }
  .hero h1 em{font-style:italic; color:var(--rose); font-weight:500;}
  .hero p.lead{
    color:var(--paper-dim); font-size:1.08rem; max-width:46ch; margin:0 0 32px;
  }
  @media(max-width:900px){ .hero p.lead{margin-inline:auto;} }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 26px; border-radius:2px;
    font-family:'Work Sans'; font-weight:600; font-size:0.94rem;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:transform .15s ease, background .2s ease, color .2s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--rose); color:var(--forest-deep);}
  .btn-primary:hover{background:var(--rose-deep);}
  .btn-ghost{background:transparent; border-color:var(--line); color:var(--paper);}
  .btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
  .btn-row{display:flex; gap:16px; flex-wrap:wrap;}
  @media(max-width:900px){ .btn-row{justify-content:center;} }

  .card-stage{
    display:flex; flex-direction:column; align-items:center; justify-content:center; perspective:1400px;
  }
  .greeting-card{
    position:relative; display:inline-block;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .card-frame{
    width:220px; height:520px; position:relative;
    transition:width .9s cubic-bezier(.2,.8,.2,1);
    overflow:hidden;
  }
  .greeting-card.open .card-frame{ width:660px; }
  .greeting-card .hint{
    margin-top:16px; text-align:center; cursor:pointer;
    font-family:'Caveat', cursive; color:var(--gold); font-size:1.2rem;
  }
  .card-inside{
    position:absolute; top:0; left:220px; width:440px; height:100%;
    background:var(--paper);
    border-radius:3px;
    box-shadow:0 24px 50px rgba(0,0,0,0.35);
    display:flex; flex-direction:row;
    overflow:hidden;
  }
  .card-inside .panel{
    flex:1 1 50%; min-width:0; height:100%;
    display:flex; align-items:center; justify-content:center;
    border-right:1px dashed rgba(36,48,42,0.15);
  }
  .card-inside .panel:last-child{ border-right:none; }
  .card-inside .panel img{ width:100%; height:100%; object-fit:cover; }
  .card-cover{
    position:absolute; top:0; left:0; width:220px; height:100%;
    background:
      radial-gradient(circle at 30% 20%, rgba(201,162,39,0.18), transparent 55%),
      var(--paper);
    border-radius:3px;
    box-shadow:0 24px 50px rgba(0,0,0,0.35);
    transform-origin:left center;
    transform:rotateY(0deg);
    transition:transform .9s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    border:1px solid rgba(36,48,42,0.08);
  }
  .greeting-card.open .card-cover{transform:rotateY(0deg);}
  .card-cover .motif{
    width:64px; height:64px; border-radius:50%;
    background:conic-gradient(from 200deg, var(--rose), var(--gold), var(--rose));
    display:flex; align-items:center; justify-content:center;
  }
  .card-cover .motif span{font-family:'Fraunces'; font-style:italic; color:var(--paper); font-size:1.3rem;}
  .card-cover h3{margin:0; font-size:1.3rem; color:var(--ink); font-weight:600;}
  .card-cover span.small{color:var(--rose-deep); font-family:'Caveat'; font-size:1.1rem;}

  section{padding:88px 0;}
  .section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
  .section-head .eyebrow{display:block; margin-bottom:12px;}
  .section-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem); margin:0 0 14px;}
  .section-head p{color:var(--paper-dim); margin:0;}

  .divider{
    width:60px; height:1px; background:var(--gold); margin:0 auto 20px;
  }

  .occasions-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  @media(max-width:760px){ .occasions-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:480px){ .occasions-grid{grid-template-columns:1fr;} }
  .occasion-tile{
    display:block; text-decoration:none; background:var(--paper); color:var(--ink);
    border-radius:2px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,0.22);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .occasion-tile:hover{ transform:translateY(-5px); box-shadow:0 20px 38px rgba(0,0,0,0.3); }
  .occasion-tile .tile-face{
    height:104px; display:flex; align-items:center; justify-content:center;
  }
  .occasion-tile .tile-face span{
    font-family:'Fraunces'; font-style:italic; font-size:1.9rem; color:var(--paper);
  }
  .occasion-tile .tile-body{ padding:16px 18px 20px; }
  .occasion-tile h3{ margin:0 0 6px; font-size:1.05rem; color:var(--ink); }
  .occasion-tile .tile-link{ font-size:0.82rem; color:var(--rose-deep); font-weight:600; }

  .grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  }
  @media(max-width:860px){ .grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .grid{grid-template-columns:1fr;} }

  .product{
    background:var(--paper); color:var(--ink); border-radius:2px;
    overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,0.25);
    display:flex; flex-direction:column;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .product:hover{transform:translateY(-6px); box-shadow:0 22px 40px rgba(0,0,0,0.32);}
  .product-face{
    height:190px; position:relative; display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid rgba(36,48,42,0.08);
  }
  .product-face .ring{
    width:74px; height:74px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces'; font-style:italic; font-size:1.6rem; color:var(--paper);
  }
  .product-face .leaf{position:absolute; font-size:1.4rem; opacity:.5;}
  .product-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .product-body h3{margin:0; font-size:1.08rem;}
  .product-body p{margin:0; font-size:0.88rem; color:#4a453d;}
  .product-foot{
    margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .price{font-weight:600; color:var(--rose-deep); font-family:'Fraunces';}
  .qty-control{
    display:flex; align-items:center; gap:6px;
  }
  .qty-btn{
    width:26px; height:26px; border-radius:50%; border:1px solid rgba(36,48,42,0.2);
    background:#fffdf9; color:var(--ink); font-size:1rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
    transition:background .2s, border-color .2s;
  }
  .qty-btn:hover{border-color:var(--rose-deep); color:var(--rose-deep);}
  .qty-input{
    width:40px; text-align:center; padding:5px 2px; font-size:0.88rem;
    border:1px solid rgba(36,48,42,0.2); border-radius:2px; background:#fffdf9; color:var(--ink);
    -moz-appearance:textfield;
  }
  .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{
    -webkit-appearance:none; margin:0;
  }
  .add-btn{
    width:100%; background:var(--forest); color:var(--paper); border:none; border-radius:2px;
    padding:10px 14px; font-size:0.82rem; cursor:pointer; font-weight:600;
    transition:background .2s;
  }
  .add-btn:hover{background:var(--forest-deep);}
  .add-btn.added{background:var(--gold); color:var(--forest-deep);}

  .about{
    max-width:760px; margin:0 auto; text-align:center;
  }
  .about-text h2{margin-top:0;}
  .about-text p{color:var(--paper-dim); text-align:left;}
  .stats{display:flex; gap:36px; margin-top:28px; flex-wrap:wrap; justify-content:center;}
  .stat{text-align:left;}
  .stat b{display:block; font-family:'Fraunces'; font-size:1.7rem; color:var(--gold);}
  .stat span{font-size:0.8rem; color:var(--paper-dim);}

  .order-wrap{
    display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start;
  }
  @media(max-width:900px){ .order-wrap{grid-template-columns:1fr;} }
  .order-note{
    background:var(--forest-deep); border:1px solid var(--line); border-radius:2px; padding:26px;
  }
  .order-note h3{margin-top:0; font-size:1.2rem;}
  .order-note ul{padding-left:20px; color:var(--paper-dim); font-size:0.92rem;}
  .order-note li{margin-bottom:8px;}

  .selected-list{
    display:flex; flex-direction:column; gap:8px; margin:14px 0 0;
  }
  .chip{
    background:var(--gold); color:var(--forest-deep); font-size:0.85rem; font-weight:600;
    padding:8px 8px 8px 12px; border-radius:4px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .empty-note{color:var(--paper-dim); font-size:0.85rem; font-style:italic;}

  form.inquiry{
    background:var(--paper); color:var(--ink); border-radius:2px; padding:34px;
    box-shadow:0 20px 44px rgba(0,0,0,0.28);
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
  @media(max-width:560px){ .form-row{grid-template-columns:1fr;} }
  label{display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--ink);}
  input, textarea{
    width:100%; padding:11px 13px; border:1px solid rgba(36,48,42,0.2);
    border-radius:2px; font-family:'Work Sans'; font-size:0.94rem; background:#fffdf9; color:var(--ink);
  }
  textarea{resize:vertical; min-height:90px;}
  .field{margin-bottom:16px;}
  .consent{
    display:flex; gap:10px; align-items:flex-start; font-size:0.82rem; color:#4a453d; margin:18px 0 22px;
  }
  .consent input{width:auto; margin-top:3px;}
  .submit-btn{
    width:100%; background:var(--rose-deep); color:#fff; border:none; padding:15px;
    font-weight:600; border-radius:2px; cursor:pointer; font-size:0.98rem; transition:background .2s;
  }
  .submit-btn:hover{background:var(--forest-deep);}
  .success-box{
    display:none; background:#eef4ea; border:1px solid #b9d1ac; color:#33502b;
    padding:18px; border-radius:2px; font-size:0.9rem; margin-top:16px;
  }
  .success-box.show{display:block;}

  footer{
    border-top:1px solid var(--line); padding:48px 0 32px; background:var(--forest-deep);
  }
  .foot-grid{
    display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px; margin-bottom:32px;
  }
  @media(max-width:700px){ .foot-grid{grid-template-columns:1fr;} }
  footer h4{font-size:1.05rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin:0 0 14px;}
  footer p, footer a{color:var(--paper-dim); font-size:1.05rem; text-decoration:none;}
  footer ul{list-style:none; padding:0; margin:0;}
  footer li{margin-bottom:8px;}
  .fine{border-top:1px solid var(--line); padding-top:20px; font-size:0.8rem; color:var(--paper-dim); text-align:center;}

  .page-intro{
    padding:56px 0 8px; text-align:center;
  }
  .page-intro .back-link{
    display:inline-block; margin-top:10px; font-size:1.05rem; color:var(--paper-dim); text-decoration:none;
    border-bottom:1px solid var(--line);
  }
  .page-intro .back-link:hover{ color:var(--gold); border-color:var(--gold); }

  .filters{
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:44px;
  }
  .filter-btn{
    background:transparent; border:1px solid var(--line); color:var(--paper-dim);
    padding:9px 18px; border-radius:20px; font-size:0.85rem; cursor:pointer;
    font-family:'Work Sans'; transition:all .2s;
  }
  .filter-btn:hover{border-color:var(--gold); color:var(--paper);}
  .filter-btn.active{background:var(--gold); border-color:var(--gold); color:var(--forest-deep); font-weight:600;}

  .subfilters{
    display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:-24px 0 40px;
  }
  .subfilter-btn{
    background:transparent; border:1px solid rgba(243,233,220,0.12); color:var(--paper-dim);
    padding:6px 14px; border-radius:16px; font-size:0.78rem; cursor:pointer;
    font-family:'Work Sans'; transition:all .2s;
  }
  .subfilter-btn:hover{border-color:var(--rose); color:var(--paper);}
  .subfilter-btn.active{background:var(--rose); border-color:var(--rose); color:var(--forest-deep); font-weight:600;}

  #paketi{ margin-top:8px; }