/**
 * ALESTA STOREFRONT — FAZ 22: HOMEPAGE V2 & PRODUCT CARD V2 DESIGN SYSTEM
 * Aligns with reference mockup: media_1790001967718.jpg
 * - Compact ProductCard V2 (6 products across wide desktop, 1px #e2e8f0 border, removal of nested grey frame #f7f7f6)
 * - Brand / Title (2-line clamp) / Rating / Price hierarchy
 * - Compact bottom-right navy #0f172a cart button
 * - Floating top-right heart favorite outline button & top-left red discount badge
 * - Category shortcuts strip (circular soft-grey pills with icons & labels)
 * - Modern showcase header with category filter pills and navigation arrows
 * - 4-item modern trust strip (distinct rounded white cards)
 * - Floating WhatsApp quick action button
 */

:root {
  --p22-primary: #0f172a;
  --p22-primary-hover: #000000;
  --p22-accent: #2563eb;
  --p22-danger: #ef4444;
  --p22-warning: #f59e0b;
  --p22-border: #e2e8f0;
  --p22-border-light: #f1f5f9;
  --p22-text-main: #0f172a;
  --p22-text-muted: #64748b;
  --p22-text-light: #94a3b8;
  --p22-bg-soft: #f8fafc;
  --p22-card-bg: #ffffff;
  --p22-radius-sm: 8px;
  --p22-radius-md: 14px;
  --p22-radius-lg: 18px;
  --p22-radius-full: 9999px;
  --p22-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --p22-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --p22-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}

/* Coupon authentication dialog */
body.sf-coupon-auth-open {
  overflow: hidden !important;
}
.sf-coupon-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.sf-coupon-auth-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.sf-coupon-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sf-coupon-auth-dialog {
  position: relative;
  width: min(100%, 430px);
  padding: 34px 30px 24px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 24px;
  background: linear-gradient(155deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
  text-align: center;
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;
  overflow: hidden;
}
.sf-coupon-auth-dialog::before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  right: -90px;
  top: -105px;
  border-radius: 50%;
  background: rgba(37, 99, 235, .08);
}
.sf-coupon-auth-modal.is-open .sf-coupon-auth-dialog {
  transform: translateY(0) scale(1);
}
.sf-coupon-auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #64748b;
  font-size: 20px;
  cursor: pointer;
}
.sf-coupon-auth-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 17px;
  border-radius: 21px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #2563eb, #4f46e5);
  color: #fff;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .25);
  font-size: 31px;
}
.sf-coupon-auth-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}
.sf-coupon-auth-dialog h2 {
  margin: 0 0 9px !important;
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.sf-coupon-auth-dialog p {
  margin: 0 auto 23px !important;
  max-width: 345px;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.sf-coupon-auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sf-coupon-auth-actions a {
  min-height: 48px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sf-coupon-auth-actions a:hover {
  transform: translateY(-1px);
}
.sf-coupon-auth-actions .is-primary {
  background: #0f172a;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
}
.sf-coupon-auth-actions .is-secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1e293b !important;
}
.sf-coupon-auth-later {
  margin-top: 17px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
@media (max-width: 575px) {
  .sf-coupon-auth-modal { padding: 14px; align-items: flex-end; }
  .sf-coupon-auth-dialog { width: 100%; padding: 30px 20px 20px; border-radius: 22px; }
  .sf-coupon-auth-dialog h2 { font-size: 21px !important; }
  .sf-coupon-auth-actions { grid-template-columns: 1fr; }
}

/* ===================================================
   MOBILE CART — resilient layout for Safari desktop-mode viewports
   =================================================== */
@media (max-width: 1100px) {
  .storefront-cart-page #output > .cart-head,
  .storefront-cart-page #output .cart-left-box-main.cart-head,
  #output > .cart-head,
  #output .cart-left-box-main.cart-head {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .storefront-cart-page .cart-main-div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .storefront-cart-page .cart-left-div,
  .storefront-cart-page .cart-right-div,
  .storefront-cart-page #output {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }

  .storefront-cart-page #output > .cart-left-box-main:not(.cart-head) {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) minmax(92px, auto) !important;
    grid-template-rows: minmax(44px, auto) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
  }

  .storefront-cart-page #output .cart-left-box-1 {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    width: 80px !important;
    height: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .storefront-cart-page #output .cart-left-box-1 img {
    display: block !important;
    width: 80px !important;
    height: 88px !important;
    object-fit: contain !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
  }

  .storefront-cart-page #output .cart-left-box-2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
  }

  .storefront-cart-page #output .cart-left-box-2-txt,
  .storefront-cart-page #output .cart-left-box-2-txt > a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  .storefront-cart-page #output .cart-left-box-2-txt > a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  .storefront-cart-page #output .cart-left-box-3 {
    display: none !important;
  }

  .storefront-cart-page #output .cart-left-box-4 {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .storefront-cart-page #output .cart-left-box-4 .sf-quantity-stepper {
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  .storefront-cart-page #output .cart-left-box-4 .sf-qty-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 36px !important;
  }

  .storefront-cart-page #output .cart-left-box-4 .sf-qty-input {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .storefront-cart-page #output .cart-left-box-5 {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: end !important;
    width: 100% !important;
    min-width: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
  }

  .storefront-cart-page #output .cart-left-box-5 strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .storefront-cart-page #output .cart-left-box-6 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .storefront-cart-page #output .cart-left-box-6 .sf-cart-btn-trash {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    font-size: 18px !important;
  }
}

@media (max-width: 420px) {
  .storefront-cart-page .cart-main-div {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .storefront-cart-page #output > .cart-left-box-main:not(.cart-head) {
    grid-template-columns: 72px minmax(0, 1fr) minmax(84px, auto) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .storefront-cart-page #output .cart-left-box-1,
  .storefront-cart-page #output .cart-left-box-1 img {
    width: 72px !important;
    height: 80px !important;
  }

  .storefront-cart-page #output .cart-left-box-2-txt,
  .storefront-cart-page #output .cart-left-box-2-txt > a {
    font-size: 13px !important;
  }

  .storefront-cart-page #output .cart-left-box-5 {
    min-width: 84px !important;
  }

  .storefront-cart-page #output .cart-left-box-5 strong {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   1. PRODUCT CARD V2 FOUNDATION & HIERARCHY
   ========================================================================== */

/* Main Card Surface */
.storefront-phase15 .cat-detail-products-box,
.storefront-phase15 .cat-detail-products-box-big,
.storefront-phase15 .cat-detail-products-box-caturunvitrin,
.storefront-phase15 .firsat-product-box,
.cat-detail-products-box,
.cat-detail-products-box-caturunvitrin {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  background: var(--p22-card-bg) !important;
  border: 1px solid var(--p22-border) !important;
  border-radius: var(--p22-radius-md) !important;
  padding: 14px 14px 16px !important;
  box-shadow: var(--p22-shadow-sm) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease !important;
}

