body.jewelry-body .page-width {
    max-width: 1600px;
}
/* =========================================================
   HEADER PILL & FILTERS
   ========================================================= */
.shp-jewel-app .top-bar { margin-bottom: 18px; }

/* =========================================================
   DIAMOND ORIGIN TOGGLE
   ========================================================= */
/* .diamond-toggle {
  background: var(--el-btn-bg);
  border: 1px solid var(--el-btn-border);
} */

/* .diamond-seg {
  font-size: var(--el-btn-text-size);
  color: var(--el-btn-text-color);
} */

/* Active State */
.shp-jewel-app .diamond-seg.is-active {
  background: var(--el-btn-bg-active);
  color: var(--el-btn-text-active);
}

/* Hover State */
.shp-jewel-app .diamond-seg:hover:not(.is-active) {
  background: var(--el-btn-bg-hover);
  color: var(--el-btn-text-hover);
}

.shp-jewel-app .seg-icon svg {
  width: var(--el-btn-icon-size);
  height: var(--el-btn-icon-size);
}

.shp-jewel-app .diamond-toggle .seg-icon svg path { fill: var(--el-btn-icon-color); }
.shp-jewel-app .diamond-seg.is-active .seg-icon svg path { fill: var(--el-btn-icon-active); }


.shp-jewel-app .metal-pill.active {
  border: 2px solid var(--filter-active-border);
}



.shp-jewel-app .product-description__price {
  color: var(--card-price-color);
  font-size: var(--card-price-size);
}

.shp-jewel-app .product-description-variation-details {
   font-size: var(--card-sub-size);
  color: var(--card-sub-color);
}

/* =========================================================
   PRODUCT PAGE & BUTTONS (New)
   ========================================================= */
.shp-jewel-app .product-title { color: var(--pd-title-color); font-size: var(--pd-title-size); }
.shp-jewel-app .product-subtitle { color: var(--pd-sub-color); font-size: var(--pd-sub-size); }

.shp-jewel-app .add-to-cart {
  background: var(--cart-btn-bg);
  color: var(--cart-btn-text);
  font-size: var(--cart-btn-text-size);
}


/* page container */
.shp-jewel-app .page-width--narrow{ max-width:85% !important; padding:0; }

.shp-jewel-app .container{ max-width:1600px; margin:auto; width:100%; padding:20px; }

.shp-jewel-app .shade-box{
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(35, 31, 32, 10%);
  background-blend-mode: multiply;
  margin-top: 15px;
  margin-bottom: 50px !important;
  background:#FFF;
}

/* =========================================================
   HEADER PILL (new)
   ========================================================= */
.shp-jewel-app .top-bar{ margin-bottom:18px; }

.shp-jewel-app .filter-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:18px 22px;
  border-radius:12px;
  background: #FFF;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.shp-jewel-app .filter-section{
  display:flex;
  flex-direction:column;
}

.shp-jewel-app .filter-title{
  color: var(--filter-title-color);
  /* background: var(--filter-title-bg); */
  font-family: var(--font-body-family);
  font-size: var(--filter-title-size);
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 0 10px 0px;
}

.shp-jewel-app .filter-divider{
  width:1px;
  align-self:stretch;
  background:rgba(0,0,0,.12);
}

/* Right side (metal) alignment */
.shp-jewel-app .filter-section.metal{
  align-items:flex-start;
  min-width:520px;
}

/* =========================================================
   DIAMOND ORIGIN TOGGLE
   ========================================================= */
.shp-jewel-app .diamond-type{ display:flex; align-items:center; gap:0; }

.shp-jewel-app .diamond-toggle{
  display:inline-flex;
  align-items:center;
  border-radius:12px;
  overflow:hidden;
  background: var(--el-btn-bg);
  border: 1px solid var(--el-btn-border);
}

.shp-jewel-app .diamond-seg{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  cursor:pointer;
  user-select:none;
  font-weight:normal;
  line-height:1;
  font-size: var(--el-btn-text-size);
  color: var(--el-btn-text-color);
  text-transform: uppercase;
  white-space:nowrap;
  position:relative;
}

.shp-jewel-app .diamond-seg input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* .diamond-seg.is-active{
  background:var(--toggle-yellow);
  color:var(--toggle-blue);
} */

.shp-jewel-app .diamond-divider{
  width:1px;
  height:22px;
  background:rgba(255,255,255,.25);
}

