/* ==========================================================================
   Fussie Cat WooCommerce Custom Product Cards
   ========================================================================== */

/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Product Grid/Loop Styling - Let Elementor handle grid layout */
.woocommerce ul.products,
.woocommerce ul.products.elementor-grid,
.woocommerce .columns-4 ul.products,
.woocommerce .columns-4 ul.products.elementor-grid,
.woocommerce ul.products.elementor-grid.columns-4,
.woocommerce .columns-4 .products.elementor-grid,
/* Target Elementor widget containers */
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-woocommerce-products .woocommerce ul.products,
.elementor-widget-woocommerce-products .woocommerce.columns-4 ul.products {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure all product list items participate properly in grid */
.woocommerce ul.products li.product,
.woocommerce .columns-4 ul.products li.product,
.woocommerce ul.products.elementor-grid li.product,
.woocommerce ul.products.elementor-grid.columns-4 li.product,
.woocommerce .columns-4 .products.elementor-grid li.product {
  display: block !important;
  width: 100% !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important; /* Override any flex properties from Elementor */
  flex-basis: unset !important;
  flex-grow: unset !important;
  flex-shrink: unset !important;
  max-width: none !important; /* Remove any max-width constraints from Elementor */
}

/* Individual Product Card */
.fussie-product-card {
  background-color: var(--creme) !important;
  border-radius: var(--radius-lg) !important; /* 10px */
  overflow: hidden !important;
  transition: background-color 0.3s ease, 
              box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.1s ease !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  display: block !important; /* Ensure proper grid participation */
  width: 100% !important; /* Take full grid cell width */
  height: 100% !important; /* Make all cards the same height */
  min-height: 450px !important; /* Consistent minimum height */
}

/* Hover effects - only on devices that support hover (desktop with mouse) */
@media (hover: hover) {
  .fussie-product-card:hover {
    background-color: var(--card-hover-color, var(--yellow)) !important;
    box-shadow: var(--shadow-md) !important;
  }
}

/* Focus effects for keyboard navigation (accessibility) */
.fussie-product-link:focus-visible {
  outline: 3px solid var(--card-hover-color, var(--yellow)) !important;
  outline-offset: 2px !important;
}

/* Apply hover effects when link inside card is focused (keyboard navigation only) */
.fussie-product-card:focus-within:has(:focus-visible) {
  background-color: var(--card-hover-color, var(--yellow)) !important;
  box-shadow: var(--shadow-md) !important;
}

.fussie-product-card:active {
  transform: scale(0.98) !important;
  transition: transform 0.1s ease !important;
}

/* Product Content Wrapper */
.fussie-product-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 450px !important; /* Ensure consistent minimum height */
  position: relative !important;
  overflow: hidden !important;
}

/* Product Link - covers entire card */
.fussie-product-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 100% !important;
  width: 100% !important;
}

.fussie-product-link:hover {
  text-decoration: none !important;
}

/* Product Image Wrapper */
.fussie-product-image-wrapper {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important; /* Taller cards - 3:4 portrait ratio */
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: var(--spacing-md) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg) !important;
}

/* Product Image - starts smaller and scales to full size on hover (no cropping) */
.fussie-product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Contain entire image, no cropping */
  transform: scale(0.9) !important; /* Start at 90% */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Hover effects - only on devices that support hover */
@media (hover: hover) {
  .fussie-product-card:hover .fussie-product-image {
    transform: scale(1.0) !important; /* Zoom to 100% on hover - no cropping */
  }
}

/* Focus effects for keyboard navigation (accessibility) */
.fussie-product-card:focus-within:has(:focus-visible) .fussie-product-image {
  transform: scale(1.0) !important; /* Zoom to 100% on focus - no cropping */
}

/* Product Info Section */
.fussie-product-info {
  padding: var(--spacing-md) var(--spacing-lg) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform: translateY(0) !important;
  min-height: auto !important; /* Allow flexible height for titles */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important; /* Take available space */
}

/* Hover effects - only on devices that support hover */
@media (hover: hover) {
  .fussie-product-card:hover .fussie-product-info {
    transform: translateY(-60px) !important; /* Slide up on hover */
  }
}

/* Focus effects for keyboard navigation (accessibility) */
.fussie-product-card:focus-within:has(:focus-visible) .fussie-product-info {
  transform: translateY(-60px) !important; /* Slide up on focus */
}

