/** Shopify CDN: Minification failed

Line 1117:0 Unexpected "}"

**/
/* Cart Drawer Fixed Header - Maintains layout consistency */
.cart-drawer__fixed-header {
  position: relative;
  z-index: 10;
  background: transparent;
  width: 100%;
}

.free-shipping-notice-wrapper {
  width: 100%;
}

/* Handle empty cart state gracefully */
.cart-drawer__fixed-header .free-shipping-notice:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* Ensure proper spacing between cart header and free shipping notice */
.cart-drawer__fixed-header > * + * {
  margin-top: 0.5rem;
}

/* Specific spacing for free shipping when it's first after cart header */
.drawer__header + .free-shipping-container,
.drawer__header + .unified-shipping-container,
.drawer__header + .free-shipping-notice-wrapper {
  margin-top: 1.5rem !important;
}

/* Additional spacing for cart drawer context - merged with inset margin below */
/* See line ~250 for complete cart drawer margin rules */

/* Ensure no overlap with header when member benefits are not present */
.cart-drawer__content > .unified-shipping-container:first-of-type,
.cart-drawer__content > .free-shipping-container:first-of-type {
  margin-top: 1.5rem !important;
}

/* Unified Shipping Progress Bar - Futuristic Glassmorphism Design */
.free-shipping-notice {
  margin-bottom: 0;
}

