/** Shopify CDN: Minification failed

Line 1027:0 Comments in CSS use "/* ... */" instead of "//"
Line 1224:0 Unexpected "}"

**/
/* ========================================
   FEMIRA.PL - CUSTOM CSS
   Premium Medical FemTech Brand
   Shrine Theme Customization
   ======================================== */

/* ========================================
   1. GLOBAL REFINEMENTS
   ======================================== */

/* Smooth scrolling for all anchor links */
html {
  scroll-behavior: smooth;
}

/* Better font smoothing for premium feel */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove blue highlight on mobile taps (cleaner UX) */
* {
  -webkit-tap-highlight-color: transparent;
}


/* ========================================
   2. ENHANCED SHADOWS (Premium Depth)
   ======================================== */

/* Product cards - more pronounced shadow */
.card-wrapper,
.product-card-wrapper {
  box-shadow: 0 8px 20px rgba(107, 76, 92, 0.12) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-wrapper:hover,
.product-card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(107, 76, 92, 0.18) !important;
}

/* Buttons - subtle lift on hover */
.button,
button,
[type="button"],
[type="submit"] {
  box-shadow: 0 4px 12px rgba(107, 76, 92, 0.15) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover,
button:hover,
[type="button"]:hover,
[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(107, 76, 92, 0.22) !important;
}


/* ========================================
   3. UNIQUE ROUNDED CORNERS (Brand Signature)
   ======================================== */

/* Increase corner radius for unique look */
.card,
.product-card,
.collection-card,
img {
  border-radius: 12px !important;
}

.button,
button,
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  border-radius: 8px !important;
}

/* Pills - fully rounded */
.variant-pills .variant-input,
.color-swatch,
.size-selector {
  border-radius: 24px !important;
}


/* ========================================
   4. PREMIUM TYPOGRAPHY REFINEMENTS
   ======================================== */

/* Headings - better hierarchy */
h1, .h1 {
  letter-spacing: -0.5px;
  font-weight: 400;
  line-height: 1.1;
}

h2, .h2 {
  letter-spacing: -0.3px;
  font-weight: 400;
  line-height: 1.2;
}

h3, .h3 {
  letter-spacing: 0px;
  font-weight: 500;
  line-height: 1.3;
}

/* Body text - optimal readability */
p,
.body-text {
  letter-spacing: 0.3px;
  line-height: 1.6;
  color: #2D2D2D;
}

/* Price styling - premium display */
.price {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: #6B4C5C;
}

.price--on-sale {
  color: #E8B4B8;
}

/* Product title on cards - prevent orphans */
.card__heading,
.product-title {
  text-wrap: balance;
  max-width: 100%;
}


/* ========================================
   5. ZERO BORDERS PHILOSOPHY
   ======================================== */

/* Remove default borders, rely on shadows */
.card,
.product-card,
.collection-card,
.media,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: none !important;
}

/* Exception: Very subtle border for inputs (accessibility) */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  border: 1px solid rgba(107, 76, 92, 0.15) !important;
  transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(107, 76, 92, 0.4) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(107, 76, 92, 0.08);
}


/* ========================================
   6. MEDICAL TRUST ELEMENTS
   ======================================== */

/* Trust badges - subtle premium styling */
.trust-badge,
.payment-icons,
.security-badge {
  opacity: 0.7;
  transition: opacity 0.2s ease;
  filter: grayscale(20%);
}

.trust-badge:hover,
.payment-icons:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Checkmarks and icons - brand color */
.icon-check,
.icon-success,
svg[class*="check"] {
  color: #6B4C5C;
  fill: #6B4C5C;
}

/* Medical certification badges */
.certification-badge {
  border: 1px solid rgba(168, 213, 186, 0.3);
  background: rgba(168, 213, 186, 0.05);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  color: #6B4C5C;
  font-weight: 500;
}


/* ========================================
   7. PREMIUM PRODUCT PAGE
   ======================================== */

/* Product gallery - better spacing */
.product__media-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(107, 76, 92, 0.1);
}

/* Product info section - refined spacing */
.product__info-wrapper {
  padding: 24px;
}

/* Variant selector - refined */
.product-form__input {
  margin-bottom: 16px;
}

