/** Shopify CDN: Minification failed

Line 13:16 Expected identifier but found whitespace
Line 13:18 Unexpected "{"
Line 13:27 Expected ":"

**/
/* ========================================
   Solution Card Styles (Custom Product Card)
   ======================================== */

   :root {
  --tabs-accent: {{ section.settings.accent_color }};
  --tabs-btn-bg: #BA9659;
  --tabs-heading-color: #040032;
  --tabs-text-color: #040032;
  --border-radius: 8px;
  --transition-speed: 0.3s;
  
  /* Fonts */
  --font-heading: "Muli", serif;
  --font-body: "Muli", sans-serif;
}

.solution-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  border: 1px solid #eee;
}

.solution-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--tabs-btn-bg);
}

/* TT: Lets badge sizing respond to the card's own rendered width, not just the viewport width.
   Needed because sections like Recently Viewed let merchants pick an arbitrary column count,
   so the same viewport width can produce much narrower cards than a fixed collection grid does. */
.solution-card {
  container-type: inline-size;
  container-name: solution-card;
}

/* Image Wrapper */
.solution-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f5f5;
}

.solution-card__image-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.solution-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-speed) ease;
}

.solution-card__image--primary {
  opacity: 1;
}

/* Hidden by default. Becomes visible on hover/focus for desktop pointers only. */
.solution-card__image--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Reusable pattern for custom cards:
   Add --has-hover on wrapper + primary/secondary image classes. */
@media (hover: hover) and (pointer: fine) {
  .solution-card__image-wrapper--has-hover:hover .solution-card__image--primary,
  .solution-card__image-wrapper--has-hover:focus-within .solution-card__image--primary {
    opacity: 0;
  }

  .solution-card__image-wrapper--has-hover:hover .solution-card__image--secondary,
  .solution-card__image-wrapper--has-hover:focus-within .solution-card__image--secondary {
    opacity: 1;
  }
}

/* .solution-card:hover .solution-card__image {
  transform: scale(1.08);
} */

/* Badges */
.solution-card__badges {
  position: absolute;
  top: 0px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.solution-card__badge {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  width: fit-content;
}

/* .solution-card__badge--sale {
  background: #ff4444;
  color: white;
} */
/* Sale badge shimmer for solution card */

.solution-card__badge--sale {
  position: relative;
  background: #ff4444;
  color: #fff;
  overflow: hidden;
  contain: paint;
  transform: translateZ(0);
  will-change: transform;
}

/* Shimmer layer */
.solution-card__badge--sale::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.65) 50%,
    transparent 70%
  );

  transform: skewX(-20deg);
  animation: solution-sale-shimmer 2.6s ease-in-out infinite;
}

/* Animation */
@keyframes solution-sale-shimmer {
  100% {
    left: 150%;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .solution-card__badge--sale::after {
    animation: none;
  }
}
/* TT: Sold Out badge is pinned to the right, independent of the Sale/Coming Soon badge stack on the left */
.solution-card__badge--sold-out {
  position: absolute;
  top: 0px;
  right: 10px;
  background: #666;
  color: white;
}

/* TT: Coming Soon badge — highest priority state, styled distinctly from Sale/Sold Out */
.solution-card__badge--coming-soon {
  background: #1a1a1a;
  color: white;
}

/* Product Title */
.solution-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #333;
  min-height: 42px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variant Pills */
.solution-card__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}

.variant-pill {
  padding: 5px 12px;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  background: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: var(--font-body);
}

/* .variant-pill:hover:not(.disabled) {
  border-color: var(--tabs-btn-bg);
  background: #f9f9f9;
  
} */

.variant-pill.active {
  background: var(--tabs-btn-bg);
  color: #fff;
  border-color: var(--tabs-btn-bg);
 
}