.free-shipping-container {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.unified-shipping-container {
  max-width: 800px;
  margin: 0;
  padding: 0;
  border-radius: 24px;
  background: transparent;
  border: none;
  box-shadow: none;
  animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  contain: layout style paint;
  height: fit-content;
}

.unified-shipping-container > * {
  position: relative;
  z-index: 1;
}

/* Ring Progress Layout */
.ring-shipping-layout {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 0;
  margin: 0;
  justify-content: center;
  height: fit-content;
  box-sizing: border-box;
}

/* Remove horizontal padding in cart drawer - parent section already provides padding */
/* Cart items structure: parent has padding, children have 0 padding - we must match this exactly */
.cart-drawer__free-shipping-section .ring-shipping-layout {
  padding: 6px 0;
  width: 100%;
  overflow: hidden;
}

/* Remove pills-section padding to match cart item width exactly */
.cart-drawer__free-shipping-section .pills-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Desktop: Remove padding to match cart item width */
@media (min-width: 1024px) {
  .cart-drawer__free-shipping-section .pills-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Tablet: Remove padding to match cart item width */
@media (max-width: 768px) {
  .cart-drawer__free-shipping-section .pills-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile: Remove padding to match cart item width */
@media (max-width: 480px) {
  .cart-drawer__free-shipping-section .pills-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Left Side - Large Ring Progress */
.ring-section {
  flex-shrink: 0;
}

.large-ring {
  position: relative;
  width: 140px;
  height: 140px;
}

.ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-background {
  fill: none;
  stroke: #F0F0F0;
  stroke-width: 12;
}

.ring-progress {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 251.2; /* 2 * PI * 40 */
  stroke-dashoffset: 251.2;
  transition: none; /* Controlled by JavaScript for smoother animation */
}

.ring-progress-store {
  stroke: #FFB6C1;
}

.ring-progress-home {
  stroke: #87CEEB;
}

.ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90px;
  max-width: 90px;
}

.ring-amount {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

.ring-label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}


/* Right Side - Pills */
/* No padding needed - unified-shipping-container provides the 20px inset */
.pills-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  height: fit-content;
  overflow: hidden;
}

/* Shipping Pills */
/* No horizontal padding needed - pills-section handles left/right padding */
.shipping-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  background: #F8F9FA;
  border-radius: 0;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Round only outer corners - first pill top corners */
.shipping-pill:first-child {
  border-radius: 12px 12px 0 0;
}

/* Round only outer corners - last pill bottom corners */
.shipping-pill:last-child {
  border-radius: 0 0 12px 12px;
}

.shipping-pill::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.shipping-pill.store::before {
  background: linear-gradient(90deg, rgba(255, 182, 193, 0.1), rgba(255, 182, 193, 0.05));
}

.shipping-pill.home::before {
  background: linear-gradient(90deg, rgba(135, 206, 235, 0.1), rgba(135, 206, 235, 0.05));
}

.shipping-pill.active {
  background: #e9f0ff;
}


.shipping-pill.unlocked {
  background: linear-gradient(135deg, #F0FFF4, #E6FFED);
  animation: celebrate 0.5s ease-out;
}

.pill-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
}

/* Cart drawer specific - Remove ALL negative margins that cause overflow */
/* Override cart-items.css negative margin rules */
.drawer--cart .free-shipping-container,
cart-drawer .free-shipping-container,
.cart-drawer__free-shipping-section .free-shipping-container {
  margin: 0 !important;
}

/* Cart drawer specific - Remove horizontal margins and enforce width constraint */
/* The parent .cart-drawer__free-shipping-section provides padding, child must not overflow */
.drawer--cart .unified-shipping-container,
cart-drawer .unified-shipping-container,
.cart-drawer__free-shipping-section .unified-shipping-container,
.cart-drawer__free-shipping-section .free-shipping-notice-wrapper .unified-shipping-container,
#free-shipping-notice .unified-shipping-container {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.pill-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mini Ring for Pills */
.mini-ring {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.mini-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.mini-ring-background {
  fill: none;
  stroke: #F0F0F0;
  stroke-width: 4;
}

.mini-ring-progress {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100.48; /* 2 * PI * 16 */
  stroke-dashoffset: 100.48;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-ring-progress-store {
  stroke: #E85D75;
}

.mini-ring-progress-home {
  stroke: #FF8C42;
}

/* Mini ring completion states */
.shipping-pill.unlocked .mini-ring-progress-store {
  stroke: #2ED573;
  filter: drop-shadow(0 2px 4px rgba(46, 213, 115, 0.3));
}

.shipping-pill.unlocked .mini-ring-progress-home {
  stroke: #2ED573;
  filter: drop-shadow(0 2px 4px rgba(46, 213, 115, 0.3));
}

.mini-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

.pill-info {
  display: flex;
  flex-direction: column;
}

.pill-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.pill-threshold {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.pill-status {
  padding: 6px 12px;
  background: rgba(255, 182, 193, 0.2);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #FF6B6B;
  white-space: nowrap;
}

.shipping-pill.home .pill-status {
  background: rgba(135, 206, 235, 0.2);
  color: #5BA0D0;
}

.shipping-pill.unlocked .pill-status {
  background: rgba(46, 213, 115, 0.2);
  color: #2ED573;
}

/* Dynamic fill width controlled by JavaScript */
.shipping-pill.store::before {
  width: var(--fill-width, 0%);
}

.shipping-pill.home::before {
  width: var(--fill-width, 0%);
}

.free-shipping-image {
  width: 100%;
  margin-bottom: 1rem;
  text-align: center;
}

.free-shipping-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-sm, 8px);
}

.free-shipping-notice__bar {
  position: relative;
  height: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 6px;
}

/* Header Layout */
.shipping-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.current-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--shipping-notice-title-color);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.cart-icon {
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.cart-label {
  font-weight: 500;
}

.cart-amount {
  font-size: 18px;
  font-weight: 700;
  background: var(--shipping-notice-progress-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(232, 93, 117, 0.2));
  position: relative;
}

.free-shipping-indicator {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.shipping-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: none;
  background: var(--shipping-notice-badge-bg);
  border: 1px solid var(--shipping-notice-badge-border);
  color: var(--shipping-notice-badge-text-color, #0CB982);
  backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.shipping-badge.active {
  display: flex;
  align-items: center;
  gap: 4px;
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--shipping-notice-badge-bg-active);
  border-color: var(--shipping-notice-badge-border-active);
  transform: scale(1);
}

/* Progress Bar Layout */
.unified-progress {
  position: relative;
  margin-bottom: 15px;
}

.progress-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 8px 0;
}

.progress-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--shipping-notice-progress-gradient);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 0 12px rgba(232, 93, 117, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border: none;
}

/* Subtle Shimmer Effect */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.2) 60%,
    transparent 100%);
  animation: subtleShimmer 4s ease-in-out infinite;
  width: 200%;
}