.product-form__input label {
  font-weight: 500;
  color: #6B4C5C;
  margin-bottom: 8px;
  display: block;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Add to cart button - hero styling */
.product-form__submit {
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #E8B4B8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(232, 180, 184, 0.4) !important;
}

.product-form__submit:hover {
  background: #D9A5A9 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 180, 184, 0.5) !important;
}

/* Quantity selector - refined */
.quantity__input {
  font-weight: 600;
  color: #6B4C5C;
}

.quantity__button {
  color: #6B4C5C;
  transition: all 0.2s ease;
}

.quantity__button:hover {
  background: rgba(107, 76, 92, 0.08);
  transform: scale(1.1);
}


/* ========================================
   8. CART DRAWER PREMIUM
   ======================================== */

/* Cart drawer - dramatic shadow */
.drawer {
  box-shadow: -16px 0 48px rgba(107, 76, 92, 0.25) !important;
}

/* Cart items - refined */
.cart-item {
  border-bottom: 1px solid rgba(107, 76, 92, 0.08);
  padding: 20px 0;
}

.cart-item:last-child {
  border-bottom: none;
}

/* Cart total - emphasis */
.cart__footer {
  border-top: 2px solid #E8B4B8;
  padding-top: 24px;
  margin-top: 24px;
}

.totals__subtotal-value {
  font-size: 24px;
  font-weight: 700;
  color: #6B4C5C;
  letter-spacing: -0.5px;
}

/* Checkout button - premium CTA */
.cart__checkout-button {
  min-height: 56px;
  background: #6B4C5C !important;
  color: #FFFFFF !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(107, 76, 92, 0.3) !important;
}

.cart__checkout-button:hover {
  background: #5A3D4D !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 76, 92, 0.4) !important;
}


/* ========================================
   9. HOMEPAGE HERO REFINEMENTS
   ======================================== */

/* Hero section - better text hierarchy */
.hero__title {
  text-shadow: 0 2px 8px rgba(26, 26, 26, 0.1);
}

/* Hero CTA - maximum prominence */
.hero .button--primary {
  min-height: 64px;
  font-size: 18px;
  padding: 0 48px;
  box-shadow: 0 8px 24px rgba(232, 180, 184, 0.4) !important;
}

.hero .button--primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(232, 180, 184, 0.5) !important;
}


/* ========================================
   10. MICRO-INTERACTIONS (Premium Feel)
   ======================================== */

/* Links - subtle underline on hover */
a:not(.button) {
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

a:not(.button):hover {
  color: #E8B4B8;
}

a:not(.button)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #E8B4B8;
  transition: width 0.3s ease;
}

a:not(.button):hover::after {
  width: 100%;
}

/* Image zoom on hover (product cards) */
.card__media img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-wrapper:hover .card__media img {
  transform: scale(1.05);
}

/* Loading states - premium spinner */
.loading-overlay__spinner {
  border-color: rgba(232, 180, 184, 0.2);
  border-top-color: #E8B4B8;
}


/* ========================================
   11. ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus states - brand color */
*:focus-visible {
  outline: 2px solid #E8B4B8;
  outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content-link:focus {
  background: #6B4C5C;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 8px;
}

/* High contrast for readability */
::selection {
  background: rgba(232, 180, 184, 0.3);
  color: #1A1A1A;
}


/* ========================================
   12. MOBILE OPTIMIZATIONS
   ======================================== */

@media screen and (max-width: 749px) {
  
  /* Larger tap targets */
  .button,
  button,
  a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better spacing on mobile */
  .product__info-wrapper {
    padding: 16px;
  }
  
  /* Sticky add to cart on mobile */
  .product-form__submit {
    position: sticky;
    bottom: 16px;
    z-index: 10;
  }
  
  /* Hero text sizing */
  .hero__title {
    font-size: clamp(32px, 8vw, 48px);
  }
  
}


/* ========================================
   13. ANIMATIONS (Subtle Premium)
   ======================================== */

/* Fade in animation for sections */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  animation: fadeInUp 0.6s ease-out;
}

/* Pulse animation for sale badges */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.badge--sale {
  animation: pulse 2s infinite;
}


/* ========================================
   14. UNIQUE FEMIRA TOUCHES
   ======================================== */