/* Product Title */
.fussie-product-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important; /* Base font size */
  font-weight: 900 !important; /* Darkest/Black weight */
  color: var(--dark-black) !important;
  line-height: 1.2 !important; /* Tighter line height */
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  word-wrap: break-word !important;
  hyphens: auto !important; /* Allow word breaking */
  overflow-wrap: break-word !important; /* Break long words */
  /* Remove height restrictions - allow full title display */
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  /* Remove line clamping - show full title */
  -webkit-line-clamp: none !important;
  -webkit-box-orient: unset !important;
}

/* Product Actions Section (hidden by default, slides in on hover) */
.fussie-product-actions {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) !important;
  transform: translateY(100%) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important;
}

/* Hover effects - only on devices that support hover */
@media (hover: hover) {
  .fussie-product-card:hover .fussie-product-actions {
    transform: translateY(0) !important;
  }
}

/* Focus effects for keyboard navigation (accessibility) */
.fussie-product-card:focus-within:has(:focus-visible) .fussie-product-actions {
  transform: translateY(0) !important;
}

/* Mobile & Tablet: Show actions by default (no hover effects on touch devices) */
@media (max-width: 1024px) {
  .fussie-product-actions {
    position: static !important;
    transform: translateY(0) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    background-color: inherit !important; /* Inherit card background color */
  }
  
  /* Adjust card layout for mobile/tablet */
  .fussie-product-content {
    min-height: auto !important; /* Allow natural height on mobile/tablet */
  }
  
  .fussie-product-info {
    flex: none !important; /* Don't take extra space on mobile/tablet */
    min-height: auto !important;
  }
  
  /* Ensure image stays at normal scale on touch devices */
  .fussie-product-image {
    transform: scale(1.0) !important; /* Full scale by default on touch devices */
  }
}

/* Variation Form Styling */
.fussie-variations-form {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important;
  margin-bottom: 0 !important;
}

/* Variation Controls - Side by Side Layout */
.fussie-variation-controls {
  display: flex !important;
  gap: var(--spacing-sm) !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important; /* Keep items side by side */
  justify-content: space-between !important; /* Space between dropdown and button */
}

/* Keep add-to-cart button as text on all screen sizes */
.fussie-add-to-cart-btn {
  /* Remove all plus button styling - keep as text button */
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border-radius: var(--radius-lg) !important; /* Increased border radius */
  font-size: 14px !important;
  text-indent: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.fussie-add-to-cart-btn::before {
  content: '' !important; /* Remove plus icon */
}

/* Variation Selector Styling */
.fussie-variation-selector {
  flex: 0 0 auto !important; /* Take only needed space */
  min-width: 80px !important; /* Reduced minimum width */
  max-width: 120px !important; /* Cap maximum width */
}

.fussie-variation-select,
.fussie-size-select {
  width: 100% !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border: 2px solid var(--dark-black) !important;
  border-radius: var(--radius-lg) !important; /* Increased border radius */
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background-color: white !important;
  color: var(--dark-black) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-height: 40px !important;
  line-height: 1.2 !important;
  margin-right: 90px !important;
  word-wrap: break-word !important;
  white-space: normal !important;
}

.fussie-variation-select:focus,
.fussie-size-select:focus {
  outline: none !important;
  border-color: var(--dark-black) !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1) !important;
}

/* Add to Cart Button Styling */
.fussie-product-actions .button,
.fussie-product-actions .add_to_cart_button,
.fussie-product-actions .product_type_variable,
.fussie-add-to-cart-btn {
  flex: 0 0 auto !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  background-color: var(--dark-black) !important;
  white-space: nowrap !important;
  min-width: 120px !important;
  color: white !important;
  border: 2px solid var(--dark-black) !important;
  border-radius: var(--radius-md) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
  position: relative !important;
}

