@font-face {
    font-family: 'janda_elegant_handwritingRg';
    src: url('fonts/JandaElegantHandwriting-webfont.eot');
    src: url('fonts/JandaElegantHandwriting-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/JandaElegantHandwriting-webfont.woff2') format('woff2'),
         url('fonts/JandaElegantHandwriting-webfont.woff') format('woff'),
         url('fonts/JandaElegantHandwriting-webfont.ttf') format('truetype'),
         url('fonts/JandaElegantHandwriting-webfont.svg#janda_elegant_handwritingRg') format('svg');
    font-weight: normal;
    font-style: normal;

}
header  #rc{
    font-family: 'janda_elegant_handwritingRg', sans-serif;
    font-size: 3.4em;
    color: #0C4934;
    font-weight: 500;
    text-align: center;
}
:root{
      --brand:#0b6efd; --muted:#6b7280; --bg:#f7fafc; --card:#ffffff; --radius:12px;
      --shadow: 0 6px 18px rgba(12, 15, 30, 0.06);
      --gap:16px;
      --max-width:1100px;
    }
    *{box-sizing:border-box}
    body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:#0f172a; line-height:1.4}
    .wrap{max-width:var(--max-width); margin:28px auto; /*padding:20px*/}
    header{ align-items:center; gap:16px; margin-bottom:18px}
    header h1{margin:0; font-size:20px}
    .topbar{display:flex; gap:12px; margin-bottom:18px; align-items:center}


/*     
    .controls{display:grid; grid-template-columns: 280px 1fr; gap:16px}
.controls select {  width: 100%;  padding: 8px;  border: 1px solid #ccc;  border-radius: 6px;  font-size: 14px;}
.filter-toggle {  display: none;  background-color: #0b6efd;  color: #fff;  padding: 10px 16px;  border: none;  border-radius: 6px;  font-size: 15px;  cursor: pointer;  position: fixed;  bottom: 20px;  right: 20px;  box-shadow: 0 4px 10px rgba(0,0,0,0.2);  z-index: 999;}
.filter-toggle:hover {  background-color: #084fc2;} */
    /* filter panel */
    /* .panel{background:var(--card); padding:14px; border-radius:var(--radius); box-shadow:var(--shadow)}
    .panel h3{margin:0 0 8px 0; font-size:14px}
    .filter-group{margin-bottom:12px}
    .filter-group label{display:flex; gap:8px; align-items:center; font-size:13px}
    .swatches{display:flex; gap:8px; flex-wrap:wrap}
    .swatch{width:24px; height:24px; border-radius:6px; border:2px solid rgba(15,23,42,0.06); cursor:pointer}
    .swatch.small{width:18px;height:18px}
    .search{width:100%; padding:8px 10px; border-radius:8px; border:1px solid #e6e9ee} */

    /* product area */
    .grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px}
    .card{background:var(--card); border-radius:12px; padding:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px}
    .thumb{height:275px; border-radius:8px; background-size:cover; background-position:center}
    .meta{display:flex; justify-content:space-between; align-items:center}
    .title{font-weight:600; font-size:15px}
    .price{color:var(--brand); font-weight:700}
    .tags{font-size:12px; color:var(--muted)}
    .actions{display:flex; gap:8px}
    button.btn{background:var(--brand); color:white; border:none; padding:8px 10px; border-radius:10px; cursor:pointer}
    button.ghost{background:transparent; border:1px solid #e6e9ee; padding:8px 10px; border-radius:10px; cursor:pointer}

    /* small utilities */
    .row{display:flex; gap:8px; align-items:center}
    .muted{color:var(--muted); font-size:13px}
    .clear{background:transparent; border:0; color:var(--brand); cursor:pointer}

    @media (max-width:880px){
      .controls{grid-template-columns: 1fr;}
      .panel{order:2}
    }
    /* checkbox styles */
    input[type=checkbox]{width:16px;height:16px}
    .no-results{padding:40px; text-align:center; color:var(--muted)}

    /* modal */
#modalTitle{text-align:center;}
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; justify-content:center; align-items:center; z-index:1000;}
.modal.active{display:flex;}
.modal-content{background:white; border-radius:12px; padding:20px; width:90%; max-width:600px; box-shadow:var(--shadow); position:relative; height:90%;}
.modal-content img{width: 100%;    border-radius: 10px;    margin: 0 auto;    display: inline-block;}
.modal h2{margin-top:0;}
#modalMainImg{margin-bottom:2em;}
.close-btn{position:absolute; top:0px; right:10px; background:none; border:none; font-size:20px; cursor:pointer;}
.modal-gallery{ gap:8px;}
.modal-gallery img{width:30%; border-radius:8px; cursor:pointer;}
#model-img-container{width:70%;float:left;}
#modal-details-container{width:30%; float:left;font-size:0.8em; margin-bottom: 2em;} 
.zoom-modal, .confirm-modal {display: none;position: fixed;z-index: 2000;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.9);justify-content: center;align-items: center;}
.zoom-modal img {max-width: 90%;max-height: 90%;cursor: zoom-out;}
.size-select{height: 2em; width: 4em;font-size: 1.2em; height:2em;}
.main-catalog{width: 100%;}
/* === Base layout === */
.controls {  display: flex;  gap: 24px;  background: #fff;  border-radius: 12px;  box-shadow: 0 2px 8px rgba(0,0,0,0.05);  padding: 20px;  position: relative;
}

/* Panel section (filters sidebar) */
.controls .panel {  width: 280px;  flex-shrink: 0;}

.controls h3 {  font-size: 16px;  font-weight: 600;  color: #222;  margin-bottom: 8px;}

.controls h4 {  font-size: 14px;  font-weight: 500;  color: #333;}

.filter-group {  margin-bottom: 16px;}

.filter-group label {  display: block;  font-size: 14px;  color: #444;  margin-bottom: 6px;}

.filter-group input {  margin-right: 6px;}

.search {  width: 100%;  padding: 8px 10px;  border-radius: 6px;  border: 1px solid #d9dee3;  font-size: 14px;}

/* Reset button */
#resetBtn, #filter-close-btn {  background: #f6f7f9;  border: 1px solid #d9dee3;  border-radius: 6px;  padding: 5px 10px;  font-size: 13px;  cursor: pointer;}
#filter-close-btn{  display: none;}
#resetBtn:hover, #filter-close-btn:hover { background: #eef0f3; }

/* Main product grid */
#catalog.grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));  gap: 16px;}

/* Close button */
/* .close-btn {
  display: none;
  border: none;
  background: none;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 12px;
} */

/* Floating toggle (mobile only) */
.filter-toggle {
  display: none;
  background-color: #0b6efd;
  color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-left: 5px;
}
.filter-toggle:hover { background-color: #094ccc; }
.tax{
  font-size: 0.6em;
}
.section{
  padding: 10px;
}
.hidden{
  display: none !important;
}
/* === Responsive (Mobile) === */
@media (max-width: 768px) {
  header #rc {
    font-size: 2.4em;
  }
  .controls {
    flex-direction: column;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .controls .panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    /* max-width: 340px; */
    height: 100%;
    background: #fff;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0,0,0,0.25);
    transition: left 0.3s ease;
    z-index: 1000;
    padding: 20px;
  }

  .controls.active .panel {
    left: 0;
  }

  .controls #filter-close-btn {
    display: block;
  }

  .filter-toggle {
    display: block;
  }

  #catalog.grid {
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 12px;
    padding: 16px;
  }
}