/* Milestone Markers */
.milestones {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

.milestone {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone-marker {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 
    0 4px 12px rgba(232, 93, 117, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.milestone.achieved .milestone-marker {
  background: var(--shipping-notice-progress-gradient);
  color: white;
  animation: achievementPulse 0.4s ease-out;
  box-shadow: 
    0 6px 16px rgba(232, 93, 117, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

.milestone-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--shipping-notice-milestone-text-color);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(232, 93, 117, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Status Layout */
.shipping-status {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.status-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 2px 8px rgba(232, 93, 117, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.status-item.unlocked {
  background: rgba(232, 93, 117, 0.12);
  border: 1px solid rgba(232, 93, 117, 0.2);
  box-shadow: 
    0 4px 16px rgba(232, 93, 117, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: unlockGlow 0.4s ease-out;
  transform: scale(1.01);
}

.status-icon {
  font-size: 14px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.status-item.unlocked .status-icon {
  animation: celebrateIcon 0.8s ease-out;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--shipping-notice-status-title-color);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.status-detail {
  font-size: 11px;
  color: var(--shipping-notice-status-detail-color);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  font-weight: 500;
  line-height: 1.2;
}

.status-item.unlocked .status-detail {
  color: var(--color-primary-light);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Convenience Store Card (First status item) */
.status-item:first-child {
  background: var(--shipping-notice-store-card-bg);
  border-color: rgba(220, 115, 81, 0.15);
}

/* Home Delivery Card (Second status item) */
.status-item:nth-child(2) {
  background: var(--shipping-notice-home-card-bg);
  border-color: rgba(139, 90, 60, 0.2);
}

/* Next Milestone Hint */
.next-milestone {
  text-align: center;
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--shipping-notice-milestone-text-color);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 4px 12px rgba(232, 93, 117, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.milestone-amount {
  font-weight: 700;
  background: var(--shipping-notice-progress-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 1px rgba(232, 93, 117, 0.3));
  font-size: 1.05em;
}

.free-shipping-notice__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
}

.free-shipping-notice__progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  animation: shimmer 2s infinite;
}

@keyframes subtleShimmer {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(50%);
  }
}

@keyframes subtleGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}


.free-shipping-notice__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.shipping-method {
  font-size: 2rem;
  font-weight: 500;
  color: rgb(var(--text-color));
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.4;
}

.shipping-amount {
  font-size: 1.5rem;
  font-weight: 600;
  color: #FF9F43;
  white-space: nowrap;
}

.shipping-notice-group {
  background: rgb(var(--bg-color));
  padding: 1rem;
  border-radius: var(--border-radius-sm, 8px);
  box-shadow: 0 1px 3px rgba(var(--text-color), 0.1);
  margin-bottom: 1rem;
  border: 1px solid rgba(var(--text-color), 0.05);
  transition: all 0.3s ease;
}

.shipping-notice-group:last-child {
  margin-bottom: 0;
}

.shipping-notice-group:hover {
  box-shadow: 0 4px 12px rgba(var(--text-color), 0.08);
  transform: translateY(-2px);
}

.shipping-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 159, 67, 0.1);
  border-radius: 50%;
  padding: 4px;
  transition: all 0.3s ease;
}

.shipping-icon svg {
  width: 100%;
  height: 100%;
  fill: #FF9F43;
  transition: fill 0.3s ease;
}

.free-shipping-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--border-radius-sm, 6px);
  background: rgba(255, 159, 67, 0.1);
  color: #FF9F43;
  font-size: 1.2rem !important;
  font-weight: 500;
  animation: fadeIn 0.5s ease;
}

.excluded-product-notice,
.notice-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--border-radius-sm, 6px);
  background: rgba(220, 53, 69, 0.05);
  color: #DC3545;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid rgba(220, 53, 69, 0.1);
}

.excluded-product-notice svg,
.notice-warning svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.notice-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--border-radius-sm, 6px);
  background: rgba(var(--text-color), 0.03);
  color: rgb(var(--text-color));
  font-size: 1.08rem !important;
  font-weight: 500;
  border: 1px solid rgba(var(--text-color), 0.05);
}

.notice-info svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Enhanced animations */
/* Animations */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes achievementPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 6px 16px rgba(232, 93, 117, 0.2);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(232, 93, 117, 0.3);
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(232, 93, 117, 0.2);
  }
}

@keyframes unlockGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(232, 93, 117, 0.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(232, 93, 117, 0.15);
  }
  100% {
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(232, 93, 117, 0.1);
  }
}

@keyframes celebrateIcon {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-10deg) scale(1.1);
  }
  75% {
    transform: rotate(10deg) scale(1.1);
  }
}