.variant-pill.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
/* Price and Quantity Wrapper */
.solution-card__price-qty-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.solution-card__price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.solution-card__price {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.solution-card__price--sale {
  color: #ff4444;
}

.solution-card__compare-price {
  font-size: 15px;
  color: #999;
  text-decoration: line-through;
  font-weight: 500;
}

/* Quantity Box */
.qty-box {
  display: flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: white;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.qty-btn:hover {
  background: #e5e5e5;
}

.qty-btn:active {
  background: #d5d5d5;
}

.qty-input {
  width: 45px;
  height: 32px;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: white;
  appearance: textfield;
  -moz-appearance: textfield;
}

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

.qty-input:focus {
  outline: none;
  background: #fafafa;
}

/* Add to Cart Button */
.atc-btn {
  width: 100%;
  padding: 14px 20px;
  background: var(--tabs-btn-bg);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.atc-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.atc-btn:active:not(:disabled) {
 transform: scale(0.98);
}

.atc-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  color: #888;
}

/* Loading state (optional ripple effect) */
.atc-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.atc-btn:active::after {
  width: 300px;
  height: 300px;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media screen and (max-width: 768px) {
  .solution-card {
    padding: 12px;
    gap: 10px;
  }

  .solution-card__title {
    font-size: 14px;
    min-height: 38px;
  }

  .solution-card__price {
    font-size: 18px;
  }

  .solution-card__compare-price {
    font-size: 14px;
  }

  .variant-pill {
    padding: 6px 12px;
    font-size: 12px;
  }

  .atc-btn {
    padding: 12px 16px;
    font-size: 13px;
  }

  .qty-box {
    border-width: 1px;
  }

  .qty-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .qty-input {
    width: 40px;
    height: 28px;
    font-size: 13px;
  }
}

@media screen and (max-width: 480px) {
  .solution-card {
    padding: 10px;
    gap: 8px;
  }

  .solution-card__title {
    font-size: 13px;
    min-height: 36px;
  }

  .solution-card__price-qty-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .qty-box {
    align-self: flex-end;
  }
}

/* ========================================
   Grid Layout for Collection Page
   ======================================== */

.product-grid__item .solution-card {
  height: 100%;
}

/* Ensure consistent card heights in grid */
.product-grid {
  display: grid;
  gap: 16px;
}

@media screen and (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* TT: Responsive badge sizing/offsets so Sold Out (top-right) stays clear of Sale/Coming Soon (top-left) on every card width */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .solution-card__badges,
  .solution-card__badge--sold-out {
    top: 0px;
  }

  .solution-card__badges {
    left: 8px;
  }

  .solution-card__badge--sold-out {
    right: 8px;
  }

  .solution-card__badge {
    padding: 4px 10px;
    font-size: 10px;
  }
}

@media screen and (max-width: 767px) {
  .solution-card__badges,
  .solution-card__badge--sold-out {
    top: 0px;
  }

  .solution-card__badges {
    left: 6px;
  }

  .solution-card__badge--sold-out {
    right: 6px;
  }

  .solution-card__badge {
    padding: 3px 8px;
    font-size: 9px;
    letter-spacing: 0.3px;
  }
}

@media screen and (max-width: 400px) {
  .solution-card__badges,
  .solution-card__badge--sold-out {
    top: 0px;
  }

  .solution-card__badges {
    left: 5px;
  }

  .solution-card__badge--sold-out {
    right: 5px;
  }

  .solution-card__badge {
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: 0.2px;
    border-radius: 3px;
  }
}

/* TT: Container-query fallback for narrow cards regardless of viewport size (e.g. Recently Viewed
   with a merchant-configured column count) — badges shrink and tuck in as the card itself narrows,
   preventing the Sale/Coming Soon (left) and Sold Out (right) badges from colliding. */
@container solution-card (max-width: 220px) {
  .solution-card__badges,
  .solution-card__badge--sold-out {
    top: 0px;
  }

  .solution-card__badges {
    left: 6px;
  }

  .solution-card__badge--sold-out {
    right: 6px;
  }

  .solution-card__badge {
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: 0.2px;
  }
}

@container solution-card (max-width: 160px) {
  .solution-card__badges {
    flex-direction: column;
    align-items: flex-start;
    left: 4px;
  }

  .solution-card__badge--sold-out {
    right: 4px;
  }

  .solution-card__badge {
    padding: 2px 6px;
    font-size: 8px;
    letter-spacing: 0.1px;
    border-radius: 3px;
  }
}

/* ========================================
   Accessibility
   ======================================== */

.variant-pill:focus,
.qty-btn:focus,
.atc-btn:focus {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.variant-pill:focus:not(:focus-visible),
.qty-btn:focus:not(:focus-visible),
.atc-btn:focus:not(:focus-visible) {
  outline: none;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}