/* ====================================================== SHOP PAGE ====================================================== */
  .view-shop{
     padding:70px 0;
   }

  /* ====================================================== PRODUCT GRID ====================================================== */
  .view-shop .view-content{
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:32px;
   }
   .view-shop .views-row{
     margin:0;
   }

  /* ====================================================== CARD ====================================================== */
  .shop-product-card{
     background:var(--card-bg);
     border:1px solid var(--border);
     border-radius:18px;
     overflow:hidden;
     transition:.35s ease;
     height:100%;
     box-shadow:var(--shadow);
   }
   .shop-product-card:hover{
     transform:translateY(-8px);
   }

  /* ====================================================== IMAGE ====================================================== */
  .shop-product-card .shop-product-image{
     display:block;
     width:100%;
     height:320px;
     overflow:hidden;
     border-radius:16px 16px 0 0;
   }
   .shop-product-card .shop-product-image img{
     display:block;
     width:100% !important;
     height:100% !important;
     object-fit:cover;
   }
   .shop-product-card:hover img{
     transform:scale(1.08);
   }
   /* Handle Drupal field wrappers */ .shop-product-image .field, .shop-product-image .field__item {
     width: 100%;
     height: 100%;
   }

  /* ====================================================== CONTENT ====================================================== */
  .shop-product-content{
     padding:22px;
   }

  /* ====================================================== BRAND ====================================================== */
  .shop-product-brand{
     font-size:12px;
     letter-spacing:2px;
     text-transform:uppercase;
     color:var(--primary);
     margin-bottom:12px;
   }

  /* ====================================================== TITLE ====================================================== */
  .shop-product-title{
     margin:0 0 15px;
     line-height:1.4;
   }
   .shop-product-title a{
     text-decoration:none;
     color:var(--text);
     font-size:24px;
     font-weight:700;
     transition:.3s;
   }
   .shop-product-title a:hover{
     color:var(--primary);
   }

  /* ====================================================== PRICE ====================================================== */
  .shop-product-price{
     color:var(--primary);
     font-size:30px;
     font-weight:700;
     margin-bottom:18px;
   }
   /* Hide Drupal Label */ .shop-product-price .field__label{
     display:none;
   }

  /* ====================================================== DESCRIPTION ====================================================== */
  .shop-product-description{
     color:var(--text-secondary);
     font-size:15px;
     line-height:1.8;
   }
   .shop-product-description .field__label{
     display:none;
   }

  /* ====================================================== BRAND LABEL ====================================================== */
  .shop-product-brand .field__label{
     display:none;
   }

  /* ====================================================== RESPONSIVE ====================================================== */
  @media(max-width:1200px){
     .view-shop .view-content{
     grid-template-columns:repeat(3,1fr);
   }
  }
   @media(max-width:992px){
     .view-shop .view-content{
     grid-template-columns:repeat(2,1fr);
   }
  }
   @media(max-width:640px){
     .view-shop .view-content{
     grid-template-columns:1fr;
   }
  }

  /* ============================================ SHOP GRID ============================================ */
  .shop-view{
     display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));
     gap:30px;
   }
   .shop-view > .views-row{
     margin:0;
   }

  /* ============================================ CARD ============================================ */
  .shop-product-card{
     display:flex;
     flex-direction:column;
     height:100%;
     background:var(--bg-card);
     border:1px solid var(--border);
     border-radius:18px;
     overflow:hidden;
   }

  /* ============================================ IMAGE ============================================ */
  .shop-product-image{
     display:block;
     width:100%;
     height:320px;
     overflow:hidden;
   }
   .shop-product-image img{
     display:block;
     width:100%;
     height:100%;
     object-fit:cover;
   }

  /* ============================================ CONTENT ============================================ */
  .shop-product-content{
     padding:20px;
   }

  /* ============================================ shop category grid ============================================ */
  .shop-categories-grid{
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:24px;
     margin-bottom:50px;
   }
   .shop-category-card{
     display:block;
     text-decoration:none;
     background:var(--card-bg);
     border:1px solid var(--border-color);
     border-radius:16px;
     overflow:hidden;
     transition:.3s;
   }
   .shop-category-card:hover{
     transform:translateY(-6px);
   }
   .shop-category-image img{
     /*width:100%;
    */ aspect-ratio:1/1;
     object-fit:cover;
     display:block;
   }
   .shop-category-name{
     padding:16px;
     text-align:center;
     font-size:18px;
     font-weight:700;
     color:var(--text-color);
   }
   /*.views-exposed-form{
     display:none;
   } */
   .shop-categories-view {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     padding: 40px 0;
   }
   .shop-categories-view .views-row {
     width: 180px;
     margin: 0;
   }
   .shop-category-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
   }
   .shop-category-image {
     width: 160px;
     height: 160px;
     overflow: hidden;
     border-radius: 18px;
     border: 2px solid rgba(245,197,66,.2);
   }
   .shop-category-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .shop-category-name {
     margin-top: 12px;
     color: #fff;
     font-size: 18px;
     font-weight: 600;
     text-align: center;
   }
   .shop-categories {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 30px;
     padding: 40px 0;
   }
   .shop-category-item {
     margin: 0;
   }
   .shop-category-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
   }
   .shop-category-image {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border-radius: 16px;
   }
   .shop-category-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .shop-category-name {
     margin-top: 12px;
     text-align: center;
     color: #fff;
     font-weight: 600;
   }


 .shop-categories{

    display:flex;

    gap:24px;

    justify-content:center;

    align-items:flex-start;

    margin:40px 0 60px;

    overflow-x:auto;

    padding-bottom:10px;

}


.shop-category-item{

    flex:0 0 auto;

}


.shop-category-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    transition:.3s;

}


.shop-category-image img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:18px;

    border:2px solid transparent;

    transition:.3s;

}


.shop-category-name{

    margin-top:12px;

    color:var(--text-color);

    font-weight:600;

    font-size:15px;

}


.shop-category-card:hover .shop-category-image img,
.shop-category-card.active .shop-category-image img{

    border-color:var(--primary-color);

    transform:translateY(-4px);

}


.shop-category-card.active .shop-category-name{

    color:var(--primary-color);

}


/* ===========================
   SHOP LAYOUT
=========================== */

.shop-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    padding:50px 0;
}

.shop-sidebar{
    position:sticky;
    top:120px;
    align-self:start;
}

.shop-products .view-content{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* ==========================
   SHOP SIDEBAR
========================== */

.shop-sidebar{
    background:#111;
    border:1px solid #2a2a2a;
    border-radius:18px;
    padding:25px;
}

.shop-sidebar h2,
.shop-sidebar h3{
    font-size:20px;
    margin-bottom:18px;
    color:#fff;
}

.shop-sidebar .facet-item{
    margin-bottom:12px;
}

.shop-sidebar label{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    color:#ddd;
    font-size:15px;
}

.shop-sidebar input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:#d4af37;
}

.shop-sidebar .facet-item:hover label{
    color:#d4af37;
}

@media (max-width:1200px){
    .shop-products .view-content{
        grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width:992px){

    .shop-layout{
        grid-template-columns:1fr;
    }

    .shop-products .view-content{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:640px){

    .shop-products .view-content{
        grid-template-columns:1fr;
    }

}