:root{
      --bg:#f6f7fb;
      --text-white:#f6f7fb;
      --text:#0f115b;
      --accent:#ec242a;

      --card:#ffffff;
      --muted:rgba(15,17,91,.68);
      --border:rgba(15,17,91,.12);
      --shadow: 0 10px 30px rgba(15,17,91,.08);
      --r:18px;

      --container: 1180px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: "Roboto", sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.45;
    }

    a{ color:inherit; text-decoration:none; }
    button, input{ font:inherit; }

    .container{
      max-width:var(--container);
      margin:0 auto;
      padding:0 20px;
    }

    /* Top bar */
    .topbar{
      font-size:14px;
      color:var(--muted);
      border-bottom:1px solid var(--border);
      background:rgba(255,255,255,.5);
      backdrop-filter:saturate(140%) blur(8px);
    }
    .topbar .row{
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:space-between;
      padding:10px 0;
    }
    .topbar .pill{
      display:inline-flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .dot{ width:4px; height:4px; border-radius:999px; background:var(--accent); display:inline-block; translate:0 -1px; }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:10;
      background:rgba(246,247,251,.75);
      backdrop-filter:saturate(150%) blur(10px);
      border-bottom:1px solid var(--border);
    }
    .header-row{
      display:flex;
      align-items:center;
      gap:16px;
      padding:14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      letter-spacing:.3px;
    }
    .logo{
      height:100px;
      /*background:var(--accent);
      box-shadow:0 10px 20px rgba(236,36,42,.25);*/
    }
    .search{
      flex:1;
      display:flex;
      align-items:center;
      gap:10px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:999px;
      padding:10px 14px;
    }
    .search input{
      border:0;
      outline:0;
      width:100%;
      background:transparent;
      color:var(--text);
    }
    .icons{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .iconbtn{
      width:40px; height:40px;
      border-radius:999px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.75);
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .iconbtn:hover{ border-color:rgba(236,36,42,.45); }

    nav{
      padding:0 0 14px 0;
    }
    .navrow{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:center;
      font-size:14px;
      color:var(--muted);
    }
    .navrow a{
      padding:8px 10px;
      border-radius:999px;
    }
    .navrow a:hover{
      background:rgba(236,36,42,.08);
      color:var(--text);
    }

    /* Buttons */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      height:44px;
      padding:0 16px;
      border-radius:999px;
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      cursor:pointer;
      font-weight:600;
    }
    .btn-primary{
      background:var(--accent);
      border-color:var(--accent);
      color:#fff;
      box-shadow:0 12px 24px rgba(236,36,42,.25);
    }
    .btn-primary:hover{ filter:saturate(1.05) brightness(.98); }
    .btn-ghost:hover{ border-color:rgba(236,36,42,.45); background:rgba(236,36,42,.06); }

    /* Sections */
    section{ padding:34px 0; }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    h1,h2,h3{ margin:0; }
    h1{ font-size:42px; line-height:1.05; letter-spacing:-.5px; }
    h2{ font-size:22px; letter-spacing:-.2px; }
    p{ margin:0; color:var(--muted); }

    /* Hero */
    .hero{
      padding:34px 0 10px 0;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .hero-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--r);
      box-shadow:var(--shadow);
      padding:22px;
      overflow:hidden;
    }
    .hero-left p{ margin-top:10px; max-width:52ch; }
    .hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
    .hero-bullets{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top:18px;
      font-size:14px;
      color:var(--muted);
    }
    .check{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(246,247,251,.6);
    }
    .check i{
      width:18px; height:18px;
      border-radius:6px;
      background:rgba(236,36,42,.12);
      border:1px solid rgba(236,36,42,.22);
      display:inline-block;
      position:relative;
    }
    .check i::after{
      content:"";
      position:absolute;
      left:5px; top:3px;
      width:6px; height:10px;
      border-right:2px solid var(--accent);
      border-bottom:2px solid var(--accent);
      transform:rotate(40deg);
    }
    .hero-visual{
      display:grid;
      place-items:center;
      min-height:260px;
      background:
        radial-gradient(600px 260px at 20% 20%, rgba(236,36,42,.12), transparent 60%),
        radial-gradient(600px 260px at 80% 80%, rgba(15,17,91,.10), transparent 55%),
        #fff;
    }
    .hero-visual .mock{
      width:100%;
      max-width:360px;
      aspect-ratio: 4/3;
      border-radius:16px;
      border:1px dashed rgba(15,17,91,.18);
      display:grid;
      place-items:center;
      color:rgba(15,17,91,.55);
      font-weight:600;
    }

    /* Cards grid */
    .grid{
      display:grid;
      gap:12px;
    }
    .grid.cats{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    .grid.products{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    .grid.bundles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid.trust{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    .grid.blog{ grid-template-columns: repeat(3, minmax(0,1fr)); }

    .grid.bundles.card.pimg {aspect-ratio: 2/1;}

    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--r);
      padding:16px;
      box-shadow:none;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color:rgba(236,36,42,.25);
      box-shadow: 0 14px 30px rgba(15,17,91,.10);
    }

    /* Category card */
    .cat{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .cat .left{
      display:flex; align-items:center; gap:10px;
      min-width:0;
    }
    .badge{
      width:42px;
      height:42px;
      border-radius:16px;
      background:#ec242a;
      border:1px solid rgba(236,36,42,.18);
      color:#fff;
      align-content: center;
      padding: 7px;
      font-size: 5px;
    }
    .cat h3{
      font-size:16px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .arrow{
      width:36px; height:36px;
      border-radius:999px;
      border:1px solid var(--border);
      display:grid;
      place-items:center;
      color:rgba(15,17,91,.55);
      flex:0 0 auto;
    }

    /* Product card */
    .pimg{
      width:100%;
      aspect-ratio: 4/4;
      border-radius:14px;
      border:1px solid var(--border);
      background: #fff;
      /*
        linear-gradient(180deg, rgba(15,17,91,.04), rgba(15,17,91,.02)),
        #fff;*/
      display:grid;
      place-items:center;
      color:rgba(15,17,91,.45);
      font-weight:600;
      margin-bottom:12px;
      padding:10px;
      filter: drop-shadow(0px 0px 5px rgba(15,17,91,.20));
    }
    .pimg-bundles{
      width:100%;
      aspect-ratio: 2/1;
      border-radius:14px;
      border:1px solid var(--border);
      background: #fff;
      /*
        linear-gradient(180deg, rgba(15,17,91,.04), rgba(15,17,91,.02)),
        #fff;*/
      display:grid;
      place-items:center;
      color:rgba(15,17,91,.45);
      font-weight:600;
      filter: drop-shadow(0px 0px 5px rgba(15,17,91,.20));
    }    
.pimg img {
  max-width: 100%;
  max-height: 100%;
  max-height:250px;
  width: auto;
  height: auto;

  object-fit: contain;   /* keeps proportions */
  display: block;
}

.pimg-bundles img {
  max-width: 100%;
  border-radius: var(--r);
}

    .ptitle{ font-size:14px; margin-bottom:8px; color:var(--text); }
    .price{ font-weight:800; letter-spacing:-.2px; }
    .meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; margin-top:8px; }
    .stock{
      display:inline-flex; align-items:center; gap:8px;
      
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgb(3, 235, 88);
      white-space:nowrap;
    }
    .stock b{ color:white; font-weight:700; }
    .btn-mini{
      height:38px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(236,36,42,.35);
      background:rgba(236,36,42,.06);
      color:var(--text);
      font-weight:700;
      cursor:pointer;
    }
    .btn-mini:hover{ background:rgba(236,36,42,.10); }

    /* Promo band */
    .promo{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:18px;
      border-radius:var(--r);
      border:1px solid rgba(236,36,42,.22);
      background: linear-gradient(90deg, rgba(236,36,42,.10), rgba(255,255,255,.9));
    }
    .promo p{ color:rgba(15,17,91,.72); }

    /* Footer */
    footer{
      margin-top:20px;
      padding:26px 0;
      border-top:1px solid var(--border);
      background:#0f115b;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:14px;
      margin-bottom:18px;
    }
    .footer-grid-emailing {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:14px;
      margin-bottom:18px;
    }   
    .footer-grid-low {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:14px;
      margin-bottom:18px;
    }    
    .footer-col h3{ 
      font-size:14px; 
      margin-bottom:10px;
      color:var(--text-white);
    }
    .footer-col a{
      display:block;
      font-size:14px;
      color:var(--text-white);
      padding:6px 0;
    }
    .footer-col a:hover{ color:var(--accent);font-weight: 900; }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      color:var(--text-white);
      font-size:13px;
      padding-top:14px;
      border-top:1px solid var(--text-white);
    }

    /* Responsive */
    @media (max-width: 1024px){
      .grid.cats{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      .grid.products{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      .grid.bundles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .grid.trust{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .hero-grid{ grid-template-columns:1fr; }
      h1{ font-size:36px; }
    }
    @media (max-width: 720px){
      .topbar{ display:none; }
      nav{ display:none; }
      .grid.cats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .grid.products{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .grid.bundles{ grid-template-columns: repeat(1, minmax(0,1fr)); }
      .grid.blog{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr 1fr; }
      .search{ display:none; }
      h1{ font-size:32px; }
    }
    @media (max-width: 420px){
      .grid.products{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr; }
    }

    /* ========== PDP (Product landing) ========== */

.pdp-top { padding:18px 0 0 0; }
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
}
.breadcrumbs span{ color:rgba(15,17,91,.45); }
.breadcrumbs a:hover{ color:var(--text); text-decoration:underline; }

.pdp-hero{ padding:16px 0 10px 0; }
.pdp-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}

.pdp-gallery{ padding:16px; }
.pdp-gallery-main{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:10px;
  display:grid;
  place-items:center;
  aspect-ratio: 4/3;
}
.pdp-gallery-main img{
  max-height:320px;
  width:100%;
  object-fit:contain;
}

.pdp-thumbs{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.thumb{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:8px;
  cursor:pointer;
  display:grid;
  place-items:center;
  aspect-ratio: 1/1;
}
.thumb img{ width:100%; height:100%; object-fit:contain; }
.thumb.is-active{ border-color:rgba(236,36,42,.45); box-shadow: 0 10px 22px rgba(15,17,91,.08); }

.pdp-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.pilltag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(246,247,251,.6);
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

.pdp-buy{ padding:18px; }
.pdp-title p{ margin-top:8px; }

.pdp-rating{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}
.stars{ letter-spacing:1px; color:rgba(236,36,42,.95); }
.mutedlink{ color:var(--muted); text-decoration:none; }
.mutedlink:hover{ color:var(--text); text-decoration:underline; }
.sep{ opacity:.7; }
.sku{ opacity:.9; }

.pdp-price-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.price-old{
  color:rgba(15,17,91,.45);
  text-decoration:line-through;
  font-weight:700;
  margin-bottom:2px;
}
.price-big{
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.6px;
  font-weight:900;
  color:var(--text);
}
.price-vat{ color:var(--muted); font-size:13px; margin-top:2px; }
.pdp-stock{ text-align:right; }
.shipline{ color:var(--muted); font-size:13px; margin-top:6px; }

.label{
  display:block;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  margin-bottom:8px;
}
.label .material-symbols-outlined {
  background:var(--accent);
  padding:5px;
  border-radius: 50%;
  color:var(--bg);
}
.label .menu-text {
  color: var(--text);
}

.pdp-variant{ margin-top:14px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  font-weight:700;
  color:var(--text);
}
.chip:hover{ border-color:rgba(236,36,42,.35); background:rgba(236,36,42,.06); }
.chip.is-active{
  border-color:rgba(236,36,42,.55);
  box-shadow: 0 12px 22px rgba(236,36,42,.14);
}

.pdp-qty{ margin-top:14px; }
.qty{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px;
  background:#fff;
  width:max-content;
}
.qty input{
  width:64px;
  border:0;
  outline:0;
  text-align:center;
  background:transparent;
  font-weight:800;
  color:var(--text);
}
.qtybtn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(246,247,251,.6);
  cursor:pointer;
  font-weight:900;
  color:var(--text);
}
.qtybtn:hover{ border-color:rgba(236,36,42,.35); }

.pdp-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.pdp-trust{ margin-top:14px; display:grid; gap:10px; }
.trustrow{ display:flex; flex-wrap:wrap; gap:10px; }

.pdp-mini{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.mini-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(246,247,251,.55);
  color:var(--muted);
  font-size:13px;
}
.mini-card b{ display:block; color:var(--text); margin-bottom:6px; }

.pdp-details{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:18px;
  align-items:start;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}
.tab{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  font-weight:800;
  color:var(--text);
}
.tab:hover{ border-color:rgba(236,36,42,.35); background:rgba(236,36,42,.06); }
.tab.is-active{
  background:rgba(236,36,42,.10);
  border-color:rgba(236,36,42,.45);
}

.tabpanes .pane{ display:none; }
.tabpanes .pane.is-active{ display:block; }

.rich p{ color:var(--muted); margin-bottom:12px; }
.rich ul{ margin:0; padding-left:18px; color:var(--muted); }
.rich li{ margin:6px 0; }

.specs{ display:grid; gap:10px; }
.specrow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(246,247,251,.55);
  color:var(--muted);
}
.specrow b{ color:var(--text); }

.faq details{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(246,247,251,.55);
  padding:12px;
  margin-bottom:10px;
}
.faq summary{
  cursor:pointer;
  font-weight:900;
  color:var(--text);
}
.faq p{ margin-top:8px; color:var(--muted); }

.pdp-aside{ padding:16px; }
.asidebox{ display:grid; gap:10px; }
.asideitem{
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(246,247,251,.55);
  color:var(--muted);
  font-size:13px;
}
.asideitem b{ display:block; color:var(--text); margin-bottom:6px; }

.reviewmeta{
  margin-top:12px;
  color:rgba(15,17,91,.55);
  font-size:13px;
  font-weight:800;
}

.buybar{
  display:none;
  position:sticky;
  bottom:10px;
  margin-top:16px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(10px);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow: var(--shadow);
  padding:10px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.buybar-title{ font-weight:900; }
.buybar-price{ color:var(--muted); font-weight:800; }

@media (max-width: 1024px){
  .pdp-grid{ grid-template-columns: 1fr; }
  .pdp-details{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .pdp-mini{ grid-template-columns: 1fr; }
  .buybar{ display:flex; }
}


/* ========== CATEGORY PAGE (pop) ========== */

.no-scroll { overflow: hidden; }

/* Reuse breadcrumbs look */
.cat-top { padding:18px 0 0 0; }
.breadcrumbs{
  display:flex; flex-wrap:wrap;
  gap:10px; align-items:center;
  font-size:13px; color:var(--muted);
}
.breadcrumbs span{ color:rgba(15,17,91,.45); }
.breadcrumbs a:hover{ color:var(--text); text-decoration:underline; }

/* HERO */
.cat-hero{ padding:14px 0 14px 0; }
.cat-hero-card{
  border-radius: calc(var(--r) + 6px);
  border:1px solid var(--border);
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 15% 20%, rgba(236,36,42,.18), transparent 55%),
    radial-gradient(900px 400px at 85% 10%, rgba(15,17,91,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,247,251,.9));
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  padding:22px;
  position:relative;
}

.hero-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(236,36,42,.25);
  background:rgba(236,36,42,.06);
  color:var(--text);
}
.spark{
  width:10px; height:10px; border-radius:50%;
  background: rgba(236,36,42,.95);
  box-shadow: 0 0 0 6px rgba(236,36,42,.18);
}

.cat-hero-card h1{
  font-size:44px;
  letter-spacing:-1px;
  line-height:1.02;
  margin:0;
}
.cat-hero-card p{
  margin-top:10px;
  max-width: 58ch;
  color:var(--muted);
  font-size:15px;
}

.hero-ctas{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.hero-trust{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }

.cat-hero-right{ display:grid; align-items:center; justify-items:end; }
.hero-art{
  position:relative;
  width:min(360px, 100%);
  aspect-ratio: 1/1;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.65);
  box-shadow: 0 18px 38px rgba(15,17,91,.12);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero-art img{
  width:86%;
  height:86%;
  object-fit:contain;
  transform: rotate(-4deg);
  filter: drop-shadow(0 22px 28px rgba(15,17,91,.15));
}
.hero-glow{
  position:absolute; inset:-40px;
  background: radial-gradient(circle at 50% 40%, rgba(236,36,42,.22), transparent 55%);
}
.hero-badge{
  position:absolute;
  bottom:14px; left:14px;
  border-radius: 16px;
  border:1px solid rgba(15,17,91,.12);
  background: rgba(255,255,255,.85);
  box-shadow: 0 18px 26px rgba(15,17,91,.10);
  padding:10px 12px;
}
.hb-title{ font-weight:900; }
.hb-sub{ color:var(--muted); font-size:13px; margin-top:2px; }

/* Quick category tiles */
.cat-tiles{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.tile{
  border-radius: var(--r);
  border:1px solid var(--border);
  background: rgba(255,255,255,.85);
  box-shadow: 0 12px 24px rgba(15,17,91,.08);
  padding:14px;
  text-decoration:none;
  color:var(--text);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
.tile:before{
  content:"";
  position:absolute; inset:-60px;
  background: radial-gradient(circle at 25% 25%, rgba(236,36,42,.18), transparent 55%);
  opacity:.0;
  transition: opacity .25s ease;
}
.tile:hover:before{ opacity:1; }
.tile:hover{ box-shadow: 0 18px 38px rgba(15,17,91,.12); transform: translateY(-2px); }
.tile-title{ font-weight:900; }
.tile-sub{ color:var(--muted); margin-top:4px; font-size:13px; }
.tile-cta{ margin-top:10px; font-weight:900; color:rgba(236,36,42,.95); }
.tile-hot{
  border-color: rgba(236,36,42,.28);
  background: rgba(236,36,42,.04);
}

/* Promo strip */
.cat-promo{ padding:12px 0 4px 0; }
.promo-strip{
  border-radius: var(--r);
  border:1px solid var(--border);
  background: rgba(246,247,251,.65);
  box-shadow: var(--shadow);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ps-left{ color:var(--muted); font-size:13px; }
.ps-left b{ color:var(--text); }
.ps-right{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ps-sep{ width:1px; height:26px; background: var(--border); margin:0 2px; }

/* Layout */
.cat-main{ padding:12px 0 30px 0; }
.cat-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 12px 0;
}
.toolbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.resultcount{ color:var(--muted); font-size:13px; }
.sort{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 10px;
  background: rgba(255,255,255,.75);
}
.sort span{ color:var(--muted); font-size:13px; font-weight:800; }
.sort select{
  border:0; outline:0;
  background:transparent;
  font-weight:900;
  color:var(--text);
  padding-right:6px;
}

.cat-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:start;
}

/* Filters */
.filters{ padding:16px; position:sticky; top:14px; height: fit-content; }
.filters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.filters h2{ font-size:16px; margin:0; }
.filter-close{ display:none; }

.active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px 0; }
.af{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,17,91,.12);
  background: rgba(255,255,255,.75);
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.filter-block{ padding:12px 0; border-top:1px solid var(--border); }
.f-title{ font-weight:900; margin-bottom:10px; }
.checkrow{
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
  font-size:13px;
  padding:6px 0;
}
.checkrow input{ width:16px; height:16px; }

.range input{ width:100%; }
.range-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
}
.range-meta b{ color:var(--text); }

.filter-actions{ display:flex; gap:10px; margin-top:12px; }
.filter-note{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(246,247,251,.55);
  color:var(--muted);
  font-size:13px;
}
.filter-note b{ color:var(--text); }

/* Products */
.products-wrap .subhead{ margin: 2px 0 12px 0; }
.products-wrap .subhead h2{ margin:0; font-size:16px; }
.subheadline{ color:var(--muted); font-size:13px; margin-top:6px; }

.product-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}

.p-card{
  border-radius: var(--r);
  border:1px solid var(--border);
  background: rgba(255,255,255,.85);
  box-shadow: 0 12px 24px rgba(15,17,91,.08);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.p-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(15,17,91,.12);
  border-color: rgba(236,36,42,.22);
}

.p-media{
  display:block;
  position:relative;
  padding:12px;
  aspect-ratio: 4/3;
  background:
    radial-gradient(700px 240px at 50% 10%, rgba(236,36,42,.10), transparent 55%),
    rgba(246,247,251,.55);
}
.p-media img{
  width:100%; height:100%;
  object-fit:contain;
  filter: drop-shadow(0 18px 22px rgba(15,17,91,.12));
}

.p-badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(15,17,91,.12);
  background: rgba(255,255,255,.85);
  color: var(--text);
}
.p-badge.stock{ top:auto; bottom:12px; left:12px; color:rgba(15,17,91,.70); }
.p-badge.hot{
  border-color: rgba(236,36,42,.28);
  background: rgba(236,36,42,.08);
  color: rgba(236,36,42,.95);
}

.p-body{ padding:12px; }
.p-title{
  display:block;
  color:var(--text);
  font-weight:900;
  text-decoration:none;
  line-height:1.2;
}
.p-title:hover{ text-decoration:underline; }

.p-meta{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
}
.dotsep{ opacity:.7; }
.stars{ letter-spacing:1px; color:rgba(236,36,42,.95); }

.p-price{
  margin-top:10px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.p-price .old{
  color:rgba(15,17,91,.45);
  text-decoration:line-through;
  font-weight:800;
  font-size:13px;
}
.p-price b{ font-size:18px; letter-spacing:-.3px; }

.p-actions{
  margin-top:12px;
  display:flex;
  gap:8px;
}
.btn-mini{
  height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  font-weight:900;
  color:var(--text);
}
.btn-mini:hover{ border-color: rgba(236,36,42,.28); background: rgba(236,36,42,.05); }
.btn-mini.primary{
  background: rgba(236,36,42,.10);
  border-color: rgba(236,36,42,.32);
}
.btn-mini.primary:hover{
  background: rgba(236,36,42,.14);
  border-color: rgba(236,36,42,.44);
}
.btn-mini.ghost{ width:42px; padding:0; }

/* Pager */
.pager{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.pages{ display:flex; gap:8px; align-items:center; }
.page{
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  font-weight:900;
}
.page.is-active{
  border-color: rgba(236,36,42,.44);
  background: rgba(236,36,42,.10);
}

/* SEO card */
.cat-seo{ margin-top:16px; padding:16px; }
.cat-seo h3{ margin:0 0 8px 0; font-size:16px; }
.cat-seo p{ margin:0; color:var(--muted); }

/* Responsive */
@media (max-width: 1200px){
  .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1024px){
  .cat-hero-card{ grid-template-columns: 1fr; }
  .cat-hero-right{ justify-items:start; }
  .cat-grid{ grid-template-columns: 1fr; }
  .filters{ position:relative; top:auto; }
  .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .cat-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Mobile: filter drawer */
@media (max-width: 760px){
  .filter-open{ display:inline-flex; }
  .filters{
    position:fixed;
    inset:0;
    margin:0;
    border-radius:0;
    z-index:50;
    padding:16px;
    display:none;
    background: rgba(15,17,91,.18);
    backdrop-filter: blur(8px);
  }
  .filters:before{
    content:"";
    position:absolute;
    inset:0;
  }
  .filters > *{
    position:relative;
  }
  .filters .filters-head{
    background: rgba(255,255,255,.92);
    border:1px solid var(--border);
    border-radius: var(--r);
    padding:12px;
  }
  .filters .filter-close{ display:inline-flex; height:40px; width:40px; justify-content:center; align-items:center; }
  .filters .active-filters,
  .filters .filter-block,
  .filters .filter-actions,
  .filters .filter-note{
    background: rgba(255,255,255,.92);
    border:1px solid var(--border);
    border-radius: var(--r);
    padding:12px;
    margin-top:10px;
  }
  .filters .filter-block{ padding:12px; }
  .filters.is-open{ display:block; }
}

/* Micro “pop” animations (subtle) */
@media (prefers-reduced-motion: no-preference){
  .p-card:hover .p-media img{ transform: scale(1.02); transition: transform .18s ease; }
  .tile:hover .tile-cta{ transform: translateX(2px); transition: transform .18s ease; display:inline-block; }
}


/* Mobile-visible "☰ Kategorije" button in navrow */
.nav-cats{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  font-weight:900;
  color:var(--text);
  box-shadow: 0 12px 22px rgba(15,17,91,.10);
}

.nav-cats:hover{
  border-color: rgba(236,36,42,.35);
  background: rgba(236,36,42,.06);
  box-shadow: 0 18px 34px rgba(15,17,91,.12);
}

.nav-cats-icon{
  font-size:18px;
  line-height:1;
}

.nav-cats-text{
  font-size:14px;
  letter-spacing:-.2px;
}

.nav-cats-chev{
  color: rgba(15,17,91,.55);
  font-size:12px;
}

/* Make sure it's visible on mobile even if nav links are hidden */
@media (max-width: 760px){
  header nav{ display:block; }         /* keep nav container visible */
  .navrow{ gap:10px; flex-wrap:wrap; } /* allow wrapping */
  .navrow > a{ display:none; }         /* hide other nav links on mobile */
  .nav-cats{ display:inline-flex; }    /* show the button */
}

/* On desktop keep it too (optional). If you want desktop hidden, uncomment:
@media (min-width: 761px){
  .nav-cats{ display:none; }
}
*/
/* ============================= */
/* DESKTOP: multi-column panels */
/* ============================= */
@media (min-width: 1024px){
  .side-panels{
    display:flex;
    align-items:stretch;
    overflow-x:auto;
  }

  .side-panel{
    position:relative;
    inset:auto;
    transform:none !important;
    min-width: 320px;
    max-width: 360px;
    height:100%;
    border-right:1px solid var(--border);
    opacity:1;
    pointer-events:auto;
  }

  .side-panel:not(.is-active){
    display:none;
  }

  .side-panel.is-active{
    display:block;
  }

  /* Hide back button on desktop (breadcrumb behavior instead) */
  .side-back{
    display:none;
  }
}

/* ===== Desktop columns: panels side-by-side (not under) ===== */
@media (min-width: 1024px){
  /* make the panels area a horizontal strip */
  .side-panels{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    height:100%;
  }

  /* each panel becomes a column */
  .side-panel{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;
    transition:none !important;

    flex: 0 0 340px;       /* column width */
    width:340px;
    max-width:340px;
    height:100%;
    overflow:auto;

    border-right:1px solid var(--border);
  }

  /* show only the panels in the stack (JS toggles .is-active) */
  .side-panel{ display:none; }
  .side-panel.is-active{ display:block; }

  /* back button is mobile-only */
  .side-back{ display:none; }
}

/* ===== Desktop columns: show full submenu + allow scrolling ===== */
@media (min-width: 1024px){
  /* side menu must be a flex column and allow inner flex child to shrink */
  .side-menu{
    display:flex;
    flex-direction:column;
  }

  /* key fix: min-height:0 enables proper scrolling inside flex children */
  .side-panels{
    flex:1;
    min-height:0;
    min-width:0;

    display:flex;
    flex-direction:row;
    align-items:stretch;

    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* each panel is a real column and scrolls vertically */
  .side-panel{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    transition:none !important;

    flex:0 0 340px;
    width:340px;
    max-width:340px;

    height:100%;
    min-height:0;        /* key fix */
    overflow:auto;       /* key fix */

    border-right:1px solid var(--border);
    padding:12px 14px;
  }

  /* show only the panels that JS marks as active (stack) */
  .side-panel{ display:none; }
  .side-panel.is-active{ display:block; }

  /* back button stays mobile-only */
  .side-back{ display:none; }
}

     .no-scroll { overflow: hidden; }

      /* Mobile-visible "☰ Kategorije" button in navrow */
      .nav-cats{
        display:inline-flex;
        align-items:center;
        gap:10px;
        height:44px;
        padding:0 14px;
        border-radius:999px;
        border:1px solid var(--border);
        background: rgba(255,255,255,.85);
        cursor:pointer;
        font-weight:900;
        color:var(--text);
        box-shadow: 0 12px 22px rgba(15,17,91,.10);
      }
      .nav-cats:hover{
        border-color: rgba(236,36,42,.35);
        background: rgba(236,36,42,.06);
        box-shadow: 0 18px 34px rgba(15,17,91,.12);
      }
      .nav-cats-icon{ font-size:18px; line-height:1; }
      .nav-cats-text{ font-size:14px; letter-spacing:-.2px; }
      .nav-cats-chev{ color: rgba(15,17,91,.55); font-size:12px; }

      /* Keep button visible on mobile even if header nav is hidden elsewhere */
      @media (max-width: 760px){
        header nav{ display:block; }
        .navrow{ gap:10px; flex-wrap:wrap; }
        .navrow > a{ display:none; }
        .nav-cats{ display:inline-flex; }
      }

      /* Overlay */
      .menu-overlay{
        position:fixed;
        inset:0;
        background: rgba(15,17,91,.22);
        backdrop-filter: blur(8px);
        z-index: 999;
      }

      /* ✅ Off-canvas LEFT */
      .side-menu{
        position:fixed;
        top:0;
        left:0;
        right:auto;
        height:100dvh;
        width: min(420px, 92vw);
        background: rgba(255,255,255,.92);
        backdrop-filter: saturate(140%) blur(12px);
        border-right:1px solid var(--border);
        box-shadow: 18px 0 40px rgba(15,17,91,.14);
        z-index: 1000;

        transform: translateX(-105%);
        transition: transform .25s ease;
        display:flex;
        flex-direction:column;
      }
      .side-menu.is-open{ transform: translateX(0); }

      .side-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:14px;
        border-bottom:1px solid var(--border);
      }

      .side-title{ display:flex; flex-direction:column; line-height:1.1; }
      .side-title b{ font-size:16px; letter-spacing:-.2px; }
      .side-sub{ color:var(--muted); font-size:13px; margin-top:4px; }

      .side-quick{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        padding:12px 14px;
        border-bottom:1px solid var(--border);
      }
      .side-pill{
        display:inline-flex;
        align-items:center;
        padding:8px 12px;
        border-radius:999px;
        border:1px solid var(--border);
        background: rgba(246,247,251,.6);
        font-weight:800;
        font-size:13px;
        text-decoration:none;
        color:var(--text);
      }
      .side-pill:hover{ border-color: rgba(236,36,42,.35); background: rgba(236,36,42,.06); }

      /* Panels (drill-down) */
      .side-panels{
        position:relative;
        flex:1;
        overflow:hidden;
      }
      .side-panel{
        position:absolute;
        inset:0;
        padding:12px 14px;
        overflow:auto;

        transform: translateX(105%);
        transition: transform .25s ease;
      }
      .side-panel.is-active{ transform: translateX(0); }

      .side-panel-head{
        display:grid;
        grid-template-columns: auto 1fr auto;
        align-items:center;
        gap:10px;
        margin-bottom:10px;
      }
      .side-back{
        height:40px;
        padding:0 12px;
        border-radius:999px;
        border:1px solid var(--border);
        background: rgba(255,255,255,.7);
        cursor:pointer;
        font-weight:900;
        color:var(--text);
      }
      .side-back:hover{ border-color: rgba(236,36,42,.35); background: rgba(236,36,42,.06); }
      .side-panel-head b{ font-size:14px; }

      .side-list{
        display:flex;
        flex-direction:column;
        gap:10px;
      }

      .side-item{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 12px;
        border-radius: 14px;
        border:1px solid var(--border);
        background: rgba(246,247,251,.55);
        cursor:pointer;
        font-weight:900;
        color:var(--text);
        text-align:left;
        text-decoration:none;
      }
      .side-item:hover{
        border-color: rgba(236,36,42,.25);
        box-shadow: 0 14px 30px rgba(15,17,91,.10);
        background: rgba(255,255,255,.78);
      }
      .chev{ color: rgba(15,17,91,.55); }

      .side-foot{
        margin-top:14px;
        padding-top:10px;
        border-top:1px solid var(--border);
      }
      .side-help{
        border:1px solid var(--border);
        border-radius:14px;
        background: rgba(255,255,255,.78);
        padding:12px;
      }
      .side-help .muted{ color:var(--muted); font-size:13px; margin-top:6px; }

      @media (prefers-reduced-motion: reduce){
        .side-menu, .side-panel{ transition:none; }
      }





div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}


      .side-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;

  width: min(1100px, calc(var(--col-w) * var(--cols, 1)));

  background: #fff;
  z-index: 9999;

  transform: translateX(-105%);
  transition: transform .25s ease, width .2s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);

  display: flex;
  flex-direction: column;
}

.side-menu.open {
  transform: translateX(0);
}

.side-panels {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--col-w);
  overflow: auto;
}

