/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
/* ----- Perfume Notes block ----- */
.wc-perfume-notes { 
  margin: 28px 0 8px; 
  text-align: center;
}

.wc-perfume-notes__title { 
  font-size: 1.5rem; 
  line-height: 1.2; 
  font-weight: 700; 
  margin-bottom: 14px; 
}

/* Grid */
.wc-perfume-notes__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  justify-items: center;
}

@media (max-width: 992px) {
  .wc-perfume-notes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .wc-perfume-notes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Each note item */
.wc-perfume-notes__item { 
  text-align: center; 
}

/* Rounded wrapper: clips the image so border radius always works */
.wc-perfume-notes__thumb {
  width: 110px;           /* adjust size as needed */
  height: 110px;
  display: inline-block;
  border-radius: 18px;
  overflow: hidden;       /* critical: clips image to rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  vertical-align: top;
}

/* The image itself; we neutralize theme overrides */
.wc-perfume-notes__img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  border-radius: 0 !important; /* rounding handled by wrapper */
}

/* Optional placeholder if a note has no image */
.wc-perfume-notes__img--placeholder {
  background: #f5f5f7;
  color: #111;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label under each note */
.wc-perfume-notes__label { 
  margin-top: 8px; 
  font-size: .95rem; 
  color: #333; 
}

/* Extra specificity for single product pages (helps override Woodmart) */
.single-product .wc-perfume-notes__thumb img,
.single-product .wc-perfume-notes__img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover;
}