.shp-jewel-app .seg-icon{
  width:27px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* .seg-icon svg{ width:40px; height:40px; display:block; } */

/* Force only toggle SVGs to follow currentColor */
/* .diamond-toggle .seg-icon svg path{ fill:currentColor; } */

/* =========================================================
   METAL TYPE (new look)
   ========================================================= */
.shp-jewel-app .metal-bar{
  display:flex;
  gap:18px;
  flex-wrap:nowrap;
}

.shp-jewel-app .metal-pill{
  min-width:108px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  border:2px solid #dcdcde;
  /* box-shadow:0 6px 10px rgba(0,0,0,.12); */
  transition:transform .12s ease, box-shadow .12s ease;
  background:#fff;
}

.shp-jewel-app .metal-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 16px rgba(0,0,0,.14);
}

.shp-jewel-app .metal-pill.active{
  border:1px solid #2c3b5b;
  box-shadow:0 12px 18px rgba(0,0,0,.16);
}

/* Metal fills */
.shp-jewel-app .w{ background:linear-gradient(180deg,#f3f3f3 0%, #cfcfcf 100%); }
.shp-jewel-app .y{ background:linear-gradient(180deg,#fff2cc 0%, #e4b84d 100%); }
.shp-jewel-app .r{ background:linear-gradient(180deg,#ffe2d6 0%, #ec8a55 100%); }

/* =========================================================
   PRODUCT GRID + CARD (UPDATED to 4-column grid)
   ========================================================= */

/* IMPORTANT: .row ko grid bana diya */
.shp-jewel-app .row{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* Desktop: 4 in a row */
  gap:20px;
  margin-top:24px;
  align-items:stretch;
}

/* Card full-width inside grid cell */
.shp-jewel-app .card{
  background:#fff;
  border-radius:12px;
  width:100% !important;         /* fixed width remove */
  max-width:100%;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.shp-jewel-app .card a{ text-decoration:none; color:inherit; }

.shp-jewel-app .card img{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}

.shp-jewel-app .products-blurb{
    padding: 10px 14px 0px;
    margin: 0;
    font-weight: 600;
    height: 70px;
    font-weight: normal;
    overflow: hidden;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: var(--heading-font-family) !important;
    font-size: var(--card-title-size);
    color: var(--card-title-color);


}

.shp-jewel-app .product-description__price h5 span{
  font-weight: 500;
  font-size: 13px;
  opacity: 0.8;
}

.shp-jewel-app .col-xs-12.col-sm-12.product-description__price{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  background: #f1f1f1;
  /* color: var(--card-price-color); */
  /* font-size: var(--card-price-size); */
  font-weight:700;
  font-family: var(--sub-heading-font-family);
}

.shp-jewel-app .col-xs-12.col-sm-12.product-description__price p {
    margin: 0;
    /* font-size: var(--card-price-size); */
    font-weight: bold;
    /* color: var(--card-price-color); */
    font-family: var(--sub-heading-font-family);
}
.shp-jewel-app .col-xs-12.col-sm-12.product-description__price p.price {
  color: var(--card-price-color);
  font-size: var(--card-price-size);
}
.shp-jewel-app .col-xs-12.col-sm-12.product-description__price p.price-weight {
    font-weight: 400;
    font-size: var(--card-body-font);
    color: var(--card-body-color);
    margin: 0;
}
.price span {
   font-size: var(--card-sub-size) !important;
  color: var(--card-sub-color) !important;
  font-family: var(--sub-heading-font-family) !important;
  vertical-align: middle;
}

.shp-jewel-app .col-xs-12.col-sm-12.product-description-variation-details.d-flex.justify-space-between.c_stud_product-description-variation-details{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 14px 5px;
  font-size: var(--card-sub-size);
  color: var(--card-sub-color);
  font-family: var(--sub-heading-font-family);
}

.shp-jewel-app .col-xs-12.col-sm-12.product-description-variation-details.d-flex.justify-space-between.c_stud_product-description-variation-details p{margin: 0;}

/* =========================================================
   Responsive (UPDATED for grid columns)
   ========================================================= */

/* Large tablets / small desktop => 3 columns */
@media (max-width: 1200px){
  .shp-jewel-app .row{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablets => 2 columns */
@media (max-width: 900px){
  .shp-jewel-app .row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile => 1 column */
@media (max-width: 560px){
  .shp-jewel-app .row{
    grid-template-columns: 1fr;
  }
}

/* Existing filter header responsive (same as your code) */
@media (max-width: 1100px){
  .shp-jewel-app .filter-pill{
    border-radius:24px;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .shp-jewel-app .filter-divider{ width:100%; height:1px; }
  .shp-jewel-app .filter-section.metal{ min-width:unset; }
  .shp-jewel-app .metal-bar{ flex-wrap:wrap; }
}