/* Custom scrollbar (BRAND SIGNATURE!) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F8F9FA;
}

::-webkit-scrollbar-thumb {
  background: #6B4C5C;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5A3D4D;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #6B4C5C #F8F9FA;
}

/* Brand accent line (top of page) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6B4C5C 0%, #E8B4B8 50%, #6B4C5C 100%);
  z-index: 9999;
}

/* Testimonials - premium styling */
.testimonial {
  border-left: 3px solid #E8B4B8;
  padding-left: 20px;
  font-style: italic;
  color: #6B4C5C;
}

.testimonial-author {
  font-weight: 600;
  color: #2D2D2D;
  font-style: normal;
  margin-top: 12px;
}


/* ========================================
   15. PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for animations */
.card-wrapper,
.button,
img {
  will-change: transform;
}

/* Lazy loading placeholder
img[loading="lazy"] {
  background: linear-gradient(90deg, #F3F3F3 0%, #E8E8E8 50%, #F3F3F3 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
} */

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}


/* ========================================
   16. NEWSLETTER & POPUPS
   ======================================== */

/* Newsletter form - premium */
.newsletter-form {
  border-radius: 12px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(232, 180, 184, 0.05) 0%, rgba(107, 76, 92, 0.05) 100%);
  box-shadow: 0 8px 24px rgba(107, 76, 92, 0.08);
}

.newsletter-form__button {
  background: #6B4C5C !important;
  color: #FFFFFF !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Popup - dramatic entrance */
.popup-modal {
  animation: popupEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(107, 76, 92, 0.3) !important;
}

@keyframes popupEnter {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ========================================
   17. FOOTER REFINEMENTS
   ======================================== */

.footer {
  border-top: 1px solid rgba(107, 76, 92, 0.1);
  padding-top: 48px;
  margin-top: 80px;
}

.footer__heading {
  color: #6B4C5C;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px;
}

.footer__list-social a {
  transition: all 0.2s ease;
}

.footer__list-social a:hover {
  transform: translateY(-3px);
  color: #E8B4B8;
}


/* ========================================
   18. BLOG & CONTENT PAGES
   ======================================== */

/* Article typography */
.article__content {
  max-width: 720px;
  margin: 0 auto;
}

.article__content p {
  margin-bottom: 24px;
  line-height: 1.8;
}

.article__content h2 {
  margin-top: 48px;
  margin-bottom: 24px;
  color: #6B4C5C;
}

.article__content img {
  border-radius: 12px;
  margin: 32px 0;
  box-shadow: 0 8px 24px rgba(107, 76, 92, 0.12);
}


/* ========================================
   19. SPECIAL EFFECTS (Use Sparingly)
   ======================================== */

/* Glass morphism for special sections */
.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Gradient text for special headings */
.gradient-text {
  background: linear-gradient(135deg, #6B4C5C 0%, #E8B4B8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ========================================
   20. DARK MODE PREPARATION (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* Keep Femira light-only for medical trust
     But prepare variables if needed */
  
  /* Uncomment if you want dark mode support:
  
  body {
    background: #1A1A1A;
    color: #F9F6F2;
  }
  
  .card,
  .product-card {
    background: #2D2D2D;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  
  */
}


/* ========================================
   21. CRITICAL FIXES (From Theme Audit)
   ======================================== */

/* Fix #1: Page Width Optimization */
.page-width,
.container {
  max-width: 1200px !important;
  margin: 0 auto;
}

/* Fix #2: Section Spacing (Was 0px!) */
.shopify-section {
  margin-bottom: 48px;
}

.shopify-section:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 989px) {
  .shopify-section {
    margin-bottom: 32px;
  }
}

@media screen and (max-width: 749px) {
  .shopify-section {
    margin-bottom: 24px;
  }
}

/* Fix #3: Enhanced Header - Override inline styles */
.header-wrapper {
  background: rgba(255, 255, 255, 0.95) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.transparent-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(107, 76, 92, 0.08) !important;
  box-shadow: 0 4px 12px rgba(107, 76, 92, 0.06) !important;
}

/* Fix #4: Enhanced Mobile CTAs */
@media screen and (max-width: 749px) {
  .hero .button--primary {
    min-height: 56px !important;
    font-size: 16px !important;
    padding: 0 32px !important;
  }
  
  /* Stronger sticky CTA on mobile */
  .product-form__submit {
    position: sticky !important;
    bottom: 16px;
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(107, 76, 92, 0.25) !important;
  }
}

/* Fix #5: Hide Shrine Branding */
.footer__content-bottom-wrapper p:has(a[href*="shrinetheme"]) {
  display: none !important;
}

a[href*="shrinetheme"] {
  display: none !important;
}

/* Fix #6: Trust Badges Container */
.trust-badges-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(168, 213, 186, 0.08);
  border: 1px solid rgba(168, 213, 186, 0.2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6B4C5C;
  transition: all 0.2s ease;
}

.trust-badge:hover {
  background: rgba(168, 213, 186, 0.12);
  transform: translateY(-2px);
}

.trust-badge svg,
.trust-badge img {
  width: 20px;
  height: 20px;
}

/* Fix #7: Product Page Trust Signals */
.product__info-wrapper .trust-signals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
  padding: 20px;
  background: #F8F9FA;
  border-radius: 12px;
}

.trust-signal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #1A1A1A;
}

.trust-signal-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #6B4C5C;
}