/* Plus icon for compact add-to-cart button - hidden by default */
.fussie-add-to-cart-btn::before {
  content: '' !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.fussie-product-actions .button:hover,
.fussie-product-actions .add_to_cart_button:hover,
.fussie-product-actions .product_type_variable:hover,
.fussie-add-to-cart-btn:hover:not(.disabled) {
  background-color: white !important;
  color: var(--dark-black) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

.fussie-add-to-cart-btn:hover:not(.disabled)::before {
  color: var(--dark-black) !important;
}

/* Disabled state for add to cart button */
.fussie-add-to-cart-btn.disabled,
.fussie-add-to-cart-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: var(--gray) !important;
  border-color: var(--gray) !important;
  color: var(--gray-dark) !important;
}

/* Enabled state for add to cart button */
.fussie-add-to-cart-btn:not(.disabled):not(:disabled) {
  opacity: 1 !important;
  cursor: pointer !important;
  background-color: var(--dark-black) !important;
  border-color: var(--dark-black) !important;
  color: white !important;
}

.fussie-add-to-cart-btn.loading {
  opacity: 0.7 !important;
  cursor: wait !important;
  position: relative !important;
}

.fussie-add-to-cart-btn.loading::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin: -8px 0 0 -8px !important;
  border: 2px solid transparent !important;
  border-top: 2px solid currentColor !important;
  border-radius: 50% !important;
  animation: fussie-spin 1s linear infinite !important;
}

.fussie-add-to-cart-btn.success {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
  color: white !important;
  animation: fussie-success-pulse 0.6s ease-out !important;
}

@keyframes fussie-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fussie-success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Remove default WooCommerce product styling - but NOT for our custom cards */
.woocommerce ul.products li.product:not(.fussie-product-card),
.woocommerce-page ul.products li.product:not(.fussie-product-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide default WooCommerce elements outside the actions area */
.woocommerce ul.products li.product:not(.fussie-product-card) .button,
.woocommerce ul.products li.product:not(.fussie-product-card) .added_to_cart {
  display: none !important;
}

.woocommerce ul.products li.product .star-rating {
  display: none !important; /* Hide ratings on cards */
}

.woocommerce ul.products li.product .price {
  display: none !important; /* Hide price on cards */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .fussie-product-title {
    font-size: 18px !important;
  }
}

@media (max-width: 768px) {
  
  .fussie-product-title {
    font-size: 18px !important;
  }
  
  .fussie-product-image-wrapper {
    padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md) !important;
  }
  
  .fussie-variation-select,
  .fussie-size-select {
    font-size: 12px !important;
    padding: 6px var(--spacing-sm) !important;
    min-height: 32px !important; /* Smaller height for mobile */
  }
  
  /* Mobile: Keep variation controls side by side */
  .fussie-variation-controls {
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: var(--spacing-xs) !important;
  }
  
  .fussie-variation-selector {
    flex: 1 !important;
    min-width: auto !important;
  }
}

@media (max-width: 600px) {
  .fussie-product-title {
    font-size: 16px !important;
  }
  
  /* Keep variation controls side by side on mobile */
  .fussie-variation-controls {
    flex-direction: row !important;
    gap: var(--spacing-xs) !important;
    align-items: flex-end !important;
    justify-content: space-between !important; /* Maintain space-between on mobile */
  }
  
  .fussie-variation-selector {
    flex: 0 0 auto !important; /* Take only needed space on mobile too */
    min-width: 80px !important;
    max-width: 120px !important;
  }
  
  /* Adjust variation selectors for mobile */
  .fussie-variation-select,
  .fussie-size-select {
    font-size: 11px !important;
    padding: 4px 6px !important;
    min-height: 28px !important;
  }
}

@media (max-width: 480px) {
  
  .fussie-product-title {
    font-size: 15px !important;
  }
  
}

@media (max-width: 400px) {
  .fussie-product-title {
    font-size: 14px !important;
  }
}

@media (max-width: 350px) {
  .fussie-product-title {
    font-size: 13px !important;
  }
}

/* Shop/Archive page adjustments */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--dark-black) !important;
}

/* Loading state */
.fussie-product-card.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Cart loading states */
.woocommerce-cart-form__cart-item.removing {
  opacity: 0.5;
  pointer-events: none;
}

.woocommerce-cart-form__cart-item.updating {
  opacity: 0.7;
}

.woocommerce-cart-form__cart-item.updating .product-subtotal {
  position: relative;
}

.woocommerce-cart-form__cart-item.updating .product-subtotal::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 0;
  border: 2px solid transparent;
  border-top: 2px solid var(--dark-black, #1a1a1a);
  border-radius: 50%;
  animation: fussie-spin 1s linear infinite;
}

/* ==========================================================================
   Flavor Switcher (Single Product Page)
   ========================================================================== */