/* Celebration Animation for Pills - Subtle version */
@keyframes celebrate {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.almost-there .shipping-amount {
  animation: pulse 2s infinite;
  color: #FF6B6B;
}

.shipping-notice-group.completed .shipping-icon {
  background: rgba(16, 185, 129, 0.1);
}

.shipping-notice-group.completed .shipping-icon svg {
  fill: #10B981;
}

.shipping-notice-group.completed .shipping-amount {
  color: #10B981;
}

/* Responsive Design */
/* TABLET/MOBILE: Match cart items exact 16px horizontal padding at ≤768px */
@media (max-width: 768px) {
  .unified-shipping-container {
    margin: 0;
    padding: 0;
    border-radius: 20px;
  }

  .pills-section {
    padding: 0;
    width: 100%;
  }

  .shipping-pill {
    padding: 12px 0px;
    width: 100%;
    border-radius: 0;
  }

  .shipping-pill:first-child {
    border-radius: 12px 12px 0 0;
  }

  .shipping-pill:last-child {
    border-radius: 0 0 12px 12px;
  }

  .ring-shipping-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 0;
  }

  /* Remove horizontal padding in cart drawer at mobile breakpoint */
  .cart-drawer__free-shipping-section .ring-shipping-layout {
    padding: 0;
  }

  /* NO pills-section padding needed - parent .cart-drawer__free-shipping-section provides 16px at this breakpoint */
}

  .large-ring {
    margin: 0 auto;
    width: 120px;
    height: 120px;
  }
  
  .ring-center {
    width: 80px;
    max-width: 80px;
  }
  
  .ring-amount {
    font-size: 22px;
    white-space: nowrap;
    word-break: keep-all;
  }
  
  .ring-label {
    font-size: 11px;
  }
  
  
  .pills-section {
    gap: 0;
    padding: 0;
  }
  
  .shipping-pill {
    padding: 12px 0;
    border-radius: 0;
  }

  .shipping-pill:first-child {
    border-radius: 12px 12px 0 0;
  }

  .shipping-pill:last-child {
    border-radius: 0 0 12px 12px;
  }
  
  .pill-left {
    gap: 12px;
  }
  
  .mini-ring {
    width: 32px;
    height: 32px;
  }
  
  .mini-ring-center {
    font-size: 12px;
  }
  
  .pill-title {
    font-size: 13px;
  }
  
  .pill-threshold {
    font-size: 11px;
  }
  
  .pill-status {
    font-size: 11px;
    padding: 5px 10px;
  }
}

/* Ultra compact mobile */
/* SMALL MOBILE: Match cart items exact 12px horizontal padding at ≤480px */
@media (max-width: 480px) {
  .unified-shipping-container {
    padding: 0;
    margin: 0;
  }

  .pills-section {
    padding: 0;
    width: 100%;
  }

  .shipping-pill {
    padding: 10px 0;
    width: 100%;
    border-radius: 0;
  }

  .shipping-pill:first-child {
    border-radius: 12px 12px 0 0;
  }

  .shipping-pill:last-child {
    border-radius: 0 0 12px 12px;
  }

  /* NO pills-section padding needed - parent .cart-drawer__free-shipping-section provides 12px at this breakpoint */

  .large-ring {
    width: 100px;
    height: 100px;
  }
  
  .ring-center {
    width: 70px;
    max-width: 70px;
  }
  
  .ring-amount {
    font-size: 18px;
    white-space: nowrap;
    word-break: keep-all;
  }
  
  .shipping-header {
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .current-cart {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    font-size: 12px;
  }
  
  .cart-amount {
    font-size: 15px;
    margin-top: 2px;
  }
  
  .progress-track {
    height: 5px;
    margin: 5px 0;
  }
  
  .milestone-marker {
    width: 14px;
    height: 14px;
    font-size: 7px;
  }
  
  .milestone {
    top: -2.5px;
  }
  
  .milestone-label {
    top: 14px;
    font-size: 8px;
    padding: 2px 3px;
  }
  
  .shipping-status {
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
  }
  
  .status-item {
    padding: 6px 8px;
    gap: 6px;
  }
  
  .status-icon {
    font-size: 11px;
  }
  
  .status-title {
    font-size: 10px;
  }
  
  .status-detail {
    font-size: 9px;
  }
  
  .next-milestone {
    font-size: 10px;
    padding: 6px 10px;
    margin-top: 6px;
  }
}

/* Additional specificity to ensure font-size override */
.free-shipping-container .free-shipping-alert,
.shipping-notice-group .free-shipping-alert,
div .free-shipping-alert {
  font-size: 1.2rem !important;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .free-shipping-notice__progress,
  .shipping-notice-group,
  .shipping-icon,
  .free-shipping-alert {
    transition: none;
  }
  
  .almost-there .shipping-amount {
    animation: none;
  }
  
  .shipping-notice-group:hover {
    transform: none;
  }
}

/* Subtle Hover Effects */
@media (hover: hover) {
  .unified-shipping-container:hover {
    transform: none;
    box-shadow: none;
  }
  
  .status-item:hover {
    transform: scale(1.01);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 4px 12px rgba(232, 93, 117, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  
  .next-milestone:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(232, 93, 117, 0.15);
  }
}

/* Gentle pulse for active elements */
@keyframes gentlePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(232, 93, 117, 0.06);
  }
  50% {
    transform: scale(1.005);
    box-shadow: 0 3px 10px rgba(232, 93, 117, 0.08);
  }
}

.shipping-badge.active {
  animation: gentlePulse 3s ease-in-out infinite;
}

/* Performance optimizations */
.unified-shipping-container {
  will-change: transform;
}

.progress-fill {
  will-change: width;
}

.milestone-marker {
  will-change: transform, box-shadow;
}

/* Focus states for accessibility */
.unified-shipping-container:focus-within {
  outline: 2px solid rgba(232, 93, 117, 0.3);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
  
  .unified-shipping-container::before {
    animation: none;
  }
}