/* Custom CSS Extensions for Micro-Interactions */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background-color: #eeefe9;
  color: #4d4f46;
}

/* Micro interaction bouncy transition */
a, button, .gallery-item, .faq-item {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* FAQ Active Icon Rotation */
.faq-toggle.active i {
  transform: rotate(45deg);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #eeefe9;
}
::-webkit-scrollbar-thumb {
  background: #bfc1b7;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9b9c92;
}
/* [POSTFIX] Enforce uniform gallery images - auto-injected */
img[src*="gallery_"],
[id*="gallery"] img:not([class*="avatar"]):not([class*="logo"]),
[class*="gallery"] img:not([class*="avatar"]):not([class*="logo"]),
[id*="portfolio"] img:not([class*="avatar"]):not([class*="logo"]),
[class*="portfolio"] img:not([class*="avatar"]):not([class*="logo"]) {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Parent containers of gallery images: enforce aspect-ratio on the wrapper */
[id*="gallery"] [class*="overflow-hidden"],
[class*="gallery"] [class*="overflow-hidden"],
[id*="portfolio"] [class*="overflow-hidden"],
[class*="portfolio"] [class*="overflow-hidden"] {
  aspect-ratio: 4 / 3 !important;
}

/* Except when inside lightbox/modal */
[id*="modal"] img,
[class*="modal"] img,
[id*="lightbox"] img,
[class*="lightbox"] img,
.modal img,
.lightbox img {
  aspect-ratio: auto !important;
  width: auto !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Ensure the grid wrapper doesn't use bento grid heights */
[id*="gallery"] [class*="grid"],
[class*="gallery"] [class*="grid"],
[id*="portfolio"] [class*="grid"],
[class*="portfolio"] [class*="grid"] {
  grid-auto-rows: auto !important;
}

/* [POSTFIX] Enforce small uniform sizes for images inside the shopping cart/basket - auto-injected */
[id*="cart"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="cart"] img:not([class*="logo"]):not([class*="avatar"]),
[id*="basket"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="basket"] img:not([class*="logo"]):not([class*="avatar"]),
[id*="bag"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="bag"] img:not([class*="logo"]):not([class*="avatar"]),
.cart-item img,
.basket-item img,
[class*="cart-item"] img,
[class*="basket-item"] img {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  aspect-ratio: 1 / 1 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Ensure cart items are laid out horizontally in a flex row */
.cart-item,
.basket-item,
[class*="cart-item"],
[class*="basket-item"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

/* Prevent text overflow in cart items (allows text to wrap) */
.cart-item > div,
.basket-item > div,
[class*="cart-item"] > div,
[class*="basket-item"] > div {
  min-width: 0 !important;
}

/* Let the title and price wrap gracefully */
.cart-item h1, .cart-item h2, .cart-item h3, .cart-item h4, .cart-item h5, .cart-item p, .cart-item span,
.basket-item h1, .basket-item h2, .basket-item h3, .basket-item h4, .basket-item h5, .basket-item p, .basket-item span,
[class*="cart-item"] h1, [class*="cart-item"] h2, [class*="cart-item"] h3, [class*="cart-item"] h4, [class*="cart-item"] h5, [class*="cart-item"] p, [class*="cart-item"] span,
[class*="basket-item"] h1, [class*="basket-item"] h2, [class*="basket-item"] h3, [class*="basket-item"] h4, [class*="basket-item"] h5, [class*="basket-item"] p, [class*="basket-item"] span {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ensure action buttons don't shrink */
.cart-item button,
.basket-item button,
[class*="cart-item"] button,
[class*="basket-item"] button {
  flex-shrink: 0 !important;
}