.menu-col {
  border-right: 1px solid rgba(0,0,0,.06);
  padding: 16px;
}

.menu-head {
  font-weight: 600;
  margin-bottom: 12px;
}

.menu-item {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.menu-item:hover {
  background: rgba(0,0,0,.05);
}

.menu-item.active {
  background: rgba(0,0,0,.08);
}
/* Mobile: levels replace previous (no multi-column widening) */
@media (max-width: 640px) {
  .side-menu {
    width: 100vw !important;     /* always full screen on mobile */
    max-width: 100vw;
  }

  .side-panels {
    display: block;              /* no columns grid */
    overflow: auto;
  }

  .menu-col {
    border-right: none;
    padding: 14px;
  }
}
.mi {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.menu-item .label,
.menu-link .label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero {
  padding: 0;
}

.hero .swiper-slide {
  display: flex;
  align-items: center;
  min-height: 500px; /* adjust */
  background: white;
}


.hero-slide {
  position: relative;
  overflow: hidden;
}

/* Blurred background layer */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/ozadje-test.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.1); /* prevents edge cropping from blur */
  z-index: 0;
}

/* Keep content above blur */
.hero-slide .container {
  position: relative;
  z-index: 1;
}


.carousel{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.car-btn{
  height: 44px;
  width: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.car-viewport{
  overflow: hidden; /* hides the extra cards */
}

.car-track{
  display: flex;
  gap: 14px;
  scroll-behavior: smooth;
  overflow-x: auto;             /* enables trackpad/touch scroll */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
  scroll-snap-type: x mandatory;
  padding: 4px;                 /* avoids shadow clipping */
}
.car-track::-webkit-scrollbar{ display:none; }

/* cards sizing: 1 visible on mobile */
.car-track > .card{
  flex: 0 0 calc(100% - 0px);
  scroll-snap-align: start;
}

/* 4 visible on desktop */
@media (min-width: 900px){
  .car-track > .card{
    flex: 0 0 calc((100% - 14px * 2) / 3); /* 2 gaps between 3 cards */
  }
}

/* Desktop / tablet: banner left, products right */
.slider-wrapper{
  display:flex;
  gap:20px;
  align-items:stretch;
}

/* Left banner column */
.side-image{
  flex:0 0 260px;          /* banner width on desktop */
  border-radius:12px;
  overflow:hidden;         /* keeps rounded corners */
}

.side-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Products column */
.carousel{
  flex:1;
  min-width:0;             /* IMPORTANT: prevents flex overflow */
}

/* Mobile: stack into 2 rows (banner then products) */
@media (max-width: 768px){
  .slider-wrapper{
    flex-direction:column;
    gap:14px;
  }

  .side-image{
    flex:0 0 auto;
    width:100%;
  }

  .side-image img{
    height:auto;           /* natural height on mobile */
    aspect-ratio: 16 / 9;  /* nice banner shape; remove if you dislike */
    object-fit:cover;
  }
}

.home-cards .cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.home-cards .card{
  position:relative;
  aspect-ratio:1/1;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  padding:20px;
  color:var(--card);
  font-size:22px;
  font-weight:600;
  overflow: hidden;
  filter: drop-shadow(0px 0px 5px rgba(15, 17, 91, .20));
}

.home-cards .card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, var(--text), transparent);
  border-radius:var(--r);
}

