/* Default Pages */
.page-template-default {
  .bento-hero-section h1 {margin-block-start: -24vh !important}
}
.wp-block-categories-list {padding-inline-start: 0 !important}


/*Page Aprops*/
.bento-categories-grid > ul {
  display: grid !important;
  gap: clamp(10px, 2vw, 24px) !important;
}

.bento-categories-grid .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
  padding: 20px;
  min-height: 350px !important;
  position: relative;
}

.bento-categories-grid .wc-block-product-categories-list--depth-0 li {
  list-style-type: none; ;
  background-color: var(--wp--preset--color--base);
  border-radius: 16px
}
.bento-categories-grid .wc-block-product-categories-list--depth-0 li a {
  font-size: clamp(16px, 2vw, 25px);
  font-weight: bold;
}

.bento-categories-grid .wc-block-product-categories-list--depth-0 li ul {
  padding-inline-start: 20px;
}

.bento-categories-grid .wc-block-product-categories-list--depth-0 li ul li,
.bento-categories-grid .wc-block-product-categories-list--depth-0 li ul li a {
  list-style-type: disc;
  font-size: clamp(16px, 1vw, 20px) !important;
  line-height: 1.7;
}

.bento-categories-grid .wc-block-product-categories-list--depth-0 li ul li a {font-weight: normal !important;}

.bento-categories-grid .wc-block-product-categories-list--depth-1 {padding-inline-start: 22px !important}

.bento-categories-grid .wc-block-product-categories-list--depth-1 li {list-style-type: disc !important}

.bento-categories-grid .wc-block-product-categories-list--depth-1 li a {
  font-size: clamp(11px, 1vw, 16px) !important;
  font-weight: normal !important;
  color: var(--wp--preset--color--accent-3) !important;
  line-height: 1.7;
}

/* adjust size/spacing to taste */
.wc-block-product-categories-list-item img {
  max-width: 100%;
  width: 100%;
  height: 35%;
  display: block;
  margin: 0 0 14px;
  object-fit: cover;
  border-radius: 8px;
}

.parent-cat-action {
  position: absolute;
  bottom: 27px;
}

.parent-cat-button {
  font-size: 12px !important;
  color: var(--wp--preset--color--accent-2);
}

/* Page Nos produits */
.our-products-terms {
  display: grid;
  gap: clamp(15px, 2vw, 30px);
  list-style: none;
}

.our-products-terms li a{
  padding: clamp(10px, 1vw, 15px) clamp(15px, 2vw, 25px);
  border: 1px solid #004d9f8a;
  border-radius: 16px;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--wp--preset--color--accent-2);
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.our-products-terms li a img {width: 14px;}

/* Hide only top-level category images */
.wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item > a > .wc-block-product-categories-list-item__image {
    display: none !important;
}
/* make the name a flex container and add the icon before the text */
.our-products-3-grid .wc-block-product-categories-list--depth-0
  > .wc-block-product-categories-list-item
  > a
  > .wc-block-product-categories-list-item__name {
  margin-top: 30px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;           /* spacing between icon and text */
  font-weight: bold;  /* your rule */
  white-space: nowrap;/* keep on one line */
  min-width: 0;       /* helps with truncation if used in flex containers */
}

/* the icon */
.our-products-3-grid .wc-block-product-categories-list--depth-0
  > .wc-block-product-categories-list-item
  > a
  > .wc-block-product-categories-list-item__name::before {
  content: "";
  display: inline-block;
  width: 20px;                /* adjust size */
  height: 20px;
  background-image: url("https://sibea.dz/wp-content/themes/sibea_theme/assets/images/menu.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex: 0 0 20px;
}
.our-products-3-grid .wc-block-product-categories-list--depth-1 {
  display: grid;
  gap: clamp(10px, 2vw, 20px);
}

.our-products-3-grid .wc-block-product-categories-list--depth-0 li,
.our-products-3-grid .wc-block-product-categories-list--depth-1 li {
  margin-inline-start: 0 !important;
}
.our-products-3-grid .wc-block-product-categories-list--has-images .wc-block-product-categories-list-item__image {
  display: contents !important;
}
.our-products-3-grid .wc-block-product-categories-list--has-images .wc-block-product-categories-list-item__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 90%);
    z-index: 1;
    border-radius: 8px;
}

