/* STOREFRONT_MOBILE_DOCK_MODERN_BLUE_20260714 */
    @media (max-width: 767.98px) {
      body.storefront-body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
      }

      body.storefront-body .sf-footer {
        margin-bottom: calc(-88px - env(safe-area-inset-bottom, 0px)) !important;
      }

      body.storefront-body .sf-footer-mobile {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
      }

      html body.storefront-body .sf-mobile-dock {
        --dock-blue-strong: var(--sf-vivid-blue-soft, #5b72ff);
        --dock-cyan: var(--sf-vivid-cyan, #22d3ee);
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(7px, env(safe-area-inset-bottom, 0px)) !important;
        width: min(calc(100vw - 12px), 500px) !important;
        max-width: 500px !important;
        min-height: 66px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.08fr) repeat(2, minmax(0, 1fr)) !important;
        align-items: end !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 5px !important;
        border: 1px solid rgba(91, 114, 255, 0.64) !important;
        border-radius: 12px !important;
        background:
          radial-gradient(240px 96px at 50% -42px, rgba(34, 211, 238, 0.30), transparent 72%),
          radial-gradient(190px 90px at 8% 0%, rgba(67, 95, 255, 0.34), transparent 72%),
          radial-gradient(180px 86px at 96% 0%, rgba(155, 92, 255, 0.22), transparent 74%),
          linear-gradient(180deg, rgba(22, 28, 64, 0.985), rgba(7, 10, 27, 0.995)) !important;
        box-shadow:
          0 -10px 30px rgba(0, 0, 0, 0.38),
          0 10px 30px rgba(0, 0, 0, 0.26),
          0 0 24px rgba(67, 95, 255, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.13),
          inset 0 0 0 1px rgba(34, 211, 238, 0.08) !important;
        backdrop-filter: blur(14px) saturate(1.30) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.30) !important;
        transform: translateX(-50%) !important;
        overflow: visible !important;
        isolation: isolate !important;
      }

      html body.storefront-body .sf-mobile-dock::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: inherit !important;
        border-top: 1px solid rgba(192, 229, 255, 0.34) !important;
        background: none !important;
        pointer-events: none !important;
      }

      html body.storefront-body .sf-mobile-dock__item,
      html body.storefront-body button.sf-mobile-dock__item {
        position: relative !important;
        box-sizing: border-box !important;
        isolation: isolate !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 7px 3px 8px !important;
        border: 1px solid rgba(91, 114, 255, 0.34) !important;
        border-radius: 8px !important;
        background:
          radial-gradient(90px 44px at 50% -12px, rgba(91, 114, 255, 0.22), transparent 72%),
          linear-gradient(180deg, rgba(34, 44, 92, 0.96), rgba(10, 15, 39, 0.985)) !important;
        color: #f4f7ff !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.09),
          inset 0 0 0 1px rgba(34, 211, 238, 0.035),
          0 6px 14px rgba(0, 0, 0, 0.18) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        text-decoration: none !important;
        overflow: hidden !important;
        transition:
          border-color .16s ease,
          background .16s ease,
          color .16s ease,
          box-shadow .16s ease,
          transform .12s ease !important;
      }

      html body.storefront-body .sf-mobile-dock__item::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: inherit !important;
        background:
          radial-gradient(100px 52px at 50% -8px, rgba(34, 211, 238, 0.52), transparent 70%),
          linear-gradient(180deg, rgba(67, 95, 255, 0.25), rgba(155, 92, 255, 0.06) 70%, transparent) !important;
        opacity: 0 !important;
        transition: opacity .16s ease !important;
        pointer-events: none !important;
        z-index: -1 !important;
      }

      html body.storefront-body .sf-mobile-dock__item::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 3px !important;
        width: 22px !important;
        height: 2px !important;
        border-radius: 3px !important;
        background: linear-gradient(90deg, var(--dock-cyan), var(--dock-blue-strong)) !important;
        box-shadow: 0 0 9px rgba(52, 120, 255, 0.82) !important;
        opacity: 0 !important;
        transform: translateX(-50%) scaleX(.55) !important;
        transition: opacity .16s ease, transform .16s ease !important;
      }

      html body.storefront-body .sf-mobile-dock__item svg {
        position: relative !important;
        z-index: 1 !important;
        width: 21px !important;
        height: 21px !important;
        max-width: 21px !important;
        max-height: 21px !important;
        flex: 0 0 21px !important;
        color: currentColor !important;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.30)) !important;
      }

      html body.storefront-body .sf-mobile-dock__icon-wrap {
        position: relative !important;
        z-index: 4 !important;
        width: 30px !important;
        height: 25px !important;
        flex: 0 0 25px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
      }

      html body.storefront-body .sf-mobile-dock__icon-wrap svg {
        display: block !important;
      }

      html body.storefront-body .sf-mobile-dock__cart-badge {
        position: absolute !important;
        top: -8px !important;
        right: -9px !important;
        z-index: 8 !important;
        box-sizing: border-box !important;
        min-width: 19px !important;
        height: 19px !important;
        padding: 0 5px !important;
        border: 2px solid rgba(11, 15, 40, 0.96) !important;
        border-radius: 999px !important;
        background:
          linear-gradient(135deg, #ff5f6d 0%, var(--sf-vivid-orange, #ff9f3f) 100%) !important;
        color: #ffffff !important;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.22),
          0 4px 10px rgba(255, 95, 109, 0.40),
          0 0 12px rgba(255, 159, 63, 0.34) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font: 900 10px/1 "Segoe UI", Inter, Arial, sans-serif !important;
        letter-spacing: -0.02em !important;
        text-align: center !important;
        text-shadow: 0 1px 2px rgba(74, 20, 20, 0.46) !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        transform-origin: center !important;
      }

      html body.storefront-body .sf-mobile-dock__cart-badge[hidden] {
        display: none !important;
      }

      html body.storefront-body .sf-mobile-dock__cart-badge.is-updated {
        animation: sf-mobile-cart-badge-pop .42s cubic-bezier(.2, .9, .28, 1.35) both !important;
      }

      @keyframes sf-mobile-cart-badge-pop {
        0% { transform: scale(.55); opacity: .25; }
        60% { transform: scale(1.22); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
      }

      html body.storefront-body .sf-mobile-dock__item span {
        position: relative !important;
        z-index: 1 !important;
        max-width: 100% !important;
        color: inherit !important;
        font: 900 11px/1.08 "Segoe UI", Inter, Arial, sans-serif !important;
        letter-spacing: 0.012em !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.58), 0 0 10px rgba(91, 114, 255, 0.14) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
      }

      html body.storefront-body .sf-mobile-dock__item:focus-visible {
        border-color: rgba(34, 211, 238, 0.72) !important;
        background:
          radial-gradient(100px 54px at 50% -6px, rgba(34, 211, 238, 0.30), transparent 70%),
          linear-gradient(180deg, rgba(49, 67, 146, 0.98), rgba(14, 24, 62, 0.99)) !important;
        color: #ffffff !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.16),
          0 0 18px rgba(67, 95, 255, 0.26) !important;
        outline: none !important;
      }

      html body.storefront-body .sf-mobile-dock__item:focus-visible::before {
        opacity: .72 !important;
      }

      /* Mobilde dokunma sonrası yapışan hover rengi uygulanmaz. */
      @media (hover: hover) and (pointer: fine) {
        html body.storefront-body .sf-mobile-dock__item:hover {
          border-color: rgba(34, 211, 238, 0.72) !important;
          background:
            radial-gradient(100px 54px at 50% -6px, rgba(34, 211, 238, 0.30), transparent 70%),
            linear-gradient(180deg, rgba(49, 67, 146, 0.98), rgba(14, 24, 62, 0.99)) !important;
          color: #ffffff !important;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 18px rgba(67, 95, 255, 0.26) !important;
        }

        html body.storefront-body .sf-mobile-dock__item:hover::before {
          opacity: .72 !important;
        }
      }

      html body.storefront-body .sf-mobile-dock__item--active {
        border-color: rgba(116, 223, 255, 0.94) !important;
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.24), transparent 45%),
          linear-gradient(135deg, #22d3ee 0%, #435fff 52%, #7a5cff 100%) !important;
        color: #ffffff !important;
        box-shadow:
          0 0 22px rgba(67, 95, 255, 0.46),
          0 8px 22px rgba(7, 20, 70, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.30),
          inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
      }

      html body.storefront-body .sf-mobile-dock__item--active::before {
        opacity: 1 !important;
      }

      html body.storefront-body .sf-mobile-dock__item--active::after {
        opacity: 1 !important;
        transform: translateX(-50%) scaleX(1) !important;
      }

      html body.storefront-body .sf-mobile-dock__item--active svg {
        filter:
          drop-shadow(0 0 6px rgba(91, 144, 255, 0.62))
          drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28)) !important;
      }

      html body.storefront-body .sf-mobile-dock__item.sf-mobile-dock__item--flash,
      html body.storefront-body .sf-mobile-dock__item--center.sf-mobile-dock__item--flash,
      html body.storefront-body .sf-mobile-dock__item--center.sf-mobile-dock__item--active.sf-mobile-dock__item--flash {
        border-color: rgba(225, 253, 255, 1) !important;
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.42), transparent 42%),
          linear-gradient(125deg, #22d3ee 0%, #435fff 45%, #9b5cff 100%) !important;
        color: #ffffff !important;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.22),
          0 0 30px rgba(34, 211, 238, 0.52),
          0 0 38px rgba(67, 95, 255, 0.46),
          0 12px 30px rgba(13, 24, 76, 0.46),
          inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
        animation: sf-mobile-dock-color-flash .65s ease-in-out 2 alternate !important;
      }

      html body.storefront-body .sf-mobile-dock__item.sf-mobile-dock__item--flash::before {
        opacity: 1 !important;
      }

      html body.storefront-body .sf-mobile-dock__item.sf-mobile-dock__item--flash::after {
        width: 30px !important;
        height: 3px !important;
        opacity: 1 !important;
        transform: translateX(-50%) scaleX(1) !important;
        background: #e9fdff !important;
        box-shadow: 0 0 13px rgba(225, 253, 255, 1) !important;
      }

      html body.storefront-body .sf-mobile-dock__item.sf-mobile-dock__item--flash svg {
        filter:
          drop-shadow(0 0 9px rgba(230, 253, 255, 0.96))
          drop-shadow(0 4px 8px rgba(34, 72, 180, 0.42)) !important;
      }

      @keyframes sf-mobile-dock-color-flash {
        from {
          filter: brightness(1) saturate(1.08);
        }
        to {
          filter: brightness(1.18) saturate(1.34);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html body.storefront-body .sf-mobile-dock__item.sf-mobile-dock__item--flash {
          animation: none !important;
        }
      }

      html body.storefront-body .sf-mobile-dock__item--center {
        min-height: 68px !important;
        margin-top: -8px !important;
        padding: 8px 3px 10px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        z-index: 2 !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center.sf-mobile-dock__item--active {
        border-color: rgba(208, 249, 255, 0.98) !important;
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.30), transparent 44%),
          linear-gradient(135deg, #2be4f2 0%, #435fff 50%, #9b5cff 100%) !important;
        box-shadow:
          0 10px 28px rgba(67, 95, 255, 0.52),
          0 0 22px rgba(34, 211, 238, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.36),
          inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center svg {
        width: 25px !important;
        height: 25px !important;
        max-width: 25px !important;
        max-height: 25px !important;
        flex-basis: 25px !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center .sf-mobile-dock__icon-wrap {
        width: 34px !important;
        height: 29px !important;
        flex-basis: 29px !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center span {
        font-size: 11px !important;
        font-weight: 900 !important;
      }

      html body.storefront-body .sf-mobile-dock__item:active {
        border-color: rgba(108, 162, 255, 0.88) !important;
        background:
          radial-gradient(circle at 50% 0%, rgba(91, 151, 255, 0.34), transparent 60%),
          linear-gradient(180deg, #285fc5 0%, #123b85 100%) !important;
        color: #ffffff !important;
        transform: translateY(1px) scale(.985) !important;
      }

      html body.storefront-body .sf-mobile-dock__item:active::before,
      html body.storefront-body .sf-mobile-dock__item:active::after {
        opacity: 1 !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center:active {
        transform: translateY(1px) scale(.98) !important;
      }

      body.storefront-body.sf-megamenu-mobile-open .sf-mobile-dock {
        transform: translate(-50%, 16px) !important;
      }

    }

    @media (max-width: 359.98px) {
      html body.storefront-body .sf-mobile-dock {
        width: calc(100vw - 8px) !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 2px !important;
        padding: 4px !important;
        border-radius: 10px !important;
      }

      html body.storefront-body .sf-mobile-dock__item,
      html body.storefront-body button.sf-mobile-dock__item {
        min-height: 51px !important;
        padding: 6px 1px 8px !important;
        border-radius: 7px !important;
      }

      html body.storefront-body .sf-mobile-dock__item svg {
        width: 19px !important;
        height: 19px !important;
        max-width: 19px !important;
        max-height: 19px !important;
        flex-basis: 19px !important;
      }

      html body.storefront-body .sf-mobile-dock__item span {
        font-size: 8.9px !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center {
        min-height: 61px !important;
        margin-top: -7px !important;
        border-radius: 9px !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center svg {
        width: 23px !important;
        height: 23px !important;
        max-width: 23px !important;
        max-height: 23px !important;
        flex-basis: 23px !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center span {
        font-size: 9.6px !important;
      }
    }

    @media (min-width: 430px) and (max-width: 767.98px) {
      html body.storefront-body .sf-mobile-dock {
        width: min(calc(100vw - 20px), 500px) !important;
      }
    }

    @media (max-height: 500px) and (orientation: landscape) and (max-width: 767.98px) {
      body.storefront-body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
      }

      html body.storefront-body .sf-mobile-dock {
        bottom: 4px !important;
        min-height: 54px !important;
        padding: 4px !important;
      }

      html body.storefront-body .sf-mobile-dock__item,
      html body.storefront-body button.sf-mobile-dock__item {
        min-height: 46px !important;
        padding: 5px 2px 7px !important;
      }

      html body.storefront-body .sf-mobile-dock__item--center {
        min-height: 56px !important;
        margin-top: -6px !important;
      }

      html body.storefront-body .sf-mobile-dock__item svg {
        width: 18px !important;
        height: 18px !important;
      }

      html body.storefront-body .sf-mobile-dock__item span {
        font-size: 8.7px !important;
      }
    }