.home-cards .card-text{
  position:relative;
  z-index:2;
}

@media (max-width:900px){
  .home-cards .cards{
    grid-template-columns:repeat(2,1fr);
  }
}


    /* Corner NEW ribbon */
.ribbon {
        position: absolute;
        top: 50px;
        right: -60px; /* adjust if needed */
        background: #e63946;
        color: white;
        padding: 10px 50px;
        font-size: 25px;
        font-weight: bold;
        transform: rotate(45deg);
        box-shadow: 0 2px 4px rgba(0,0,0,0.25);
        z-index: 10;
        
    }
@media (max-width: 490px) {
.ribbon {
        top: 25px;
        right: -35px;
        padding: 6px 30px;
        font-size: 14px;
    }
}


#emaling {
  background: #f6f7fb;
  border-radius: var(--r);
  padding: 10px 10px 16px 16px;
  text-align: left;
  height: 100%;
}
#help {
  background: #f6f7fb;
  border-radius: var(--r);
  padding: 10px 10px 16px 16px;
  text-align: left;
  height: 100%;
}
#help .material-symbols-outlined {
  padding: 5px;
  background-color: var(--accent);
  color: var(--bg);
  border-radius: 100px;
}

#emailing .btn-primary {
  padding:5px;
  text-align: center;
}
#emailing-sub {
  font-size: 12px;
}

.prijava {
  border-radius: var(--r);
  margin-bottom: 16px;
  margin-top: 16px;
  height: 44px;
  vertical-align: middle;
  align-content: center !important;
  width: 100%;
  background: var(--accent);
}

.footer-grid-emailing h2 {
  margin-bottom: 16px;
  font-size: 27px;
  font-weight: 900;
}
.footer-grid-emailing span {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 300;
}
.footer-grid a {
  font-weight: 300;
}
#help h3 {
  color: var(--text);
}
#help span {
  font-size:10px;
}
#payments {
  text-align: left;
  height: 100%;
  color: var(--text-white);
  font-weight: 300;
}
#payments img {
  max-height: 25px;
}
#payments h2 {
  color:var(--text-white);
  padding-bottom: 16px;
}
#socials{
  text-align: left;
  height: 100%;
}
#socials img {
  max-height: 40px;
}
#socials h2 {
  color:var(--text-white);
  padding-bottom: 16px;
}