.fussie-flavor-switcher {
  margin: var(--spacing-2xl) 0 !important;
  padding: var(--spacing-lg) !important;
  background-color: var(--creme) !important;
  border-radius: var(--radius-lg) !important;
}

.fussie-flavor-switcher-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--dark-black) !important;
  margin: 0 0 var(--spacing-md) 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.fussie-flavor-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-sm) !important;
  transition: opacity var(--transition-fast) !important;
}

.fussie-flavor-pills.loading {
  opacity: 0.5;
  pointer-events: none;
}

.fussie-flavor-pill {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dark-black) !important;
  background-color: white !important;
  border: 2px solid var(--dark-black) !important;
  border-radius: 25px !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  cursor: pointer !important;
  transition: all var(--transition-normal) !important;
  white-space: nowrap !important;
}

.fussie-flavor-pill:hover {
  background-color: var(--yellow) !important;
  border-color: var(--yellow) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

.fussie-flavor-pill.active {
  background-color: var(--dark-black) !important;
  color: white !important;
  border-color: var(--dark-black) !important;
  cursor: default !important;
}

.fussie-flavor-pill.active:hover {
  transform: none !important;
  box-shadow: none !important;
}

.fussie-flavor-name {
  display: block !important;
}

/* Loading state for product summary */
.summary.fussie-loading {
  position: relative !important;
  pointer-events: none !important;
}

.summary.fussie-loading::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  border-radius: var(--radius-lg) !important;
}

/* Error message */
.fussie-flavor-error {
  padding: var(--spacing-md) !important;
  background-color: #ffebee !important;
  color: #c62828 !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--spacing-md) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
}

/* Responsive flavor switcher */
@media (max-width: 768px) {
  .fussie-flavor-switcher {
    padding: var(--spacing-md) !important;
  }
  
  .fussie-flavor-pills {
    gap: var(--spacing-xs) !important;
  }
  
  .fussie-flavor-pill {
    font-size: 12px !important;
    padding: 6px var(--spacing-md) !important;
  }
}

@media (max-width: 480px) {
  .fussie-flavor-pills {
    flex-direction: column !important;
  }
  
  .fussie-flavor-pill {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Cart Quantity Controls
   ========================================================================== */

.fussie-quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  border: 2px solid var(--dark-black, #1a1a1a) !important;
  border-radius: var(--radius-md, 6px) !important;
  overflow: hidden !important;
  width: fit-content !important;
  min-width: 120px !important;
  background-color: white !important;
}

.fussie-qty-btn {
  background-color: var(--dark-black, #1a1a1a) !important;
  color: white !important;
  border: none !important;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
}

.fussie-qty-btn:hover {
  background-color: var(--yellow, #fdd835) !important;
  color: var(--dark-black, #1a1a1a) !important;
  transform: translateY(-1px) !important;
}

.fussie-qty-btn:active {
  transform: translateY(0) !important;
}

.fussie-qty-btn:disabled {
  background-color: var(--gray, #ccc) !important;
  color: var(--gray-dark, #666) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.fussie-qty-input {
  border: none !important;
  outline: none !important;
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--dark-black, #1a1a1a) !important;
  background-color: white !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 60px !important;
  height: 40px !important;
  flex: 1 !important;
  -moz-appearance: textfield !important; /* Firefox */
  appearance: textfield !important; /* Standard property */
}

.fussie-qty-input::-webkit-outer-spin-button,
.fussie-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.fussie-qty-input:focus {
  background-color: var(--creme, #f5f5dc) !important;
}

/* Cart table styling improvements */
.woocommerce-cart-form__contents .product-quantity {
  width: 140px !important;
}

.woocommerce-cart-form__contents .product-subtotal {
  text-align: right !important;
  font-weight: 700 !important;
  color: var(--dark-black, #1a1a1a) !important;
}

/* Responsive cart quantity controls */
@media (max-width: 768px) {
  .fussie-quantity-wrapper {
    min-width: 100px !important;
  }
  
  .fussie-qty-btn {
    min-width: 35px !important;
    height: 35px !important;
    font-size: 14px !important;
    padding: 6px 8px !important;
  }
  
  .fussie-qty-input {
    width: 50px !important;
    height: 35px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .fussie-quantity-wrapper {
    min-width: 90px !important;
  }
  
  .fussie-qty-btn {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
  }
  
  .fussie-qty-input {
    width: 40px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
}