/**
* File Name: cms-product-card.css
* Domain: Fashion
* Author: UI Team
* Version: 1.0.8
* Last Update: 27 Jan 2026
**/
:root {
  --color-pink: #ffc0cb;
  --color-grey: #333333;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text-white: #ffffff;
  --color-pink-dark: #f061a7;
  --color-pink-magenta: rgb(232, 0, 113);
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 30px;
  /* UI Elements */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --icon-size: 36px;
  --z-index-snackbar: 10;
  /* Icons */
  --icon-wishlist: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.236 20L10.7088 19.5061L3.40816 12.2658C2.93322 11.7856 2.56345 11.213 2.32209 10.5841C2.08074 9.95511 1.97302 9.28336 2.00572 8.61106C2.02807 7.93784 2.19282 7.27683 2.48928 6.67099C2.78574 6.06516 3.20726 5.52806 3.72645 5.09461C4.70809 4.32587 5.94186 3.94582 7.18926 4.02792C8.43666 4.11002 9.60913 4.64844 10.48 5.53911L11.236 6.28981L11.9521 5.54899C12.8225 4.64399 14.0026 4.09542 15.2599 4.01133C16.5173 3.92723 17.7607 4.31369 18.7455 5.09461C19.3795 5.61903 19.869 6.29471 20.1682 7.05832C20.4674 7.82194 20.5666 8.6485 20.4563 9.46054C20.4299 9.65047 20.3286 9.82221 20.1747 9.93799C20.0208 10.0538 19.8269 10.1041 19.6357 10.0779C19.4444 10.0517 19.2715 9.95112 19.1549 9.7983C19.0383 9.64547 18.9877 9.45292 19.014 9.26299C19.0889 8.69472 19.0178 8.11689 18.8074 7.58324C18.597 7.04959 18.254 6.57747 17.8105 6.21079C17.1101 5.67163 16.2333 5.40955 15.3496 5.47523C14.4659 5.54092 13.6381 5.92969 13.0263 6.56638L11.236 8.34436L9.45556 6.57626C8.84378 5.93957 8.016 5.55079 7.13229 5.48511C6.24859 5.41943 5.37175 5.68151 4.67135 6.22067C4.30134 6.51984 3.99992 6.89401 3.78722 7.31816C3.57453 7.74232 3.45547 8.20668 3.438 8.6802C3.41812 9.15159 3.49617 9.622 3.66729 10.0621C3.83841 10.5023 4.09893 10.9027 4.43264 11.2385L11.236 17.9948L13.454 15.8316C13.5898 15.7081 13.7672 15.6395 13.9513 15.6395C14.1355 15.6395 14.3129 15.7081 14.4486 15.8316C14.5752 15.9654 14.6457 16.142 14.6457 16.3255C14.6457 16.509 14.5752 16.6857 14.4486 16.8194L11.3454 19.9111L11.236 20Z' fill='%23001325' fill-opacity='0.92'/%3E%3Cpath d='M18.5051 18C18.3079 18 18.1187 17.9227 17.9783 17.7848C17.8379 17.647 17.7577 17.4596 17.7551 17.2633V15.2449H15.8427C15.7369 15.2572 15.6296 15.2471 15.528 15.2153C15.4264 15.1835 15.3327 15.1306 15.2531 15.0603C15.1735 14.9899 15.1098 14.9036 15.0662 14.807C15.0226 14.7105 15 14.6058 15 14.5C15 14.3942 15.0226 14.2895 15.0662 14.193C15.1098 14.0964 15.1735 14.0101 15.2531 13.9397C15.3327 13.8694 15.4264 13.8165 15.528 13.7847C15.6296 13.7529 15.7369 13.7428 15.8427 13.7551H17.7551V11.8335C17.7428 11.7288 17.7529 11.6228 17.7847 11.5222C17.8165 11.4217 17.8694 11.3291 17.9397 11.2503C18.0101 11.1716 18.0964 11.1086 18.193 11.0655C18.2895 11.0223 18.3942 11 18.5 11C18.6058 11 18.7105 11.0223 18.807 11.0655C18.9036 11.1086 18.9899 11.1716 19.0603 11.2503C19.1306 11.3291 19.1835 11.4217 19.2153 11.5222C19.2471 11.6228 19.2572 11.7288 19.2449 11.8335V13.7551H21.3325C21.5164 13.7764 21.6859 13.8641 21.809 14.0014C21.932 14.1387 22 14.3162 22 14.5C22 14.6838 21.932 14.8613 21.809 14.9986C21.6859 15.1359 21.5164 15.2236 21.3325 15.2449H19.2449V17.2633C19.2449 17.4586 19.167 17.646 19.0282 17.7842C18.8895 17.9224 18.7013 18 18.5051 18Z' fill='%23001325' fill-opacity='0.92'/%3E%3C/svg%3E");
  --icon-wishlist-active: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.8638 3.82041C16.0437 3.1719 15.0142 2.85357 13.9747 2.92708C12.9352 3.00059 11.9598 3.4607 11.2373 4.2183L9.99279 5.50923L8.74829 4.25367C8.03039 3.49084 7.0573 3.02415 6.01769 2.9441C4.97809 2.86404 3.94606 3.17634 3.12173 3.82041C2.68926 4.18521 2.33688 4.63691 2.08704 5.14673C1.8372 5.65655 1.69539 6.21329 1.67066 6.78146C1.64592 7.34964 1.7388 7.91678 1.94337 8.44673C2.14793 8.97669 2.45971 9.45782 2.85881 9.85947L9.99279 17.0834L17.1092 9.90368C17.5166 9.50273 17.8358 9.01981 18.0461 8.48629C18.2565 7.95277 18.3532 7.38058 18.3301 6.80688C18.3069 6.23319 18.1644 5.67082 17.9118 5.15631C17.6592 4.64179 17.3022 4.18664 16.8638 3.82041Z' fill='%23001325' fill-opacity='0.92'/%3E%3C/svg%3E");
  --icon-cart: url('https://images-static.naikaa.com/media/wysiwyg/uiTools/2025-1/shopping-bag.svg');
}
/* Snackbar styling */
#snackbar {
  max-width: 360px;
  width: 90%;
  visibility: hidden;
  background-color: var(--color-black);
  color: var(--color-text-white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md) var(--spacing-sm);
  position: fixed;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index-snackbar);
  transition: visibility 0.3s ease, background-color 0.3s ease;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0px;
}
#snackbar .snackbar-message {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0px;
}
#snackbar .view-bag {
  text-decoration: none;
  color: inherit;
}
#snackbar.show {
  visibility: visible;
  animation: fadein 0.3s, fadeout 0.3s 3s;
}
#snackbar.success {
  background-color: var(--color-black);
}
#snackbar.error {
  background-color: var(--color-black);
}
.action-button {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  border-radius: var(--border-radius-sm);
  background-origin: content-box;
  padding: var(--spacing-xs) var(--spacing-xs);
}
/* Default: No Fill */
.icon-wishlist {
  background-image: var(--icon-wishlist);
  background-color: var(--color-white);
  border: 1px solid #001225;
}
/* Active: Filled */
.icon-wishlist.active {
  background-image: var(--icon-wishlist-active);
}
.icon-cart {
  background-image: var(--icon-cart);
  background-color: var(--color-pink-magenta);
}
.card-slider {
  display: flex;
  overflow: auto;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.card-slider::-webkit-scrollbar {
  display: none;
}
/* Card base styling */
.pr-card {
  color: var(--primary-text-color);
}
/* Image container */
.pr-card .pr-image-box {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pr-psize {
  position: absolute;
  top: -25px;
  right: 0;
  background: url(https://images-static.naikaa.com/media/wysiwyg/2024/pack-size.svg) no-repeat;
  padding-left: 15px;
  background-position: left center;
}
.pr-card .pr-image-box .pr-image {
  width: 100%;
  max-width: 166px;
  height: auto;
  max-height: 175px;
  object-fit: contain;
  display: block;
}
/* Product details section */
.pr-card .pr-details {
  text-align: left;
  position: relative;
  margin: 0 auto;
  width: 100%;
}
/* Rating styling */
.pr-card .pr-rating {
  letter-spacing: 0.6px;
  color: var(--secondary-text-color);
  display: inline-block;
  left: 0;
  top: -25px;
  text-transform: lowercase;
  margin-left: 0px;
  position: absolute;
}
.pr-card .rating-actual {
  font-weight: 600;
  color: var(--primary-text-color);
}
/* Brand and product info */
.pr-card .pr-brand {
  font-weight: 500;
  letter-spacing: -0.1px;
}
.pr-card .pr-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: inherit;
  color: var(--secondary-text-color);
  min-height: 40px;
  margin: 4px 0;
}
/* Add fixed height for shade element */
.pr-card .pr-shade {
  min-height: 14px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-card .pr-size {
  color: var(--secondary-text-color);
  min-height: var(--pc-line-height-normal);
}
.pr-card .pr-mrp {
  text-decoration: line-through;
  color: var(--tertiary-text-color);
}
.pr-card .pr-discount {
  color: var(--color-discount);
}
/* Button styling */
.pr-card .pr-button {
  background: var(--primary-color);
  color: var(--color-white);
  padding: 8px 4px;
  border-radius: 8px;
  margin-top: 16px;
  display: block;
  text-align: center;
  text-decoration: none;
  border: none;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
}
.pr-card .pr-button::after {
  content: '';
  width: 20px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4555 5.81027H13.6836V5.54572C13.7713 3.42932 12.1046 1.66565 9.99935 1.66565C7.89409 1.75383 6.31514 3.42932 6.31514 5.54572V5.81027H2.54321C2.01689 5.81027 1.66602 6.163 1.66602 6.6921V13.9231C1.66602 16.3923 3.59584 18.3323 6.05198 18.3323H13.9467C16.4029 18.3323 18.3327 16.3923 18.3327 13.9231V6.6921C18.3327 6.25119 17.9818 5.81027 17.4555 5.81027ZM7.63093 5.54572C7.63093 4.22297 8.68356 3.07658 9.99935 2.9884C11.3151 3.07658 12.3678 4.22297 12.3678 5.54572V5.81027H7.63093V5.54572ZM17.0169 14.0113C17.0169 15.6868 15.6134 17.0977 13.9467 17.0977H6.05198C4.38531 17.0977 2.98181 15.6868 2.98181 14.0113V7.13302H6.31514V8.89669C6.1397 9.07306 6.05198 9.33761 6.05198 9.51397C6.05198 10.0431 6.49058 10.3958 6.92917 10.3958C7.36777 10.3958 7.80637 9.95489 7.80637 9.51397C7.80637 9.24942 7.71865 9.07306 7.54321 8.89669V7.13302H12.2801V8.80851C12.1046 8.98487 12.0169 9.24942 12.0169 9.51397C12.0169 10.0431 12.3678 10.484 12.8941 10.484C13.4204 10.484 13.859 10.1313 13.859 9.60216C13.859 9.33761 13.7713 9.16124 13.5958 8.98487V7.22121H17.0169V14.0113Z' fill='white'/%3E%3C/svg%3E%0A");
  display: inline-block;
  margin-left: 4px;
}
/* Horizontal card layout */
.product-card.horizontal {
  display: flex;
  width: 312px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 200px;
}
.product-card.horizontal .pr-image-box {
  margin-right: 20px;
  width: 85px;
}
.product-card.horizontal .pr-details {
  width: 100%;
  width: 181px;
}
.product-card.horizontal .pr-rating {
  position: inherit;
  padding: 5px;
  margin-bottom: 5px;
}
.product-card.horizontal .pr-psize {
  top: 0;
  position: relative;
  left: 0;
  margin-bottom: 5px;
}
.inner-card {
  display: flex;
  flex-direction: row;
}
/* Design system overrides */
.product-card .product-button::after {
  width: 16px;
  height: 16px;
  background-size: 100%;
}
.product-card .product-info {
  padding: 0;
}
.product-card .product-button {
  border-radius: 20px;
}
.product-card {
  margin: 0;
  padding: 12px;
  border: 1px solid lightgray;
  border-radius: 14px;
  margin-top: 20px;
  width: 190px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: var(--color-white);
  background: var(--color-white);
}
.pr-action-buttons {
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 2;
}
.pr-action-buttons button {
  cursor: pointer;
}
.styled-cart {
  background-color: var(--primary-color);
  color: var(--color-white);
  width: calc(157px - 2rem);
  border-radius: 8px;
}
/* Disabled button state */
.styled-cart.disabled {
  background-color: var(--secondary-text-color);
  opacity: 0.7;
  cursor: not-allowed;
}
.styled-wishlist {
  border-radius: 8px;
}
.styled-wishlist.active {
  background-color: var(--accent-color);
}
/* Shimmer Effect Styles */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.shimmer {
  background: var(--shimmer-background);
  background-image: linear-gradient(
    to right,
    var(--shimmer-background) 0%,
    var(--shimmer-animation-color) 20%,
    var(--shimmer-background) 40%,
    var(--shimmer-background) 100%
  );
  background-repeat: no-repeat;
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}
.shimmer-wrapper {
  width: 100%;
  height: 100%;
}
.shimmer-image {
  width: 100%;
  height: 175px;
  margin-bottom: 10px;
}
.shimmer-rating {
  width: 80px;
  height: 16px;
  margin-bottom: 8px;
}
.shimmer-brand {
  width: 75%;
  height: 20px;
  margin-bottom: 8px;
}
.shimmer-name {
  width: 100%;
  height: 40px;
  margin-bottom: 8px;
}
.shimmer-price {
  width: 60%;
  height: 18px;
  margin-bottom: 12px;
}
.shimmer-button {
  width: 100%;
  height: 36px;
}
/* Horizontal card shimmer adjustments */
.product-card.horizontal .shimmer-image {
  width: 85px;
  height: 85px;
  margin-right: 20px;
}
.product-card.horizontal .shimmer-details {
  width: 190px;
  min-width: 190px;
}
.product-card .shimmer-details {
  width: 190px;
  min-width: 190px;
}
/* Product card loading state */
.product-card.loading .pr-details {
  display: none;
}
.product-card:not(.loading) .shimmer-wrapper {
  display: none;
}
.pr-priceDetails {
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Modal Overlay */
.options-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}
/* Modal Container */
.options-modal {
  background: var(--color-white);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
  position: relative;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* Modal Header */
.options-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-bottom: 0;
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 10;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.options-modal-title {
  font-weight: bold;
  font-size: 16px;
  color: var(--primary-text-color);
}
.options-modal-close {
  cursor: pointer;
  font-size: 28px;
  border: none;
  background: transparent;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--primary-text-color);
}
/* Modal Content Wrapper */
.modal-content-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Product Detail Section */
.product-detail-section {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: var(--color-white);
  flex-shrink: 0;
}
.product-images {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.product-main-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}
.product-carousel {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 256px;
  margin-top: 4px;
}
.product-carousel::-webkit-scrollbar {
  display: none;
}
.carousel-image {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.carousel-image:hover {
  border-color: var(--primary-color);
}
.product-info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-brand {
  font-weight: 500;
  color: var(--primary-text-color);
}
.product-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--secondary-text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-options-count {
  color: var(--tertiary-text-color);
  font-size: 12px;
}
/* Options Section */
.options-section {
  padding: 16px;
  margin: 0;
}
.options-section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-text-color);
  margin-bottom: 12px;
}
/* Options Grid */
.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 16px;
}
.options-grid.size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.loading-sizes {
  width: 100%;
  text-align: center;
  padding: 20px;
  color: var(--tertiary-text-color);
  font-size: 14px;
}
.option-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* Color Options */
.option-color {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #f0f0f0;
}
.option-color.selected {
  border: 2px solid var(--color-white);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px 0px, rgba(0, 0, 0, 0.7) 0px 2px 4px 0px, rgba(0, 0, 0, 0.5) 0px -2px 4px 0px;
}
.option-color.selected::after {
  content: '';
  width: 7px;
  height: 15px;
  position: absolute;
  top: 12px;
  left: 18px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
}
/* Size Options */
.option-size {
  width: 80px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: relative;
  margin: 5px;
  background-color: var(--color-white);
  cursor: pointer;
  transition: all 0.2s ease;
}
.option-size.selected {
  border: 2px solid var(--primary-color);
  color: var(--color-white);
  background: rgb(63, 65, 77);
  font-weight: 500;
}
/* Option Name */
.option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--secondary-text-color);
  font-size: 14px;
}
.option-name.selected {
  color: var(--primary-text-color);
  font-weight: 500;
}
/* Modal Pricing Section */
.modal-pricing-section {
  padding: 12px 16px;
  background: var(--color-white);
  align-items: center;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.modal-price-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-price-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.modal-price-sale {
  color: var(--primary-text-color);
  font-weight: 600;
  font-size: 16px;
}
.pipe {
  color: #ddd;
}
.modal-price-mrp {
  color: #999;
  text-decoration: line-through;
  font-size: 14px;
}
.modal-price-discount {
  color: var(--color-discount);
  font-size: 14px;
}
/* Modal Footer */
.options-modal-footer {
  display: flex;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  z-index: 10;
  gap: 12px;
  flex-shrink: 0;
  margin-top: auto;
}
/* Wishlist Button */
.modal-wishlist-btn {
  width: 48px;
  height: 48px;
  border: 1px solid #ddd;
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  border-radius: 8px;
}
.modal-wishlist-btn::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: var(--icon-wishlist);
  background-size: contain;
  background-repeat: no-repeat;
}
.modal-wishlist-btn.active::before {
  background-image: var(--icon-wishlist-active);
}
/* Add to Bag Button */
.modal-add-to-bag {
  background-color: var(--primary-color);
  color: var(--color-white);
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: bold;
  flex-grow: 1;
  font-size: 16px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.modal-add-to-bag:hover {
  opacity: 0.9;
}
.modal-add-to-bag.loading {
  opacity: 0.7;
  cursor: not-allowed;
}
.modal-add-to-bag.disabled {
  background-color: var(--secondary-text-color);
  opacity: 0.7;
  cursor: not-allowed;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
/* Responsive Adjustments */
@media (min-width: 640px) {
  .options-modal-overlay {
    align-items: center;
    padding: 20px;
  }
  .options-modal {
    width: 90%;
    max-width: 500px;
    height: auto;
    max-height: 85vh;
    border-radius: 12px;
    animation: fadeIn 0.3s ease-out;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .modal-content-wrapper {
    max-height: calc(85vh - 150px);
  }
}
/* Card Grid Layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 10px 0;
}
.card-grid .product-card {
  width: 100%;
}
/* Product Card Additional Styles */
.product-card {
  flex-shrink: 0;
}
.product-card.horizontal {
  width: 340px;
}
/* Hide action buttons when needed */
.hide-actions .add-to-cart,
.hide-actions .add-to-wishlist {
  display: none;
}