.storefront-phase15 .cat-detail-products-box:hover,
.storefront-phase15 .cat-detail-products-box-big:hover,
.storefront-phase15 .cat-detail-products-box-caturunvitrin:hover,
.cat-detail-products-box:hover,
.cat-detail-products-box-caturunvitrin:hover {
  transform: translateY(-4px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: var(--p22-shadow-hover) !important;
}

/* Removal of Nested Grey Image Frame #f7f7f6 -> Pure Clean Image Canvas */
.storefront-phase15 .cat-detail-products-box-img,
.storefront-phase15 .cat-detail-products-box-img-big,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-img,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-img-3,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-img-4,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-img-5,
.storefront-phase15 .firsat-product-box-img,
.cat-detail-products-box-img,
.cat-detail-products-box-caturunvitrin-img,
.cat-detail-products-box-caturunvitrin-img-5 {
  position: relative !important;
  height: 165px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 0 12px 0 !important;
  border-radius: 10px !important;
  background: transparent !important; /* Clears nested grey frame #f7f7f6 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 4px !important;
}

.storefront-phase15 .cat-detail-products-box-img img,
.storefront-phase15 .cat-detail-products-box-img-big img,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-img img,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-img-5 img,
.cat-detail-products-box-img img,
.cat-detail-products-box-caturunvitrin-img-5 img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.storefront-phase15 .cat-detail-products-box:hover img,
.storefront-phase15 .cat-detail-products-box-caturunvitrin:hover img,
.cat-detail-products-box:hover img,
.cat-detail-products-box-caturunvitrin:hover img {
  transform: scale(1.05) !important;
}

/* Top-Left Discount Pill Badge (% 12) */
.storefront-phase15 .cat-detail-products-box-indirim,
.cat-detail-products-box-indirim {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  background: var(--p22-danger) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 6px !important;
  line-height: 1.25 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
  border: none !important;
  align-self: flex-start !important;
}

/* Top-Right Favorite Heart Outline Button */
.cat-detail-products-box-cart-1 {
  position: static !important;
}

.storefront-phase15 .cat-detail-products-box-cart-1 a.product-fav-go,
.storefront-phase15 .cat-detail-products-box-cart-1 a.product-fav-del,
.storefront-phase15 .cat-detail-products-box-cart-1 a[data-target="#loginModal"],
.cat-detail-products-box-cart-1 a.product-fav-go,
.cat-detail-products-box-cart-1 a.product-fav-del,
.cat-detail-products-box-cart-1 a[data-target="#loginModal"] {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--p22-border-light) !important;
  color: var(--p22-text-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.storefront-phase15 .cat-detail-products-box-cart-1 a.product-fav-go:hover,
.storefront-phase15 .cat-detail-products-box-cart-1 a[data-target="#loginModal"]:hover,
.cat-detail-products-box-cart-1 a.product-fav-go:hover {
  color: var(--p22-danger) !important;
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
  transform: scale(1.08) !important;
}

.storefront-phase15 .cat-detail-products-box-cart-1 a.product-fav-del,
.cat-detail-products-box-cart-1 a.product-fav-del {
  color: var(--p22-danger) !important;
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

/* Hide comparison button from floating stack if present */
.cat-detail-products-box-cart-1 a.product-compare {
  display: none !important;
}

/* Compact Bottom-Right Navy #0f172a Cart Button */
.storefront-phase15 .cat-detail-products-box-cart-1 form,
.cat-detail-products-box-cart-1 form {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  margin: 0 !important;
}

.storefront-phase15 .cat-detail-products-box-cart-1 button,
.cat-detail-products-box-cart-1 button {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  margin: 0 !important;
}

.storefront-phase15 .cat-detail-products-box-cart-1 button[name="addtocart"],
.storefront-phase15 .cat-detail-products-box-cart-1 button[data-target="#varyantModal"],
.cat-detail-products-box-cart-1 button[name="addtocart"],
.cat-detail-products-box-cart-1 button[data-target="#varyantModal"] {
  position: static !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--p22-radius-sm) !important;
  background: var(--p22-primary) !important;
  border: none !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-size: 14px !important;
}

.storefront-phase15 .cat-detail-products-box-cart-1 button[name="addtocart"]:hover,
.storefront-phase15 .cat-detail-products-box-cart-1 button[data-target="#varyantModal"]:hover,
.cat-detail-products-box-cart-1 button[name="addtocart"]:hover,
.cat-detail-products-box-cart-1 button[data-target="#varyantModal"]:hover {
  background: var(--p22-primary-hover) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28) !important;
}

/* Product Info Block */
.storefront-phase15 .cat-detail-products-box-info,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-info,
.cat-detail-products-box-info,
.cat-detail-products-box-caturunvitrin-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* Brand Name */
.storefront-phase15 .cat-detail-products-box-marka,
.cat-detail-products-box-marka {
  margin-bottom: 3px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--p22-text-light) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

.storefront-phase15 .cat-detail-products-box-marka a,
.cat-detail-products-box-marka a {
  color: var(--p22-text-light) !important;
  text-decoration: none !important;
}

/* Product Title — 2-Line Clamp with Crisp Typography */
.storefront-phase15 .cat-detail-products-box-h,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-h,
.cat-detail-products-box-h,
.cat-detail-products-box-caturunvitrin-h {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--p22-text-main) !important;
  line-height: 1.4 !important;
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: 36px !important;
  height: 36px !important;
}

.storefront-phase15 .cat-detail-products-box-h a,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-h a,
.cat-detail-products-box-h a,
.cat-detail-products-box-caturunvitrin-h a {
  color: var(--p22-text-main) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.storefront-phase15 .cat-detail-products-box-h a:hover,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-h a:hover,
.cat-detail-products-box-h a:hover {
  color: var(--p22-accent) !important;
}

/* Star Rating */
.storefront-phase15 .cat-detail-products-box-stars,
.cat-detail-products-box-stars {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 12px !important;
  color: var(--p22-warning) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1 !important;
}

.storefront-phase15 .cat-detail-products-box-stars .pasif-span,
.cat-detail-products-box-stars .pasif-span {
  color: var(--p22-warning) !important;
  letter-spacing: 1px !important;
  font-size: 11px !important;
}

/* Price Hierarchy Block - Perfectly Left-Aligned & Balanced */
.storefront-phase15 .cat-detail-products-box-fiyat,
.storefront-phase15 .cat-detail-products-box-caturunvitrin-fiyat,
.storefront-phase17 .cat-detail-products-box-fiyat,
.storefront-phase17 .cat-detail-products-box-caturunvitrin-fiyat,
.cat-detail-products-box-fiyat,
.cat-detail-products-box-caturunvitrin-fiyat {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  min-height: 44px !important;
  margin-top: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 46px !important; /* Space reserved for bottom-right cart button */
  gap: 2px !important;
  box-sizing: border-box !important;
  position: static !important; /* CRITICAL: Must be static so .cat-detail-products-box-indirim badge positions relative to entire card, not overlapping price text */
}

.storefront-phase15 .cat-detail-products-box-fiyat-out,
.storefront-phase17 .cat-detail-products-box-fiyat-out,
.cat-detail-products-box-fiyat-out {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.storefront-phase15 .cat-detail-products-box-fiyat-eski,
.storefront-phase17 .cat-detail-products-box-fiyat-eski,
.cat-detail-products-box-fiyat-eski {
  order: -1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  align-self: flex-start !important;
  text-align: left !important;
  display: block !important;
}

.storefront-phase15 .cat-detail-products-box-fiyat-mevcut,
.storefront-phase17 .cat-detail-products-box-fiyat-mevcut,
.cat-detail-products-box-fiyat-mevcut {
  font-size: 18px !important;
  font-weight: 850 !important;
  color: var(--p22-text-main) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  align-self: flex-start !important;
  text-align: left !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 2px 6px !important;
}

/* Modern "Size Özel Fiyat" Badge */
.cat-detail-products-box-special-out,
.storefront-phase15 .cat-detail-products-box-special-out,
.storefront-phase17 .cat-detail-products-box-special-out {
  display: block !important;
  width: 100% !important;
  order: -1 !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.cat-detail-products-box-special,
.storefront-phase15 .cat-detail-products-box-special,
.storefront-phase17 .cat-detail-products-box-special,
.cat-detail-products-box-special.button-green,
.cat-detail-products-box-special.button-blue,
.cat-detail-products-box-special.button-grey,
.cat-detail-products-box-special.button-red,
.cat-detail-products-box-special.button-black {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 9999px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  width: fit-content !important;
  margin: 0 !important;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.06) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cat-detail-products-box-special:hover,
.storefront-phase15 .cat-detail-products-box-special:hover,
.storefront-phase17 .cat-detail-products-box-special:hover {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border-color: #6ee7b7 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15) !important;
}

.cat-detail-products-box-special i,
.storefront-phase15 .cat-detail-products-box-special i,
.storefront-phase17 .cat-detail-products-box-special i {
  font-size: 10px !important;
  color: #10b981 !important;
  margin: 0 !important;
  line-height: 1 !important;
}


/* ==========================================================================
   2. 6-PRODUCT RESPONSIVE SHOWCASE GRID
   ========================================================================== */

.storefront-phase15 .home-product-tabcontent-in,
.home-product-tabcontent-in {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.storefront-phase15 .home-product-tabcontent-in > .cat-detail-products-box,
.storefront-phase15 .home-product-tabcontent-in > .cat-detail-products-box-big,
.home-product-tabcontent-in > .cat-detail-products-box {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 1399px) {
  .storefront-phase15 .home-product-tabcontent-in,
  .home-product-tabcontent-in {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

@media (max-width: 1199px) {
  .storefront-phase15 .home-product-tabcontent-in,
  .home-product-tabcontent-in {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 899px) {
  .storefront-phase15 .home-product-tabcontent-in,
  .home-product-tabcontent-in {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 639px) {
  .storefront-phase15 .home-product-tabcontent-in,
  .home-product-tabcontent-in {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .storefront-phase15 .cat-detail-products-box,
  .cat-detail-products-box {
    padding: 10px !important;
  }
  .storefront-phase15 .cat-detail-products-box-img,
  .cat-detail-products-box-img {
    height: 130px !important;
  }
  .storefront-phase15 .cat-detail-products-box-fiyat-mevcut,
  .cat-detail-products-box-fiyat-mevcut {
    font-size: 14px !important;
  }
  .storefront-phase15 .cat-detail-products-box-h,
  .cat-detail-products-box-h {
    font-size: 12px !important;
    line-height: 1.35 !important;
    min-height: 32px !important;
    height: 32px !important;
  }
}

/* ==========================================================================
   3. CATEGORY SHORTCUTS STRIP (CIRCULAR SOFT-GREY PILLS)
   ========================================================================== */

.p22-cat-shortcuts-wrapper {
  width: 100%;
  margin: 24px 0 32px;
  box-sizing: border-box;
}

.p22-cat-shortcuts-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.p22-cat-shortcuts-container::-webkit-scrollbar {
  display: none;
}

.p22-cat-shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.p22-cat-shortcut-item:hover {
  transform: translateY(-3px);
  text-decoration: none !important;
}

.p22-cat-shortcut-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--p22-border-light);
  border: 1px solid var(--p22-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #334155;
  margin-bottom: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--p22-shadow-sm);
}

.p22-cat-shortcut-item:hover .p22-cat-shortcut-icon {
  background: var(--p22-primary);
  border-color: var(--p22-primary);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.p22-cat-shortcut-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--p22-text-main);
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.p22-cat-shortcut-item:hover .p22-cat-shortcut-title {
  color: var(--p22-accent);
}

@media (max-width: 768px) {
  .p22-cat-shortcuts-container {
    gap: 16px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .p22-cat-shortcut-icon {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .p22-cat-shortcut-title {
    font-size: 11px;
  }
}

/* ==========================================================================
   4. SHOWCASE SECTION HEADER (CATEGORY TABS & ARROWS)
   ========================================================================== */

.p22-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--p22-border-light);
}

.p22-showcase-title-area {
  display: flex;
  flex-direction: column;
}

.p22-showcase-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--p22-text-main);
  margin: 0;
  letter-spacing: -0.02em;
}

.p22-showcase-subtitle {
  font-size: 13px;
  color: var(--p22-text-muted);
  margin: 3px 0 0 0;
}

.p22-showcase-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Category Filter Tabs Override */
.storefront-phase15 .home-product-tabs,
.home-product-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-bottom: none !important;
  margin: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.storefront-phase15 .home-product-tablinks,
.home-product-tablinks {
  border: 1px solid transparent !important;
  border-radius: var(--p22-radius-full) !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--p22-text-muted) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.storefront-phase15 .home-product-tablinks p,
.home-product-tablinks p {
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

.storefront-phase15 .home-product-tablinks:hover,
.home-product-tablinks:hover {
  color: var(--p22-text-main) !important;
  background: var(--p22-bg-soft) !important;
}

.storefront-phase15 .home-product-tablinks.active,
.home-product-tablinks.active {
  background: #ffffff !important;
  border-color: var(--p22-border) !important;
  color: var(--p22-text-main) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

.storefront-phase15 .home-product-tablinks.active p,
.storefront-phase15 .home-product-tablinks.active:hover p,
.home-product-tablinks.active p {
  color: var(--p22-text-main) !important;
}

/* Slider / Tab Navigation Arrows */
.p22-slider-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p22-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--p22-border);
  background: #ffffff;
  color: var(--p22-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--p22-shadow-sm);
}

.p22-arrow:hover {
  background: var(--p22-primary);
  border-color: var(--p22-primary);
  color: #ffffff;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .p22-showcase-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .p22-showcase-controls {
    width: 100%;
    justify-content: space-between;
  }
  .p22-slider-arrows {
    display: none;
  }
}

/* ==========================================================================
   5. 4-ITEM MODERN TRUST STRIP (DISTINCT ROUNDED CARDS)
   ========================================================================== */

.storefront-phase15 .ticaret-kutulari-main-div,
.ticaret-kutulari-main-div {
  margin: 36px 0 28px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.storefront-phase15 .ticaret-kutulari-inside,
.ticaret-kutulari-inside {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding: 0 !important;
  width: 100% !important;
}

.storefront-phase15 .ticaret-kutu-box,
.ticaret-kutu-box {
  background: #ffffff !important;
  border: 1px solid var(--p22-border) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  box-shadow: var(--p22-shadow-sm) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.storefront-phase15 .ticaret-kutu-box:hover,
.ticaret-kutu-box:hover {
  transform: translateY(-3px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: var(--p22-shadow-md) !important;
}

.storefront-phase15 .ticaret-kutu-box-i,
.ticaret-kutu-box-i {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin-right: 0 !important;
  border-radius: 10px !important;
  background: var(--p22-bg-soft) !important;
  border: 1px solid var(--p22-border-light) !important;
  color: var(--p22-text-main) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
}

.storefront-phase15 .ticaret-kutu-box-text,
.ticaret-kutu-box-text {
  display: flex !important;
  flex-direction: column !important;
}

.storefront-phase15 .ticaret-kutu-box-text-h,
.ticaret-kutu-box-text-h {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--p22-text-main) !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

.storefront-phase15 .ticaret-kutu-box-text-s,
.ticaret-kutu-box-text-s {
  font-size: 11px !important;
  color: var(--p22-text-muted) !important;
  line-height: 1.4 !important;
}

@media (max-width: 1024px) {
  .storefront-phase15 .ticaret-kutulari-inside,
  .ticaret-kutulari-inside {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 580px) {
  .storefront-phase15 .ticaret-kutulari-inside,
  .ticaret-kutulari-inside {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .storefront-phase15 .ticaret-kutu-box,
  .ticaret-kutu-box {
    padding: 12px 14px !important;
  }
}

/* ==========================================================================
   6. FLOATING WHATSAPP & RETURN-TO-TOP (STACKED & NO OVERLAP)
   ========================================================================== */

.p22-whatsapp-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #25d366 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
  z-index: 9998 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
}

.p22-whatsapp-float:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.6) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Return to top - positioned cleanly ABOVE WhatsApp button */
#return-to-top {
  position: fixed !important;
  bottom: 88px !important;
  right: 26px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
  z-index: 9997 !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

#return-to-top:hover {
  background-color: #1e293b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

#return-to-top i {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  transition: transform 0.2s ease !important;
}

#return-to-top:hover i {
  transform: translate(-50%, -62%) !important;
}

@media (max-width: 768px) {
  .p22-whatsapp-float {
    bottom: 74px !important; /* Above mobile bottom bar (60px) */
    right: 18px !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 26px !important;
  }

  #return-to-top {
    bottom: 128px !important; /* Cleanly above WhatsApp on mobile */
    right: 19px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ==========================================================================
   GLOBAL FIXES: HEADER NAVBUTTONS & FORM INPUT RESETS
   ========================================================================== */

/* Fix header desktop navbutton text collision ("HesabımHesap Ayarlarınız") across all storefront pages */
.header-desktop-navbutton-box-t small {
  display: none !important;
}

.header-desktop-navbutton-box-t span {
  display: block !important;
}

/* Ensure native radio & checkbox controls remain visible and functional across all pages */
input[type="radio"]:not(.p21-type-radio) {
  -webkit-appearance: radio !important;
  appearance: auto !important;
}

/* ==========================================================================
   FAZ 24: STOREFRONT CATEGORY NAV V3 & HEADER ACTION UX
   ========================================================================== */

/* Category Nav V3 Shell */
.sf24-category-nav {
  height: 52px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  z-index: 110;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.sf24-category-nav .sf19-category-nav-inner {
  max-width: 1360px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Tüm Kategoriler Flyout Trigger */
.sf-all-categories-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.sf-all-categories-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sf-all-categories-btn:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

.sf-all-categories-btn .sf-arrow {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.sf-all-categories-wrapper.is-open .sf-all-categories-btn .sf-arrow {
  transform: rotate(180deg);
}

/* Mega Menu Flyout */
.sf-mega-menu-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  width: 920px;
  max-width: 90vw;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.12), 0 10px 15px -5px rgba(15, 23, 42, 0.04);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 120;
}

.sf-all-categories-wrapper.is-open .sf-mega-menu-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sf-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 24px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}

.sf-mega-menu-col {
  display: flex;
  flex-direction: column;
}

.sf-mega-parent-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a !important;
  text-decoration: none !important;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 2px solid #f1f5f9;
  transition: color 0.15s ease;
}

.sf-mega-parent-link:hover {
  color: #2563eb !important;
  border-bottom-color: #2563eb;
}

.sf-mega-sub-icon {
  font-size: 11px;
  color: #94a3b8;
}

.sf-mega-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sf-mega-sub-list li a {
  display: block;
  font-size: 12.5px;
  color: #475569 !important;
  text-decoration: none !important;
  padding: 3px 0;
  transition: all 0.15s ease;
}

.sf-mega-sub-list li a:hover {
  color: #2563eb !important;
  padding-left: 3px;
}

.sf-mega-more a {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  margin-top: 4px;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
}

/* FAZ 24.1 — compact icon actions and accessible category flyout */
@media (min-width: 992px) {
  .header-action-account,
  .header-action-favorite,
  .header-action-cart {
    width: 46px !important;
    min-width: 46px !important;
    margin-left: 6px !important;
  }

  .header-action-account > a,
  .header-action-favorite > a,
  .header-action-cart > a {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #1e293b !important;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }

  .header-action-account > a:hover,
  .header-action-favorite > a:hover,
  .header-action-cart > a:hover,
  .header-action-account > a:focus-visible,
  .header-action-favorite > a:focus-visible,
  .header-action-cart > a:focus-visible {
    border-color: #94a3b8;
    background: #f8fafc;
    transform: translateY(-1px);
    outline: 3px solid rgba(37, 99, 235, .14);
    outline-offset: 2px;
  }

  .header-action-account .header-desktop-navbutton-box-t,
  .header-action-favorite .header-desktop-navbutton-box-t,
  .header-action-cart .header-desktop-navbutton-box-t {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .header-action-account > a > i,
  .header-action-favorite > a > i,
  .header-action-cart > a > i {
    margin: 0 !important;
    font-size: 23px !important;
  }
}

.header-fav-count-badge,
.header-cart-count-badge {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  z-index: 3;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border: 2px solid #fff;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.header-fav-count-badge[hidden],
.header-cart-count-badge[hidden] { display: none !important; }

.sf-all-categories-wrapper.is-open .sf-mega-menu-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sf-all-categories-wrapper.is-open .sf-all-categories-btn .sf-arrow {
  transform: rotate(180deg);
}

.sf-mega-menu-flyout {
  width: min(840px, calc(100vw - 48px));
  padding: 18px;
}

.sf-mega-menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 20px;
  max-height: min(430px, calc(100vh - 210px));
}

.sf-mega-menu-col.is-leaf .sf-mega-parent-link {
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.sf-mega-corporate-links {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.sf-mega-corporate-links > span {
  margin-right: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-mega-corporate-links a {
  padding: 6px 9px;
  border-radius: 8px;
  color: #334155 !important;
  background: #f1f5f9;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none !important;
}

.sf-mega-corporate-links a:hover,
.sf-mega-corporate-links a:focus-visible {
  color: #1d4ed8 !important;
  background: #eff6ff;
  outline: none;
}

@media (max-width: 1199px) {
  .sf-mega-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Product showcase polish: legible prices, visible controls and keyboard focus */
.storefront-phase15 .cat-detail-products-box-fiyat-mevcut,
.cat-detail-products-box-fiyat-mevcut {
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.home-product-tablinks:focus-visible,
.p22-arrow:focus-visible,
.swiper-product-list .swiper-button-prev:focus-visible,
.swiper-product-list .swiper-button-next:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22) !important;
  outline-offset: 2px !important;
}

.swiper-product-list .swiper-button-prev,
.swiper-product-list .swiper-button-next {
  top: 50% !important;
  width: 42px !important;
  height: 42px !important;
  margin-top: -21px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  background-color: rgba(255, 255, 255, .96) !important;
  background-size: 12px 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14) !important;
  transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.swiper-product-list .swiper-button-prev { left: 8px !important; margin-left: 0 !important; }
.swiper-product-list .swiper-button-next { right: 8px !important; margin-right: 0 !important; }
.swiper-product-list .swiper-button-prev:hover,
.swiper-product-list .swiper-button-next:hover { transform: scale(1.04) !important; box-shadow: 0 10px 28px rgba(15, 23, 42, .2) !important; }
.swiper-product-list .swiper-button-disabled { opacity: .32 !important; cursor: default !important; pointer-events: none !important; }

@media (max-width: 639px) {
  .storefront-phase15 .cat-detail-products-box-fiyat-mevcut,
  .cat-detail-products-box-fiyat-mevcut { font-size: 17px !important; }
  .swiper-product-list .swiper-button-prev,
  .swiper-product-list .swiper-button-next { width: 38px !important; height: 38px !important; margin-top: -19px !important; }
}

/* Desktop-UA responsive fallback: the legacy PHP header switches markup by UA. */
@media (max-width: 767px) {
  .storefront-phase15 .header-desktop-main-div-in {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(3, 44px) !important;
    grid-template-rows: 48px auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
  }

  .storefront-phase15 .header-desktop-logo-div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .storefront-phase15 .header-desktop-logo-div img { max-width: 128px !important; }
  .storefront-phase15 .header-desktop-right-area { display: contents !important; }
  .storefront-phase15 .header-desktop-search1 {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .storefront-phase15 .header-action-account,
  .storefront-phase15 .header-action-favorite,
  .storefront-phase15 .header-action-cart {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .storefront-phase15 .header-action-account > a,
  .storefront-phase15 .header-action-favorite > a,
  .storefront-phase15 .header-action-cart > a {
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .storefront-phase15 .header-action-account .header-desktop-navbutton-box-t,
  .storefront-phase15 .header-action-favorite .header-desktop-navbutton-box-t,
  .storefront-phase15 .header-action-cart .header-desktop-navbutton-box-t {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  .storefront-phase15 .header-action-account > a > i,
  .storefront-phase15 .header-action-favorite > a > i,
  .storefront-phase15 .header-action-cart > a > i { margin: 0 !important; font-size: 22px !important; }
}

@media (max-width: 1180px) {
  .storefront-phase15 .desktop-header-area,
  .storefront-phase15 .topheader-html-main,
  .storefront-phase15 .header-desktop-main-div,
  .storefront-phase15 .sf24-category-nav {
    width: 100% !important;
    max-width: 100% !important;
  }

  .storefront-phase15 .topheader-html-main-in,
  .storefront-phase15 .header-desktop-main-div-in,
  .storefront-phase15 .sf24-category-nav .sf19-category-nav-inner {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .storefront-phase15 .sf-categories-horizontal {
    min-width: 0 !important;
    overflow: visible !important;
    scrollbar-width: none;
  }
  .storefront-phase15 .sf-categories-horizontal::-webkit-scrollbar { display: none; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .storefront-phase15 .header-action-account,
  .storefront-phase15 .header-action-favorite,
  .storefront-phase15 .header-action-cart { width: 44px !important; min-width: 44px !important; margin-left: 4px !important; }
  .storefront-phase15 .header-action-account > a,
  .storefront-phase15 .header-action-favorite > a,
  .storefront-phase15 .header-action-cart > a {
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  .storefront-phase15 .header-action-account .header-desktop-navbutton-box-t,
  .storefront-phase15 .header-action-favorite .header-desktop-navbutton-box-t,
  .storefront-phase15 .header-action-cart .header-desktop-navbutton-box-t {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}

/* Horizontal Categories */
.sf-categories-horizontal {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible !important;
  scrollbar-width: none;
  padding: 0 4px;
  height: 52px;
}

.sf-categories-horizontal::-webkit-scrollbar {
  display: none;
}

.sf24-category-nav .sf19-category-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  flex-shrink: 0;
}

.sf24-category-nav .sf19-category-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  color: #334155 !important;
  text-decoration: none !important;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sf24-category-nav .sf19-category-item:hover > a {
  background: #f8fafc;
  color: #0f172a !important;
}

.sf-mini-arrow {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.sf24-category-nav .sf19-category-item:hover .sf-mini-arrow {
  transform: rotate(180deg);
}

/* Sub Dropdown Menu for Horizontal Items */
.sf-cat-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  padding: 8px 0;
  z-index: 150;
}

.sf24-category-nav .sf19-category-item:hover .sf-cat-dropdown-menu,
.sf24-category-nav .sf19-category-item:focus-within .sf-cat-dropdown-menu {
  display: block;
}

@media (max-width: 1280px) {
  .sf24-category-nav .sf19-category-item > a {
    padding: 7px 8px;
    font-size: 12px;
  }
  .sf-categories-horizontal .sf19-category-item:nth-child(n+8) {
    display: none !important;
  }
}

@media (max-width: 1140px) {
  .sf24-category-nav .sf19-category-item > a {
    padding: 6px 7px;
    font-size: 11.5px;
  }
  .sf-categories-horizontal .sf19-category-item:nth-child(n+7) {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .sf-categories-horizontal .sf19-category-item:nth-child(n+5) {
    display: none !important;
  }
}

@media (max-width: 860px) {
  .sf-categories-horizontal {
    display: none !important;
  }
}

.sf-cat-dropdown-item {
  display: block;
  padding: 7px 16px;
  font-size: 13px;
  color: #475569 !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.sf-cat-dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a !important;
}

/* Promo Pill */
.sf-promo-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 9999px;
  color: #b45309 !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sf-promo-pill:hover {
  background: #fef3c7;
  transform: scale(1.02);
}

/* Header Account Button & Modern Dropdown */
.header-account-hello {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.1;
}

.header-account-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.modern-account-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-radius: 8px 8px 0 0 !important;
  color: #ffffff !important;
  text-align: left !important;
}

.user-avatar-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.user-info-text {
  overflow: hidden;
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.user-display-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
}

.user-display-meta {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
}

/* ==========================================================================
   FAZ 24.1: UNIVERSAL STOREFRONT HEADER NAVBUTTONS & ACTION BAR UX
   (Applied globally across ALL storefront pages: Home, PDP, PLP, Cart, User)
   ========================================================================== */

.header-desktop-right-area {
  display: flex !important;
  flex: 1 !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.header-desktop-navbutton-box {
  margin: 0 !important;
  position: relative !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header-desktop-navbutton-box > a {
  min-width: auto !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #1e293b !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.header-desktop-navbutton-box > a:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.header-desktop-navbutton-box i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  color: #334155 !important;
  transition: color 0.15s ease !important;
}

.header-desktop-navbutton-box > a:hover i {
  color: #0f172a !important;
}

.header-desktop-navbutton-box-t {
  text-align: left !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  color: #1e293b !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.header-desktop-navbutton-box-t span {
  display: block !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.header-desktop-navbutton-box-t small {
  display: none !important;
}

/* Guest header account label subtitle */
.header-account-sub {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

/* Badges for Favorite & Cart */
.header-fav-count-badge,
.header-cart-count-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35) !important;
  border: 2px solid #ffffff !important;
  z-index: 5 !important;
  line-height: 1 !important;
}

/* ==========================================================================
   MODERN GUEST & USER DROPDOWN (user-drop)
   ========================================================================== */

.dropdown-menu.user-drop {
  width: 310px !important;
  padding: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  background: #ffffff !important;
  overflow: visible !important;
  margin-top: 14px !important;
  position: absolute !important;
  z-index: 1050 !important;
}

/* Pointer caret triangle arrow pointing to user button */
.dropdown-menu.user-drop::before {
  content: "";
  position: absolute !important;
  top: -6px !important;
  right: 28px !important;
  width: 12px !important;
  height: 12px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-left: 1px solid #e2e8f0 !important;
  transform: rotate(45deg) !important;
  z-index: 2 !important;
}

.modern-guest-dropdown-card {
  padding: 18px 18px 16px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  border-radius: 18px 18px 0 0 !important;
}

.modern-guest-header-badge {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.modern-guest-avatar-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.modern-guest-welcome-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.modern-guest-welcome-desc {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
}

.modern-guest-btn-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.modern-guest-btn-login {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15) !important;
  transition: all 0.18s ease !important;
}

.modern-guest-btn-login:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
}

.modern-guest-btn-register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.modern-guest-btn-register:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #2563eb !important;
  transform: translateY(-1px) !important;
}

.dropdown-user-area-link-area {
  padding: 8px 10px 10px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  border-radius: 0 0 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.modern-guest-link-item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  gap: 10px !important;
}

.modern-guest-link-item:hover {
  background: #f8fafc !important;
  text-decoration: none !important;
}

.modern-guest-link-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
}

.modern-guest-link-icon.fav {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}

.modern-guest-link-icon.order {
  background: #eff6ff !important;
  color: #3b82f6 !important;
}

.modern-guest-link-icon.compare {
  background: #f5f3ff !important;
  color: #8b5cf6 !important;
}

.modern-guest-link-text {
  flex: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  transition: color 0.15s ease !important;
}

.modern-guest-link-item:hover .modern-guest-link-text {
  color: #0f172a !important;
}

.modern-guest-link-arrow {
  font-size: 13px !important;
  color: #cbd5e1 !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
}

.modern-guest-link-item:hover .modern-guest-link-arrow {
  transform: translateX(3px) !important;
  color: #2563eb !important;
}

/* Guest account panel v2 */
.dropdown-menu.user-drop.guest-account-v2 {
  width: 372px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 70px -22px rgba(15, 23, 42, 0.42), 0 10px 24px -12px rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
}

.dropdown-menu.user-drop.guest-account-v2::before {
  top: -7px !important;
  right: 30px !important;
  width: 14px !important;
  height: 14px !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  background: #111827 !important;
}

.guest-account-v2 .modern-guest-dropdown-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px !important;
  border-radius: 22px 22px 0 0 !important;
  background: linear-gradient(145deg, #0f172a 0%, #172554 68%, #1e3a8a 100%) !important;
}

.guest-account-v2 .modern-guest-dropdown-card::before,
.guest-account-v2 .modern-guest-dropdown-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.guest-account-v2 .modern-guest-dropdown-card::before {
  top: -72px;
  right: -54px;
  width: 180px;
  height: 180px;
  background: rgba(96, 165, 250, 0.15);
}

.guest-account-v2 .modern-guest-dropdown-card::after {
  left: -34px;
  bottom: -78px;
  width: 150px;
  height: 150px;
  background: rgba(129, 140, 248, 0.09);
}

.guest-account-v2 .modern-guest-header-badge,
.guest-account-v2 .modern-guest-benefits,
.guest-account-v2 .modern-guest-btn-row {
  position: relative !important;
  z-index: 1 !important;
}

.guest-account-v2 .modern-guest-header-badge {
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.guest-account-v2 .modern-guest-avatar-icon {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 15px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.guest-account-v2 .modern-guest-avatar-icon i {
  color: #ffffff !important;
  font-size: 25px !important;
}

.modern-guest-kicker {
  display: block !important;
  margin: 1px 0 4px !important;
  color: #93c5fd !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}

.guest-account-v2 .modern-guest-welcome-title {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.guest-account-v2 .modern-guest-welcome-desc {
  max-width: 250px !important;
  margin-top: 5px !important;
  color: #cbd5e1 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.modern-guest-benefits {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  margin-bottom: 14px !important;
}

.modern-guest-benefits span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 31px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9px !important;
  color: #dbeafe !important;
  background: rgba(255, 255, 255, 0.07) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

.modern-guest-benefits i {
  color: #93c5fd !important;
  font-size: 15px !important;
}

.guest-account-v2 .modern-guest-btn-row {
  display: block !important;
}

.guest-account-v2 .modern-guest-btn-login {
  width: 100% !important;
  height: 48px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 13px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%) !important;
  box-shadow: 0 12px 24px -10px rgba(59, 130, 246, 0.75) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.guest-account-v2 .modern-guest-btn-login > span {
  flex: 1 !important;
  text-align: left !important;
}

.guest-account-v2 .modern-guest-btn-login > i {
  color: #ffffff !important;
  font-size: 18px !important;
}

.guest-account-v2 .modern-guest-btn-login > i:last-child {
  font-size: 15px !important;
  transition: transform 0.18s ease !important;
}

.guest-account-v2 .modern-guest-btn-login:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 15px 30px -11px rgba(59, 130, 246, 0.8) !important;
}

.guest-account-v2 .modern-guest-btn-login:hover > i:last-child {
  transform: translateX(3px) !important;
}

.modern-guest-register-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 13px !important;
  color: #94a3b8 !important;
  font-size: 10.5px !important;
}

.guest-account-v2 .modern-guest-btn-register {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.guest-account-v2 .modern-guest-btn-register i {
  color: #93c5fd !important;
  font-size: 14px !important;
}

.guest-account-v2 .modern-guest-btn-register:hover {
  color: #bfdbfe !important;
  background: transparent !important;
  transform: none !important;
  text-decoration: underline !important;
}

.modern-guest-links-label {
  padding: 13px 18px 5px !important;
  color: #94a3b8 !important;
  background: #ffffff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.guest-account-v2 .dropdown-user-area-link-area {
  gap: 3px !important;
  margin: 0 !important;
  padding: 5px 9px 10px !important;
  border: 0 !important;
  border-radius: 0 0 22px 22px !important;
}

.guest-account-v2 .modern-guest-link-item {
  min-height: 54px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 12px !important;
}

.guest-account-v2 .modern-guest-link-item:hover {
  background: #f8fafc !important;
}

.guest-account-v2 .modern-guest-link-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
}

.guest-account-v2 .modern-guest-link-text {
  min-width: 0 !important;
  line-height: 1.2 !important;
}

.guest-account-v2 .modern-guest-link-text strong,
.guest-account-v2 .modern-guest-link-text small {
  display: block !important;
}

.guest-account-v2 .modern-guest-link-text strong {
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.guest-account-v2 .modern-guest-link-text small {
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.guest-account-v2 .modern-guest-link-arrow {
  color: #94a3b8 !important;
  font-size: 14px !important;
}

.header-action-account.show > a,
.header-action-account:focus-within > a {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

.header-action-account.show > a.tooltip-bottom::before,
.header-action-account.show > a.tooltip-bottom::after,
.header-action-account > a[aria-expanded="true"].tooltip-bottom::before,
.header-action-account > a[aria-expanded="true"].tooltip-bottom::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 480px) {
  .dropdown-menu.user-drop.guest-account-v2 {
    width: min(372px, calc(100vw - 24px)) !important;
    right: -78px !important;
  }
  .dropdown-menu.user-drop.guest-account-v2::before { right: 94px !important; }
}

/* Compact guest account panel v3 */
.dropdown-menu.user-drop.guest-account-v3 {
  width: 336px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 22px 55px -18px rgba(15, 23, 42, 0.34), 0 8px 20px -14px rgba(15, 23, 42, 0.2) !important;
}

.dropdown-menu.user-drop.guest-account-v3::before {
  top: -7px !important;
  right: 27px !important;
  width: 14px !important;
  height: 14px !important;
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
}

.guest-account-v3 .modern-guest-dropdown-card {
  padding: 18px !important;
  border-radius: 18px 18px 0 0 !important;
  background: #ffffff !important;
}

.guest-account-v3 .modern-guest-header-badge {
  gap: 12px !important;
  margin-bottom: 15px !important;
}

.guest-account-v3 .modern-guest-avatar-icon {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 13px !important;
  color: #2563eb !important;
  background: #eff6ff !important;
}

.guest-account-v3 .modern-guest-avatar-icon i {
  color: #2563eb !important;
  font-size: 22px !important;
}

.guest-account-v3 .modern-guest-welcome-title {
  color: #0f172a !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}

.guest-account-v3 .modern-guest-welcome-desc {
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

.guest-account-v3 .modern-guest-btn-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.guest-account-v3 .modern-guest-btn-login,
.guest-account-v3 .modern-guest-btn-register {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 43px !important;
  padding: 0 13px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}

.guest-account-v3 .modern-guest-btn-login {
  border: 1px solid #0f172a !important;
  color: #ffffff !important;
  background: #0f172a !important;
  box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.72) !important;
}

.guest-account-v3 .modern-guest-btn-login span,
.guest-account-v3 .modern-guest-btn-register span {
  flex: 1 !important;
  text-align: left !important;
}

.guest-account-v3 .modern-guest-btn-login i {
  color: #ffffff !important;
  font-size: 17px !important;
}

.guest-account-v3 .modern-guest-btn-register {
  border: 1px solid #dbe3ee !important;
  color: #334155 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.guest-account-v3 .modern-guest-btn-register i {
  margin-right: 7px !important;
  color: #64748b !important;
  font-size: 17px !important;
}

.guest-account-v3 .modern-guest-btn-login:hover {
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
}

.guest-account-v3 .modern-guest-btn-register:hover {
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  transform: translateY(-1px) !important;
}

.guest-account-v3 .modern-guest-links-label {
  padding: 12px 14px 6px !important;
  color: #94a3b8 !important;
  background: #ffffff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.guest-account-v3 .dropdown-user-area-link-area {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 10px 11px !important;
  border: 0 !important;
  border-radius: 0 0 18px 18px !important;
}

.guest-account-v3 .modern-guest-link-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 8px 5px !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 11px !important;
  background: #f8fafc !important;
  text-align: center !important;
}

.guest-account-v3 .modern-guest-link-item:hover {
  border-color: #dbeafe !important;
  background: #eff6ff !important;
  transform: translateY(-1px) !important;
}

.guest-account-v3 .modern-guest-link-icon {
  width: 29px !important;
  height: 29px !important;
  margin: 0 auto !important;
  border-radius: 9px !important;
  font-size: 15px !important;
}

.guest-account-v3 .modern-guest-link-text {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  color: #475569 !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.guest-account-v3 .modern-guest-link-arrow { display: none !important; }

@media (max-width: 480px) {
  .dropdown-menu.user-drop.guest-account-v3 {
    width: min(336px, calc(100vw - 24px)) !important;
    right: -76px !important;
  }
  .dropdown-menu.user-drop.guest-account-v3::before { right: 92px !important; }
}

/* Modern announcement / benefit bar */
.storefront-phase15 .sf-announcement-bar {
  overflow: hidden !important;
  border: 0 !important;
  background: linear-gradient(90deg, #0f172a 0%, #172554 52%, #0f172a 100%) !important;
}

.storefront-phase15 .sf-announcement-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(var(--sf-container), calc(100% - 48px)) !important;
  min-height: 42px !important;
  margin: 0 auto !important;
  padding: 5px 48px 5px 0 !important;
}

.sf-announcement-content,
.sf-announcement-items,
.sf-announcement-item,
.sf-announcement-label {
  display: flex !important;
  align-items: center !important;
}

.sf-announcement-content { justify-content: center !important; gap: 16px !important; }
.sf-announcement-items { gap: 0 !important; }

.sf-announcement-label {
  gap: 5px !important;
  min-height: 25px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 999px !important;
  color: #bfdbfe !important;
  background: rgba(255, 255, 255, 0.07) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.sf-announcement-label i { color: #fbbf24 !important; font-size: 13px !important; }

.sf-announcement-item {
  gap: 7px !important;
  padding: 0 15px !important;
  color: #e2e8f0 !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.sf-announcement-item + .sf-announcement-item { border-left: 1px solid rgba(255, 255, 255, 0.17) !important; }
.sf-announcement-item i { color: #60a5fa !important; font-size: 16px !important; }
.sf-announcement-item strong { font-weight: 650 !important; }

.storefront-phase15 .sf-announcement-close {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  color: #94a3b8 !important;
  background: transparent !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
}

.storefront-phase15 .sf-announcement-close:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.storefront-phase15 .sf-announcement-close i { margin: 0 !important; color: currentColor !important; font-size: 15px !important; }

@media (max-width: 1120px) {
  .sf-announcement-label { display: none !important; }
  .sf-announcement-item { padding: 0 11px !important; font-size: 10.5px !important; }
}

/* ========================================================================== 
   MODERN AUTH PROMPT MODAL (#loginModal)
   (Replaces legacy padlock modal for favorites & guest prompts)
   ========================================================================== */

.modern-auth-prompt-modal .modal-dialog {
  max-width: 420px !important;
  margin: 1.75rem auto !important;
}

.modern-auth-prompt-modal .modal-content {
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.modern-auth-prompt-modal .modern-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  z-index: 10 !important;
  background: none !important;
  border: none !important;
  font-size: 26px !important;
  line-height: 1 !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
}

.modern-auth-prompt-modal .modern-modal-close:hover {
  color: #0f172a !important;
}

.modern-auth-prompt-body {
  padding: 32px 28px 28px !important;
  text-align: center !important;
}

.modern-auth-prompt-icon-wrap {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
  color: #ef4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12) !important;
}

.modern-auth-prompt-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.modern-auth-prompt-desc {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 0 24px 0 !important;
}

.modern-auth-prompt-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.modern-auth-btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
}

.modern-auth-btn-primary:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.modern-auth-btn-secondary {
  font-size: 13px !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  padding: 4px 0 !important;
}

.modern-auth-btn-secondary strong {
  color: #2563eb !important;
}

.modern-auth-btn-secondary:hover {
  color: #0f172a !important;
}

/* ==========================================================================
   FAZ 24.1: MODERN CUSTOMER AUTH SYSTEM (LOGIN / REGISTER / FORGOT PASSWORD)
   ========================================================================== */

.user-auth-page {
  background-color: #f8fafc !important;
}

.modern-auth-section {
  padding: 48px 16px 80px 16px !important;
  min-height: calc(100vh - 350px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modern-auth-card-wrap {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  overflow: hidden !important;
}

.modern-auth-card-wrap.narrow {
  max-width: 520px !important;
}

/* Auth Left Showcase Panel */
.modern-auth-side-panel {
  flex: 0 0 40% !important;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 44px 36px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
}

.modern-auth-side-panel::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 70%) !important;
  pointer-events: none !important;
}

.modern-auth-side-content {
  position: relative !important;
  z-index: 1 !important;
}

.modern-auth-side-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #93c5fd !important;
  margin-bottom: 24px !important;
}

.modern-auth-side-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

.modern-auth-side-desc {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
  margin-bottom: 32px !important;
}

.modern-auth-perks {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.modern-auth-perk-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.modern-auth-perk-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60a5fa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.modern-auth-perk-text strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.modern-auth-perk-text span {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.modern-auth-side-footer {
  position: relative !important;
  z-index: 1 !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 12px !important;
  color: #64748b !important;
}

/* Auth Right Form Panel */
.modern-auth-form-panel {
  flex: 1 1 60% !important;
  padding: 44px 40px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.modern-auth-form-header {
  margin-bottom: 28px !important;
}

.modern-auth-form-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
}

.modern-auth-form-subtitle {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 0 !important;
}

.modern-auth-form-group {
  margin-bottom: 18px !important;
  position: relative !important;
}

.modern-auth-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
}

.modern-auth-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.modern-auth-input-icon {
  position: absolute !important;
  left: 14px !important;
  font-size: 18px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.modern-auth-input {
  width: 100% !important;
  height: 46px !important;
  padding: 0 16px 0 42px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  transition: all 0.15s ease !important;
  outline: none !important;
}

.modern-auth-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.modern-auth-password-toggle {
  position: absolute !important;
  right: 14px !important;
  font-size: 18px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transition: color 0.15s ease !important;
}

.modern-auth-password-toggle:hover {
  color: #0f172a !important;
}

.modern-auth-form-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 22px !important;
  font-size: 13px !important;
}

.modern-auth-forgot-link {
  color: #2563eb !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

.modern-auth-forgot-link:hover {
  text-decoration: underline !important;
}

.modern-auth-submit-btn {
  width: 100% !important;
  height: 48px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important;
}

.modern-auth-submit-btn:hover {
  background: #1e293b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22) !important;
}

.modern-auth-switch-text {
  text-align: center !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  margin-top: 22px !important;
}

.modern-auth-switch-text a {
  color: #2563eb !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.modern-auth-switch-text a:hover {
  text-decoration: underline !important;
}

/* Membership type tabs in registration */
.modern-auth-type-selector {
  display: flex !important;
  background: #f1f5f9 !important;
  padding: 4px !important;
  border-radius: 10px !important;
  margin-bottom: 22px !important;
  gap: 4px !important;
}

.modern-auth-type-option {
  flex: 1 !important;
  text-align: center !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.modern-auth-type-option.is-selected {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

@media (max-width: 860px) {
  .modern-auth-card-wrap {
    flex-direction: column !important;
  }
  .modern-auth-side-panel {
    display: none !important;
  }
  .modern-auth-form-panel {
    padding: 32px 20px !important;
  }
}

/* ==========================================================================
   FAZ — MOBILE BOTTOM NAV HARD REMOVAL & BODY OFFSET FIX
   ========================================================================== */
.fixed-foot-navigation,
.fixed-foot-navigation-in,
.fixed-foot-navigation-in-box {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   FAZ — COMPACT MOBILE HEADER: [LOGO] [SEARCH] [ACCOUNT] [CART] [MENU]
   ========================================================================== */
.sf-mobile-header-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.sf-mobile-nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 60px !important;
  padding: 0 14px !important;
  margin: 0 !important;
}

.sf-mobile-logo {
  display: flex !important;
  align-items: center !important;
  max-height: 40px !important;
  flex: 0 1 auto !important;
}

.sf-mobile-logo a {
  display: flex !important;
  align-items: center !important;
}

.sf-mobile-logo img {
  max-height: 34px !important;
  max-width: 140px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ==========================================================================
   FAZ — MODERN MOBILE HEADER BUTTONS & ACTION BAR
   ========================================================================== */
.sf-mobile-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}

.sf-mobile-btn {
  min-width: 38px !important;
  min-height: 38px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-size: 20px !important;
  border-radius: 11px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  outline: none !important;
}

.sf-mobile-btn > i {
  pointer-events: none !important;
  line-height: 1 !important;
}

.sf-mobile-btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

.sf-mobile-btn:active {
  transform: scale(0.94) !important;
  background-color: #e2e8f0 !important;
}

/* When mobile search is active */
.sf-mobile-btn.is-active,
#sfMobileSearchToggle.is-active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.sf-mobile-cart-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35) !important;
}

.sf-mobile-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  text-align: center !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

/* ==========================================================================
   FAZ — MODERN MOBILE SEARCH TRAY & ADVANCED AUTOCOMPLETE
   ========================================================================== */
.sf-mobile-search-tray {
  background: #ffffff !important;
  border-top: 1px solid #eef2f6 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 10px 14px !important;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08) !important;
  position: relative !important;
  z-index: 1050 !important;
  overflow: visible !important;
}

.sf-mobile-search-inner {
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
}

.sf-mobile-search-form {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-control,
.sf-mobile-search-tray .sf-search-control,
.sf-mobile-search-form .sf-search-control {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  background: #f8fafc !important;
  border: 1.5px solid #dce3ec !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-control:focus-within,
.sf-mobile-search-tray .sf-search-control:focus-within,
.sf-mobile-search-form .sf-search-control:focus-within {
  border-color: #2563eb !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-leading-icon,
.sf-mobile-search-tray .sf-search-leading-icon,
.sf-mobile-search-form .sf-search-leading-icon {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  color: #64748b !important;
  pointer-events: none !important;
  margin: 0 !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-header-search-input,
.sf-mobile-search-tray .sf-header-search-input,
.sf-mobile-search-form .sf-header-search-input {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: 44px !important;
  padding: 0 46px 0 38px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 16px !important; /* 16px eliminates automatic iOS Safari page zoom */
  font-weight: 500 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  touch-action: manipulation !important;
  -webkit-text-size-adjust: 100% !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-header-search-input::placeholder,
.sf-mobile-search-tray .sf-header-search-input::placeholder,
.sf-mobile-search-form .sf-header-search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 14.5px !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-clear,
.sf-mobile-search-tray .sf-search-clear,
.sf-mobile-search-form .sf-search-clear {
  position: absolute !important;
  right: 44px !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 4 !important;
  transition: background .15s ease !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-clear[hidden],
.sf-mobile-search-tray .sf-search-clear[hidden],
.sf-mobile-search-form .sf-search-clear[hidden] {
  display: none !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-clear:active,
.sf-mobile-search-tray .sf-search-clear:active,
.sf-mobile-search-form .sf-search-clear:active {
  background: #cbd5e1 !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-control .sf-search-submit,
.storefront-phase15 .sf-mobile-search-form .sf-search-submit,
.sf-mobile-search-tray .sf-search-control .sf-search-submit,
.sf-mobile-search-tray .sf-search-submit,
.sf-mobile-search-form .sf-search-submit {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 9px !important;
  border: none !important;
  outline: none !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
  box-sizing: border-box !important;
  z-index: 5 !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-control .sf-search-submit:active,
.storefront-phase15 .sf-mobile-search-form .sf-search-submit:active,
.sf-mobile-search-tray .sf-search-submit:active,
.sf-mobile-search-form .sf-search-submit:active {
  transform: translateY(-50%) scale(0.94) !important;
  background: #1e40af !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-control .sf-search-submit i,
.storefront-phase15 .sf-mobile-search-form .sf-search-submit i,
.sf-mobile-search-tray .sf-search-submit i,
.sf-mobile-search-form .sf-search-submit i {
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-control .sf-search-submit span,
.storefront-phase15 .sf-mobile-search-form .sf-search-submit span,
.sf-mobile-search-tray .sf-search-submit span,
.sf-mobile-search-form .sf-search-submit span {
  display: none !important;
}

/* Mobile Live Suggestions Dropdown */
.storefront-phase15 .sf-mobile-search-tray .sf-search-suggestions,
.sf-mobile-search-tray .sf-search-suggestions,
.sf-mobile-search-form .sf-search-suggestions {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  max-height: min(65vh, 480px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.storefront-phase15 .sf-mobile-search-tray .sf-search-suggestions[hidden],
.sf-mobile-search-tray .sf-search-suggestions[hidden],
.sf-mobile-search-form .sf-search-suggestions[hidden] {
  display: none !important;
}

/* ==========================================================================
   FAZ — MODERN ACCOUNT POPOVER / DROPDOWN
   ========================================================================== */
.sf-account-popover-card {
  min-width: 260px !important;
  max-width: 300px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

.sf-account-card-head {
  padding: 4px 6px 12px 6px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 8px !important;
}

.sf-account-card-greeting {
  display: block !important;
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.sf-account-card-name {
  display: block !important;
  font-size: 15px !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

.sf-account-card-links a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.sf-account-card-links a:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.sf-account-card-links a i {
  font-size: 18px !important;
  color: #64748b !important;
}

.sf-account-card-separator {
  height: 1px !important;
  background: #e2e8f0 !important;
  margin: 8px 0 !important;
}

.sf-account-card-logout {
  color: #ef4444 !important;
}

.sf-account-card-logout i {
  color: #ef4444 !important;
}

.sf-account-card-guest {
  padding: 6px !important;
}

.sf-account-card-guest-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 4px !important;
}

.sf-account-card-guest-sub {
  font-size: 12px !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

.sf-account-btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sf-account-btn-primary:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

.sf-account-btn-secondary {
  display: block !important;
  width: 100% !important;
  padding: 9px 14px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  transition: all 0.15s ease !important;
}

.sf-account-btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.sf-account-card-guest-links a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
}

.sf-account-card-guest-links a:hover {
  color: #0f172a !important;
}

/* ==========================================================================
   FAZ — CATEGORY / HAMBURGER DRAWER & OVERLAY Z-INDEX LAYER
   ========================================================================== */
.sf-modern-drawer .mobile_side_wrap {
  width: min(88vw, 380px) !important;
  max-width: 380px !important;
  z-index: 9999 !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile_side_overlay {
  display: none;
  pointer-events: none;
  z-index: 9998 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  transition: opacity 0.2s ease !important;
}

/* Bulletproof open state: triggered by body class, drawer class, or checked input */
body.sf-drawer-open .sf-modern-drawer .mobile_side_wrap,
body.sf-drawer-open .mobile_side_wrap,
.sf-modern-drawer.is-open .mobile_side_wrap,
.mobile_side_toggle:checked + .mobile_side_wrap {
  left: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  visibility: visible !important;
}

body.sf-drawer-open .sf-modern-drawer .mobile_side_overlay,
body.sf-drawer-open .mobile_side_overlay,
.sf-modern-drawer.is-open ~ .mobile_side_overlay,
.mobile_side_toggle:checked ~ .mobile_side_overlay {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* WhatsApp floating button stays behind drawer overlay */
.whatsapp-fixed,
.whatsapp-button,
a[href*="whatsapp"],
a[href*="api.whatsapp.com"],
.fixed-whatsapp-button {
  z-index: 990 !important;
}

body.sf-drawer-open {
  overflow: hidden !important;
  touch-action: none !important;
}

.sf-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

.sf-drawer-brand img {
  max-height: 30px !important;
  width: auto !important;
}

.sf-drawer-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  cursor: pointer !important;
  margin: 0 !important;
  border: none !important;
  transition: all 0.15s ease !important;
}

.sf-drawer-close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Hide legacy detached close button */
.mobile_side_wrap_in_close {
  display: none !important;
}

.sf-drawer-contact-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
}

.sf-drawer-contact-icon {
  font-size: 24px !important;
  color: #3b82f6 !important;
}

.sf-drawer-contact-label {
  display: block !important;
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.sf-drawer-contact-phone {
  display: block !important;
  font-size: 14px !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   FAZ — CART PAGE & RESPONSIVE STEPPER & PRICE TYPOGRAPHY
   ========================================================================== */
.cart-left-box-main {
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.cart-left-box-1 img {
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  object-fit: cover !important;
}

.cart-left-box-3,
.cart-left-box-5 {
  white-space: nowrap !important;
}

.cart-left-box-3 strong,
.cart-left-box-5 strong {
  font-family: inherit !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  line-height: 1.2 !important;
}

.cart-left-box-3 strong,
.cart-left-box-3 strong span#item-price {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.cart-left-box-5 strong,
.cart-left-box-5 strong span#item-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.cart-left-box-3 span,
.cart-left-box-5 span {
  font-size: 0.75rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Quantity Stepper: unified nowrap component */
.sf-quantity-stepper {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

.sf-qty-form {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-qty-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: none !important;
  color: #334155 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sf-qty-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.sf-qty-disabled {
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.sf-qty-input {
  width: 38px !important;
  height: 32px !important;
  border: none !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

/* Modern Non-Aggressive Trash Button */
.sf-cart-btn-trash {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.sf-cart-btn-trash:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
  transform: none !important;
}

/* Modern Coupon Card & Input Group */
.sf-cart-coupon-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.sf-cart-card-head {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.sf-cart-card-head i {
  font-size: 20px !important;
  color: #3b82f6 !important;
}

.sf-cart-card-sub {
  font-size: 12px !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
}

.sf-coupon-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.sf-coupon-input {
  flex: 1 !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}

.sf-coupon-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.sf-coupon-btn {
  height: 42px !important;
  padding: 0 18px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.15s ease !important;
}

.sf-coupon-btn:hover {
  background: #1e293b !important;
}

/* Modern Summary Card & Primary CTA */
.cart-right-div-inside {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.cart-right-div-head {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 14px !important;
}

.cart-right-div-price-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  font-size: 13.5px !important;
  color: #475569 !important;
}

.cart-right-div-price-box-right {
  font-weight: 600 !important;
  color: #0f172a !important;
}

.cart-right-div-inside a[href="teslimat/"],
.cart-right-div-inside .button-4x {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2) !important;
  transition: all 0.2s ease !important;
  margin-top: 18px !important;
}

.cart-right-div-inside a[href="teslimat/"]:hover,
.cart-right-div-inside .button-4x:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28) !important;
}

/* Empty Cart State */
.sf-cart-empty-wrap {
  padding: 60px 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.sf-cart-empty-card {
  max-width: 440px !important;
  width: 100% !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 44px 30px !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06) !important;
}

.sf-cart-empty-icon-box {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 38px !important;
  margin-bottom: 20px !important;
}

.sf-cart-empty-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}

.sf-cart-empty-desc {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
}

.sf-cart-empty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

.sf-cart-empty-btn:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Modern Announcement Bar */
.sf-mobile-announcement {
  background: #0f172a !important;
  color: #f8fafc !important;
  font-size: 12.5px !important;
  padding: 8px 14px !important;
}

.sf-announcement-close {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
  cursor: pointer !important;
}

.sf-announcement-close:hover {
  color: #ffffff !important;
}

/* Compact Modern Add-to-Cart Modal */
#successCart .modal-dialog {
  max-width: 360px !important;
  margin: 1.75rem auto !important;
}

#successCart .modal-content {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
}

#successCart i.ion-ios-checkmark-outline {
  font-size: 36px !important;
  color: #10b981 !important;
  margin-bottom: 8px !important;
}

#successCart .category-cart-add-success-modal-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 20px 20px 20px !important;
}

#successCart .category-cart-add-success-modal-footer-button {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

#successCart a[href="sepet/"] {
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

/* ===================================================
   PHASE 23: CART & CHECKOUT POLISH
   =================================================== */

/* Cart Columns in Desktop */
.storefront-cart-page .cart-left-box-main {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) 120px 130px 130px 44px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.storefront-cart-page .cart-head {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) 120px 130px 130px 44px !important;
  padding: 12px 20px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.storefront-cart-page .cart-head > div {
  display: block !important;
}

/* Perfect Centering for Birim Fiyat, Adet, Toplam, Sil */
.storefront-cart-page .cart-left-box-3,
.storefront-cart-page .cart-left-box-4,
.storefront-cart-page .cart-left-box-5,
.storefront-cart-page .cart-left-box-6 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.storefront-cart-page .cart-left-box-3 strong,
.storefront-cart-page .cart-left-box-5 strong {
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.storefront-cart-page .cart-left-box-4 .sf-quantity-stepper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.storefront-cart-page .cart-left-box-6 .sf-cart-btn-trash {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  color: #94a3b8 !important;
  background: #f8fafc !important;
  font-size: 19px !important;
  margin: 0 auto !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.storefront-cart-page .cart-left-box-6 .sf-cart-btn-trash:hover {
  color: #ef4444 !important;
  background: #fee2e2 !important;
  transform: scale(1.05) !important;
}

/* Campaign Badge Polish */
.sf-cokal-prompt-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  margin-top: 8px !important;
  background: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
  border-radius: 8px !important;
  color: #b45309 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.sf-cokal-prompt-pill i {
  font-size: 16px !important;
  color: #d97706 !important;
  flex-shrink: 0 !important;
}

.sf-cokal-prompt-pill strong {
  font-weight: 700 !important;
  color: #78350f !important;
}

.sf-cokal-applied-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  margin-top: 8px !important;
  background: #ecfdf5 !important;
  border: 1px solid #d1fae5 !important;
  border-radius: 8px !important;
  color: #047857 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.sf-cokal-applied-pill i {
  font-size: 16px !important;
  color: #10b981 !important;
  flex-shrink: 0 !important;
}

/* Coupon Card, List & Input Polish */
.sf-coupon-toggle-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  outline: none !important;
}

.sf-coupon-toggle-btn:hover {
  background: #f1f5f9 !important;
}

.sf-coupon-toggle-btn[aria-expanded="false"] .sf-accordion-chevron {
  transform: rotate(-90deg) !important;
}

.sf-coupon-toggle-btn[aria-expanded="true"] .sf-accordion-chevron {
  transform: rotate(0deg) !important;
}

.sf-coupon-item-card {
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.sf-coupon-item-card:hover {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08) !important;
}

.sf-coupon-head-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 5px !important;
  flex-wrap: nowrap !important;
}

.sf-coupon-badge-discount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.sf-coupon-badge-special {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.sf-coupon-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.sf-coupon-code-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 20px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  letter-spacing: 0.03em !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.sf-coupon-meta-text {
  font-size: 11.5px !important;
  color: #64748b !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sf-coupon-btn-apply {
  height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  border: none !important;
  border-radius: 7px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2) !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.sf-coupon-btn-apply:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

.sf-coupon-badge-applied {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.sf-coupon-badge-remaining {
  height: 28px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.sf-coupon-input-group {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sf-coupon-input-wrap {
  display: flex !important;
  width: 100% !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.sf-coupon-input-wrap input.sf-coupon-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.sf-coupon-input-wrap input.sf-coupon-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.sf-coupon-input-wrap .sf-coupon-btn {
  flex-shrink: 0 !important;
  height: 40px !important;
  padding: 0 18px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  transition: background 0.15s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.sf-coupon-input-wrap .sf-coupon-btn:hover {
  background: #1e293b !important;
}

/* Confirm Delete Modal Redesign */
#confirm-delete {
  z-index: 1065 !important;
}

#confirm-delete .modal-dialog {
  max-width: 380px !important;
  margin: 1.75rem auto !important;
}

#confirm-delete .modal-content.sf-confirm-delete-modal {
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}

#confirm-delete .sf-confirm-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  z-index: 10 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#confirm-delete .sf-confirm-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.sf-confirm-modal-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #fef2f2 !important;
  color: #ef4444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 0 0 8px rgba(254, 242, 242, 0.6) !important;
}

.sf-confirm-modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}

.sf-confirm-modal-text {
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
  padding: 0 8px !important;
}

.sf-confirm-modal-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.sf-confirm-btn-cancel {
  height: 44px !important;
  border-radius: 12px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.sf-confirm-btn-cancel:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.sf-confirm-btn-danger {
  height: 44px !important;
  border-radius: 12px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.sf-confirm-btn-danger:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4) !important;
  text-decoration: none !important;
}

@media (max-width: 480px) {
  #confirm-delete .modal-dialog {
    margin: 16px !important;
    max-width: calc(100% - 32px) !important;
  }
}

/* Mini Cart Drawer Price Prominence */
.sf19-mini-item-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
}

.sf19-mini-item-price strong,
.sf19-mini-item-price strong span#item-price {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

.sf19-mini-item-price span {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.sf19-mini-total strong,
.sf19-mini-total strong span#item-price {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   MODERN FREE SHIPPING BANNERS (CART PAGE & MINI-CART DRAWER)
   ========================================================================== */

/* Cart Page Shipping Banner */
.sf19-cart-page-progress {
  grid-column: 1 / -1 !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

/* Achieved State: Cart Page */
.sf19-cart-page-progress.is-achieved {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1px solid #a7f3d0 !important;
  box-shadow: 0 4px 16px -2px rgba(16, 185, 129, 0.12) !important;
}

/* Pending State: Cart Page */
.sf19-cart-page-progress.is-pending {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

/* Body flex layout */
.sf-shipping-card-body {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.sf-shipping-icon-box {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  transition: all 0.2s ease !important;
}

.sf19-cart-page-progress.is-achieved .sf-shipping-icon-box {
  background: #dcfce7 !important;
  color: #059669 !important;
  border: 1px solid #bbf7d0 !important;
}

.sf19-cart-page-progress.is-pending .sf-shipping-icon-box {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
}

.sf-shipping-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.sf-shipping-main-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}

.sf19-cart-page-progress.is-achieved .sf-shipping-main-title {
  color: #065f46 !important;
}

.sf19-cart-page-progress.is-pending .sf-shipping-main-title {
  color: #0f172a !important;
}

.sf-shipping-sub-title {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.sf19-cart-page-progress.is-achieved .sf-shipping-sub-title {
  color: #047857 !important;
}

.sf19-cart-page-progress.is-pending .sf-shipping-sub-title {
  color: #64748b !important;
}

.sf-shipping-badge {
  flex-shrink: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.sf-shipping-badge.is-achieved {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.sf19-cart-page-progress.is-pending .sf-shipping-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Shipping Track Overrides */
.sf19-cart-page-progress .sf19-shipping-track {
  margin-top: 14px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: #e2e8f0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.sf19-cart-page-progress.is-achieved .sf19-shipping-track {
  background: #d1fae5 !important;
}

.sf19-cart-page-progress.is-achieved .sf19-shipping-track span {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.sf19-cart-page-progress.is-pending .sf19-shipping-track span {
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

/* Mini Cart Drawer Progress Bar Modernization */
.sf19-shipping-progress {
  padding: 14px 20px !important;
  transition: all 0.25s ease !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.sf19-shipping-progress.is-achieved {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border-bottom-color: #a7f3d0 !important;
}

.sf19-shipping-progress.is-pending {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

.sf-mini-shipping-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.sf-mini-shipping-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.sf-mini-shipping-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
}

.sf19-shipping-progress.is-achieved .sf-mini-shipping-icon {
  background: #dcfce7 !important;
  color: #059669 !important;
  border: 1px solid #bbf7d0 !important;
}

.sf19-shipping-progress.is-pending .sf-mini-shipping-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
}

.sf-mini-shipping-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  line-height: 1.25 !important;
}

.sf-mini-shipping-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.sf19-shipping-progress.is-achieved .sf-mini-shipping-title {
  color: #065f46 !important;
}

.sf19-shipping-progress.is-pending .sf-mini-shipping-title {
  color: #0f172a !important;
}

.sf-mini-shipping-desc {
  font-size: 11.5px !important;
  margin-top: 1px !important;
}

.sf19-shipping-progress.is-achieved .sf-mini-shipping-desc {
  color: #047857 !important;
}

.sf19-shipping-progress.is-pending .sf-mini-shipping-desc {
  color: #64748b !important;
}

.sf-mini-shipping-badge {
  flex-shrink: 0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.sf-mini-shipping-badge.is-achieved {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}

.sf19-shipping-progress.is-pending .sf-mini-shipping-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.sf19-shipping-progress .sf19-shipping-track {
  height: 6px !important;
  border-radius: 99px !important;
  background: #e2e8f0 !important;
  overflow: hidden !important;
}

.sf19-shipping-progress.is-achieved .sf19-shipping-track {
  background: #d1fae5 !important;
}

.sf19-shipping-progress.is-achieved .sf19-shipping-track span {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
}

.sf19-shipping-progress.is-pending .sf19-shipping-track span {
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

/* Also eliminate any old yellow gradient fallback in storefront-phase19 */
.sf19-shipping-track span {
  transition: width 0.4s ease !important;
}

@media (max-width: 576px) {
  .sf19-cart-page-progress {
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }
  .sf-shipping-icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 19px !important;
  }
  .sf-shipping-main-title {
    font-size: 13.5px !important;
  }
  .sf-shipping-sub-title {
    font-size: 12px !important;
  }
  .sf-shipping-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}

/* Mini Cart Confirm Delete Modal & Drawer Close Fixes */
#miniCartConfirmDelete {
  z-index: 10100 !important;
}

#miniCartConfirmDelete .modal-dialog {
  max-width: 380px !important;
  margin: 1.75rem auto !important;
}

#miniCartConfirmDelete .modal-content.sf-confirm-delete-modal {
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}

#miniCartConfirmDelete .sf-confirm-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  z-index: 10 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#miniCartConfirmDelete .sf-confirm-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

#miniCartConfirmDelete + .modal-backdrop,
body.modal-open .modal-backdrop,
.modal-backdrop.mini-cart-confirm-backdrop {
  z-index: 10090 !important;
}

/* Ensure Drawer Close Button is prominent, clickable and always responds */
.sf19-cart-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 10 !important;
  color: #334155 !important;
  transition: all 0.15s ease !important;
  touch-action: manipulation !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.sf19-cart-close * {
  pointer-events: none !important;
}

.sf19-cart-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  transform: scale(1.05) !important;
}

.sf19-cart-close:active {
  transform: scale(0.95) !important;
}

/* Checkout Login Modal Refinements */
#loginModal {
  z-index: 1060 !important;
}

#loginModal .modal-content {
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

#loginModal .form-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: none !important;
}

/* Mobile Breakpoints & Responsive Behavior */
@media (max-width: 900px) {
  .storefront-cart-page .cart-left-box-main {
    grid-template-columns: 80px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .storefront-cart-page .cart-head {
    display: none !important;
  }
  .storefront-cart-page .cart-left-box-1 {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    align-self: start !important;
  }
  .storefront-cart-page .cart-left-box-2 {
    grid-column: 2 / 4 !important;
  }
  .storefront-cart-page .cart-left-box-3 {
    grid-column: 2 !important;
    font-size: 13.5px !important;
  }
  .storefront-cart-page .cart-left-box-4 {
    grid-column: 2 !important;
    margin-top: 6px !important;
  }
  .storefront-cart-page .cart-left-box-5 {
    grid-column: 3 !important;
    align-self: center !important;
    text-align: right !important;
  }
  .storefront-cart-page .cart-left-box-6 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
}

@media (max-width: 480px) {
  .storefront-cart-page .cart-left-box-main {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .storefront-cart-page .cart-left-box-1 img {
    width: 72px !important;
    height: 72px !important;
  }
  .sf-quantity-stepper .sf-qty-btn {
    width: 28px !important;
    height: 30px !important;
    min-width: 28px !important;
  }
  .sf-quantity-stepper .sf-qty-input {
    width: 32px !important;
    height: 30px !important;
  }
  #loginModal .modal-dialog {
    margin: 12px !important;
  }
}

/* Phase 24.2 — modern mobile navigation and shared legacy surface polish */
@media (max-width: 991px) {
  .sf-modern-drawer .mobile_side_wrap {
    left: -410px;
    overflow: hidden !important;
    border-radius: 0 22px 22px 0;
    box-shadow: 20px 0 60px rgba(15, 23, 42, .22) !important;
  }

  .sf-modern-drawer .mobile_side_wrap_in {
    min-height: 100%;
    background: #fff;
  }

  .sf-modern-drawer .sf-drawer-header {
    min-height: 76px;
    padding: 14px 16px 14px 20px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f6f8fc 100%) !important;
  }

  .sf-modern-drawer .sf-drawer-brand img {
    max-width: 166px;
    max-height: 40px !important;
    object-fit: contain;
  }

  .sf-modern-drawer .sf-drawer-close {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    border: 1px solid #dce3ec !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 5px 15px rgba(15, 23, 42, .08);
  }

  .sf-modern-drawer .sf-drawer-body {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sf-modern-drawer .sf-drawer-search-form {
    margin-bottom: 16px;
  }

  .sf-modern-drawer .mobile_side_wrap_in_search {
    border: 1px solid #dbe3ee;
    border-radius: 13px;
    overflow: hidden;
    background: #f8fafc;
  }

  .sf-modern-drawer .mobile_side_wrap_in_search input {
    height: 48px;
    padding: 0 52px 0 15px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 16px !important;
    touch-action: manipulation !important;
  }

  .sf-modern-drawer .mobile_side_wrap_in_search button {
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    margin: 0;
    color: #334155;
  }

  .sf-modern-drawer .mobile_side_wrap_in_categories_main {
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Mobile Drawer Premium Gift Finder Card */
  .sf-drawer-gift-card-wrap {
    margin-bottom: 12px;
  }

  .sf-drawer-gift-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff9f6 0%, #fff0f3 50%, #fdf2f8 100%);
    border: 1px solid rgba(244, 63, 94, 0.22);
    box-shadow: 0 4px 14px -2px rgba(244, 63, 94, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04);
    text-decoration: none !important;
    overflow: hidden;
    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s ease, border-color .2s ease;
  }

  .sf-drawer-gift-card:hover,
  .sf-drawer-gift-card:active {
    transform: translateY(-1px);
    border-color: rgba(244, 63, 94, 0.42);
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8ed 50%, #fce7f3 100%);
    box-shadow: 0 8px 22px -4px rgba(244, 63, 94, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04);
    text-decoration: none !important;
  }

  .sf-gift-card-icon-box {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 60%, #be123c 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.28);
    transition: transform .22s ease;
  }

  .sf-drawer-gift-card:hover .sf-gift-card-icon-box {
    transform: scale(1.05) rotate(-3deg);
  }

  .sf-gift-sparkle {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f59e0b;
    border: 1.5px solid #ffffff;
    color: #ffffff;
    font-size: 9.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.45);
    animation: sfGiftSparklePulse 2s infinite ease-in-out;
  }

  @keyframes sfGiftSparklePulse {
    0%, 100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.18); opacity: 1; }
  }

  .sf-gift-card-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sf-gift-card-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .sf-gift-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #881337;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  .sf-gift-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.28);
  }

  .sf-gift-card-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #9f1239;
    opacity: .85;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .sf-gift-card-arrow {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(244, 63, 94, 0.08);
    color: #e11d48;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform .18s ease, background .18s ease, color .18s ease;
  }

  .sf-drawer-gift-card:hover .sf-gift-card-arrow {
    background: #e11d48;
    color: #ffffff;
    transform: translateX(2px);
  }

  /* Modern Category Accordion Navigation */
  .sf-modern-drawer .mobile-menu-categories-main #categories-parent-main > ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sf-modern-drawer .mobile-menu-categories-main #categories-parent-main li {
    list-style: none;
    position: relative;
  }

  /* Main Category Row */
  .sf-modern-drawer .sf-drawer-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 3px 5px 3px 14px;
    min-height: 48px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  }

  .sf-modern-drawer .sf-drawer-nav-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .sf-modern-drawer .parent.open > .sf-drawer-nav-item {
    background: #f8fafc;
    border-color: #cbd5e1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: none;
  }

  /* Category Link */
  .sf-modern-drawer .sf-drawer-nav-link {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-height: 42px !important;
    height: auto !important;
    color: #0f172a !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Expand Button (+ / Arrow) */
  .sf-modern-drawer .sf-drawer-expand-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .sf-modern-drawer .sf-drawer-expand-btn i {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    line-height: 1;
  }

  .sf-modern-drawer .parent.open > .sf-drawer-nav-item .sf-drawer-expand-btn {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
  }

  .sf-modern-drawer .parent.open > .sf-drawer-nav-item .sf-drawer-expand-btn i {
    transform: rotate(180deg);
  }

  /* Submenu Enclosure */
  .sf-modern-drawer .sf-drawer-sub-menu {
    display: none;
    margin: 0 0 4px 0;
    padding: 6px 8px 10px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 14px 14px;
    list-style: none;
  }

  .sf-modern-drawer .sf-drawer-sub-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    padding: 2px 6px 2px 10px !important;
    transition: all 0.15s ease !important;
  }

  .sf-modern-drawer .sf-drawer-sub-item:hover,
  .sf-modern-drawer .sf-drawer-sub-item:active {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }

  .sf-modern-drawer .sf-drawer-sub-link {
    font-size: 13.5px !important;
    font-weight: 550 !important;
    color: #334155 !important;
    gap: 8px !important;
    min-height: 36px !important;
  }

  .sf-modern-drawer .sf-drawer-sub-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.15s ease;
  }

  .sf-modern-drawer .sf-drawer-sub-item:hover .sf-drawer-sub-dot,
  .sf-modern-drawer .parent.open > .sf-drawer-sub-item .sf-drawer-sub-dot {
    background: #2563eb;
  }

  .sf-modern-drawer .sf-drawer-sub-expand {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* 3rd Level Nested Menu */
  .sf-modern-drawer .sf-drawer-nested-menu {
    display: none;
    margin: 4px 0 6px 16px;
    padding: 4px 0 4px 10px;
    border-left: 2px solid #e2e8f0;
    list-style: none;
  }

  .sf-modern-drawer .sf-drawer-nested-link {
    display: block;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.15s ease;
  }

  .sf-modern-drawer .sf-drawer-nested-link:hover,
  .sf-modern-drawer .sf-drawer-nested-link:active {
    color: #0f172a !important;
    background: #ffffff;
  }

  .sf-modern-drawer .sf-drawer-footer {
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 12px 18px 18px !important;
    border-top: 1px solid #edf1f6;
    background: #fff;
  }

  .sf-modern-drawer .mobile_side_overlay {
    width: 100%;
    padding: 0;
    border: 0;
  }
}

/* Shared storefront repair layer for legacy content pages. */
.storefront-phase15 .form-control,
.storefront-phase15 input[type="text"],
.storefront-phase15 input[type="email"],
.storefront-phase15 input[type="password"],
.storefront-phase15 input[type="tel"],
.storefront-phase15 select,
.storefront-phase15 textarea {
  border-color: #dbe3ee;
  border-radius: 10px;
  color: #172033;
}

.storefront-phase15 .card,
.storefront-phase15 .modal-content,
.storefront-phase15 .user-panel-content,
.storefront-phase15 .content-box {
  color: #172033;
  border-color: #e2e8f0;
  border-radius: 14px;
}

.storefront-phase15 .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-dark),
.storefront-phase15 .modal-content {
  background: #fff;
}

.storefront-phase15 .table:not(.table-dark) td,
.storefront-phase15 .table:not(.table-dark) th,
.storefront-phase15 .nav-tabs .nav-link,
.storefront-phase15 label {
  color: #334155;
}

.storefront-phase15 .btn-light,
.storefront-phase15 .btn-default {
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #fff;
  color: #172033;
}

.storefront-phase15 .btn-primary,
.storefront-phase15 button[type="submit"]:not(.topheader-html-close):not(.sf-mobile-btn) {
  border-radius: 10px;
}

/* ==========================================================================
   ÇOK AL AZ ÖDE MODÜLÜ STİLLERİ (PHASE 22)
   ========================================================================== */
.cokal-product-badge {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  top: auto !important;
  right: auto !important;
  z-index: 4 !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  pointer-events: none !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}
.cokal-product-badge i {
  font-size: 12px !important;
}

.cokal-pdp-card {
  transition: all 0.2s ease;
}
.cokal-pdp-card:hover {
  border-color: #94a3b8 !important;
}
.cokal-tier-box {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cokal-tier-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.cokal-cart-badge-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ==========================================================================
   HEDİYE BULUCU MODÜLÜ STİLLERİ (PHASE 22)
   ========================================================================== */
.hediye-wizard-container {
  max-width: 900px;
  margin: 30px auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 35px 30px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
@media (max-width: 768px) {
  .hediye-wizard-container {
    padding: 24px 16px;
    margin: 15px auto;
    border-radius: 16px;
  }
}

.hediye-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}
.hediye-step-indicator {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.25s ease;
}
.hediye-step-indicator.active {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}
.hediye-step-indicator.completed {
  background: #10b981;
  color: #ffffff;
}
.hediye-step-line {
  flex: 1;
  max-width: 80px;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
}
.hediye-step-line.active {
  background: #4f46e5;
}

.hediye-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 576px) {
  .hediye-option-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.hediye-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  user-select: none;
  position: relative;
}
.hediye-option-card:hover {
  border-color: #818cf8;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12);
}
.hediye-option-card.selected {
  border-color: #4f46e5;
  background: rgba(79, 70, 229, 0.04);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.2);
}
.hediye-option-card .hediye-opt-icon {
  font-size: 32px;
  color: #6366f1;
  margin-bottom: 10px;
  transition: transform 0.2s ease;
}
.hediye-option-card:hover .hediye-opt-icon {
  transform: scale(1.1);
}
.hediye-option-card .hediye-opt-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.hediye-fallback-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 16px 20px;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hediye-fallback-banner i {
  font-size: 24px;
  color: #d97706;
}

/* Homepage Banner */
.hediye-home-banner {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #6366f1 100%);
  border-radius: 18px;
  padding: 30px 40px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0;
  box-shadow: 0 10px 25px rgba(49, 46, 129, 0.2);
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .hediye-home-banner {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    gap: 20px;
  }
}
.hediye-home-banner .btn-hediye-cta {
  background: #ffffff;
  color: #4338ca;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hediye-home-banner .btn-hediye-cta:hover {
  transform: translateY(-2px);
  background: #f8fafc;
  color: #3730a3;
  text-decoration: none;
}

/* Home Banner Enhanced Card */
.hediye-home-banner-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4338ca 100%);
  border-radius: 20px;
  box-shadow: 0 16px 36px -10px rgba(49, 46, 129, 0.35);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.hediye-banner-decor-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hediye-banner-decor-circle.circle-1 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.25) 0%, rgba(129, 140, 248, 0) 70%);
  top: -80px;
  right: -50px;
}
.hediye-banner-decor-circle.circle-2 {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0) 70%);
  bottom: -60px;
  left: 20%;
}
.hediye-banner-illustration {
  display: inline-block;
  position: relative;
  padding: 30px;
}
.hediye-gift-box-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: rgba(245, 158, 11, 0.3);
  filter: blur(40px);
  border-radius: 50%;
}
.hediye-floating-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
.hediye-floating-badge.badge-top-left {
  top: 10px;
  left: -15px;
  animation: floatSlow 3s ease-in-out infinite alternate;
}
.hediye-floating-badge.badge-bottom-right {
  bottom: 10px;
  right: -15px;
  animation: floatSlow 3s ease-in-out infinite alternate-reverse;
}
@keyframes floatSlow {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.sf-promo-pill-gift {
  background: #fdf2f8 !important;
  color: #be185d !important;
  border: 1px solid #fbcfe8 !important;
}
.sf-promo-pill-gift:hover {
  background: #fce7f3 !important;
  color: #9d174d !important;
}

/* Header discovery actions: keep campaign links on one clean row. */
.sf24-category-nav .sf-category-nav-promo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin-left: 8px !important;
  white-space: nowrap !important;
}
.sf24-category-nav .sf-category-nav-promo .sf-promo-pill {
  height: 32px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  gap: 5px !important;
  line-height: 1 !important;
}
.sf24-category-nav .sf-category-nav-promo .sf-promo-pill i {
  margin: 0 !important;
  color: currentColor !important;
  font-size: 15px !important;
}
@media (max-width: 1280px) {
  .sf24-category-nav .sf-category-nav-promo { margin-left: 4px !important; }
  .sf24-category-nav .sf-category-nav-promo .sf-promo-pill { padding: 0 8px !important; font-size: 11px !important; }
}
@media (max-width: 1080px) {
  .sf24-category-nav .sf-category-nav-promo .sf-promo-pill:not(.sf-promo-pill-gift) { display: none !important; }
}
@media (max-width: 860px) {
  .sf24-category-nav .sf-category-nav-promo { margin-left: auto !important; }
}

/* ==========================================================================
   SAĞ ALT SEPET BİLDİRİMİ (CART TOAST NOTIFICATION)
   ========================================================================== */
.cart-toast-notification {
  position: fixed !important;
  bottom: 88px !important;
  right: 24px !important;
  z-index: 9999999 !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 35px -6px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 14px 16px 14px 16px !important;
  box-sizing: border-box !important;
  animation: cartToastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  overflow: hidden !important;
  font-family: inherit !important;
}

@keyframes cartToastSlideIn {
  from {
    transform: translateY(30px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.cart-toast-notification.cart-toast-hiding {
  animation: cartToastSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes cartToastSlideOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }
}

.cart-toast-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.cart-toast-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.cart-toast-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: 13px !important;
  font-weight: bold !important;
}

.cart-toast-close {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  transition: color 0.15s !important;
}
.cart-toast-close:hover {
  color: #0f172a !important;
}

.cart-toast-body {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.cart-toast-img {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 2px !important;
}

.cart-toast-img img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.cart-toast-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.cart-toast-name {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 3px !important;
}

.cart-toast-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #64748b !important;
}

.cart-toast-meta strong {
  color: #0f172a !important;
}

.cart-toast-sep {
  color: #cbd5e1 !important;
}

.cart-toast-price {
  font-weight: 700 !important;
  color: #059669 !important;
}

.cart-toast-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cart-toast-btn-cart {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.cart-toast-btn-cart:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.cart-toast-btn-continue {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.cart-toast-btn-continue:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.cart-toast-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: #f1f5f9 !important;
}

.cart-toast-progress-bar {
  height: 100% !important;
  width: 100% !important;
  background: #10b981 !important;
  animation: cartToastProgress 5s linear forwards !important;
  transform-origin: left !important;
}

@keyframes cartToastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

@media (max-width: 576px) {
  .cart-toast-notification {
    bottom: 80px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   MODERN SUBPAGES & SIDEBAR NAVIGATION (2026 UI REFRESH)
   ========================================================================== */

/* Modern Subpage Wrapper */
.modern-subpage-main {
  background-color: #f8fafc !important;
  min-height: 80vh !important;
  font-family: inherit;
}

/* Modern Page Banner (Header) */
#MainDiv .page-banner-main,
.modern-subpage-main .page-banner-main,
.page-banner-main.modern-page-banner,
div.page-banner-main {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  padding: 30px 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
}

#MainDiv .page-banner-main div[style*="rgba(0,0,0"],
.modern-page-banner div[style*="rgba(0,0,0"] {
  display: none !important;
}

#MainDiv .page-banner-in-text,
.modern-subpage-main .page-banner-in-text,
.modern-page-banner .page-banner-in-text {
  max-width: 1320px !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  position: relative !important;
  z-index: 2 !important;
}

#MainDiv .page-banner-h,
.modern-subpage-main .page-banner-h,
.modern-page-banner .page-banner-h {
  font-size: 24px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  width: auto !important;
}

#MainDiv .page-banner-links,
.modern-subpage-main .page-banner-links,
.modern-page-banner .page-banner-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #64748b !important;
  width: auto !important;
  margin: 0 !important;
}

#MainDiv .page-banner-links a,
.modern-subpage-main .page-banner-links a,
.modern-page-banner .page-banner-links a {
  color: #64748b !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

#MainDiv .page-banner-links a:hover,
.modern-subpage-main .page-banner-links a:hover,
.modern-page-banner .page-banner-links a:hover {
  color: #0f172a !important;
}

.modern-subpage-main .page-banner-links span,
.modern-page-banner .page-banner-links span {
  color: #94a3b8 !important;
}

.modern-subpage-main .page-banner-links .banner-current,
.modern-page-banner .page-banner-links .banner-current {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.modern-page-banner .banner-sep {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  margin: 0 2px !important;
}

.modern-page-banner .banner-current {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Modern Subpage Container Layout */
.modern-subpage-container,
.sss-faq-container-main.modern-subpage-container,
.htmlpage-container-main.modern-subpage-container,
.iletisim-container-main.modern-subpage-container,
.musteriyorum-container-main.modern-subpage-container {
  max-width: 1320px !important;
  width: calc(100% - 48px) !important;
  margin: 40px auto 60px auto !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 32px !important;
}

/* Modern Sidebar Navigation */
.subpage-nav-desktop {
  width: 280px !important;
  flex: 0 0 280px !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 100px !important;
  z-index: 10 !important;
}

.subpage-nav-desktop .subpage_navigation {
  width: 100% !important;
  margin: 0 !important;
}

.subpage_navigation-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px 14px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
  transition: box-shadow 0.2s ease !important;
}

.subpage_navigation-box:hover {
  box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.07) !important;
}

.subpage_navigation_header {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 11px !important;
  margin-bottom: 10px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.subpage_navigation_header i {
  font-size: 16px !important;
  color: #0284c7 !important;
}

.subpage_navigation_links {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.subpage_navigation_a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9.5px 12px !important;
  border-radius: 10px !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-bottom: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
}

.subpage_navigation_a .subpage_nav_title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.subpage_navigation_a .subpage_nav_arrow {
  font-size: 12px !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

.subpage_navigation_a:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transform: translateX(3px) !important;
}

.subpage_navigation_a:hover .subpage_nav_arrow {
  color: #0f172a !important;
  transform: translateX(2px) !important;
}

.subpage_navigation_a.active {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important;
}

.subpage_navigation_a.active .subpage_nav_arrow {
  color: #ffffff !important;
}

/* Mobile Subpage Navigation */
.subpage-nav-mobile-main {
  margin-bottom: 24px !important;
}

.subpage-nav-mobile-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0f172a !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

.subpage-nav-mobile-toggle:hover {
  color: #0f172a !important;
  text-decoration: none !important;
}

.subpage-nav-mobile-toggle .nav-toggle-arrow {
  transition: transform 0.2s ease !important;
}

.subpage-nav-mobile-toggle[aria-expanded="true"] .nav-toggle-arrow {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
   SSS / FAQ MODERN ACCORDION & SEARCH
   ========================================================================== */
.sss-content-area {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.sss-search-wrapper {
  margin-bottom: 22px !important;
}

.sss-search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 4px 18px !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.2s ease !important;
}

.sss-search-box:focus-within {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

.sss-search-icon {
  font-size: 20px !important;
  color: #94a3b8 !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.sss-search-box input {
  border: none !important;
  outline: none !important;
  width: 100% !important;
  font-size: 14.5px !important;
  color: #0f172a !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

.sss-search-box input::placeholder {
  color: #94a3b8 !important;
}

.sss-search-box button {
  background: #f1f5f9 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 13px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}

.sss-search-box button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Modern FAQ Accordion List */
.sss-box-main-div.accordion_main {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.accordion__item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-bottom: 0 !important;
}

.accordion__item:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 18px -2px rgba(15, 23, 42, 0.06) !important;
}

.accordion__item.active {
  border-color: #0284c7 !important;
  box-shadow: 0 8px 22px -4px rgba(2, 132, 199, 0.12) !important;
}

.accordion-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  background: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  user-select: none !important;
  letter-spacing: normal !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  border-bottom: none !important;
}

.accordion-header:before {
  display: none !important;
}

.accordion-header .faq-question-text {
  flex: 1 !important;
  line-height: 1.4 !important;
}

.accordion__item.active .accordion-header {
  background: #f8fafc !important;
  color: #0369a1 !important;
}

.faq-icon-wrapper {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, color 0.2s ease !important;
}

.accordion__item.active .faq-icon-wrapper {
  transform: rotate(180deg) !important;
  background: #0284c7 !important;
  color: #ffffff !important;
}

.accordion-body {
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
  display: none;
}

.accordion-body__contents {
  padding: 22px 24px 26px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  display: block !important;
}

.sss-content-img img {
  max-width: 100% !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.modern-empty-alert {
  background: #ffffff !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 14px !important;
  padding: 30px !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* ==========================================================================
   MODERN CONTENT CARD (Statik / Sözleşme Sayfaları)
   ========================================================================== */
.htmlpage-content-div.modern-content-card,
.modern-content-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.modern-content-card h1,
.modern-content-card h2,
.modern-content-card h3 {
  color: #0f172a !important;
  font-weight: 750 !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

.modern-content-card h1 { font-size: 22px !important; }
.modern-content-card h2 { font-size: 19px !important; }
.modern-content-card h3 { font-size: 16.5px !important; }

.modern-content-card p {
  margin-bottom: 16px !important;
  color: #475569 !important;
}

.modern-content-card ul,
.modern-content-card ol {
  padding-left: 20px !important;
  margin-bottom: 18px !important;
  color: #475569 !important;
}

.modern-content-card li {
  margin-bottom: 6px !important;
}

/* ==========================================================================
   MODERN BANKA HESAPLARI KARTLARI
   ========================================================================== */
.modern-bank-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

.banka-hesap-main-box.modern-bank-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}

.banka-hesap-main-box.modern-bank-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.modern-bank-card .banka-hesap-main-box-img {
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: 180px !important;
}

.modern-bank-card .banka-hesap-main-box-img img {
  max-height: 36px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.modern-bank-card .banka-hesap-main-box-flex {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.modern-bank-card .banka-hesap-main-box-flex-ust {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  margin-bottom: 2px !important;
}

.modern-bank-card .banka-hesap-main-box-flex-alt {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.iban-copy-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  margin-top: 4px !important;
}

.iban-copy-wrap .iban-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  word-break: break-all !important;
}

.btn-copy-iban {
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.btn-copy-iban:hover {
  background: #1e293b !important;
  transform: scale(1.02) !important;
}

.btn-copy-iban.copied {
  background: #059669 !important;
}

/* ==========================================================================
   MODERN TESTIMONIAL / YORUMLAR KARTLARI
   ========================================================================== */
.musteriyorum-container-main-in {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
}

.musteri-yorum-boxes {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}

.musteri-yorum-boxes:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.yorum-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.yorumlar-box-img {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #e2e8f0 !important;
  background: #f1f5f9 !important;
}

.yorumlar-box-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.yorum-card-user-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.yorumlar-text-h {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.yorumlar-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #059669 !important;
  background: #ecfdf5 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  width: fit-content !important;
}

.yorumlar-badge i {
  font-size: 13px !important;
}

.yorumlar-text-star {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.yorumlar-text-s {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  font-style: italic !important;
}

/* ==========================================================================
   RESPONSIVE QUERIES
   ========================================================================== */
@media (max-width: 991px) {
  .modern-subpage-container,
  .sss-faq-container-main.modern-subpage-container,
  .htmlpage-container-main.modern-subpage-container,
  .iletisim-container-main.modern-subpage-container,
  .musteriyorum-container-main.modern-subpage-container {
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
  }

  .subpage-nav-desktop {
    display: none !important;
  }

  .subpage-nav-mobile-main {
    display: block !important;
  }

  .modern-page-banner {
    padding: 24px 0 !important;
  }

  .modern-page-banner .page-banner-in-text {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .htmlpage-content-div.modern-content-card {
    padding: 24px 20px !important;
  }

  .modern-bank-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 992px) {
  .subpage-nav-mobile-main {
    display: none !important;
  }
  .subpage-nav-desktop {
    display: block !important;
  }
}

/* ==========================================================================
   CONTENT CARD HEADER & TYPOGRAPHY
   ========================================================================== */
.content-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 18px !important;
  margin-bottom: 22px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.content-card-heading {
  font-size: 24px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.content-card-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.content-card-body-text {
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  color: #334155 !important;
}

.content-card-body-text p {
  margin-bottom: 18px !important;
}

/* ==========================================================================
   SIPARIS TAKIP & ODEME BILDIRIMI CARDS
   ========================================================================== */
.siparis-takip-main-wrapper,
.odeme-bildirimi-main-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.siparis-takip-card {
  max-width: 620px !important;
  margin: 20px auto 40px auto !important;
  padding: 44px 36px !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.05) !important;
}

.siparis-takip-icon-badge {
  width: 68px !important;
  height: 68px !important;
  border-radius: 20px !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.15) !important;
}

.siparis-takip-title {
  font-size: 22px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em !important;
}

.siparis-takip-desc {
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.55 !important;
  margin-bottom: 28px !important;
  max-width: 440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.siparis-takip-modern-form {
  text-align: left !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.siparis-input-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 8px !important;
}

.siparis-input-wrapper {
  position: relative !important;
  margin-bottom: 20px !important;
}

.modern-order-input {
  height: 50px !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  transition: all 0.2s ease !important;
}

.modern-order-input:focus {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12) !important;
}

.btn-modern-track {
  width: 100% !important;
  height: 50px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}

.btn-modern-track:hover {
  background: #1e293b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.24) !important;
}

.btn-modern-track i {
  font-size: 18px !important;
}

/* ==========================================================================
   MODERN PLP CATEGORY SIDEBAR & CONTROLS (PHASE 22.8)
   ========================================================================== */
.storefront-phase17 .cat-left-main,
.cat-left-main {
  width: 280px !important;
  flex: 0 0 280px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 24px 20px !important;
  box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 96px !important;
  z-index: 10 !important;
  transition: all 0.25s ease !important;
}

/* Category Sidebar Box */
.storefront-phase17 .cat-left-box-main,
.cat-left-box-main {
  margin: 0 0 22px 0 !important;
  padding: 0 0 20px 0 !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: transparent !important;
}

.storefront-phase17 .cat-left-box-main:last-child,
.cat-left-box-main:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Headings in Sidebar */
.storefront-phase17 .cat-left-box-h,
.cat-left-box-h {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cat-left-box-h > div {
  display: none !important; /* Hide old colored underline */
}

/* Subcategories modern styling */
.category-sub-design-box {
  background: transparent !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.category-sub-design-box > li {
  border: none !important;
  background: transparent !important;
  list-style: none !important;
  margin-bottom: 4px !important;
}

.category-sub-design-box > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  background: transparent !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.category-sub-design-box > li:hover > a,
.category-sub-design-box > li > a:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  padding-left: 15px !important;
}

.category-sub-design-box-arrow {
  color: #94a3b8 !important;
  font-size: 13px !important;
  transition: transform 0.18s ease, color 0.18s ease !important;
}

.category-sub-design-box > li:hover .category-sub-design-box-arrow {
  color: #0f172a !important;
  transform: translateX(3px) !important;
}

/* Filter Checkboxes Modernization */
.cat-left-box-out-first,
.cat-left-box-out {
  border: none !important;
  padding: 0 !important;
}

.storefront-phase17 .cat-left-box-t,
.cat-left-box-t {
  padding: 5px 0 !important;
  border-bottom: none !important;
  margin: 0 !important;
}

.cat-left-box-t .custom-control.custom-checkbox,
.cat-right-elements-left .custom-control.custom-checkbox {
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding-left: 28px !important;
  cursor: pointer !important;
  position: relative !important;
}

.cat-left-box-t .custom-control-label,
.cat-right-elements-left .custom-control-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  user-select: none !important;
  transition: color 0.15s ease !important;
}

.cat-left-box-t:hover .custom-control-label,
.cat-right-elements-left:hover .custom-control-label {
  color: #0f172a !important;
}

.cat-left-box-t .custom-control-label::before,
.cat-right-elements-left .custom-control-label::before {
  top: 4px !important;
  left: -28px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  transition: all 0.18s ease !important;
  box-shadow: none !important;
}

.cat-left-box-t .custom-control-label::after,
.cat-right-elements-left .custom-control-label::after {
  top: 4px !important;
  left: -28px !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background-size: 60% 60% !important;
}

.cat-left-box-t .custom-control-input:checked ~ .custom-control-label,
.cat-right-elements-left .custom-control-input:checked ~ .custom-control-label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.cat-left-box-t .custom-control-input:checked ~ .custom-control-label::before,
.cat-right-elements-left .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #0f172a !important;
  border-color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
}

/* Price Range Filter */
fieldset.filter-price {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.price-field {
  position: relative !important;
  width: 100% !important;
  height: 28px !important;
  margin-top: 4px !important;
}

.price-field input[type=range] {
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  width: 100% !important;
  outline: none !important;
  background: transparent !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
}

.price-field input[type=range]::-webkit-slider-thumb {
  pointer-events: all !important;
  position: relative !important;
  z-index: 1 !important;
  outline: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #0f172a !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25) !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.price-field input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
  background-color: #1e293b !important;
}

.price-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 14px 0 12px 0 !important;
}

.price-wrap-outputbox {
  flex: 1 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

.price-filter-range-button button {
  width: 100% !important;
  height: 42px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.14) !important;
}

.price-filter-range-button button:hover {
  background: #1e293b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2) !important;
}

/* PLP Top Bar (.cat-right-elements) Modernization */
.storefront-phase17 .cat-right-elements,
.cat-right-elements {
  min-height: 60px !important;
  padding: 10px 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.storefront-phase17 .cat-right-elements-right-siralama select,
.storefront-phase17 .nice-select-cat-detail {
  min-height: 40px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  padding: 0 14px !important;
}

.storefront-phase17 .cat-right-elements-right-liste a {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  transition: all 0.15s ease !important;
}

.storefront-phase17 .cat-right-elements-right-liste a:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Modern Empty State Card (for comments and other pages) */
.modern-empty-state-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 64px 32px !important;
  text-align: center !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.empty-state-icon-circle {
  width: 80px !important;
  height: 80px !important;
  border-radius: 24px !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  color: #64748b !important;
  font-size: 40px !important;
}

.empty-state-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 10px !important;
}

.empty-state-desc {
  font-size: 15px !important;
  color: #64748b !important;
  max-width: 480px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.btn-empty-state-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
}

.btn-empty-state-action:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.22) !important;
}

/* ==========================================================================
   Storefront Mini Cart Drawer - Modern Stepper & Mobile Touch UI
   ========================================================================== */
.sf19-quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 11px !important;
  padding: 2px !important;
  height: 38px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  position: relative !important;
}

.sf19-quantity .sf19-qty-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.sf19-quantity .sf19-qty-btn:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.sf19-quantity .sf19-qty-btn:active {
  transform: scale(0.9) !important;
  background: #e2e8f0 !important;
}

.sf19-quantity .sf19-qty-btn.sf19-qty-minus.is-delete {
  color: #64748b !important;
}

.sf19-quantity .sf19-qty-btn.sf19-qty-minus.is-delete:hover,
.sf19-quantity .sf19-qty-btn.sf19-qty-minus.is-delete:active {
  color: #ef4444 !important;
  background: #fee2e2 !important;
}

.sf19-quantity .sf19-qty-btn:disabled,
.sf19-quantity .sf19-qty-btn.is-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sf19-quantity .sf19-qty-val {
  min-width: 32px !important;
  padding: 0 4px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 34px !important;
}

.sf19-mini-item-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.sf19-mini-remove {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  border: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  padding: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.sf19-mini-remove:hover {
  color: #ef4444 !important;
  background: #fee2e2 !important;
  border-color: #fecaca !important;
}

.sf19-mini-remove:active {
  transform: scale(0.92) !important;
  background: #fecaca !important;
}

.sf19-mini-item {
  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease !important;
}

.sf19-mini-item.is-removing {
  opacity: 0 !important;
  transform: translateX(30px) !important;
  pointer-events: none !important;
}

/* Mobile responsive fine-tuning for mini cart drawer */
@media (max-width: 480px) {
  .sf19-cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .sf19-quantity {
    height: 38px !important;
  }
  .sf19-quantity .sf19-qty-btn {
    width: 36px !important;
    height: 34px !important;
  }
  .sf19-mini-item-price strong {
    font-size: 14.5px !important;
  }
}

/* ==========================================================================
   FAZ — MODERN COMPACT FOOTER BRAND & COPYRIGHT BAR (MOBILE OPTIMIZED)
   ========================================================================== */
@media (max-width: 768px) {
  .storefront-phase15 .footer-1-area,
  .footer-1-area {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 10px 14px !important;
    padding: 13px 15px !important;
    margin: 0 0 12px !important;
    border-radius: 16px !important;
    background: linear-gradient(115deg, rgba(43, 56, 78, .62), rgba(18, 23, 32, .78)) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2) !important;
    min-height: 0 !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-logo,
  .footer-1-area .footer-module-box-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 140px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-logo img,
  .footer-1-area .footer-module-box-logo img {
    display: block !important;
    max-width: 125px !important;
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-social,
  .footer-1-area .footer-module-box-social {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-social a,
  .footer-1-area .footer-module-box-social a {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    font-size: 13.5px !important;
    margin: 0 !important;
    transition: background .15s ease, color .15s ease, transform .15s ease !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-social a:active,
  .footer-1-area .footer-module-box-social a:active {
    background: #2563eb !important;
    color: #ffffff !important;
    transform: scale(0.92) !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-telif,
  .footer-1-area .footer-module-box-telif {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #94a3b8 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-telif::before,
  .footer-1-area .footer-module-box-telif::before {
    content: '\f3ed' !important;
    font-family: 'Line Awesome Free' !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    color: #38bdf8 !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 360px) {
  .storefront-phase15 .footer-1-area,
  .footer-1-area {
    padding: 10px 12px !important;
    gap: 8px 10px !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-logo img,
  .footer-1-area .footer-module-box-logo img {
    max-width: 105px !important;
    max-height: 30px !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-social a,
  .footer-1-area .footer-module-box-social a {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  .storefront-phase15 .footer-1-area .footer-module-box-telif,
  .footer-1-area .footer-module-box-telif {
    font-size: 10.5px !important;
  }
}

/* Cart / Special day quick add ------------------------------------------------ */
.cart-special-day-card{position:relative;isolation:isolate;overflow:hidden;margin:0 0 16px;padding:18px;border:1px solid #ddd6fe;border-radius:18px;background:linear-gradient(135deg,#fff 0%,#faf7ff 52%,#f5f3ff 100%);box-shadow:0 12px 30px rgba(76,29,149,.08);display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;color:#172033}
.cart-special-day-glow{position:absolute;z-index:-1;right:-48px;top:-76px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.2),rgba(139,92,246,0) 70%);pointer-events:none}
.cart-special-day-icon{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#7c3aed,#4f46e5);color:#fff;box-shadow:0 9px 20px rgba(99,102,241,.25);font-size:25px}
.cart-special-day-copy{min-width:0;padding-top:1px}
.cart-special-day-eyebrow{display:block;margin:0 0 3px;color:#7c3aed;font-size:9px;font-weight:850;letter-spacing:.12em}
.cart-special-day-copy h2{margin:0;color:#161d2f;font-size:15px;line-height:1.3;font-weight:800}
.cart-special-day-copy p{margin:6px 0 0;color:#687087;font-size:11.5px;line-height:1.55}
.cart-special-day-copy p strong{color:#4c1d95;font-weight:750}
.cart-special-day-action{grid-column:1/-1;width:100%;height:42px;border:0;border-radius:12px;background:#fff;color:#5b21b6!important;box-shadow:inset 0 0 0 1px #ddd6fe;text-decoration:none!important;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:800;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.cart-special-day-action:hover{background:#f5f3ff;box-shadow:inset 0 0 0 1px #c4b5fd,0 7px 15px rgba(91,33,182,.09);transform:translateY(-1px)}
.cart-special-day-action i{font-size:17px}
.cart-special-day-feedback{grid-column:1/-1;display:flex;align-items:flex-start;gap:7px;border-radius:10px;padding:9px 10px;font-size:11.5px;line-height:1.4;font-weight:650}
.cart-special-day-feedback.is-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.cart-special-day-feedback.is-danger{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
.cart-special-day-feedback i{font-size:16px;flex:0 0 auto}
body.cart-special-day-open{overflow:hidden!important}
.cart-special-day-modal{position:fixed;inset:0;z-index:10120;display:flex;align-items:center;justify-content:center;padding:22px;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s ease}
.cart-special-day-modal.is-open{visibility:visible;opacity:1}
.cart-special-day-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.64);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.cart-special-day-dialog{position:relative;width:min(680px,100%);max-height:calc(100dvh - 44px);overflow:auto;border:1px solid rgba(255,255,255,.75);border-radius:26px;background:#fff;box-shadow:0 32px 90px rgba(15,23,42,.3);transform:translateY(18px) scale(.985);transition:transform .25s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin}
.cart-special-day-modal.is-open .cart-special-day-dialog{transform:none}
.cart-special-day-close{position:absolute;z-index:3;right:18px;top:18px;width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:.18s ease}
.cart-special-day-close:hover{background:#fff;color:#4f46e5;transform:rotate(4deg)}
.cart-special-day-dialog-head{position:relative;overflow:hidden;padding:30px 72px 28px 30px;background:linear-gradient(132deg,#111b3f 0%,#312e81 55%,#6d28d9 120%);color:#fff;display:flex;align-items:center;gap:18px}
.cart-special-day-dialog-head:after{content:"";position:absolute;right:-55px;bottom:-90px;width:230px;height:230px;border-radius:50%;border:45px solid rgba(255,255,255,.06);pointer-events:none}
.cart-special-day-dialog-icon{position:relative;z-index:1;flex:0 0 auto;width:64px;height:64px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:31px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.cart-special-day-dialog-head>div:last-child{position:relative;z-index:1}
.cart-special-day-dialog-head span{display:block;margin:0 0 5px;color:#c4b5fd;font-size:9.5px;font-weight:850;letter-spacing:.17em}
.cart-special-day-dialog-head h2{margin:0;color:#fff;font-size:22px;line-height:1.25;font-weight:820;letter-spacing:-.02em}
.cart-special-day-dialog-head p{margin:7px 0 0;color:#dbe3ff;font-size:12.5px;line-height:1.5}
.cart-special-day-form{padding:26px 30px 28px;background:linear-gradient(180deg,#fff,#fdfdff)}
.cart-special-day-types{border:0;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.cart-special-day-types legend,.cart-special-day-field>label{width:100%;margin:0 0 8px;color:#344054;font-size:11.5px;line-height:1.3;font-weight:780}
.cart-special-day-field>label>i{margin-right:5px;color:#8b5cf6;font-size:14px;vertical-align:-1px}
.cart-special-day-types legend{grid-column:1/-1;padding:0}
.cart-special-day-types label{margin:0;cursor:pointer;min-width:0}
.cart-special-day-types input{position:absolute;opacity:0;pointer-events:none}
.cart-special-day-types label>span{height:72px;padding:9px 5px;border:1px solid #e4e7ec;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#667085;transition:.18s ease;text-align:center}
.cart-special-day-types label>span i{font-size:22px;color:#7c3aed}
.cart-special-day-types label>span b{font-size:10.5px;line-height:1.2;font-weight:750}
.cart-special-day-types input:checked+span{border-color:#8b5cf6;background:#f5f3ff;color:#4c1d95;box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.cart-special-day-types input:focus-visible+span{outline:2px solid #6366f1;outline-offset:2px}
.cart-special-day-field{min-width:0}
.cart-special-day-field.is-wide{margin-bottom:17px}
.cart-special-day-field label em{color:#e11d48;font-style:normal}
.cart-special-day-field label small{color:#98a2b3;font-size:10px;font-weight:600}
.cart-special-day-field input,.cart-special-day-field select,.cart-special-day-field textarea{width:100%;border:1px solid #dce1e9;border-radius:12px;background:#fff;color:#172033;font:inherit;font-size:13px;outline:0;transition:border-color .18s ease,box-shadow .18s ease}
.cart-special-day-field input,.cart-special-day-field select{height:46px;padding:0 13px}
.cart-special-day-field textarea{min-height:68px;padding:12px 13px;resize:vertical;line-height:1.45}
.cart-special-day-field input:focus,.cart-special-day-field select:focus,.cart-special-day-field textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.cart-special-day-field input::placeholder,.cart-special-day-field textarea::placeholder{color:#a4acba}
.cart-special-day-control{position:relative}
.cart-special-day-control>i{position:absolute;z-index:1;left:14px;top:50%;transform:translateY(-50%);color:#8b5cf6;font-size:17px;pointer-events:none}
.cart-special-day-control input,.cart-special-day-control select{padding-left:41px}
.cart-special-day-control select:only-child{padding-left:13px}
.cart-special-day-date-grid{display:grid;grid-template-columns:.75fr 1.25fr 1fr;gap:11px;margin-bottom:17px}
.cart-special-day-disabled{min-height:46px;border:1px dashed #d8dee8;border-radius:12px;background:#f8fafc;color:#667085;padding:11px 13px;display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.35}
.cart-special-day-disabled i{font-size:18px;color:#98a2b3}
.cart-special-day-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:5px;padding-top:20px;border-top:1px solid #eef0f4}
.cart-special-day-cancel,.cart-special-day-save{height:46px;border-radius:12px;padding:0 19px;font-size:12.5px;font-weight:800;cursor:pointer;transition:.18s ease}
.cart-special-day-cancel{border:1px solid #dce1e9;background:#fff;color:#475467}
.cart-special-day-cancel:hover{background:#f8fafc;border-color:#c9d0db}
.cart-special-day-save{min-width:178px;border:0;background:linear-gradient(135deg,#6d28d9,#4f46e5);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 9px 20px rgba(79,70,229,.22)}
.cart-special-day-save:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(79,70,229,.28)}
.cart-special-day-save:disabled{cursor:wait;opacity:.72;transform:none}
.cart-special-day-save i{font-size:18px}

@media(max-width:767px){
 .cart-special-day-card{padding:15px;border-radius:16px;grid-template-columns:44px minmax(0,1fr);gap:10px}
 .cart-special-day-icon{width:44px;height:44px;border-radius:13px;font-size:22px}
 .cart-special-day-copy h2{font-size:14px}.cart-special-day-copy p{font-size:11px}
 .cart-special-day-modal{align-items:flex-end;padding:0}
 .cart-special-day-dialog{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;transform:translateY(100%);border-bottom:0}
 .cart-special-day-dialog-head{padding:23px 58px 21px 20px;gap:12px}
 .cart-special-day-dialog-icon{width:50px;height:50px;border-radius:16px;font-size:25px}
 .cart-special-day-dialog-head h2{font-size:18px}.cart-special-day-dialog-head p{font-size:11px}
 .cart-special-day-close{right:13px;top:13px;width:36px;height:36px}
 .cart-special-day-form{padding:20px 16px calc(18px + env(safe-area-inset-bottom))}
 .cart-special-day-types{gap:7px}.cart-special-day-types label>span{height:65px}.cart-special-day-types label>span b{font-size:9px}
 .cart-special-day-date-grid{grid-template-columns:.7fr 1.3fr}.cart-special-day-date-grid .cart-special-day-field:last-child{grid-column:1/-1}
 .cart-special-day-form-actions{position:sticky;bottom:0;margin:5px -16px -18px;padding:13px 16px calc(13px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -8px 24px rgba(15,23,42,.07)}
 .cart-special-day-cancel{padding:0 15px}.cart-special-day-save{flex:1;min-width:0;padding:0 14px}
}


/* ===================================================
   PHASE 25: BOTTOM MINI TOAST & CART ALIGNMENT POLISH
   =================================================== */

/* Mini Bottom Toast Notification */
.sf-bottom-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 10200 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  max-width: 360px !important;
  animation: sfToastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transition: all 0.25s ease !important;
}

.sf-bottom-toast.is-hiding {
  opacity: 0 !important;
  transform: translateY(12px) scale(0.95) !important;
}

@keyframes sfToastSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sf-bottom-toast.sf-toast-success {
  border-left: 4px solid #10b981 !important;
}

.sf-bottom-toast.sf-toast-success .sf-toast-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #d1fae5 !important;
  color: #059669 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.sf-bottom-toast.sf-toast-info {
  border-left: 4px solid #3b82f6 !important;
}

.sf-bottom-toast.sf-toast-info .sf-toast-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #dbeafe !important;
  color: #2563eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.sf-bottom-toast.sf-toast-danger,
.sf-bottom-toast.sf-toast-error {
  border-left: 4px solid #ef4444 !important;
}

.sf-bottom-toast.sf-toast-danger .sf-toast-icon,
.sf-bottom-toast.sf-toast-error .sf-toast-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.sf-bottom-toast.sf-toast-warning {
  border-left: 4px solid #f59e0b !important;
}

.sf-bottom-toast.sf-toast-warning .sf-toast-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #fef3c7 !important;
  color: #d97706 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

.sf-bottom-toast .sf-toast-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.sf-bottom-toast .sf-toast-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}

.sf-bottom-toast .sf-toast-msg {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.sf-bottom-toast .sf-toast-close {
  background: transparent !important;
  border: 0 !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 4px !important;
  line-height: 1 !important;
  transition: color 0.15s ease !important;
}

.sf-bottom-toast .sf-toast-close:hover {
  color: #0f172a !important;
}

@media (max-width: 480px) {
  .sf-bottom-toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 20px !important;
    max-width: none !important;
  }
}

/* Big Cart Table Alignment & Spacing (Desktop) */
@media (min-width: 901px) {
  .storefront-cart-page .cart-head {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) 130px 140px 130px 44px !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .storefront-cart-page .cart-left-box-main {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) 130px 140px 130px 44px !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .storefront-cart-page .cart-left-box-3,
  .storefront-cart-page .cart-left-box-4,
  .storefront-cart-page .cart-left-box-5,
  .storefront-cart-page .cart-left-box-6 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .storefront-cart-page .cart-left-box-3 strong,
  .storefront-cart-page .cart-left-box-5 strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

.storefront-cart-page .cart-left-box-3 [data-toggle="tooltip"],
.storefront-cart-page .cart-left-box-5 [data-toggle="tooltip"],
.sf-size-ozel-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.storefront-cart-page .cart-left-box-4 .sf-quantity-stepper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d5dae1 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  height: 38px !important;
  background: #fff !important;
}

.storefront-cart-page .cart-left-box-4 .sf-qty-form {
  margin: 0 !important;
  display: inline-flex !important;
}

.storefront-cart-page .cart-left-box-4 .sf-qty-btn {
  width: 36px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  text-decoration: none !important;
}

.storefront-cart-page .cart-left-box-4 .sf-qty-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.storefront-cart-page .cart-left-box-4 .sf-qty-input {
  width: 42px !important;
  height: 38px !important;
  border: 0 !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #fff !important;
  padding: 0 !important;
  pointer-events: none !important;
}


/* ===================================================
   PHASE 26: MOBILE CART UI POLISH & STREAMLINED CARDS
   =================================================== */

@media (max-width: 900px) {
  .storefront-cart-page .cart-main-div {
    grid-template-columns: 1fr !important;
    padding: 0 12px 100px !important;
    gap: 16px !important;
  }

  .storefront-cart-page .cart-left-div,
  .storefront-cart-page .cart-right-div {
    width: 100% !important;
    float: none !important;
  }

  .storefront-cart-page .cart-head {
    display: none !important;
  }

  /* Clean, structured mobile product card */
  .storefront-cart-page .cart-left-box-main {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 12px !important;
    padding: 14px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #eef2f6 !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    position: relative !important;
    align-items: center !important;
  }

  /* Product Image */
  .storefront-cart-page .cart-left-box-1 {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .storefront-cart-page .cart-left-box-1 img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    display: block !important;
  }

  /* Product Title, Variants & Promos */
  .storefront-cart-page .cart-left-box-2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    padding-right: 6px !important;
    margin: 0 !important;
    width: auto !important;
  }
  .storefront-cart-page .cart-left-box-2 a,
  .storefront-cart-page .cart-left-box-2-txt {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }
  .storefront-cart-page .cart-left-variant-div {
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 3px !important;
  }
  .sf-cokal-prompt-pill,
  .sf-cokal-applied-pill {
    padding: 3px 8px !important;
    font-size: 11px !important;
    gap: 5px !important;
    margin-top: 5px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    line-height: 1.3 !important;
  }

  /* Delete / Trash Button (Top Right) */
  .storefront-cart-page .cart-left-box-6 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .storefront-cart-page .cart-left-box-6 .sf-cart-btn-trash {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
  }
  .storefront-cart-page .cart-left-box-6 .sf-cart-btn-trash:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
  }

  /* Hide raw unit price on mobile to prevent floating detached numbers */
  .storefront-cart-page .cart-left-box-3 {
    display: none !important;
  }

  /* Stepper (Bottom Left of content) */
  .storefront-cart-page .cart-left-box-4 {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: start !important;
    width: auto !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }
  .storefront-cart-page .cart-left-box-4 .sf-quantity-stepper {
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
  }
  .storefront-cart-page .cart-left-box-4 .sf-qty-btn {
    width: 30px !important;
    height: 32px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }
  .storefront-cart-page .cart-left-box-4 .sf-qty-input {
    width: 34px !important;
    height: 32px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  /* Total Price (Bottom Right of content) */
  .storefront-cart-page .cart-left-box-5 {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
    text-align: right !important;
    width: auto !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
  }
  .storefront-cart-page .cart-left-box-5 strong {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    text-align: right !important;
    display: block !important;
  }

  /* Special Day Card Mobile Polish */
  .cart-special-day-card {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    align-items: center !important;
    gap: 10px 12px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
    border: 1px solid #e9d5ff !important;
    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.05) !important;
  }
  .cart-special-day-glow {
    display: none !important;
  }
  .cart-special-day-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    border-radius: 10px !important;
    background: #f3e8ff !important;
    color: #7e22ce !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(126, 34, 206, 0.12) !important;
    flex-shrink: 0 !important;
  }
  .cart-special-day-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .cart-special-day-copy .cart-special-day-eyebrow {
    display: block !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #7e22ce !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }
  .cart-special-day-copy h2 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #1e1b4b !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .cart-special-day-copy p {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
  }
  .cart-special-day-action {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 38px !important;
    margin-top: 4px !important;
    padding: 0 16px !important;
    border: 1px solid #d8b4fe !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #6b21a8 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(126, 34, 206, 0.08) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .cart-special-day-action:hover,
  .cart-special-day-action:active {
    background: #7e22ce !important;
    border-color: #7e22ce !important;
    color: #ffffff !important;
  }
  .cart-special-day-action i {
    font-size: 15px !important;
    color: inherit !important;
  }

  /* Coupon Card Mobile Simplification */
  .sf-cart-coupon-card {
    padding: 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
  }
  .sf-coupon-toggle-btn {
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }
  .sf-coupon-input-wrap .sf-coupon-input {
    height: 40px !important;
    font-size: 13px !important;
  }
  .sf-coupon-input-wrap .sf-coupon-btn {
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
  }
}