/* ensure the anchor behaves like a block (so absolute positioning is relative to the image area) */
.our-products-3-grid .wc-block-product-categories-list--depth-1 li a {
  position: relative;
  display: block;
}

/* position the name 20px from the bottom and force one-line display */
.our-products-3-grid .wc-block-product-categories-list--depth-1 li a .wc-block-product-categories-list-item__name {
  position: absolute;
  bottom: 12px;
  left: 6px;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between; /* text at left, chevron at right */
  gap: 8px;

  padding: 0 12px;     /* horizontal padding so text/chevron don't touch edges */
  color: #fff;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);

  white-space: nowrap; /* keep one line */
  font-size: clamp(13px, 1.6vw, 16px);
}

/* add the chevron on the right */
.our-products-3-grid .wc-block-product-categories-list--depth-1 li a .wc-block-product-categories-list-item__name::after {
  content: "›";               /* you can change to ">" or "»" */
  display: inline-block;
  margin-left: 8px;
  font-size: 30px;
  transform: translateZ(0);   /* crisp rendering */
}

/* optional: little hover animation for the chevron */
.our-products-3-grid .wc-block-product-categories-list--depth-1 li a:hover .wc-block-product-categories-list-item__name::after {
  transform: translateX(4px);
  transition: transform .18s ease;
}

/* Contact Page */
.page-id-134 {
  & section {
    grid-template-columns: 1fr;
    & input, & textarea {
      width: 100%;
      display: flex;
      padding: 16px 24px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 8px
    };
    & input:focus, & textarea:focus {outline: none}
  };
  & .wp-block-button a {vertical-align: middle; & img {vertical-align: inherit}}
}
.page-id-134 #bento-contact-form .wp-block-button__link {background-color: var(--wp--preset--color--accent-2) !important;}
.page-id-134 .bento-contact-flex {
  display: flex;
  justify-content: space-between;
}
.page-id-134 .bento-contact-flex .form-group {width: 44%}

.page-id-134 .wp-block-image img {vertical-align: inherit !important}

@media (width <= 599px) {
  .bento-categories-grid > ul,
  .our-products-terms,
  .our-products-3-grid .wc-block-product-categories-list--depth-1 {grid-template-columns: repeat(1, 1fr) !important}
  .page-id-134 .bento-contact-flex .form-group {width: 40%}
}

@media (width >= 600px) {.bento-categories-grid > ul,
  .our-products-terms,
  .our-products-3-grid .wc-block-product-categories-list--depth-1 {grid-template-columns: repeat(2, 1fr) !important;}
}

@media (width >= 992px) {
    .bento-categories-grid > ul,
    .our-products-terms,
    .our-products-3-grid .wc-block-product-categories-list--depth-1 {grid-template-columns: repeat(3, 1fr) !important}
}

@media (width >= 1200px) {
  .page-id-134 section {grid-template-columns: repeat(2, 1fr);}
  .bento-categories-grid > ul,
  .our-products-terms {grid-template-columns: repeat(4, 1fr) !important}
}




.sibea-cat-section {
    margin-bottom: 40px;
}

/* Header Styling */
.sibea-cat-header {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: #00234B;
    margin-bottom: 20px;
    border-bottom: none;
}

.sibea-header-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    display: inline-block;
}

/* Grid Layout - 3 Columns */
.sibea-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Responsive: 1 column on mobile */
@media (max-width: 768px) {
    .sibea-product-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Styling */
.sibea-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.sibea-card:hover {
    transform: translateY(-5px);
}

.sibea-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Background Image */
.sibea-card-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* Slight zoom on hover */
.sibea-card:hover .sibea-card-bg {
    transform: scale(1.05);
}

/* The Dark Gradient Overlay */
.sibea-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
}

/* Text Styling */
.sibea-prod-title {
    color: #fff;
    font-size: 18px;
}

.sibea-arrow-icon {
    color: #fff;
    font-size: 32px;
    line-height: 1;
    font-weight: 300;
}