/* Fix #8: Enhanced Cart Progress Bar */
.cart__progress {
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(232, 180, 184, 0.1) 0%, rgba(107, 76, 92, 0.1) 100%);
  border-radius: 12px;
  text-align: center;
}

.cart__progress-bar {
  height: 8px;
  background: #E8E8E8;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

.cart__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6B4C5C 0%, #E8B4B8 100%);
  border-radius: 8px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fix #9: Improve Focus States (Accessibility) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #E8B4B8 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fix #10: Better Image Loading States */
img:not([src]):not([srcset]) {
  background: linear-gradient(90deg, #F3F3F3 0%, #E8E8E8 50%, #F3F3F3 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
/* ============================================
   FEMIRA - STICKY ATC Z-INDEX FIX - SHRINE THEME
   ============================================ */

/* ANNOUNCEMENT BAR - najwyższy */
.shopify-section-header-group,
#shopify-section-announcement-bar,
.announcement-bar {
  z-index: 1000 !important;
  position: relative !important;
}

/* HEADER - drugi w hierarchii */
.shopify-section-group-header-group,
.header-wrapper,
.header,
header {
  z-index: 999 !important;
  position: sticky !important;
}

/* STICKY PRZYCISK - najniższy (chowa się POD headerem) */
sticky-atc,
.sticky-atc {
  z-index: 10 !important;
}

/* MEGA MENU */
.mega-menu,
.header__menu,
[data-disclosure-menu] {
  z-index: 998 !important;
}

/* MOBILE MENU */
.mobile-nav-wrapper,
.drawer,
[id*="mobile-menu"] {
  z-index: 997 !important;
}

/* MODALS I OVERLAYE */
.modal,
.overlay,
[role="dialog"],
.cart-drawer {
  z-index: 9999 !important;
}

/* SEARCH BAR */
.predictive-search,
.search-modal {
  z-index: 996 !important;
}

.drawer,
.cart-drawer,
[id*="cart-drawer"],
.shopify-section-cart-drawer,
cart-drawer {
  z-index: 10000 !important;
}


.cart-drawer .quantity__input,
.cart-drawer input[type="number"] {
  width: 50px !important;
  height: 36px !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 0 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
}

/* PRZYCISKI (- i +) */
.cart-drawer .quantity__button,
.cart-drawer button[name="minus"],
.cart-drawer button[name="plus"] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
}

.cart-drawer .quantity__button:hover {
  background: #f5f5f5 !important;
  border-color: #E8B4B8 !important;
}

/* WRAPPER (kontener - minus, input, plus) */
.cart-drawer .quantity__wrapper,
.cart-drawer .cart-item__quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
}



/* Jeśli X jest tekstem (nie SVG) */








//* ============================================
   FEMIRA - DRAWER CLOSE BUTTON (FINAL FIX)
   Problem: Pusty koszyk = button w .cart-drawer__empty-content (centered)
            Aktywny koszyk = button w normalnym headerze
   Rozwiązanie: Wyciągnięcie buttona z flow + absolute positioning
   ============================================ */

/* PUSTY KOSZYK - button w .cart-drawer__empty-content */
.cart-drawer__empty-content button.drawer__close,
.cart-drawer__warnings button.drawer__close {
  /* Wyciągnięcie z centered parent */
  position: absolute !important;
  top: 20px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  
  /* Reset margin (parent może mieć auto) */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  
  /* Wymiary */
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  
  /* Wyśrodkowanie SVG */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Reset */
  padding: 0 !important;
  border: none !important;
  background: none !important;
  z-index: 100 !important;
}

/* AKTYWNY KOSZYK - button normalnie w headerze */
cart-drawer:not(:has(.cart-drawer__empty-content)) button.drawer__close,
.cart-drawer:not(:has(.cart-drawer__empty-content)) button.drawer__close {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  padding: 0 !important;
  border: none !important;
  background: none !important;
  z-index: 100 !important;
}

/* WSPÓLNE - SVG ikona */
button.drawer__close svg.icon-close {
  width: 18px !important;
  height: 17px !important;
  display: block !important;
  margin: 0 auto !important;
  color: currentColor !important;
  transform: none !important;
}

button.drawer__close svg.icon-close path {
  fill: currentColor !important;
}

/* HOVER - zachowaj pozycje */
.cart-drawer__empty-content button.drawer__close:hover,
.cart-drawer__warnings button.drawer__close:hover {
  top: 20px !important;
  right: 16px !important;
  transform: none !important;
}

cart-drawer:not(:has(.cart-drawer__empty-content)) button.drawer__close:hover {
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
}

/* ACTIVE - efekt kliknięcia */
.cart-drawer__empty-content button.drawer__close:active {
  transform: scale(0.95) !important;
}

cart-drawer:not(:has(.cart-drawer__empty-content)) button.drawer__close:active {
  transform: translateY(-50%) scale(0.95) !important;
}











.cart-item__discounted-prices {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: flex-end !important;
  gap: 4px !important;
}










/* FEMIRA - UPSELL TOGGLE HEIGHT FIX */
@media screen and (max-width: 749px) {
  button.upsell__toggle-switch,
  button.toggle-switch {
    min-height: 21px !important;
    height: 21px !important;
    min-width: auto !important;
  }
}

.upsell__container {
  display: grid !important;
  grid-template-columns: 50px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
}












/* FEMIRA - UPSELL IMAGE & SPACING FIX */
/* FEMIRA - UPSELL FONT SIZES */
.cart-drawer-upsells-container,
.upsells-container {
  --title-font-size: 1.7rem !important;
  --desc-font-size: 1.2rem !important;
  --price-font-size: 1.5rem !important;
}

.upsell__image__img {
  width: none !important;
  height: none !important;
  max-width: none !important;
  object-fit: contain !important;
}

.upsell__content {
  margin-left: 15px !important;
}
























}

/* ========================================
   END OF FEMIRA CUSTOM CSS
   
   VERSION: 2.0 (Updated with Audit Fixes)
   LAST UPDATE: 17 Jan 2025
   
   DEPLOYMENT INSTRUCTIONS:
   1. Shopify Admin → Online Store → Themes
   2. Click "..." on current theme → Edit code
   3. Assets → femira-custom.css (already exists - REPLACE content)
   4. In theme.liquid, after base.css, add:
      {{ 'femira-custom.css' | asset_url | stylesheet_tag }}
   5. Save and preview
   
   CRITICAL FIXES INCLUDED:
   - Page width: 1400px → 1200px
   - Section spacing: 0px → 48px
   - Header: absolute → sticky (glassmorphism enhanced)
   - Mobile CTAs: 56px height minimum
   - Shrine branding: hidden
   - Trust badges: premium styling
   - Performance: optimized animations
   
   PRIORITY RULES:
   - All !important flags override theme defaults
   - Remove !important if conflicts occur
   - Test on mobile first (70% of traffic)
   
   SUPPORT:
   - Brand colors from Brand DNA
   - Typography: DM Serif Display + DM Sans
   - Spacing: 8pt grid system (8, 12, 16, 24, 32, 48)
   ======================================== */