@charset "UTF-8";
:root {
  --sf-black: #1a2024;
  --sf-white: #ffffff;
  --sf-gray: #f4f6f8;
  --sf-img-bg: #f1f4f6;
  --sf-border: #edf2f5;
  --sf-line: #eff3f5;
  --sf-text: #1a2024;
  --sf-muted: #6e7987;
  --sf-green: #149447;
  --sf-red: #ff1c1c;
  --sf-container: 1600px;
  --sf-drawer-top: 74px;

  /* Backward compatibility aliases */
  --boat-black: var(--sf-black);
  --boat-white: var(--sf-white);
  --boat-gray: var(--sf-gray);
  --boat-img-bg: var(--sf-img-bg);
  --boat-border: var(--sf-border);
  --boat-line: var(--sf-line);
  --boat-text: var(--sf-text);
  --boat-muted: var(--sf-muted);
  --boat-green: var(--sf-green);
  --boat-red: var(--sf-red);
  --boat-container: var(--sf-container);
  --boat-drawer-top: var(--sf-drawer-top, 74px);

  --Storefront-black: var(--sf-black);
  --Storefront-white: var(--sf-white);
  --Storefront-gray: var(--sf-gray);
  --Storefront-img-bg: var(--sf-img-bg);
  --Storefront-border: var(--sf-border);
  --Storefront-line: var(--sf-line);
  --Storefront-text: var(--sf-text);
  --Storefront-muted: var(--sf-muted);
  --Storefront-green: var(--sf-green);
  --Storefront-red: var(--sf-red);
  --Storefront-container: var(--sf-container);
  --Storefront-drawer-top: var(--sf-drawer-top, 74px);

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Hide Google reCAPTCHA floating badge completely */
.grecaptcha-badge,
iframe[src*="recaptcha"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* 1. Global Page Reset & Zero Top Margin */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-stack);
  color: var(--sf-text);
  background: var(--sf-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Hide theme-generated headers, titles & footers on page templates */
.page-template-page-storefront-homepage #site-header,
.page-template-page-storefront-homepage .site-header,
.page-template-page-storefront-homepage header.site-header,
.page-template-page-storefront-homepage .page-header,
.page-template-page-storefront-homepage .entry-header,
.page-template-page-storefront-homepage .entry-title,
.page-template-page-storefront-homepage .elementor-page-title,
.page-template-page-storefront-homepage #site-footer,
.page-template-page-storefront-homepage .site-footer,
.page-template-page-boat-store-homepage #site-header,
.page-template-page-boat-store-homepage .site-header,
.page-template-page-boat-store-homepage header.site-header,
.page-template-page-boat-store-homepage .page-header,
.page-template-page-boat-store-homepage .entry-header,
.page-template-page-boat-store-homepage .entry-title,
.page-template-page-boat-store-homepage .elementor-page-title,
.page-template-page-boat-store-homepage #site-footer,
.page-template-page-boat-store-homepage .site-footer {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

body.sf-ui-body,
body.boat-ui-body,
body.Storefront-ui-body,
.page-template-page-storefront-homepage,
.page-template-page-storefront-homepage body,
.page-template-page-boat-store-homepage,
.page-template-page-boat-store-homepage body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-template-page-storefront-homepage #content,
.page-template-page-storefront-homepage .site-main,
.page-template-page-storefront-homepage .site-content,
.page-template-page-storefront-homepage .entry-content,
.page-template-page-storefront-homepage .elementor,
.page-template-page-storefront-homepage .elementor-section-wrap,
.page-template-page-boat-store-homepage #content,
.page-template-page-boat-store-homepage .site-main,
.page-template-page-boat-store-homepage .site-content,
.page-template-page-boat-store-homepage .entry-content,
.page-template-page-boat-store-homepage .elementor,
.page-template-page-boat-store-homepage .elementor-section-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-ui-wrap,
.boat-ui-wrap,
.Storefront-ui-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-stack);
  color: var(--sf-text);
  background: #ffffff;
}

.sf-ui-wrap *,
.sf-ui-wrap *::before,
.sf-ui-wrap *::after,
.boat-ui-wrap *,
.boat-ui-wrap *::before,
.boat-ui-wrap *::after,
.Storefront-ui-wrap *,
.Storefront-ui-wrap *::before,
.Storefront-ui-wrap *::after {
  box-sizing: border-box;
}

.sf-ui-wrap a,
.boat-ui-wrap a,
.Storefront-ui-wrap a {
  color: inherit;
  text-decoration: none;
}

.sf-ui-wrap button,
.sf-ui-wrap input,
.boat-ui-wrap button,
.boat-ui-wrap input,
.Storefront-ui-wrap button,
.Storefront-ui-wrap input {
  font: inherit;
}

.sf-ui-wrap button,
.boat-ui-wrap button,
.Storefront-ui-wrap button,
button.menu-btn,
button.menu,
button.wish,
button.sf-auth-close,
button.sf-tab-btn,
button.sf-submit-btn {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}

.sf-ui-wrap img,
.boat-ui-wrap img,
.Storefront-ui-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sf-ui-wrap a,
.boat-ui-wrap a,
.Storefront-ui-wrap a {
  text-decoration: none !important;
}

/* ==========================================================================
   2. Announcement Bar (Desktop & Mobile)
   ========================================================================== */
.announcement {
  min-height: 36px;
  background: #edf5f8;
  color: #1a2024;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 16px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.1px;
}

.announcement strong {
  font-weight: 700;
  color: #000000;
}

.announcement a {
  color: #1a2024;
  font-weight: 600;
  text-decoration: underline;
  margin-left: 3px;
}

.announcement-mobile {
  display: none;
}

.announcement-desktop {
  display: inline;
}

/* ==========================================================================
   3. Header (Desktop: White & Clean, Mobile: Pitch Black & Compact)
   ========================================================================== */
.sf-section-wrap[data-section-key="header"],
.header,
.sf-header,
.boat-header,
.elementor-widget-sf_header_nav,
.elementor-widget-boat_header_nav,
.sf-header-section-wrap {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100%;
}

.header,
.sf-header,
.boat-header {
  height: 74px;
  border-bottom: 1px solid #eef2f5;
  background: #ffffff;
  box-sizing: border-box;
}

body.admin-bar .sf-section-wrap[data-section-key="header"],
body.admin-bar .header,
body.admin-bar .sf-header,
body.admin-bar .boat-header,
body.admin-bar .elementor-widget-sf_header_nav,
body.admin-bar .elementor-widget-boat_header_nav,
body.admin-bar .sf-header-section-wrap {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar .sf-section-wrap[data-section-key="header"],
  body.admin-bar .header,
  body.admin-bar .sf-header,
  body.admin-bar .boat-header,
  body.admin-bar .elementor-widget-sf_header_nav,
  body.admin-bar .elementor-widget-boat_header_nav,
  body.admin-bar .sf-header-section-wrap {
    top: 46px !important;
  }
}

@media (max-width: 600px) {
  body.admin-bar .sf-section-wrap[data-section-key="header"],
  body.admin-bar .header,
  body.admin-bar .sf-header,
  body.admin-bar .boat-header,
  body.admin-bar .elementor-widget-sf_header_nav,
  body.admin-bar .elementor-widget-boat_header_nav,
  body.admin-bar .sf-header-section-wrap {
    top: 0 !important;
  }
}

.header-inner {
  max-width: var(--Storefront-container, 1600px);
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  box-sizing: border-box;
  gap: 28px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 36px;
}

.menu-btn {
  display: none;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.menu-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.brand {
  display: flex;
  align-items: center;
  color: #1a2024;
  text-decoration: none;
  flex-shrink: 0;
}

.brand .Storefront-logo-svg,
.brand .sf-logo-svg,
.brand .boat-logo-svg {
  height: 30px;
  width: auto;
  display: block;
}

.brand .sf-brand-logo-img,
.footer-logo .sf-brand-logo-img {
  max-height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}

.brand .sf-brand-logo-text,
.footer-logo .sf-brand-logo-text {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: #1a2024;
}

/* ==========================================================================
   DESKTOP ONLY: Header Nav, Categories Mega Menu & More Dropdown
   ========================================================================== */
@media (min-width: 901px) {
  .header,
  .sf-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    height: 74px !important;
    border-bottom: 1px solid #eef2f5 !important;
  }

  .header-inner {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: 100% !important;
    padding: 0 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 36px !important;
    height: 100% !important;
  }

  .nav {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav .nav-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav .nav-item.nav-item-categories {
    position: static !important;
  }

  .nav .nav-item.nav-item-more {
    position: relative !important;
  }

  .nav .nav-link,
  .nav .nav-item > a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a2024 !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 100% !important;
    padding: 0 2px !important;
    position: relative !important;
    transition: color 0.15s ease !important;
  }

  .nav .nav-link::after,
  .nav .nav-item > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0px !important;
    left: 0 !important;
    width: 0 !important;
    height: 3px !important;
    background: #e22323 !important;
    border-radius: 3px 3px 0 0 !important;
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .nav .nav-item:hover > .nav-link::after,
  .nav .nav-item.is-open > .nav-link::after,
  .nav .nav-item.is-active > .nav-link::after {
    width: 100% !important;
  }

  .nav .nav-item:hover > .nav-link,
  .nav .nav-item.is-open > .nav-link,
  .nav .nav-item.is-active > .nav-link {
    color: #1a2024 !important;
  }

  .nav .nav-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 3px !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
  }

  .nav .nav-chevron svg,
  .nav .sf-nav-chevron-svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    display: block !important;
    stroke: currentColor !important;
  }

  .nav .nav-item:hover .nav-chevron,
  .nav .nav-item.is-open .nav-chevron {
    transform: rotate(180deg) !important;
  }

  /* Full-Width Categories Mega Menu */
  .sf-mega-menu,
  .sf-categories-megamenu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(4px) !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
    z-index: 9999 !important;
  }

  .sf-mega-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: 0 !important;
    right: 0 !important;
    height: 15px !important;
    background: transparent !important;
  }

  .nav-item-categories:hover .sf-mega-menu,
  .nav-item-categories.is-open .sf-mega-menu,
  .sf-mega-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .sf-mega-menu-inner {
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 24px 32px 28px 32px !important;
    box-sizing: border-box !important;
  }

  .sf-mega-menu-cols {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 32px !important;
    row-gap: 0 !important;
    width: 100% !important;
  }

  .sf-mega-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .sf-mega-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 4px !important;
    text-decoration: none !important;
    color: #1a2024 !important;
    background: transparent !important;
    border: none !important;
    transition: transform 0.15s ease !important;
  }

  .sf-mega-menu-item:hover {
    transform: translateX(3px) !important;
  }

  .sf-mega-item-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .sf-mega-menu-item:hover .sf-mega-item-icon {
    transform: scale(1.12) !important;
  }

  .sf-mega-item-icon svg {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .sf-mega-item-icon img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
    mix-blend-mode: multiply !important;
  }

  .sf-mega-item-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a2024 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.15s ease !important;
  }

  .sf-mega-menu-item:hover .sf-mega-item-title {
    color: #e22323 !important;
    font-weight: 600 !important;
  }

  /* More Dropdown */
  .sf-more-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 190px !important;
    background: #ffffff !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #f0f3f6 !important;
    border-top: none !important;
    padding: 8px 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(4px) !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
    z-index: 1000 !important;
  }

  .sf-more-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: 0 !important;
    right: 0 !important;
    height: 15px !important;
    background: transparent !important;
  }

  .nav-item-more:hover .sf-more-dropdown,
  .nav-item-more.is-open .sf-more-dropdown,
  .sf-more-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .sf-more-dropdown-inner {
    display: flex !important;
    flex-direction: column !important;
  }

  .sf-more-item {
    display: block !important;
    padding: 9px 20px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1a2024 !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
    white-space: nowrap !important;
  }

  .sf-more-item:hover {
    background: #f8fafc !important;
    color: #e22323 !important;
    padding-left: 24px !important;
    font-weight: 600 !important;
  }

  /* Desktop Search Pill (> 1240px) */
  @media (min-width: 1241px) {
    .mobile-search-btn {
      display: none !important;
    }

    .search-wrap {
      position: relative !important;
      width: clamp(180px, 18vw, 320px) !important;
      max-width: 360px !important;
      display: flex !important;
      align-items: center !important;
      margin: 0 !important;
      background: transparent !important;
    }

    .search-wrap input.search {
      width: 100% !important;
      height: 40px !important;
      border: none !important;
      border-radius: 24px !important;
      background: #f0f3f6 !important;
      padding: 0 16px 0 42px !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      color: #1a2024 !important;
      outline: none !important;
      box-shadow: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      transition: background 0.2s ease, box-shadow 0.2s ease !important;
    }

    .search-wrap input.search::placeholder {
      color: #64748b !important;
      font-weight: 400 !important;
    }

    .search-wrap input.search:focus {
      background: #ffffff !important;
      box-shadow: 0 0 0 1.5px #1a2024 !important;
    }

    .search-icon {
      position: absolute !important;
      left: 14px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 18px !important;
      height: 18px !important;
      color: #64748b !important;
      pointer-events: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 2 !important;
    }

    .search-icon svg {
      width: 16px !important;
      height: 16px !important;
      display: block !important;
    }
  }

  /* Responsive Search Icon whenever screen space is constrained (861px - 1240px) */
  @media (min-width: 861px) and (max-width: 1240px) {
    .mobile-search-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      color: #1a2024 !important;
      width: 38px !important;
      height: 38px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      transition: background 0.15s ease, color 0.15s ease !important;
    }

    .mobile-search-btn:hover {
      background: #f0f3f6 !important;
      color: #000000 !important;
    }

    .mobile-search-btn svg {
      width: 20px !important;
      height: 20px !important;
    }

    .header:not(.mobile-search-active) .search-wrap,
    .sf-header:not(.mobile-search-active) .search-wrap {
      display: none !important;
    }

    .header.mobile-search-active .search-wrap,
    .sf-header.mobile-search-active .search-wrap {
      display: flex !important;
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      background: #ffffff !important;
      padding: 12px 24px !important;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
      border-bottom: 1px solid #eef2f5 !important;
      z-index: 1001 !important;
      box-sizing: border-box !important;
      animation: sfSearchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .header.mobile-search-active .search-wrap input.search,
    .sf-header.mobile-search-active .search-wrap input.search {
      width: 100% !important;
      height: 44px !important;
      background: #f1f4f6 !important;
      color: #1a2024 !important;
      border: none !important;
      border-radius: 24px !important;
      padding: 0 20px 0 48px !important;
      font-size: 14px !important;
      outline: none !important;
      box-sizing: border-box !important;
    }

    .header.mobile-search-active .search-wrap .search-icon,
    .sf-header.mobile-search-active .search-wrap .search-icon {
      position: absolute !important;
      left: 40px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      color: #64748b !important;
      pointer-events: none !important;
    }

    .header.mobile-search-active .search-wrap .search-icon svg,
    .sf-header.mobile-search-active .search-wrap .search-icon svg {
      width: 18px !important;
      height: 18px !important;
    }
  }

  @keyframes sfSearchSlideDown {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .head-icons {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
  }

  .rewards-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .rewards-btn:hover {
    transform: scale(1.12) !important;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.search-wrap {
  position: relative;
  width: 350px;
  max-width: 420px;
  display: flex;
  align-items: center;
  margin: 0;
}

.search {
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 24px;
  background: #f0f3f6;
  padding: 0 18px 0 44px;
  font-size: 13.5px;
  font-weight: 400;
  color: #1a2024;
  outline: none;
  box-sizing: border-box;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.search::placeholder {
  color: #6e7987;
  font-weight: 400;
}

.search:focus {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px #1a2024;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #4a5568;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.head-icons {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: #1a2024;
  cursor: pointer;
  position: relative;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.icon-btn:hover {
  opacity: 0.85;
}

.icon-btn svg {
  width: 23px;
  height: 23px;
  display: block;
}

.mobile-search-btn {
  display: none;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--Storefront-red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  height: 15px;
  min-width: 15px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ==========================================================================
   Mobile Slide-in Drawer (Official Storefront Menu Underneath Sticky Header)
   ========================================================================== */
.mobile-drawer-overlay {
  position: fixed;
  top: var(--Storefront-drawer-top, 74px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 994;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: var(--Storefront-drawer-top, 74px);
  left: 0;
  width: 82vw;
  max-width: 350px;
  height: calc(100vh - var(--Storefront-drawer-top, 74px));
  height: calc(100dvh - var(--Storefront-drawer-top, 74px));
  background: #ffffff;
  z-index: 995;
  box-shadow: 4px 6px 30px rgba(0, 0, 0, 0.16);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.mobile-drawer-content {
  padding: 12px 0 36px 0;
  display: flex;
  flex-direction: column;
}

.drawer-accordion-item {
  border-bottom: 1px solid #f0f3f6;
  margin: 0;
  background: #ffffff;
}

.drawer-accordion-header {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2024 !important;
  text-align: left !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.drawer-accordion-header span {
  color: #1a2024 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.drawer-accordion-header .drawer-accordion-icon {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1a2024 !important;
  line-height: 1 !important;
}

.drawer-accordion-item.is-open > .drawer-accordion-header {
  background: #ffffff !important;
  color: #1a2024 !important;
}

.drawer-accordion-icon {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1a2024 !important;
  line-height: 1 !important;
}

.drawer-accordion-body {
  padding: 0 16px 16px 16px;
  background: #ffffff;
}

.drawer-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
  margin-top: 8px;
}

.drawer-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 8px 4px;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.drawer-cat-tile:active {
  background: #f4f7f9;
}

.drawer-cat-icon {
  width: 58px;
  height: 58px;
  background: #f1f5f9;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  overflow: hidden;
}

.drawer-cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drawer-cat-icon svg {
  width: 32px;
  height: 32px;
  fill: #1a2024;
}

.drawer-cat-name {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #1a2024 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.drawer-cat-extra {
  display: none !important;
}

.drawer-accordion-body.expanded .drawer-cat-extra {
  display: flex !important;
}

.drawer-expand-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #27528e !important;
  border-radius: 24px !important;
  color: #27528e !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.drawer-expand-btn:active {
  background: #eef4fb !important;
}

.drawer-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a2024 !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f0f3f6 !important;
  transition: background 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.drawer-nav-row span {
  color: #1a2024 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.drawer-nav-row .row-arrow {
  color: #8896a6 !important;
  stroke: #8896a6 !important;
}

.drawer-nav-row:hover,
.drawer-nav-row:active {
  background: #f7f9fa !important;
}

#drawerMoreAccordion {
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid #f0f3f6 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#drawerMoreAccordion .drawer-accordion-header {
  background: #ffffff !important;
  color: #1a2024 !important;
  padding: 16px 20px !important;
}

#drawerMoreAccordion .drawer-accordion-header span {
  color: #1a2024 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#drawerMoreAccordion.is-open .drawer-accordion-header {
  background: #ffffff !important;
  color: #1a2024 !important;
}

#drawerMoreAccordion .drawer-accordion-icon,
#drawerMoreAccordion.is-open .drawer-accordion-icon {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1a2024 !important;
}

.drawer-sublinks {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 20px 18px !important;
  gap: 14px !important;
  background: #f8fafc !important;
}

.drawer-sublinks a {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  display: block !important;
  transition: color 0.15s ease !important;
}

.drawer-sublinks a:hover,
.drawer-sublinks a:active {
  color: #e22323 !important;
}

/* ==========================================================================
   4. Hero Slider (Full Aspect Responsive Carousel - Fits Full Image)
   ========================================================================== */
.hero-slider-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.hero-slider {
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  background: #f4f4f4;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

.hero-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  cursor: grab;
}

.hero-track:active {
  cursor: grabbing;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  text-decoration: none;
}

.hero-slide picture {
  display: block !important;
  width: 100% !important;
  border-radius: inherit !important;
}

.hero-slide img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: inherit !important;
  aspect-ratio: auto !important;
  min-height: unset !important;
}

.hero-pagination-pill {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.hero-dot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-dot button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.hero-dot button.active {
  background: #ffffff;
  width: 7px;
  height: 7px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(26, 32, 36, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  opacity: 0;
}

.hero-slider:hover .hero-arrow {
  opacity: 1;
}

.hero-arrow:hover {
  background: rgba(26, 32, 36, 0.9);
  transform: translateY(-50%) scale(1.08);
}

.hero-arrow.left {
  left: 14px;
}

.hero-arrow.right {
  right: 14px;
}

/* ==========================================================================
   5. Benefits Strip (4 Equal Columns - Authentic Storefront UI)
   ========================================================================== */
.benefits-wrap,
.sf-section-wrap[data-section-key="benefits"],
.sf-section-wrap[data-section-key="boat_benefits"] {
  width: 100% !important;
  max-width: 100% !important;
  background: #f7fafc !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.benefits {
  width: 100%;
  max-width: var(--Storefront-container, 1600px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 22px 20px;
  background: #f7fafc;
  box-sizing: border-box;
  align-items: center;
}

.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
  text-decoration: none;
  min-width: 0;
}

.benefit:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: #e2e8f0;
}

.benefit-icon {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.benefit-icon img {
  height: 40px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  display: block;
}

.benefit-icon svg {
  width: 38px;
  height: 38px;
}

.benefit-text {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 5px;
  row-gap: 2px;
  line-height: 1.3;
  text-align: center;
  margin: 0 auto;
}

.benefit strong,
.benefit-text strong {
  font-size: 14px;
  font-weight: 800;
  color: #1a2024;
  white-space: nowrap;
  display: inline;
}

.benefit span,
.benefit-text span {
  font-size: 13.5px;
  font-weight: 500;
  color: #555555;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.benefit-info-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #a0aec0;
  color: #718096;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-style: normal;
}

/* ==========================================================================
   6. Sections & Tabs
   ========================================================================== */
.section {
  max-width: var(--Storefront-container, 1600px);
  margin: auto;
  padding: 24px 28px 0;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title h2 {
  font-size: 24px;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--Storefront-black);
}

.section-title a {
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  color: var(--Storefront-black);
}

.tabs {
  display: flex;
  gap: 12px;
  overflow: auto;
  scrollbar-width: none;
  margin-bottom: 20px;
  padding: 4px 0 8px 0;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  border: 1px solid #d5dbe1;
  background: #ffffff;
  border-radius: 24px;
  padding: 9px 20px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  user-select: none;
}

.tab:hover,
.tabs .tab:hover,
.tabs button:hover,
button.tab:hover {
  background: #e22323 !important;
  color: #ffffff !important;
  border-color: #e22323 !important;
  box-shadow: 0 4px 12px rgba(226, 35, 35, 0.2) !important;
}

.tab.active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
  font-weight: 700;
}

.tab.active:hover,
.tabs .tab.active:hover {
  background: #e22323 !important;
  color: #ffffff !important;
  border-color: #e22323 !important;
}

.sf-tab-panel.sf-tab-hidden {
  display: none !important;
}

.sf-tab-panel.sf-tab-active {
  display: grid !important;
}

/* ==========================================================================
   7. Product Grid & Authentic Storefront Product Cards (Exact 4 Columns Desktop)
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr));
  gap: 20px 16px;
  width: 100%;
}

.product {
  min-width: 0;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #eef2f5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pimg {
  position: relative;
  background: #f1f4f6;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.pimg img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
}

.product:hover .pimg img {
  transform: scale(1.04);
}

.pbadge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #111111;
  color: #ffffff;
  padding: 3.5px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  z-index: 2;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}

.wish,
button.wish {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.wish:hover,
button.wish:hover {
  background: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

.wish svg,
button.wish svg,
.wish .sf-heart-icon,
button.wish .sf-heart-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: none !important;
  stroke: #111111 !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: #111111 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.2s ease, stroke 0.2s ease !important;
}

.wish:hover svg,
button.wish:hover svg {
  stroke: #e22323 !important;
}

.wish.active,
button.wish.active {
  background: #ffffff !important;
}

.wish.active svg,
button.wish.active svg,
.wish.active .sf-heart-icon,
button.wish.active .sf-heart-icon {
  fill: #e22323 !important;
  stroke: #e22323 !important;
  color: #e22323 !important;
  transform: scale(1.15) !important;
}

/* Signature Storefront Yellow Category Strip */
.feature-strip {
  background: #fdbb00 !important;
  padding: 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 0 !important;
  min-height: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.feature-text {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: capitalize !important;
}

.rating-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: #ffffff !important;
  padding: 1.5px 4.5px !important;
  border-radius: 3px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

.rating-badge .star-icon {
  width: 8px !important;
  height: 8px !important;
  fill: #f59e0b !important;
}

.pbody {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product h3,
.product-title,
.product-card .product-title {
  font-size: 14.5px;
  line-height: 1.25;
  margin: 2px 0 8px 0;
  font-weight: 700;
  color: #1a2024;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}

.pdivider {
  border-top: 1px dashed #e2e8f0;
  margin: 4px 0 8px 0;
}

.price {
  font-size: 12px;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price b,
.curr-price {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
}

.price del,
.orig-price {
  font-size: 12px;
  color: #a0aec0;
  text-decoration: line-through;
}

.price span,
.discount-badge {
  color: var(--sf-green);
  font-weight: 800;
  font-size: 12px;
}

.color-swatches {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #718096;
}

.color-swatches .swatch-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

/* ==========================================================================
   8. Explore Nirvana Banner
   ========================================================================== */
.banner {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
   9. Shop by Categories (12 Columns Desktop / 4 Columns Mobile)
   ========================================================================== */
.categories {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 10px;
}

.cat {
  text-align: center;
  font-size: 8px;
  text-decoration: none;
  color: var(--Storefront-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
}

.cat:hover {
  transform: translateY(-2px);
}

.cat-icon {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Storefront-gray);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
}

.cat-icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.cat-icon svg {
  width: 30px;
  height: 30px;
  fill: var(--Storefront-black);
}

.cat b {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

/* ==========================================================================
   10. Lifestyle / Solution Cards (4 Columns Desktop / 2 Columns Mobile)
   ========================================================================== */
.lifestyle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.life-card {
  background: #f8fafc;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--Storefront-black, #1a2024);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border: 1px solid #eef2f6;
  position: relative;
}

.life-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
  border-color: #cbd5e1;
}

.life-card-media,
.life-card picture {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 22px 16px 12px 16px;
  width: 100%;
  flex: 1;
  min-height: 210px;
}

.life-card img {
  width: 100%;
  height: 190px;
  max-height: 190px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.life-card:hover img {
  transform: scale(1.03);
}

.life-card-placeholder {
  background: #f1f5f9;
  height: 190px;
  width: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-weight: 600;
  font-size: 14px;
}

.life-card-info,
.life-card div:last-child {
  padding: 12px 14px 16px 14px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.life-card-title,
.life-card div > span:first-child,
.life-card div b {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.life-card-sub,
.life-card small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #3b82f6;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

.life-card:hover .life-card-sub,
.life-card:hover small {
  color: #1d4ed8;
  transform: translateX(2px);
}

/* ==========================================================================
   11. Blogs (4 Columns Desktop / 2 Columns Mobile)
   ========================================================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.blog {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.blog img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.blog div {
  padding: 14px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #1a2024;
}

.blog small {
  display: block;
  color: #718096;
  font-size: 11px;
  margin-top: 8px;
  font-weight: 600;
}

/* ==========================================================================
   12. In the Press
   ========================================================================== */
.press {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  background: #edf5f8;
  min-height: 120px;
  align-items: center;
  margin-top: 28px;
  border-radius: 14px;
  padding: 24px;
  box-sizing: border-box;
}

.press-logo {
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  color: #1a2024;
  letter-spacing: -0.5px;
}

.press-copy {
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a5568;
  font-weight: 500;
  border-left: 2px solid #cbd5e0;
  padding-left: 24px;
}

/* ==========================================================================
   13. Footer (Exact boAt Lifestyle UI)
   ========================================================================== */
.footer,
.sf-footer {
  background: #ebf2f7 !important;
  margin-top: 48px !important;
  padding: 54px 32px 50px 32px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  border-top: 1px solid #e2eaf0 !important;
}

.footer-inner {
  max-width: var(--Storefront-container, 1600px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.45fr 1.65fr 0.95fr 0.95fr !important;
  gap: 40px !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

.footer-col-brand {
  display: flex !important;
  flex-direction: column !important;
}

.footer-col-brand .footer-logo {
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.footer-col-brand .footer-logo svg,
.footer-col-brand .footer-logo img {
  height: 32px !important;
  width: auto !important;
  display: block !important;
}

.footer-newsletter-title {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 18px 0 14px 0 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.3 !important;
  font-family: inherit !important;
}

.footer-subscribe-form {
  position: relative !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #d1dbe5 !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 6px 4px 16px !important;
  width: 100% !important;
  max-width: 300px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.footer-subscribe-form:focus-within {
  border-color: #111827 !important;
  box-shadow: 0 0 0 1px #111827 !important;
}

.footer-subscribe-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13px !important;
  color: #111827 !important;
  width: 100% !important;
  padding: 6px 0 !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.footer-subscribe-input::placeholder {
  color: #8b9baa !important;
  font-size: 12.5px !important;
}

.footer-subscribe-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #cbd5e1 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #64748b !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.footer-subscribe-btn:hover {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

.footer-heading {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.1px !important;
  font-family: inherit !important;
  text-transform: none !important;
}

.footer-shop-subcols {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

.footer-links-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}

.footer-links-group a {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #1a2024 !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  white-space: nowrap !important;
}

.footer-links-group a:hover {
  color: #e22323 !important;
  transform: translateX(2px) !important;
}

/* Lower Footer Social & Legal Section */
.footer-bottom,
.sf-footer-bottom {
  margin-top: 46px !important;
  padding-top: 32px !important;
  border-top: 1px solid #dce5ec !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: var(--Storefront-container, 1600px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.footer-social-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.footer-social-label {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -0.1px !important;
}

.footer-social-icons {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.footer-social-icons a {
  color: #111827 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  text-decoration: none !important;
}

.footer-social-icons a:hover {
  color: #e22323 !important;
  transform: translateY(-2px) !important;
}

.footer-legal-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.footer-legal-links a {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #1a2024 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.footer-legal-links a:hover {
  color: #e22323 !important;
}

.footer-dot {
  color: #8b9baa !important;
  font-size: 10px !important;
  display: inline-block !important;
}

.footer-copyright-text {
  font-size: 11px !important;
  color: #7d8f9f !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

.footer-address-text {
  font-size: 10px !important;
  color: #94a3b8 !important;
  line-height: 1.6 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   14. Mobile Bottom Navigation (Fixed 64px Bar with SVG Icons)
   ========================================================================== */
.mobile-bottom {
  display: none;
}

/* ==========================================================================
   15. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 860px) {
  .announcement {
    min-height: 40px;
    font-size: 11px;
    padding: 6px 12px;
    line-height: 1.25;
  }

  .announcement-desktop {
    display: none !important;
  }

  .announcement-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    width: 100% !important;
  }

  .ann-line-1,
  .ann-line-2 {
    display: block !important;
    white-space: nowrap !important;
  }

  .ann-line-2 u {
    margin-left: 2px !important;
  }

  /* Authentic Mobile Storefront Header (Pitch Black, Left: Hamburger + Logo, Right: Search + User + Bag) */
  .sf-section-wrap[data-section-key="header"] {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
  }

  .header,
  .sf-header,
  .boat-header {
    background: #000000 !important;
    color: #ffffff !important;
    height: 60px !important;
    padding: 0 !important;
    border-bottom: none !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }

  .header-inner {
    padding: 0 14px !important;
    height: 100% !important;
    gap: 8px !important;
  }

  .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .menu-btn {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    color: #ffffff !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .menu-btn .close-icon {
    display: none;
  }

  body.drawer-open .menu-btn .hamburger-icon {
    display: none;
  }

  body.drawer-open .menu-btn .close-icon {
    display: block;
  }

  .nav {
    display: none !important;
  }

  .search-wrap {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    padding: 8px 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
    z-index: 998 !important;
  }

  .header.mobile-search-active .search-wrap {
    display: flex !important;
  }

  .header.mobile-search-active .search {
    background: #f1f4f6 !important;
    color: #1a2024 !important;
    height: 40px !important;
  }

  .header.mobile-search-active .search-icon {
    left: 24px !important;
    color: #555555 !important;
  }

  .mobile-search-btn {
    display: inline-flex !important;
    color: #ffffff !important;
  }

  .head-icons {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    color: #ffffff !important;
  }

  .icon-btn {
    color: #ffffff !important;
  }

  .mobile-drawer-overlay {
    top: var(--Storefront-drawer-top, 100px);
    height: calc(100vh - var(--Storefront-drawer-top, 100px));
    height: calc(100dvh - var(--Storefront-drawer-top, 100px));
    z-index: 994 !important;
  }

  .mobile-drawer {
    top: var(--Storefront-drawer-top, 100px);
    height: calc(100vh - var(--Storefront-drawer-top, 100px));
    height: calc(100dvh - var(--Storefront-drawer-top, 100px));
    z-index: 995 !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
  }

  .brand .Storefront-logo-svg,
  .brand .sf-logo-svg,
  .brand .boat-logo-svg {
    height: 24px !important;
    width: auto !important;
    color: #ffffff !important;
  }

  /* Authentic Mobile Hero Slider (Full Width Side to Side) */
  .hero-slider-wrap {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .hero-slider {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .hero-slide img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important;
    min-height: unset !important;
  }

  .hero-pagination-pill {
    bottom: 8px !important;
    padding: 3px 8px !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }

  .hero-dot {
    gap: 4px !important;
  }

  .hero-dot button {
    width: 5px !important;
    height: 5px !important;
  }

  .hero-dot button.active {
    width: 6px !important;
    height: 6px !important;
  }

  .hero-arrow {
    display: none !important;
  }

  .benefits-wrap,
  .sf-section-wrap[data-section-key="benefits"],
  .sf-section-wrap[data-section-key="boat_benefits"] {
    background: #f7fafc !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .benefits {
    padding: 12px 4px 10px 4px !important;
    background: #f7fafc !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2px !important;
  }

  .benefit {
    padding: 0 2px !important;
    border: none !important;
  }

  .benefit:not(:last-child)::after {
    height: 60% !important;
    top: 20% !important;
  }

  .benefit-icon {
    height: 32px !important;
    margin-bottom: 4px !important;
  }

  .benefit-icon img {
    height: 28px !important;
    max-width: 38px !important;
  }

  .benefit-text {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
  }

  .benefit strong,
  .benefit-text strong {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .benefit span,
  .benefit-text span {
    font-size: 9.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .benefit-info-icon {
    width: 10px !important;
    height: 10px !important;
    font-size: 7.5px !important;
  }

  .section {
    padding: 20px 16px 0;
  }

  .section-title h2 {
    font-size: 18px;
  }

  .section-title a {
    font-size: 11px;
  }

  .tabs {
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding: 2px 0 4px 0 !important;
  }

  .tab {
    font-size: 12px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: none !important;
    color: #5c646e !important;
  }

  .tab.active {
    background: #edf2f6 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
  }

  /* RESPONSIVE MOBILE PRODUCT GRID (Configurable from Storefront Manager) */
  .grid:not(.sf-tab-hidden):not([style*="display: none"]):not([style*="display:none"]) {
    display: grid !important;
    grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    width: 100% !important;
  }

  .grid.sf-tab-hidden,
  .grid[data-tab-panel].sf-tab-hidden,
  .grid[data-tab-panel][style*="display: none"],
  .grid[data-tab-panel][style*="display:none"],
  .sf-tab-hidden {
    display: none !important;
  }

  .product {
    border-radius: 10px !important;
    border: 1px solid #e8ecf1 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  }

  .pimg {
    border-radius: 0 !important;
    padding: 3px !important;
  }

  .pimg img {
    width: 92% !important;
    height: 92% !important;
  }

  .pbadge {
    position: absolute !important;
    font-size: 12.5px !important;
    padding: 2.5px 5px !important;
    top: 4px !important;
    left: 4px !important;
    background: #111111 !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  .wish,
  button.wish {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    top: 6px !important;
    right: 6px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    z-index: 10 !important;
  }

  .wish svg,
  button.wish svg,
  .wish .sf-heart-icon,
  button.wish .sf-heart-icon {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    display: block !important;
    stroke: #111111 !important;
    stroke-width: 2px !important;
  }

  .feature-strip {
    padding: 3px 5px !important;
    min-height: 20px !important;
  }

  .feature-text {
    font-size: 10px !important;
  }

  .rating-badge {
    font-size: 8.5px !important;
    padding: 1px 3.5px !important;
    border-radius: 3px !important;
  }

  .rating-badge .star-icon {
    width: 7px !important;
    height: 7px !important;
  }

  .pbody {
    padding: 6px 6px 7px 6px !important;
  }

  .product-title,
  .product-title a,
  .product h3,
  .product h3 a,
  .product h4,
  .product h4 a,
  .product .pname,
  .product-name,
  .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .product-grid .product-title,
  .product-card .product-title {
    font-size: 15px !important;
    min-height: 34px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
  }

  .pdivider {
    border-top: 1px dashed #e2e8f0 !important;
    margin: 0 0 4px 0 !important;
  }

  .curr-price,
  .price b {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
  }

  .color-swatches {
    font-size: 7.5px !important;
    font-weight: 600 !important;
  }

  .color-swatches .swatch-dot {
    width: 6.5px !important;
    height: 6.5px !important;
  }

  .orig-price,
  .price del {
    font-size: 8.5px !important;
    color: #b2b9bf !important;
  }

  .discount-badge,
  .price span {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: #149447 !important;
  }

  /* Category Grid (4 Columns Mobile) */
  .categories {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px 6px !important;
  }

  .cat {
    font-size: 8.5px;
  }

  .cat-icon {
    height: 54px;
    background: var(--Storefront-gray);
    border-radius: 6px;
  }

  .cat-icon svg {
    width: 26px;
    height: 26px;
  }

  .cat b {
    font-size: 9.5px;
  }

  .lifestyle {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .life-card-media,
  .life-card picture {
    padding: 14px 10px 8px 10px;
    min-height: 140px;
  }

  .life-card img {
    height: 130px;
    max-height: 130px;
  }

  .life-card-placeholder {
    height: 130px;
    font-size: 12px;
  }

  .life-card-info,
  .life-card div:last-child {
    padding: 10px 8px 12px 8px;
  }

  .life-card-title,
  .life-card div > span:first-child,
  .life-card div b {
    font-size: 12.5px;
  }

  .life-card-sub,
  .life-card small {
    font-size: 10.5px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .press {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    min-height: auto;
  }

  .press-copy {
    border-left: none;
    border-top: 1px solid #cbd5e0;
    padding-left: 0;
    padding-top: 12px;
    text-align: center;
  }

  .footer,
  .sf-footer {
    padding: 32px 18px 84px 18px !important;
    margin-top: 32px !important;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-shop-subcols {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .footer-subscribe-form {
    max-width: 100% !important;
  }

  /* Clean Fixed Mobile Bottom Navigation (Matching official Storefront UI) */
  .mobile-bottom {
    position: fixed;
    display: flex;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid #edf0f3;
    z-index: 99999;
    justify-content: space-around;
    align-items: center;
    padding-top: 3px;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }

  .mobile-bottom a {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: #1a2024;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    height: 100%;
    text-decoration: none;
    position: relative;
    padding: 2px 2px 4px;
    letter-spacing: -0.1px;
    line-height: 1;
  }

  .mobile-bottom a i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
  }

  .mobile-bottom a svg {
    width: 24px;
    height: 24px;
    color: #1a2024;
  }

  .mobile-bottom a span {
    display: block;
    position: relative;
    font-size: 10.5px;
    line-height: 1.1;
  }

  .mobile-bottom a.active {
    font-weight: 700;
    color: #000000;
  }

  .mobile-bottom a.active span {
    font-weight: 700;
  }

  .mobile-bottom a.active span::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2.5px;
    background: #e22323;
    border-radius: 2px;
  }
}

/* ==========================================================================
   16. Storefront Authentication Modal (Login / Register Popup)
   ========================================================================== */
.sf-auth-overlay,
.boat-auth-overlay,
.Storefront-auth-overlay,
#sfAuthModal,
#boatAuthModal,
#StorefrontAuthModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.sf-auth-overlay.open,
.boat-auth-overlay.open,
.Storefront-auth-overlay.open,
#sfAuthModal.open,
#boatAuthModal.open,
#StorefrontAuthModal.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sf-auth-backdrop,
.boat-auth-backdrop,
.Storefront-auth-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 1 !important;
}

.sf-auth-modal,
.boat-auth-modal,
.Storefront-auth-modal {
  position: relative !important;
  width: 100% !important;
  max-width: 380px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
}

.sf-auth-overlay.open .sf-auth-modal,
.boat-auth-overlay.open .boat-auth-modal,
.Storefront-auth-overlay.open .Storefront-auth-modal,
#sfAuthModal.open .sf-auth-modal,
#boatAuthModal.open .boat-auth-modal {
  transform: scale(1) !important;
}

/* Strict reset for all buttons/inputs inside auth modal to prevent theme border leakage */
.sf-auth-modal button,
.boat-auth-modal button,
.Storefront-auth-modal button,
#sfAuthModal button,
#boatAuthModal button,
#StorefrontAuthModal button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-transform: none;
  line-height: normal;
}

.sf-auth-close,
.boat-auth-close,
.Storefront-auth-close,
#sfAuthClose,
#boatAuthClose {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 50% !important;
  background: #f0f3f6 !important;
  color: #444444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.sf-auth-close:hover,
.boat-auth-close:hover,
.Storefront-auth-close:hover {
  background: #e2e8ee !important;
  color: #000000 !important;
}

.sf-auth-top,
.boat-auth-top,
.Storefront-auth-top {
  padding: 24px 20px 8px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.sf-auth-logo-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  min-height: 34px !important;
}

.sf-auth-logo-box .sf-auth-logo-img {
  max-height: 38px !important;
  max-width: 190px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

.sf-auth-logo-box .sf-auth-logo-svg,
.sf-auth-logo-box .sf-auth-logo-svg svg,
.sf-auth-logo-box > svg {
  max-height: 38px !important;
  max-width: 190px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

.sf-auth-logo-box .sf-auth-logo-text {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.sf-auth-title,
.boat-auth-title,
.Storefront-auth-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 4px 0 10px !important;
  line-height: 1.3 !important;
  max-width: 290px !important;
  letter-spacing: -0.3px !important;
  text-align: center !important;
}

.sf-auth-pill,
.boat-auth-pill,
.Storefront-auth-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #e9eef2 !important;
  padding: 6px 16px !important;
  border-radius: 24px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1a2024 !important;
  margin-bottom: 4px !important;
}

.sf-auth-pill .pill-icon,
.boat-auth-pill .pill-icon,
.Storefront-auth-pill .pill-icon {
  display: flex !important;
  align-items: center !important;
}

.sf-auth-modal .sf-auth-card,
.boat-auth-modal .boat-auth-card,
#sfAuthModal .sf-auth-card,
.sf-auth-card,
.boat-auth-card,
.Storefront-auth-card {
  width: auto !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #edf2f5 !important;
  border-radius: 16px !important;
  padding: 16px 14px 12px !important;
  margin: 6px 14px 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

.sf-card-title,
.boat-card-title,
.Storefront-card-title {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #1a2024 !important;
  text-align: center !important;
  margin: 0 0 3px !important;
  letter-spacing: -0.2px !important;
}

.sf-card-sub,
.boat-card-sub,
.Storefront-card-sub {
  font-size: 12px !important;
  color: #6e7987 !important;
  text-align: center !important;
  margin: 0 0 12px !important;
}

.sf-auth-tabs,
.boat-auth-tabs,
.Storefront-auth-tabs {
  display: flex !important;
  background: #f1f4f7 !important;
  border-radius: 10px !important;
  padding: 3px !important;
  margin-bottom: 12px !important;
  gap: 3px !important;
  border: none !important;
}

.sf-tab-btn,
.boat-tab-btn,
.Storefront-tab-btn {
  flex: 1 1 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6e7987 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sf-tab-btn.active,
.boat-tab-btn.active,
.Storefront-tab-btn.active {
  background: #ffffff !important;
  color: #1a2024 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.sf-auth-alert,
.boat-auth-alert,
.Storefront-auth-alert {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  margin-bottom: 12px !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

.sf-auth-alert.error,
.boat-auth-alert.error,
.Storefront-auth-alert.error {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

.sf-auth-alert.success,
.boat-auth-alert.success,
.Storefront-auth-alert.success {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

.sf-input-group,
.boat-input-group,
.Storefront-input-group {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid #dbe2e8 !important;
  border-radius: 10px !important;
  height: 44px !important;
  background: #ffffff !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}

.sf-input-group:focus-within,
.boat-input-group:focus-within,
.Storefront-input-group:focus-within {
  border-color: #1a2024 !important;
  box-shadow: 0 0 0 2px rgba(26, 32, 36, 0.08) !important;
}

.sf-country-code,
.boat-country-code,
.Storefront-country-code {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 10px !important;
  border-right: 1px solid #dbe2e8 !important;
  background: #fcfdfe !important;
  height: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a2024 !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.sf-input-icon,
.boat-input-icon,
.Storefront-input-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

.sf-input-field,
.boat-input-field,
.Storefront-input-field {
  flex: 1 !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  color: #1a2024 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit !important;
  margin: 0 !important;
}

.sf-pwd-toggle,
.boat-pwd-toggle,
.Storefront-pwd-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0 10px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  color: #6e7987 !important;
}

.sf-auth-options,
.boat-auth-options,
.Storefront-auth-options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 8px 0 12px !important;
  gap: 8px !important;
}

.sf-checkbox-label,
.boat-checkbox-label,
.Storefront-checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #475467 !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.sf-checkbox-label input,
.boat-checkbox-label input,
.Storefront-checkbox-label input {
  accent-color: #1a2024 !important;
  width: 14px !important;
  height: 14px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Mode-based option toggles in modal */
.sf-auth-modal .sf-opt-register,
.sf-auth-modal .sf-opt-login,
.sf-auth-modal .sf-opt-forgot {
  display: none !important;
}

/* Register Mode: show only register elements */
.sf-auth-modal[data-auth-mode="register"] .sf-opt-register {
  display: flex !important;
}
.sf-auth-modal[data-auth-mode="register"] .sf-password-group {
  display: flex !important;
}
.sf-auth-modal[data-auth-mode="register"] .sf-auth-tabs {
  display: flex !important;
}

/* Login Mode: show only login elements (Remember me & Forgot Password) */
.sf-auth-modal[data-auth-mode="login"] .sf-opt-login {
  display: flex !important;
}
.sf-auth-modal[data-auth-mode="login"] .sf-password-group {
  display: flex !important;
}
.sf-auth-modal[data-auth-mode="login"] .sf-auth-tabs {
  display: flex !important;
}

/* Forgot Password Mode: hide password & tabs, show back button */
.sf-auth-modal[data-auth-mode="forgot"] .sf-opt-forgot {
  display: inline-flex !important;
}
.sf-auth-modal[data-auth-mode="forgot"] .sf-password-group {
  display: none !important;
}
.sf-auth-modal[data-auth-mode="forgot"] .sf-auth-tabs {
  display: none !important;
}

/* OTP & Auth Mode Visibility Rules */
.sf-auth-modal[data-auth-mode="otp"] #sfAuthForm {
  display: none !important;
}
.sf-auth-modal[data-auth-mode="otp"] #sfOtpContainer {
  display: block !important;
}
.sf-auth-modal[data-auth-mode="otp"] .sf-auth-tabs {
  display: flex !important;
}

.sf-auth-modal[data-auth-mode="login"] #sfOtpContainer,
.sf-auth-modal[data-auth-mode="register"] #sfOtpContainer,
.sf-auth-modal[data-auth-mode="forgot"] #sfOtpContainer {
  display: none !important;
}
.sf-auth-modal[data-auth-mode="login"] #sfAuthForm,
.sf-auth-modal[data-auth-mode="register"] #sfAuthForm,
.sf-auth-modal[data-auth-mode="forgot"] #sfAuthForm {
  display: block !important;
}

/* 6-Digit OTP Box Grid - Pixel Perfect Vertical Centering */
.sf-otp-boxes-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 16px 0 16px 0 !important;
}

.sf-otp-boxes-row .sf-otp-box,
.sf-otp-box {
  flex: 1 1 0 !important;
  width: 44px !important;
  min-width: 0 !important;
  max-width: 52px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  line-height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid #0f172a !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.sf-otp-boxes-row .sf-otp-box:focus,
.sf-otp-box:focus {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3.5px rgba(29, 78, 216, 0.18) !important;
  background: #ffffff !important;
}

.sf-otp-boxes-row .sf-otp-box.filled,
.sf-otp-box.filled {
  border-color: #0f172a !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

.sf-otp-box::-webkit-outer-spin-button,
.sf-otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

@media (max-width: 360px) {
  .sf-otp-boxes-row {
    gap: 5px !important;
  }
  .sf-otp-boxes-row .sf-otp-box,
  .sf-otp-box {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 44px !important;
    font-size: 20px !important;
    border-radius: 8px !important;
  }
}

.sf-forgot-link,
.boat-forgot-link,
.Storefront-forgot-link,
.sf-forgot-btn,
.boat-forgot-btn {
  font-size: 11.5px !important;
  color: #e21b22 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  margin-left: auto !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: inherit !important;
  transition: color 0.15s ease !important;
}

.sf-forgot-link:hover,
.boat-forgot-link:hover,
.Storefront-forgot-link:hover,
.sf-forgot-btn:hover,
.boat-forgot-btn:hover {
  text-decoration: underline !important;
  color: #b91c1c !important;
}

.sf-back-login-btn {
  font-size: 12px !important;
  color: #0f172a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.15s ease !important;
}

.sf-back-login-btn:hover {
  color: #e21b22 !important;
  text-decoration: underline !important;
}

.sf-submit-btn,
.boat-submit-btn,
.Storefront-submit-btn,
#sfSubmitBtn,
#boatSubmitBtn,
#StorefrontSubmitBtn {
  width: 100% !important;
  height: 46px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  margin-top: 4px !important;
}

.sf-submit-btn:hover,
.boat-submit-btn:hover,
.Storefront-submit-btn:hover,
#sfSubmitBtn:hover,
#boatSubmitBtn:hover {
  background: #e21b22 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(226, 27, 34, 0.25) !important;
}

.sf-submit-btn:active,
.boat-submit-btn:active,
.Storefront-submit-btn:active,
#sfSubmitBtn:active,
#boatSubmitBtn:active {
  transform: scale(0.98) !important;
}

.sf-auth-footer,
.boat-auth-footer,
.Storefront-auth-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
  gap: 8px !important;
}

.sf-auth-footer p,
.boat-auth-footer p,
.Storefront-auth-footer p {
  font-size: 9.5px !important;
  color: #8896a6 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-align: left !important;
}

.sf-secure-badge,
.boat-secure-badge,
.Storefront-secure-badge {
  flex-shrink: 0 !important;
  opacity: 0.6 !important;
  display: flex !important;
  align-items: center !important;
}

@keyframes StorefrontSpin {
  100% {
    transform: rotate(360deg);
  }
}

.btn-spinner .spin {
  animation: StorefrontSpin 0.7s linear infinite;
}

/* ==========================================================================
   17. SINGLE PRODUCT PAGE SYSTEM (PREMIUM ECOMMERCE UI)
   ========================================================================== */
.sf-product-page-wrap {
  padding: 16px 0 60px 0;
  color: #111111;
  background: #ffffff;
}

/* Centered Max-Width Container (1320px) */
.sf-container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Breadcrumbs */
.sf-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: #71777f;
  margin-bottom: 24px;
  padding: 4px 0;
}

.sf-breadcrumbs a {
  color: #71777f;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sf-breadcrumbs a:hover {
  color: #111111;
}

.sf-bc-sep {
  color: #b2b9bf;
  font-size: 11px;
}

.sf-bc-current {
  color: #111111;
  font-weight: 600;
}

/* 2-Column Product Hero Grid (Approx 46% Gallery / 54% Details) */
.sf-product-hero-section {
  margin-bottom: 36px;
}

.sf-product-hero-grid {
  display: grid;
  grid-template-columns: minmax(440px, 46%) 1fr;
  gap: 44px;
  align-items: start;
}

/* Gallery Column */
.sf-gallery-wrapper {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sf-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 76px;
  flex-shrink: 0;
}

.sf-thumb-item {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  border: 1.5px solid #eef2f5;
  background: #ffffff;
  cursor: pointer;
  padding: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-thumb-item:hover,
.sf-thumb-item.active {
  border-color: #111111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sf-gallery-stage {
  position: relative;
  flex: 1;
  min-height: 480px;
  background: #f8fafc;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #eef2f5;
  box-sizing: border-box;
}

.sf-single-image-stage {
  width: 100%;
}

.sf-pbadge-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #111111;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  z-index: 5;
}

.sf-wish-circle-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #eef2f5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s ease;
}

.sf-wish-circle-btn:hover {
  transform: scale(1.08);
}

.sf-gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: #111;
  z-index: 6;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.sf-gal-arrow:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.06);
}

.sf-gal-prev { left: 12px; }
.sf-gal-next { right: 12px; }

.sf-main-img-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-main-img-box img,
.product-gallery-image {
  width: 100%;
  max-height: 460px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.sf-mobile-counter {
  display: none;
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

/* Right Details Column */
.sf-product-info-box {
  display: flex;
  flex-direction: column;
}

.sf-cat-tag {
  font-size: 12px;
  color: #71777f;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.sf-product-main-title {
  font-size: 32px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px 0;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.sf-product-tagline {
  font-size: 14.5px;
  color: #555e68;
  font-weight: 500;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.sf-product-short-desc {
  font-size: 14.5px;
  color: #555e68;
  line-height: 1.6;
  margin-bottom: 14px;
}

.sf-product-short-desc p {
  margin: 0 0 6px 0;
}

/* Rating Row */
.sf-rating-bought-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.sf-star-rating-pill {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sf-star-rating-pill .sf-stars {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: 14px;
}

.sf-star-rating-pill .sf-score {
  font-weight: 800;
  color: #111111;
  margin-left: 2px;
}

.sf-star-rating-pill .sf-count {
  color: #0066cc;
  font-size: 13px;
  text-decoration: none;
}

.sf-pipe-sep {
  color: #d1d5db;
}

.sf-bought-tag {
  font-size: 13px;
  color: #71777f;
  font-weight: 500;
}

/* Pricing Block */
.sf-price-display-block {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef2f5;
}

.sf-price-main-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.sf-wc-price {
  font-size: 30px;
  font-weight: 900;
  color: #111111;
  letter-spacing: -0.4px;
}

.sf-wc-price del {
  font-size: 17px;
  font-weight: 500;
  color: #8896a6;
  margin-right: 6px;
  text-decoration: line-through;
}

.sf-wc-price ins {
  text-decoration: none;
  color: #111111;
}

.sf-discount-pill {
  background: #e8f8f0;
  color: #0aa054;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.sf-tax-inclusive-text {
  display: block;
  font-size: 12px;
  color: #8896a6;
  margin-top: 4px;
}

/* Available Offers Box */
.sf-offers-box {
  background: #fdfaf3;
  border: 1px solid #f6e8c3;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.sf-offers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sf-offers-title {
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: #111111;
}

.sf-see-all-offers {
  font-size: 11px;
  font-weight: 700;
  color: #0aa054;
  background: #e8f8f0;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.sf-offers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-offers-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #333d47;
  line-height: 1.45;
}

.sf-offer-bullet {
  font-size: 14px;
  line-height: 1.2;
}

/* Stock Status Row */
.sf-stock-row {
  margin-bottom: 16px;
}

.sf-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.sf-stock-badge.in-stock {
  color: #0aa054;
}

.sf-stock-badge.out-of-stock {
  color: #e22828;
}

.sf-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Single Aligned Purchase Controls Row */
.sf-purchase-controls-wrapper {
  margin-bottom: 22px;
}

.sf-purchase-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-qty-selector-wrap {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  height: 50px;
  background: #ffffff;
  flex-shrink: 0;
  box-sizing: border-box;
}

.sf-qty-btn {
  width: 40px;
  height: 100%;
  background: #f8fafc;
  border: none !important;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-shadow: none !important;
}

.sf-qty-btn:hover {
  background: #eef2f5;
}

.sf-qty-selector-wrap input.sf-qty-input,
.sf-qty-selector-wrap input[type="number"].sf-qty-input,
.sf-unified-cart-form input.sf-qty-input,
.woocommerce .sf-unified-cart-form input.qty,
.woocommerce-page .sf-unified-cart-form input.qty {
  width: 44px !important;
  height: 100% !important;
  min-height: auto !important;
  max-height: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: normal !important;
  -moz-appearance: textfield !important;
  border-radius: 0 !important;
}

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

.sf-btn-add-to-cart {
  flex: 1.2;
  height: 50px;
  border-radius: 8px;
  border: 1.5px solid #111111 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.sf-btn-add-to-cart:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

.sf-btn-buy-now {
  flex: 1.2;
  height: 50px;
  border-radius: 8px;
  border: none !important;
  background: #e22828 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(226, 40, 40, 0.24);
}

.sf-btn-buy-now:hover {
  background: #c51d1d !important;
  box-shadow: 0 6px 16px rgba(226, 40, 40, 0.32);
  transform: translateY(-1px);
}

/* Trust Badges Strip */
.sf-trust-badges-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid #eef2f5;
  font-size: 12.5px;
  color: #444e59;
}

.sf-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-trust-icon {
  color: #111111;
  display: flex;
  align-items: center;
}

.sf-pincode-link {
  color: #0066cc;
  text-decoration: underline;
  margin-left: 4px;
  font-size: 11.5px;
  font-weight: 600;
}

.sf-pincode-box {
  margin-top: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
}

.sf-pincode-input-group {
  display: flex;
  gap: 8px;
}

.sf-pincode-input-group input {
  flex: 1;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
}

.sf-pincode-input-group button {
  padding: 0 16px;
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.sf-pincode-msg {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Feature Circles Bar (Compact 6-Item Strip) */
.sf-feature-icons-section {
  padding: 22px 0;
  background: #f8fafc;
  border-top: 1px solid #eef2f5;
  border-bottom: 1px solid #eef2f5;
  margin-bottom: 36px;
}

.sf-feature-icons-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.sf-feat-circle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.sf-feat-circle-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.sf-feat-circle-card:hover .sf-feat-circle-icon {
  transform: translateY(-2px);
  border-color: #111111;
}

.sf-feat-circle-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #1a2024;
  line-height: 1.3;
}

/* 2-Column Key Highlights & What's In The Box (Equal Height Cards) */
.sf-highlights-box-section {
  margin-bottom: 40px;
}

.sf-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.sf-card-box {
  background: #ffffff;
  border: 1px solid #eef2f5;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.sf-card-title {
  font-size: 20px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #eef2f5;
}

.sf-spec-bullets-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.sf-spec-bullets-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #333d47;
  line-height: 1.5;
}

.sf-spec-icon {
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
}

.sf-box-items-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 14px;
  flex: 1;
  align-items: center;
}

.sf-box-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.sf-box-img-wrap {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.sf-box-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sf-box-item-label {
  font-size: 12px;
  font-weight: 600;
  color: #444e59;
  line-height: 1.3;
}

/* Product Tabs Section */
.sf-product-tabs-section {
  margin-bottom: 40px;
}

/* Product Information Tabs Navigation */
.sf-tabs-container {
  background: #ffffff !important;
  border-radius: 14px !important;
}

.sf-tabs-nav {
  display: flex !important;
  gap: 12px !important;
  border-bottom: 2px solid #eef2f5 !important;
  margin-bottom: 24px !important;
  padding: 0 0 2px 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.sf-tab-nav-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.sf-tab-nav-btn:hover {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

.sf-tab-nav-btn:focus,
.sf-tab-nav-btn:focus-visible,
.sf-tab-nav-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.sf-tab-nav-btn.active {
  color: #0f172a !important;
  background: transparent !important;
  background-color: transparent !important;
  font-weight: 800 !important;
}

.sf-tab-nav-btn.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #e22828 !important;
  border-radius: 3px 3px 0 0 !important;
}

.sf-tab-pane {
  display: none !important;
}

.sf-tab-pane.active {
  display: block !important;
  animation: sfFadeIn 0.25s ease forwards !important;
}

@keyframes sfFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* WooCommerce Reviews Tab Form UI */
.sf-reviews-wrapper {
  padding: 10px 0;
}

.sf-reviews-wrapper #reviews #comments {
  margin-bottom: 28px;
}

.sf-reviews-wrapper .woocommerce-Reviews-title,
.sf-reviews-wrapper #reply-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 12px !important;
}

.sf-reviews-wrapper #review_form_wrapper {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px 20px;
}

.sf-reviews-wrapper .comment-notes {
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 14px;
}

.sf-reviews-wrapper .comment-form-rating {
  margin-bottom: 16px;
}

.sf-reviews-wrapper .comment-form-rating label {
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
  display: block;
  margin-bottom: 6px;
}

.sf-reviews-wrapper .comment-form-rating .stars a {
  color: #f5a623 !important;
  font-size: 18px;
}

.sf-reviews-wrapper .comment-form-comment label,
.sf-reviews-wrapper .comment-form-author label,
.sf-reviews-wrapper .comment-form-email label {
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
  display: block;
  margin-bottom: 6px;
}

.sf-reviews-wrapper textarea#comment,
.sf-reviews-wrapper input#author,
.sf-reviews-wrapper input#email {
  width: 100%;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

.sf-reviews-wrapper textarea#comment:focus,
.sf-reviews-wrapper input#author:focus,
.sf-reviews-wrapper input#email:focus {
  border-color: #0f172a !important;
  outline: none !important;
}

.sf-reviews-wrapper .form-submit {
  margin-top: 16px;
}

.sf-reviews-wrapper input#submit {
  background: #e22828 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 11px 26px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}

.sf-reviews-wrapper input#submit:hover {
  background: #c81e1e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(226, 40, 40, 0.25) !important;
}

.sf-prose-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #444e59;
}

.sf-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.sf-specs-table tr {
  border-bottom: 1px solid #eef2f5;
}

.sf-specs-table th {
  padding: 11px 14px;
  text-align: left;
  font-weight: 700;
  color: #111111;
  width: 32%;
  background: #f8fafc;
}

.sf-specs-table td {
  padding: 11px 14px;
  color: #444e59;
}

/* FAQs Accordion */
.sf-accordion-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-acc-item {
  border: 1px solid #eef2f5;
  border-radius: 10px;
  overflow: hidden;
}

.sf-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f8fafc;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
  text-align: left;
}

.sf-acc-body {
  display: none;
  padding: 14px 18px;
  background: #ffffff;
  font-size: 13.5px;
  line-height: 1.6;
  color: #444e59;
  border-top: 1px solid #eef2f5;
}

.sf-acc-item.active .sf-acc-body {
  display: block;
}

/* Customer Reviews Summary ("What Our Customers Say" - 3 Column Layout) */
.sf-customer-reviews-section {
  margin-bottom: 40px;
}

.sf-reviews-header-line {
  margin-bottom: 20px;
}

.sf-section-heading {
  font-size: 24px;
  font-weight: 800;
  color: #111111;
  margin: 0;
}

.sf-reviews-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sf-write-review-top-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.sf-write-review-top-btn:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.sf-reviews-summary-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: stretch;
}

.sf-score-breakdown-card {
  background: #f8fafc;
  border: 1px solid #eef2f5;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sf-score-big-number {
  font-size: 44px;
  font-weight: 900;
  color: #111111;
  line-height: 1;
  margin-bottom: 6px;
}

.sf-stars-row {
  color: #f5a623;
  letter-spacing: 2px;
  font-size: 16px;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
}

.sf-star-full, .sf-star-half {
  color: #f5a623;
}

.sf-star-empty {
  color: #cbd5e1;
}

.sf-global-ratings-note {
  font-size: 12px;
  color: #71777f;
  margin-bottom: 18px;
}

.sf-rating-bars-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #616e7c;
}

.sf-bar-label {
  width: 38px;
  text-align: left;
}

.sf-progress-track {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.sf-progress-fill {
  height: 100%;
  background: #f5a623;
  border-radius: 4px;
}

.sf-bar-percent {
  width: 30px;
  text-align: right;
  font-weight: 600;
}

.sf-customer-cards-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.sf-testimonial-card {
  background: #ffffff;
  border: 1px solid #eef2f5;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.sf-test-header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.sf-test-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.sf-test-author-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sf-author-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #111111;
}

.sf-verified-pill {
  font-size: 11px;
  color: #0aa054;
  font-weight: 600;
}

.sf-test-date {
  font-size: 11.5px;
  color: #94a3b8;
  margin-left: auto;
}

.sf-test-stars {
  color: #f5a623;
  font-size: 13px;
}

.sf-test-quote {
  font-size: 13.5px;
  line-height: 1.5;
  color: #444e59;
  margin: 0;
}

/* Authentic No Reviews State Card */
.sf-no-reviews-card {
  grid-column: 1 / -1;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sf-no-rev-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.sf-no-rev-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

.sf-no-rev-sub {
  font-size: 13.5px;
  color: #64748b;
  max-width: 420px;
  margin: 0 0 18px;
  line-height: 1.45;
}

.sf-btn-write-review {
  background: #e22828;
  color: #ffffff;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-btn-write-review:hover {
  background: #c81e1e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(226, 40, 40, 0.25);
}

/* Similar Products (Compact 6-Product Responsive Grid) */
.sf-similar-products-section {
  margin-bottom: 48px;
}

.sf-similar-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sf-view-all-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #111111;
  text-decoration: underline;
}

.sf-product-grid-compact {
  display: grid;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
}

/* Mobile Sticky Bottom Action Bar */
.sf-mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 10px 16px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  z-index: 999;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eef2f5;
}

.sf-sticky-price-col {
  display: flex;
  flex-direction: column;
}

.sf-sticky-price-title {
  font-size: 11px;
  color: #71777f;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-sticky-price-val {
  font-size: 16px;
  font-weight: 900;
  color: #111111;
}

.sf-sticky-btn-col {
  display: flex;
  gap: 8px;
}

.sf-sticky-add-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1.5px solid #111111;
  background: #ffffff;
  color: #111111;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.sf-sticky-buy-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  border: none;
  background: #e22828;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
  .sf-product-grid-compact {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 992px) {
  .sf-product-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sf-gallery-stage {
    min-height: 400px;
  }

  .sf-feature-icons-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .sf-highlights-grid {
    grid-template-columns: 1fr;
  }

  .sf-reviews-summary-grid {
    grid-template-columns: 1fr;
  }

  .sf-product-grid-compact {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .sf-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sf-gallery-thumbs {
    display: none;
  }

  .sf-gallery-stage {
    min-height: 320px;
    padding: 16px;
    border-radius: 14px;
  }

  .sf-main-img-box img,
  .product-gallery-image {
    max-height: 300px;
  }

  .sf-mobile-counter {
    display: block;
  }

  .sf-product-main-title {
    font-size: 22px;
    line-height: 1.3;
  }

  .sf-wc-price {
    font-size: 24px;
  }

  .sf-purchase-controls-wrapper {
    margin-bottom: 18px;
  }

  /* 2-Row Compact Mobile Purchase Controls */
  .sf-purchase-row {
    display: grid !important;
    grid-template-columns: 105px 1fr !important;
    grid-template-rows: 48px 48px !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .sf-qty-selector-wrap {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .sf-qty-btn {
    width: 32px !important;
    height: 100% !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    background: #f8fafc !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .sf-qty-selector-wrap input.sf-qty-input {
    width: calc(100% - 64px) !important;
    flex: 1 !important;
  }

  .sf-btn-add-to-cart {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    border: 1.5px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .sf-btn-buy-now {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    background: #e22828 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 3px 10px rgba(226, 40, 40, 0.22) !important;
    box-sizing: border-box !important;
  }

  .sf-customer-cards-column {
    grid-template-columns: 1fr;
  }

  .sf-product-grid-compact {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .sf-mobile-sticky-bar {
    display: flex;
  }

  .sf-trust-badges-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .sf-trust-item {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .sf-trust-icon {
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sf-trust-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .sf-trust-text {
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: #475569 !important;
    font-weight: 600 !important;
  }

  .sf-pincode-link {
    display: block !important;
    font-size: 10.5px !important;
  }
}

/* ==========================================================================
   24. STOREFRONT PRODUCT & CATEGORY ARCHIVE PAGE STYLES
   ========================================================================== */

.sf-archive-wrapper {
  background: #ffffff;
  min-height: 80vh;
}

/* 1. Hero & Category Banner */
.sf-archive-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 24px 0 28px 0;
  position: relative;
}

.sf-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sf-breadcrumbs a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sf-breadcrumbs a:hover {
  color: #0f172a;
}

.sf-bc-sep {
  color: #cbd5e1;
}

.sf-bc-curr {
  color: #0f172a;
  font-weight: 700;
}

.sf-archive-hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.sf-hero-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sf-archive-title {
  font-size: 32px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.2;
}

.sf-product-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #e2e8f0;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
}

.sf-archive-desc {
  font-size: 14.5px;
  color: #64748b;
  margin: 8px 0 0 0;
  line-height: 1.55;
  max-width: 800px;
}

/* Category Pills Horizontal Slider */
.sf-cat-pills-slider-wrap {
  margin-top: 22px;
  position: relative;
}

.sf-cat-pills-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.sf-cat-pills-slider::-webkit-scrollbar {
  display: none;
}

.sf-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.sf-cat-pill:hover {
  border-color: #0f172a;
  color: #0f172a;
  transform: translateY(-1px);
}

.sf-cat-pill.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.sf-pill-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.sf-pill-icon {
  font-size: 15px;
  line-height: 1;
}

.sf-pill-count {
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.sf-cat-pill.is-active .sf-pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 2. Archive Toolbar */
.sf-archive-body-section {
  padding: 24px 0 48px 0;
}

.sf-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid #f1f5f9;
}

.sf-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sf-btn-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid #0f172a;
  background: #ffffff;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sf-btn-filter-toggle:hover {
  background: #0f172a;
  color: #ffffff;
}

.sf-filter-count-badge {
  background: #e22828;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
}

.sf-active-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}

.sf-chip:hover {
  background: #e2e8f0;
}

.sf-chip-close {
  font-size: 15px;
  font-weight: 700;
  color: #64748b;
  line-height: 1;
}

.sf-chip-clear-all {
  background: transparent;
  border-color: transparent;
  color: #e22828 !important;
  font-weight: 700;
  text-decoration: underline;
  padding: 6px 8px;
}

.sf-chip-clear-all:hover {
  background: transparent;
  color: #b91c1c !important;
}

.sf-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sf-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-sort-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.sf-sort-select {
  height: 38px !important;
  padding: 0 34px 0 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: normal !important;
}

.sf-sort-select:focus {
  border-color: #0f172a !important;
}

.sf-view-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 3px !important;
  background: #f8fafc !important;
  height: 38px !important;
  box-sizing: border-box !important;
}

.sf-view-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.sf-view-btn svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

.sf-view-btn.is-active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* 3. Two-Column Layout (Sidebar + Main Grid) */
.sf-archive-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

.sf-archive-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}

.sf-sidebar-header-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}

.sf-sidebar-header-mobile h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.sf-sidebar-close-btn {
  background: #f1f5f9;
  border: none;
  font-size: 22px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #0f172a;
  cursor: pointer;
}

.sf-filter-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  text-align: left !important;
}

.sf-filter-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left !important;
}

.sf-filter-cat-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  text-align: left !important;
}

.sf-filter-cat-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

.sf-filter-cat-list li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
}

.sf-filter-cat-list li a:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.sf-filter-cat-list li.is-active a {
  background: #f8fafc !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border-left: 3.5px solid #0f172a !important;
  padding-left: 9px !important;
}

.sf-filter-cat-list .sf-cat-name {
  flex: 1 !important;
  text-align: left !important;
  color: inherit !important;
}

.sf-filter-cat-list .sf-cat-count {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  background: #e2e8f0 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}

/* Price presets */
.sf-price-presets-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-price-preset-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  transition: background 0.15s ease;
}

.sf-price-preset-pill:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.sf-price-preset-pill.is-active {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}

.sf-preset-radio {
  width: 14px;
  height: 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sf-price-preset-pill.is-active .sf-preset-radio {
  border-color: #0f172a;
  background: radial-gradient(circle, #0f172a 40%, transparent 45%);
}

.sf-price-custom-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

.sf-price-inputs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.sf-price-input-col {
  position: relative;
  flex: 1;
}

.sf-curr-symbol {
  position: absolute;
  left: 6px;
  top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  pointer-events: none;
}

.sf-price-input-col input {
  width: 100%;
  height: 32px;
  padding: 0 6px 0 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  box-sizing: border-box;
  outline: none;
}

.sf-price-input-col input:focus {
  border-color: #0f172a;
}

.sf-price-dash {
  color: #94a3b8;
  font-weight: 700;
}

.sf-btn-apply-price {
  height: 32px;
  padding: 0 12px;
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sf-btn-apply-price:hover {
  opacity: 0.9;
}

/* Checkbox filter */
.sf-checkbox-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.sf-checkbox-label input {
  cursor: pointer;
}

/* Sidebar Trust Card */
.sf-sidebar-trust-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-trust-micro-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sf-ticon {
  font-size: 18px;
  line-height: 1;
}

.sf-trust-micro-item strong {
  display: block;
  font-size: 12.5px;
  color: #0f172a;
  margin-bottom: 2px;
}

.sf-trust-micro-item p {
  margin: 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
}

/* 4. Products Grid Area */
.sf-archive-main {
  min-width: 0;
}

.sf-archive-grid.sf-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-archive-grid.sf-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Pagination */
.sf-archive-pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.sf-archive-pagination-wrapper ul.page-numbers {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
}

.sf-archive-pagination-wrapper span.page-numbers.current {
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
}

.sf-archive-pagination-wrapper a.page-numbers {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #0f172a;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.sf-archive-pagination-wrapper a.page-numbers:hover {
  border-color: #0f172a;
  background: #f8fafc;
}

/* Empty State */
.sf-archive-empty-state {
  text-align: center;
  padding: 64px 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  margin: 20px 0;
}

.sf-empty-icon-wrap {
  margin-bottom: 16px;
}

.sf-empty-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.sf-empty-desc {
  font-size: 14.5px;
  color: #64748b;
  max-width: 500px;
  margin: 0 auto 24px auto;
  line-height: 1.5;
}

.sf-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sf-btn-reset-filters {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1.5px solid #0f172a !important;
  transition: all 0.15s ease !important;
}

.sf-btn-reset-filters:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: #1e293b !important;
}

.sf-btn-browse-shop {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.sf-btn-browse-shop:hover {
  background: #0f172a !important;
  color: #ffffff !important;
}

/* 5. SEO Information Cards */
.sf-archive-seo-section {
  padding: 32px 0 56px 0;
  background: #ffffff;
}

.sf-seo-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px 32px;
}

.sf-seo-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.sf-seo-header p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.sf-seo-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.sf-seo-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sf-sfeat-icon {
  font-size: 24px;
  line-height: 1;
}

.sf-seo-feat-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.sf-seo-feat-item p {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

/* Responsive Archive Styles */
@media (max-width: 1200px) {
  .sf-archive-grid.sf-grid-4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .sf-archive-layout {
    grid-template-columns: 1fr;
  }

  /* Mobile Slide-in Drawer for Sidebar */
  .sf-archive-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: #ffffff;
    z-index: 10001;
    padding: 20px;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .sf-archive-sidebar.is-open {
    transform: translateX(0);
  }

  .sf-sidebar-header-mobile {
    display: flex;
  }

  .sf-seo-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .sf-archive-title {
    font-size: 24px;
  }

  .sf-archive-grid.sf-grid-4col,
  .sf-archive-grid.sf-grid-3col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .sf-archive-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sf-toolbar-right {
    justify-content: space-between;
  }

  .sf-sort-group {
    flex: 1;
  }

  .sf-sort-select {
    width: 100%;
  }

  .sf-seo-card {
    padding: 24px 18px;
  }

  .sf-seo-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   25. STOREFRONT CART, CHECKOUT & THANK YOU PAGE STYLES
   ========================================================================== */

/* 1. Step Progress Indicator Bar */
.sf-checkout-steps-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
  margin-bottom: 32px;
}

.sf-steps-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sf-step-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.sf-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  transition: all 0.15s ease;
}

.sf-step-item.is-active {
  color: #0f172a;
}

.sf-step-item.is-active .sf-step-num {
  background: #0f172a;
  color: #ffffff;
}

.sf-step-item.is-completed {
  color: #0f172a;
}

.sf-step-item.is-completed .sf-step-num {
  background: #10b981;
  color: #ffffff;
}

.sf-step-connector {
  width: 40px;
  height: 2px;
  background: #e2e8f0;
  display: inline-block;
}

.sf-step-connector.is-completed {
  background: #10b981;
}

/* 2. Cart Page Styles */
.sf-cart-wrapper {
  padding-bottom: 64px;
}

.sf-cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

.sf-cart-items-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

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

.sf-cart-card-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sf-cart-count-pill {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 999px;
}

.sf-cart-item-row {
  display: grid;
  grid-template-columns: 80px 1fr 110px 100px 36px;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #f1f5f9;
}

.sf-citem-img-box {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-citem-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-citem-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.sf-citem-title a {
  color: #0f172a;
  text-decoration: none;
}

.sf-citem-title a:hover {
  color: #e22828;
}

.sf-citem-price-val {
  font-size: 14px;
  color: #64748b;
  font-weight: 600;
}

.sf-citem-qty-wrap .quantity {
  display: inline-flex;
}

.sf-citem-qty-wrap input.qty {
  width: 50px !important;
  height: 38px !important;
  text-align: center !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  outline: none !important;
}

.sf-citem-subtotal-val {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.sf-btn-remove-item {
  color: #94a3b8 !important;
  transition: color 0.15s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sf-btn-remove-item:hover {
  color: #e22828 !important;
}

/* Cart Actions Bar */
.sf-cart-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 20px;
  margin-top: 10px;
}

.sf-coupon-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 360px;
}

.sf-coupon-input {
  height: 42px !important;
  padding: 0 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  flex: 1;
  outline: none;
}

.sf-btn-apply-coupon {
  height: 42px !important;
  padding: 0 18px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.sf-btn-update-cart {
  height: 42px !important;
  padding: 0 20px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer;
}

/* Cart Totals Box */
.sf-cart-collaterals {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}

.sf-cart-collaterals .cart_totals h2 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.sf-cart-collaterals table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.sf-cart-collaterals table.shop_table th,
.sf-cart-collaterals table.shop_table td {
  padding: 10px 0;
  border: none;
  font-size: 14px;
}

.sf-cart-collaterals table.shop_table th {
  color: #64748b;
  font-weight: 600;
  text-align: left;
}

.sf-cart-collaterals table.shop_table td {
  text-align: right;
  font-weight: 700;
  color: #0f172a;
}

.sf-cart-collaterals table.shop_table tr.order-total th,
.sf-cart-collaterals table.shop_table tr.order-total td {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  border-top: 1.5px solid #e2e8f0;
  padding-top: 14px;
}

.sf-cart-collaterals .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  background: #e22828 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(226, 40, 40, 0.25) !important;
  transition: all 0.2s ease !important;
  margin-top: 12px !important;
}

.sf-cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
  background: #c51d1d !important;
  transform: translateY(-1px);
}

/* 3. Checkout Page Styles */
.sf-checkout-wrapper {
  padding-bottom: 64px;
}

.sf-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
}

.sf-checkout-section-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  margin-bottom: 24px;
}

.sf-csec-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
}

.sf-csec-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.sf-csec-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

/* Form inputs */
.woocommerce-checkout .form-row {
  margin-bottom: 16px !important;
  padding: 0 !important;
}

.woocommerce-checkout label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 44px !important;
  padding: 0 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  outline: none !important;
  line-height: normal !important;
}

.woocommerce-checkout .form-row textarea {
  height: 80px !important;
  padding: 10px 14px !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
}

/* Checkout Sidebar & Order Review */
.sf-checkout-sidebar-col {
  position: sticky;
  top: 90px;
}

.sf-order-review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}

.sf-review-header {
  justify-content: space-between;
}

.sf-checkout-review-order table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.sf-checkout-review-order table.woocommerce-checkout-review-order-table th,
.sf-checkout-review-order table.woocommerce-checkout-review-order-table td {
  padding: 10px 0;
  border: none;
  font-size: 14px;
}

.sf-checkout-review-order table.woocommerce-checkout-review-order-table th {
  color: #64748b;
  font-weight: 600;
  text-align: left;
}

.sf-checkout-review-order table.woocommerce-checkout-review-order-table td {
  text-align: right;
  font-weight: 700;
  color: #0f172a;
}

.sf-checkout-review-order table.woocommerce-checkout-review-order-table tr.order-total th,
.sf-checkout-review-order table.woocommerce-checkout-review-order-table tr.order-total td {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  border-top: 1.5px solid #e2e8f0;
  padding-top: 14px;
}

/* Payment Gateways */
#payment {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}

#payment ul.payment_methods {
  list-style: none !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#payment ul.payment_methods li {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px dashed #e2e8f0;
}

#payment ul.payment_methods li:last-child {
  border-bottom: none;
  margin-bottom: 0 !important;
}

#payment ul.payment_methods li label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

#payment div.payment_box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 8px 0 0 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.45 !important;
}

#payment div.payment_box:before {
  display: none !important;
}

#place_order {
  width: 100% !important;
  height: 52px !important;
  background: #e22828 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(226, 40, 40, 0.28) !important;
  transition: all 0.2s ease !important;
  margin-top: 14px !important;
}

#place_order:hover {
  background: #c51d1d !important;
  transform: translateY(-1px);
}

/* Security seals card */
.sf-checkout-security-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.sf-security-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #0f172a;
  margin-bottom: 12px;
}

.sf-security-badges-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sf-sec-badge-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
}

.sf-s-ico {
  font-size: 14px;
}

/* 4. Thank You / Order Received Page Styles */
.sf-thankyou-wrapper {
  padding: 16px 0 64px 0;
}

.sf-thankyou-hero {
  text-align: center;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 40px 24px;
  margin-bottom: 32px;
}

.sf-ty-success-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #10b981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}

.sf-ty-subtag {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.sf-ty-main-title {
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.sf-ty-subtitle {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 24px 0;
}

.sf-ty-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sf-ty-pill {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}

.sf-ty-plabel {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.sf-ty-pval {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
}

.sf-ty-pval.sf-ty-price {
  color: #e22828;
}

/* Timeline Track */
.sf-order-timeline-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 32px;
}

.sf-timeline-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 20px 0;
}

.sf-timeline-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.sf-tstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  z-index: 2;
  flex: 1;
}

.sf-tstep-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}

.sf-tstep.is-done .sf-tstep-dot {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.sf-tstep.is-active .sf-tstep-dot {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.sf-tstep strong {
  font-size: 13px;
  color: #0f172a;
}

.sf-tstep small {
  font-size: 11px;
  color: #64748b;
}

.sf-tline {
  flex: 1;
  height: 3px;
  background: #e2e8f0;
  margin: 0 -10px 24px -10px;
  z-index: 1;
}

.sf-tline.is-active {
  background: #10b981;
}

/* Thank You 2-Col Grid */
.sf-thankyou-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

.sf-ty-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}

.sf-ty-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.sf-ty-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.sf-ty-item-img-box {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.sf-ty-item-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-ty-qty-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #0f172a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
}

.sf-ty-item-info {
  flex: 1;
}

.sf-ty-item-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.sf-ty-item-qty-text {
  font-size: 12px;
  color: #64748b;
}

.sf-ty-totals-table {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-ty-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: #475569;
}

.sf-ty-total-line.sf-total-grand {
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  padding-top: 10px;
  border-top: 1.5px solid #e2e8f0;
}

.sf-ty-address-box address {
  font-style: normal;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
  margin: 8px 0;
}

.sf-ty-contact-line {
  font-size: 13px;
  color: #334155;
  margin: 4px 0;
}

.sf-btn-ty-shop {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15) !important;
}

.sf-btn-ty-shop:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2) !important;
}

/* Hide duplicate raw WooCommerce tables on thank you page */
.sf-thankyou-page-container ~ .woocommerce-order-details,
.sf-thankyou-page-container ~ .woocommerce-customer-details,
.sf-thankyou-wrapper ~ .woocommerce-order-details,
.sf-thankyou-wrapper ~ .woocommerce-customer-details,
.woocommerce-order > .woocommerce-order-details,
.woocommerce-order > .woocommerce-customer-details,
.sf-thankyou-page .woocommerce-order-details,
.sf-thankyou-page .woocommerce-customer-details {
  display: none !important;
}

/* Responsive Cart & Checkout */
@media (max-width: 992px) {
  .sf-cart-grid,
  .sf-checkout-grid,
  .sf-thankyou-grid {
    grid-template-columns: 1fr;
  }

  .sf-checkout-sidebar-col {
    position: static;
  }
}

@media (max-width: 768px) {
  .sf-cart-item-row {
    grid-template-columns: 64px 1fr 30px;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .sf-citem-qty-col {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .sf-citem-subtotal-col {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    text-align: right;
  }

  .sf-citem-remove-col {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    text-align: right;
  }

  .sf-timeline-track {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .sf-tstep {
    flex-direction: row;
    text-align: left;
    gap: 12px;
  }

  .sf-tline {
    display: none;
  }
}

/* 5. WooCommerce Blocks (Gutenberg Block Checkout & Cart) */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 10px 16px 48px 16px !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wc-block-checkout {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 992px) {
  .wp-block-woocommerce-checkout .wc-block-checkout,
  .wc-block-checkout {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 36px !important;
    width: 100% !important;
  }

  .wc-block-checkout__main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    display: block !important;
  }

  .wc-block-checkout__sidebar {
    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;
    flex: 0 0 440px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: sticky !important;
    top: 24px !important;
  }

  .wc-block-components-sidebar {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .wc-block-checkout__sidebar .wc-block-checkout__actions,
  .wc-block-checkout .wc-block-checkout__actions {
    width: 100% !important;
    margin-top: 4px !important;
  }
}

.wc-block-components-checkout-step {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wc-block-components-checkout-step__title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 16px !important;
}

/* Form Inputs & Floating Labels in Block Checkout */
.wc-block-components-text-input,
.wc-block-components-combobox {
  position: relative !important;
  margin-bottom: 16px !important;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control,
.wc-block-components-textarea textarea {
  height: 52px !important;
  min-height: 52px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 18px 14px 4px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control:focus,
.wc-block-components-combobox .wc-block-components-combobox-control.is-focused,
.wc-block-components-textarea textarea:focus {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
  outline: none !important;
}

/* Floating label positioning */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
  position: absolute !important;
  left: 14px !important;
  top: 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transition: all 0.15s ease-out !important;
  transform-origin: left top !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

/* Float label to top when active, focused, or filled */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-text-input.is-active-label label,
.wc-block-components-combobox.is-active label,
.wc-block-components-combobox:focus-within label {
  top: 7px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  transform: none !important;
  opacity: 1 !important;
}

.wc-block-components-combobox .wc-block-components-combobox-control {
  display: flex !important;
  align-items: flex-end !important;
  padding: 16px 14px 6px 14px !important;
}

/* Add Apartment / Optional button link */
.wc-block-components-address-form__address_2-toggle {
  margin-top: -6px !important;
  margin-bottom: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* Sidebar & Coupon box styling */
.wc-block-components-sidebar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
}

.wc-block-components-totals-coupon {
  margin: 16px 0 !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  padding: 10px 0 !important;
}

.wc-block-components-totals-coupon__content,
.wc-block-components-totals-coupon-content,
.wc-block-components-totals-coupon form,
.wc-block-components-totals-coupon__form,
.wc-block-components-totals-coupon-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: 10px !important;
  width: 100% !important;
}

.wc-block-components-totals-coupon form .wc-block-components-text-input,
.wc-block-components-totals-coupon__form .wc-block-components-text-input,
.wc-block-components-totals-coupon-form .wc-block-components-text-input,
.wc-block-components-totals-coupon .wc-block-components-text-input {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
  width: auto !important;
}

.wc-block-components-totals-coupon .wc-block-components-text-input input {
  height: 48px !important;
  min-height: 48px !important;
  padding: 16px 14px 4px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

.wc-block-components-totals-coupon .wc-block-components-text-input label {
  top: 15px !important;
  font-size: 13px !important;
}

.wc-block-components-totals-coupon .wc-block-components-text-input.is-active label,
.wc-block-components-totals-coupon .wc-block-components-text-input:focus-within label {
  top: 6px !important;
  font-size: 10px !important;
}

.wc-block-components-totals-coupon button,
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon-form__button,
.wc-block-components-totals-coupon form button,
.wc-block-components-totals-coupon__form button,
button.wc-block-components-totals-coupon__button {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}

.wc-block-components-totals-coupon button:hover,
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon-form__button:hover,
.wc-block-components-totals-coupon form button:hover,
.wc-block-components-totals-coupon__form button:hover,
button.wc-block-components-totals-coupon__button:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18) !important;
}

.wc-block-components-totals-coupon button:active,
.wc-block-components-totals-coupon__button:active {
  transform: translateY(0) !important;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
button.wc-block-components-checkout-place-order-button {
  width: 100% !important;
  height: 52px !important;
  background: #e22828 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(226, 40, 40, 0.28) !important;
  transition: all 0.2s ease !important;
  margin-top: 14px !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
button.wc-block-components-checkout-place-order-button:hover {
  background: #c51d1d !important;
  transform: translateY(-1px);
}

/* Payment Options & Radio Controls */
.wc-block-components-radio-control,
.wc-block-components-radio-control-accordion {
  width: 100% !important;
}

.wc-block-components-radio-control-accordion-option {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
}

.wc-block-components-radio-control-accordion-option:hover {
  border-color: #cbd5e1 !important;
}

.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option--checked,
.wc-block-components-radio-control-accordion-option.is-active,
.wc-block-components-radio-control-accordion-option:focus-within {
  border-color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: none !important;
  background: #f8fafc !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option--checked .wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option.is-active .wc-block-components-radio-control__option {
  background: #ffffff !important;
}

.wc-block-components-radio-control__option-layout {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wc-block-components-radio-control__input,
.wc-block-components-radio-control-accordion-option input[type="radio"],
.wc-block-checkout input[type="radio"],
.woocommerce-checkout input[type="radio"] {
  margin: 0 12px 0 0 !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  accent-color: #0f172a !important;
  cursor: pointer !important;
  position: static !important;
  vertical-align: middle !important;
}

.wc-block-components-radio-control__label-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-grow: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wc-block-components-radio-control__label {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.wc-block-components-radio-control-accordion-content,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control-accordion-content {
  padding: 14px 18px 16px 44px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Checkboxes in Gutenberg Block Checkout */
.wc-block-components-checkbox,
.wc-block-checkout__add-note {
  margin: 8px 0 !important;
  padding: 0 !important;
}

.wc-block-components-checkbox__label,
.wc-block-components-checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  user-select: none !important;
  position: relative !important;
}

.wc-block-components-checkbox__input,
.wc-block-checkout input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.wc-block-cart input[type="checkbox"] {
  margin: 0 10px 0 0 !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  accent-color: #0f172a !important;
  cursor: pointer !important;
  position: static !important;
  vertical-align: middle !important;
}

.wc-block-components-checkbox__text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.4 !important;
  margin-left: 2px !important;
}

/* Classic WooCommerce Checkout Adjustments */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  margin-right: 10px !important;
  position: static !important;
  float: none !important;
  display: inline-block !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.woocommerce-checkout .woocommerce-account-fields .checkbox,
.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

.sf-checkout-page-content,
.sf-cart-page-content {
  padding: 24px 0 64px 0;
  min-height: 60vh;
}

/* ==========================================================================
   6. MY ACCOUNT MODERN REDESIGN
   ========================================================================== */
.sf-account-page-content {
  padding: 36px 0 80px 0;
  min-height: 70vh;
  background: #f8fafc;
}

/* Profile Hero Card */
.sf-account-hero-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sf-account-profile-summary {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sf-account-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.sf-account-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-account-avatar-initials {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
}

.sf-account-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-account-badge {
  display: inline-block;
  align-self: flex-start;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 9999px;
}

.sf-account-name {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.sf-account-meta {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-dot-sep {
  color: #cbd5e1;
}

/* Quick Stat Metrics */
.sf-account-stats-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sf-account-stat-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 20px;
  text-align: center;
  min-width: 100px;
}

.sf-stat-num {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

.sf-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

/* Main Layout Grid - ONLY for logged-in accounts with sidebar navigation */
.logged-in.woocommerce-account .woocommerce,
.sf-account-page.logged-in .woocommerce,
.sf-account-page .woocommerce-MyAccount-content-wrapper {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
}

/* Logged-Out Customer Auth Page - Perfectly Centered Viewport Card */
body:not(.logged-in).woocommerce-account .woocommerce,
.logged-out.woocommerce-account .woocommerce,
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce:has(.sf-auth-page-wrap),
.woocommerce:has(.sf-auth-page-box) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
  padding: 40px 16px 80px 16px !important;
  box-sizing: border-box !important;
}

.woocommerce-account:not(.logged-in) .entry-content,
.woocommerce-account:not(.logged-in) .page-content,
.woocommerce-account:not(.logged-in) .site-main,
.woocommerce-account:not(.logged-in) article,
.woocommerce-account:not(.logged-in) main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
}

.sf-account-sidebar-nav,
.woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: block !important;
  grid-column: 1 !important;
}

.woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  display: block !important;
  grid-column: 2 !important;
}

/* Sidebar Nav */
.sf-account-nav-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.sf-account-nav-header {
  padding: 18px 20px 12px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.sf-nav-heading {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: #94a3b8;
}

.sf-account-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}

.sf-nav-item {
  margin: 0 8px 4px 8px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.15s ease;
}

.sf-nav-link {
  display: flex !important;
  align-items: center !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  gap: 12px !important;
}

.sf-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: color 0.15s ease;
}

.sf-nav-text {
  flex-grow: 1;
}

.sf-nav-count-badge {
  background: #e2e8f0;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
}

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

.sf-nav-item:hover .sf-nav-icon {
  color: #0f172a;
}

.sf-nav-item.is-active,
.sf-nav-item.is-active .sf-nav-link {
  background: #0f172a !important;
  color: #ffffff !important;
}

.sf-nav-item.is-active .sf-nav-icon {
  color: #ffffff !important;
}

.sf-nav-item.is-active .sf-nav-count-badge {
  background: #ffffff;
  color: #0f172a;
}

.sf-nav-item.is-logout-item .sf-nav-link {
  color: #e22828 !important;
}

.sf-nav-item.is-logout-item .sf-nav-icon {
  color: #e22828;
}

.sf-nav-item.is-logout-item:hover .sf-nav-link {
  background: #fef2f2 !important;
}

/* Content Area */
.woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}

/* Welcome Box in Dashboard */
.sf-dashboard-welcome-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.sf-welcome-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.sf-welcome-desc {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.sf-welcome-desc a {
  color: #0f172a;
  font-weight: 700;
  text-decoration: underline;
}

.sf-btn-logout-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: #ffffff;
  transition: all 0.2s ease;
}

.sf-btn-logout-pill:hover {
  background: #fef2f2;
  color: #e22828;
  border-color: #fecaca;
}

/* Shortcuts Grid */
.sf-dashboard-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.sf-shortcut-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sf-shortcut-card:hover {
  border-color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.sf-shortcut-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sf-shortcut-text h4 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.sf-shortcut-text p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.3;
}

.sf-shortcut-arrow {
  margin-left: auto;
  font-size: 16px;
  font-weight: 800;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.2s ease;
}

.sf-shortcut-card:hover .sf-shortcut-arrow {
  color: #0f172a;
  transform: translateX(3px);
}

/* Sections & Cards */
.sf-dashboard-section,
.sf-orders-section-wrap,
.sf-addresses-section-wrap,
.sf-downloads-section-wrap,
.sf-form-card,
.sf-view-order-section-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.sf-section-header-flex,
.sf-account-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.sf-dashboard-heading,
.sf-account-content-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sf-account-content-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 4px 0 0 0;
  width: 100%;
}

.sf-link-view-all {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}

.sf-link-view-all:hover {
  text-decoration: underline;
}

/* Tables in Orders & Recent Orders */
.sf-recent-orders-table-wrap,
.sf-orders-table-responsive {
  overflow-x: auto;
  width: 100%;
}

.sf-recent-orders-table,
.sf-account-orders-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.sf-recent-orders-table th,
.sf-account-orders-table th {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.sf-recent-orders-table td,
.sf-account-orders-table td {
  padding: 16px;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.sf-order-number-link,
.sf-order-link {
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
}

.sf-order-number-link:hover,
.sf-order-link:hover {
  text-decoration: underline;
  color: #e22828;
}

.sf-order-date-text {
  color: #64748b;
  font-size: 13px;
}

.sf-order-total-price {
  font-weight: 800;
  color: #0f172a;
}

.sf-order-item-count {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* Status Badges */
.sf-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.sf-status-completed {
  background: #ecfdf5;
  color: #059669;
}

.sf-status-processing {
  background: #eff6ff;
  color: #2563eb;
}

.sf-status-on-hold,
.sf-status-pending {
  background: #fffbeb;
  color: #d97706;
}

.sf-status-cancelled,
.sf-status-failed,
.sf-status-refunded {
  background: #fef2f2;
  color: #dc2626;
}

/* Buttons in Tables */
.sf-btn-view-order,
.sf-order-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: #f1f5f9;
  color: #0f172a;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.sf-btn-view-order:hover,
.sf-order-action-btn:hover {
  background: #0f172a;
  color: #ffffff;
}

.sf-order-actions-flex {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Empty States */
.sf-empty-state-card {
  text-align: center;
  padding: 48px 24px;
}

.sf-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.sf-empty-state-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.sf-empty-state-card p {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 20px 0;
}

.sf-btn-start-shop {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  background: #e22828;
  color: #ffffff !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(226, 40, 40, 0.25);
}

.sf-btn-start-shop:hover {
  background: #c51d1d;
  transform: translateY(-1px);
}

/* Addresses Grid */
.sf-addresses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sf-address-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}

.sf-address-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.sf-address-type-title,
.sf-address-card-header h4 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
}

.sf-btn-edit-addr {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.sf-btn-edit-addr:hover {
  text-decoration: underline;
  color: #e22828;
}

.sf-address-body address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
}

.sf-address-empty {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

/* Form Styling in Account & Edit Address */
.sf-modern-form .form-row {
  margin-bottom: 18px;
}

.sf-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sf-input-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.sf-text-input,
.sf-modern-form input[type="text"],
.sf-modern-form input[type="email"],
.sf-modern-form input[type="password"],
.sf-modern-form input[type="tel"],
.sf-modern-form select,
.sf-modern-form textarea {
  width: 100% !important;
  height: 48px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sf-text-input:focus,
.sf-modern-form input:focus,
.sf-modern-form select:focus,
.sf-modern-form textarea:focus {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
  outline: none !important;
}

.sf-input-hint {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.sf-form-section-title {
  margin-top: 24px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.sf-form-section-title h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sf-section-sub {
  font-size: 13px;
  color: #64748b;
  margin: 2px 0 0 0;
}

.sf-form-actions-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.sf-btn-save-primary {
  height: 48px !important;
  padding: 0 28px !important;
  background: #e22828 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(226, 40, 40, 0.25) !important;
}

.sf-btn-save-primary:hover {
  background: #c51d1d !important;
  transform: translateY(-1px);
}

.sf-btn-cancel-link {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
}

.sf-btn-cancel-link:hover {
  color: #0f172a;
  text-decoration: underline;
}

/* Downloads Section */
.sf-downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.sf-download-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.sf-download-card-icon {
  font-size: 28px;
}

.sf-download-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.sf-download-meta {
  font-size: 12px;
  color: #64748b;
}

.sf-btn-download-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background: #0f172a;
  color: #ffffff !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.sf-btn-download-action:hover {
  background: #1e293b;
}

/* View Order Section */
.sf-view-order-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
}

.sf-btn-back-orders {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
  margin-bottom: 6px;
  display: inline-block;
}

.sf-btn-back-orders:hover {
  color: #0f172a;
  text-decoration: underline;
}

.sf-view-order-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.sf-view-order-meta {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-view-order-timeline-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.sf-order-updates-list {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
}

.sf-order-update-item {
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
}

.sf-order-update-item:last-child {
  border-bottom: none;
}

.sf-note-content {
  font-size: 14px;
  color: #1e293b;
}

.sf-note-date {
  color: #94a3b8;
  font-size: 12px;
}

/* Unified Page Auth Card (Identical appearance to Popup Modal) */
.sf-auth-page-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 16px 60px 16px !important;
  box-sizing: border-box !important;
}

.sf-auth-page-box {
  position: relative !important;
  transform: none !important;
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #edf2f5 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.sf-auth-page-box .sf-auth-top {
  padding: 24px 20px 8px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.sf-auth-page-box .sf-auth-card {
  width: auto !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #edf2f5 !important;
  border-radius: 16px !important;
  padding: 16px 14px 14px !important;
  margin: 6px 14px 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

.sf-auth-tabs-nav {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 28px;
}

.sf-auth-tab-btn {
  flex: 1;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sf-auth-tab-btn.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sf-auth-panel-header {
  margin-bottom: 24px;
}

.sf-auth-panel-header h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.sf-auth-panel-header p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.sf-auth-row-remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sf-link-forgot-pass {
  font-size: 13px;
  font-weight: 600;
  color: #e22828;
  text-decoration: none;
}

.sf-link-forgot-pass:hover {
  text-decoration: underline;
}

.sf-btn-auth-submit {
  width: 100% !important;
  height: 50px !important;
  background: #e22828 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(226, 40, 40, 0.28) !important;
  transition: all 0.2s ease !important;
}

.sf-btn-auth-submit:hover {
  background: #c51d1d !important;
  transform: translateY(-1px);
}

.sf-reg-hint-text {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin: -6px 0 16px 0;
}

/* WooCommerce Order Details inside My Account View Order */
.sf-view-order-details-card .woocommerce-order-details,
.woocommerce-account .woocommerce-order-details {
  margin-top: 20px !important;
}

.sf-view-order-details-card .woocommerce-order-details__title,
.woocommerce-account .woocommerce-order-details__title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
}

.sf-view-order-details-card table.shop_table,
.woocommerce-account table.shop_table.order_details {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  margin-bottom: 24px !important;
}

.sf-view-order-details-card table.shop_table th,
.woocommerce-account table.shop_table.order_details th {
  background: #f8fafc !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.sf-view-order-details-card table.shop_table td,
.woocommerce-account table.shop_table.order_details td {
  padding: 16px 18px !important;
  font-size: 14px !important;
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

.sf-view-order-details-card .woocommerce-customer-details,
.woocommerce-account .woocommerce-customer-details {
  margin-top: 30px !important;
}

.sf-view-order-details-card .woocommerce-customer-details h2,
.woocommerce-account .woocommerce-customer-details h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
}

.sf-view-order-details-card .woocommerce-customer-details address,
.woocommerce-account .woocommerce-customer-details address {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  font-style: normal !important;
  line-height: 1.6 !important;
  color: #475569 !important;
}

/* Responsive My Account (Mobile & Tablet) */
@media (max-width: 992px) {
  .sf-account-page-content {
    padding: 14px 0 36px 0 !important;
  }

  .sf-account-page-content .sf-container {
    padding: 0 12px !important;
  }

  /* Main Account Grid Switch to Vertical Stack */
  .sf-account-page .woocommerce,
  .sf-account-main-card .woocommerce,
  .woocommerce-account .woocommerce,
  .sf-account-page .woocommerce-MyAccount-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .sf-account-sidebar-nav,
  .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin: 0 0 4px 0 !important;
  }

  .woocommerce-MyAccount-content,
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }

  /* Profile Hero Card on Mobile */
  .sf-account-hero-card {
    padding: 16px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .sf-account-profile-summary {
    gap: 12px !important;
    width: 100% !important;
    align-items: center !important;
  }

  .sf-account-avatar-wrap {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .sf-account-avatar-initials {
    font-size: 18px !important;
  }

  .sf-account-name {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .sf-account-meta {
    font-size: 11.5px !important;
    gap: 6px !important;
  }

  .sf-account-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  /* Stats Row on Mobile: compact 3-column grid */
  .sf-account-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .sf-account-stat-box {
    padding: 8px 6px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    flex: none !important;
  }

  .sf-stat-num {
    font-size: 17px !important;
  }

  .sf-stat-label {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Mobile Horizontal Scroll Navigation Pill Bar */
  .sf-account-nav-card {
    border-radius: 12px !important;
    padding: 4px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #e2e8f0 !important;
  }

  .sf-account-nav-header {
    display: none !important;
  }

  .sf-account-nav-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .sf-account-nav-list::-webkit-scrollbar {
    display: none !important;
  }

  .sf-nav-item {
    margin: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }

  .sf-nav-link {
    padding: 8px 13px !important;
    font-size: 13px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .sf-nav-link svg {
    width: 15px !important;
    height: 15px !important;
  }

  .sf-nav-count-badge {
    font-size: 10px !important;
    padding: 1px 5px !important;
  }

  /* Dashboard Welcome Box on Mobile */
  .sf-dashboard-welcome-box {
    padding: 16px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }

  .sf-welcome-title {
    font-size: 17px !important;
    margin-bottom: 4px !important;
  }

  .sf-welcome-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .sf-welcome-logout {
    width: 100% !important;
  }

  .sf-btn-logout-pill {
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }

  /* Shortcuts Grid on Mobile (1 col) */
  .sf-dashboard-shortcuts-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .sf-shortcut-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    gap: 12px !important;
  }

  .sf-shortcut-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 8px !important;
  }

  .sf-shortcut-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .sf-shortcut-text h4 {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  .sf-shortcut-text p {
    font-size: 11.5px !important;
  }

  /* Section Containers */
  .sf-dashboard-section,
  .sf-orders-section-wrap,
  .sf-addresses-section-wrap,
  .sf-downloads-section-wrap,
  .sf-form-card,
  .sf-view-order-section-wrap {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }

  .sf-dashboard-heading,
  .sf-account-content-title {
    font-size: 16px !important;
  }

  .sf-account-content-subtitle {
    font-size: 12px !important;
  }

  /* Orders Table: Card View on Mobile */
  .sf-account-orders-table,
  .sf-recent-orders-table,
  .woocommerce-orders-table {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }

  .sf-account-orders-table thead,
  .sf-recent-orders-table thead,
  .woocommerce-orders-table thead {
    display: none !important;
  }

  .sf-account-orders-table tbody,
  .sf-recent-orders-table tbody,
  .woocommerce-orders-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .sf-account-orders-table tr,
  .sf-recent-orders-table tr,
  .woocommerce-orders-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
  }

  .sf-account-orders-table td,
  .sf-recent-orders-table td,
  .woocommerce-orders-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border: none !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sf-account-orders-table td::before,
  .sf-recent-orders-table td::before,
  .woocommerce-orders-table td::before {
    content: attr(data-title);
    font-weight: 700 !important;
    color: #64748b !important;
    font-size: 12px !important;
    margin-right: 8px !important;
  }

  .sf-account-orders-table td.woocommerce-orders-table__cell-order-actions,
  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions,
  .sf-account-orders-table td:last-child,
  .sf-recent-orders-table td:last-child {
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e2e8f0 !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .sf-account-orders-table td.woocommerce-orders-table__cell-order-actions::before,
  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before,
  .sf-recent-orders-table td:last-child::before {
    display: none !important;
  }

  .sf-btn-view-order,
  .sf-order-action-btn,
  .woocommerce-orders-table .button,
  .sf-btn-invoice-download {
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    margin: 0 !important;
  }

  .sf-order-actions-flex {
    width: 100% !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Addresses on Mobile */
  .woocommerce-Addresses,
  .sf-addresses-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .woocommerce-Address,
  .sf-address-card {
    width: 100% !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Forms & Inputs on Mobile */
  .sf-grid-2col,
  .sf-form-row-2col,
  .woocommerce-form-row,
  .form-row-first,
  .form-row-last {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px !important;
  }

  .sf-input-text,
  .woocommerce-Input,
  .woocommerce-input-wrapper input,
  .woocommerce-input-wrapper select,
  .woocommerce-EditAccountForm input {
    width: 100% !important;
    height: 44px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .sf-form-actions-bar,
  .woocommerce-EditAccountForm button[type="submit"],
  .woocommerce-address-fields button[type="submit"] {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .sf-btn-save-primary,
  button[name="save_account_details"],
  button[name="save_address"] {
    width: 100% !important;
    height: 46px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* Logged-Out Login/Register Card on Mobile */
  .sf-auth-page-wrap {
    padding: 20px 12px 40px 12px !important;
  }

  .sf-auth-page-box {
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  .sf-auth-tab-btn {
    font-size: 13px !important;
    height: 38px !important;
  }
}

/* ==========================================================================
   7. 404 ERROR PAGE & GENERAL SITE TEMPLATES
   ========================================================================== */
.sf-404-page-content {
  padding: 48px 0 80px 0;
  min-height: 70vh;
  background: #f8fafc;
}

.sf-404-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 56px 32px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px auto;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.sf-404-badge-tag {
  display: inline-block;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 14px;
  border-radius: 9999px;
  margin-bottom: 20px;
}

.sf-404-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.sf-404-digit {
  font-size: 96px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -2px;
}

.sf-404-orb {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #e22828;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(226, 40, 40, 0.15);
  animation: sfPulse 2.5s infinite ease-in-out;
}

@keyframes sfPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.sf-404-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.sf-404-subtitle {
  font-size: 15px;
  color: #64748b;
  margin: 0 auto 28px auto;
  max-width: 520px;
  line-height: 1.5;
}

.sf-404-search-wrap {
  max-width: 520px;
  margin: 0 auto 28px auto;
}

.sf-404-input-group {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 4px 6px 4px 16px;
  transition: all 0.2s ease;
}

.sf-404-input-group:focus-within {
  border-color: #0f172a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.sf-404-search-icon {
  font-size: 16px;
  margin-right: 10px;
  color: #64748b;
}

.sf-404-search-field {
  flex-grow: 1;
  height: 42px;
  border: none !important;
  background: transparent !important;
  font-size: 14px;
  color: #0f172a;
  outline: none !important;
  padding: 0 !important;
}

.sf-404-search-btn {
  height: 42px;
  padding: 0 20px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sf-404-search-btn:hover {
  background: #1e293b;
}

.sf-404-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sf-btn-404-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: #e22828;
  color: #ffffff !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(226, 40, 40, 0.28);
}

.sf-btn-404-primary:hover {
  background: #c51d1d;
  transform: translateY(-1px);
}

.sf-btn-404-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: #ffffff;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sf-btn-404-secondary:hover {
  border-color: #0f172a;
  background: #f8fafc;
  transform: translateY(-1px);
}

/* Recommended Products Section on 404 */
.sf-404-recommended-section {
  margin-top: 56px;
}

.sf-404-rec-header {
  text-align: center;
  margin-bottom: 32px;
}

.sf-404-rec-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.sf-404-rec-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.sf-404-rec-grid,
.sf-products-grid.sf-404-rec-grid,
.sf-products-grid.sf-grid-4col {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .sf-404-rec-grid,
  .sf-products-grid.sf-404-rec-grid,
  .sf-products-grid.sf-grid-4col {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  .sf-404-rec-grid,
  .sf-products-grid.sf-404-rec-grid,
  .sf-products-grid.sf-grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* General Pages, Single Post, and Archive */
.sf-general-page-content,
.sf-single-post-content,
.sf-index-page-content {
  padding: 24px 0 80px 0;
  min-height: 60vh;
  background: #ffffff;
}

.sf-page-article {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}

.sf-single-article {
  max-width: 960px;
  margin: 0 auto;
}

.sf-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 24px;
}

.sf-breadcrumbs a {
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.sf-breadcrumbs a:hover {
  color: #0f172a;
}

.sf-breadcrumb-sep {
  color: #cbd5e1;
  font-size: 12px;
}

.sf-breadcrumb-current {
  color: #0f172a;
  font-weight: 600;
}

.sf-general-page-content .section,
.sf-general-page-content .sf-lifestyle-section {
  padding: 0;
  margin: 0 0 32px 0;
}

.sf-general-page-content .section-title {
  margin-bottom: 20px;
}

.sf-page-header,
.sf-single-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.sf-page-title,
.sf-single-title {
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

/* ==========================================================================
   Blog Archive & Single Post System (Storefront UI Modern Layout)
   ========================================================================== */
.sf-blog-archive-wrap,
.sf-single-post-wrap {
  padding: 24px 0 80px 0;
  min-height: 60vh;
  background: #ffffff;
}

/* Blog Archive Hero */
.sf-blog-hero {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid #f1f5f9;
}

.sf-blog-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.sf-blog-hero-title {
  font-size: 34px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.sf-blog-hero-desc {
  font-size: 15px;
  color: #64748b;
  max-width: 650px;
  margin: 0 0 20px;
  line-height: 1.6;
}

/* Category Filter Pills */
.sf-blog-categories-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.sf-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 24px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.sf-cat-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.sf-cat-pill.active {
  background: #0f172a;
  color: #ffffff;
  font-weight: 700;
}

/* Blog Cards Grid */
.sf-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

@media (max-width: 1024px) {
  .sf-blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .sf-blog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.sf-blog-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sf-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.sf-blog-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f8fafc;
}

.sf-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  display: block;
}

.sf-blog-card:hover .sf-blog-card-media img {
  transform: scale(1.04);
}

.sf-blog-card-placeholder {
  height: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #94a3b8;
}

.sf-blog-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
  z-index: 2;
  transition: background 0.2s ease;
}

.sf-blog-card-tag:hover {
  background: #2563eb;
  color: #ffffff;
}

.sf-blog-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sf-blog-card-meta {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sf-blog-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.4;
}

.sf-blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sf-blog-card-title a:hover {
  color: #2563eb;
}

.sf-blog-card-excerpt {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}

.sf-blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}

.sf-blog-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}

.sf-blog-author-avatar {
  border-radius: 50%;
  width: 26px;
  height: 26px;
}

.sf-blog-read-more {
  font-size: 12.5px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.sf-blog-read-more:hover {
  color: #1d4ed8;
  transform: translateX(3px);
}

/* Blog Pagination */
.sf-blog-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.sf-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sf-blog-pagination .page-numbers.current {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.sf-blog-pagination .page-numbers:hover:not(.current) {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* ==========================================================================
   Single Post Detail Styling
   ========================================================================== */
.sf-single-article {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.sf-single-header {
  margin-bottom: 28px;
}

.sf-single-cat-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  margin-bottom: 14px;
}

.sf-single-title {
  font-size: 38px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.8px;
  margin: 0 0 20px;
}

@media (max-width: 768px) {
  .sf-single-title {
    font-size: 26px;
  }
}

.sf-single-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-top: 18px;
}

.sf-single-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-author-avatar-img {
  border-radius: 50%;
  width: 44px;
  height: 44px;
}

.sf-author-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  display: block;
}

.sf-meta-sub {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}

.sf-social-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-share-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-right: 4px;
}

.sf-share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  font-size: 14px;
}

.sf-share-btn:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  transform: translateY(-2px);
}

.sf-single-hero-media {
  border-radius: 16px;
  overflow: hidden;
  margin: 28px 0 36px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.sf-single-hero-media img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.sf-single-body {
  font-size: 17px;
  line-height: 1.85;
  color: #334155;
}

.sf-single-body h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin: 36px 0 16px;
  letter-spacing: -0.4px;
}

.sf-single-body h3 {
  font-size: 21px;
  font-weight: 700;
  color: #0f172a;
  margin: 28px 0 12px;
}

.sf-single-body p {
  margin-bottom: 22px;
}

.sf-single-body blockquote {
  border-left: 4px solid #2563eb;
  padding: 16px 24px;
  margin: 28px 0;
  background: #f8fafc;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  font-size: 18px;
  color: #1e293b;
}

.sf-single-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
}

.sf-single-tags-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px 0 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
}

.sf-tags-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.sf-tag-pill {
  background: #f1f5f9;
  color: #475569;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sf-tag-pill:hover {
  background: #2563eb;
  color: #ffffff;
}

.sf-author-bio-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 40px 0;
}

@media (max-width: 600px) {
  .sf-author-bio-card {
    flex-direction: column;
    text-align: center;
  }
}

.sf-bio-avatar {
  border-radius: 50%;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.sf-bio-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
}

.sf-bio-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 2px 0 6px;
}

.sf-bio-text {
  font-size: 14px;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

.sf-post-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0;
}

@media (max-width: 600px) {
  .sf-post-nav-grid {
    grid-template-columns: 1fr;
  }
}

.sf-post-nav-card {
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.sf-post-nav-card:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.sf-nav-arrow {
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sf-nav-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.sf-related-posts-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid #f1f5f9;
}

/* Comments Styling */
.sf-comments-area {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 2px solid #f1f5f9;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.sf-comments-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 24px;
}

.sf-comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.sf-comment-list li {
  padding: 20px 0;
  border-bottom: 1px solid #f1f5f9;
}

.sf-comment-form textarea,
.sf-comment-form input[type="text"],
.sf-comment-form input[type="email"],
.sf-comment-form input[type="url"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.sf-comment-form textarea:focus,
.sf-comment-form input:focus {
  border-color: #2563eb;
  outline: none;
}

/* ==========================================================================
   Store Locator Public Frontend Styles (VigixCore / boAt Clean Theme)
   ========================================================================== */
.sf-locator-container {
  width: 100%;
  background: #fbfcfd;
  min-height: 80vh;
  padding-bottom: 70px;
  box-sizing: border-box;
}

.sf-locator-breadcrumb {
  max-width: var(--Storefront-container, 1600px);
  margin: 0 auto;
  padding: 16px 24px 0 24px;
  font-size: 13px;
  color: #718096;
}

.sf-locator-breadcrumb a {
  color: #718096;
  text-decoration: none;
}

.sf-locator-breadcrumb a:hover {
  color: #111111;
}

.sf-bc-sep {
  margin: 0 8px;
  color: #cbd5e1;
}

.sf-bc-current {
  color: #111111;
  font-weight: 600;
}

.sf-locator-header {
  background: #ffffff;
  border-bottom: 1px solid #edf2f7;
  padding: 32px 24px 36px 24px;
  text-align: center;
}

.sf-locator-header-inner {
  max-width: 680px;
  margin: 0 auto;
}

.sf-locator-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff5f5;
  color: #e22323;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.sf-locator-heading {
  font-size: 32px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.sf-locator-subheading {
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 24px 0;
}

.sf-locator-search-bar {
  max-width: 520px;
  margin: 0 auto;
}

.sf-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.sf-search-ico {
  position: absolute;
  left: 16px;
  pointer-events: none;
}

.sf-search-field input {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 46px;
  font-size: 14.5px;
  border-radius: 24px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #111111;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.sf-search-field input:focus {
  background: #ffffff;
  border-color: #111111;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.sf-clear-btn {
  position: absolute;
  right: 12px;
  background: #e2e8f0;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-locator-content {
  max-width: var(--Storefront-container, 1600px);
  margin: 0 auto;
  padding: 28px 24px 0 24px;
  box-sizing: border-box;
}

.sf-filter-strip {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-type-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sf-tab-item {
  background: #f1f5f9;
  border: 1px solid transparent;
  color: #475569;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.sf-tab-item:hover {
  background: #e2e8f0;
  color: #111111;
}

.sf-tab-item.active {
  background: #111111;
  color: #ffffff;
}

.sf-tab-pill {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
}

.sf-tab-item.active .sf-tab-pill {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.sf-dot-brand {
  color: #e22323;
}

.sf-dot-retail {
  color: #27528e;
}

.sf-city-filter-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.sf-city-title {
  font-size: 12px;
  font-weight: 700;
  color: #718096;
  white-space: nowrap;
}

.sf-city-pills-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.sf-city-pills-scroll::-webkit-scrollbar {
  display: none;
}

.sf-city-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sf-city-btn:hover {
  border-color: #111111;
  color: #111111;
}

.sf-city-btn.active {
  background: #e22323;
  border-color: #e22323;
  color: #ffffff;
}

.sf-results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 13px;
  color: #718096;
  font-weight: 600;
}

.sf-legend-items {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
}

.sf-legend-tag {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sf-legend-tag.brand .sf-dot {
  color: #e22323;
}

.sf-legend-tag.retail .sf-dot {
  color: #27528e;
}

.sf-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.sf-store-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.sf-store-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.sf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sf-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 5px;
}

.sf-badge.is-brand {
  background: #fff5f5;
  color: #e22323;
  border: 1px solid #fed7d7;
}

.sf-badge.is-retail {
  background: #f0f4f8;
  color: #27528e;
  border: 1px solid #dbeafe;
}

.sf-city-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #edf2f7;
}

.sf-card-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 14px 0;
  line-height: 1.35;
}

.sf-card-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin-bottom: 18px;
}

.sf-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: #4a5568;
  line-height: 1.45;
}

.sf-icon-wrap {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sf-detail-text p {
  margin: 0 0 2px 0;
  color: #1a2024;
  font-weight: 500;
}

.sf-detail-text small {
  color: #718096;
  font-size: 11.5px;
}

.sf-phone-link {
  color: #111111;
  font-weight: 700;
  text-decoration: none;
}

.sf-phone-link:hover {
  color: #e22323;
  text-decoration: underline;
}

.sf-detail-row.timings {
  color: #4a5568;
  font-size: 12px;
}

.sf-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.sf-action-btn {
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.sf-action-btn.primary {
  flex: 1;
  background: #111111;
  color: #ffffff !important;
  padding: 9px 12px;
}

.sf-action-btn.primary:hover {
  background: #e22323;
  color: #ffffff !important;
}

.sf-action-btn.secondary {
  background: #ffffff;
  color: #111111 !important;
  border: 1px solid #e2e8f0;
  padding: 9px 14px;
}

.sf-action-btn.secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.sf-empty-search,
.sf-empty-box {
  text-align: center;
  padding: 50px 20px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #edf2f7;
  grid-column: 1 / -1;
}

.sf-empty-icon {
  font-size: 38px;
  margin-bottom: 10px;
}

.sf-empty-search h3,
.sf-empty-box h3 {
  font-size: 18px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 6px 0;
}

.sf-empty-search p,
.sf-empty-box p {
  color: #64748b;
  font-size: 13.5px;
  margin: 0 0 16px 0;
}

.sf-reset-btn {
  background: #111111;
  color: #ffffff;
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sf-reset-btn:hover {
  background: #e22323;
}

@media (max-width: 768px) {
  .sf-locator-breadcrumb {
    padding: 12px 16px 0 16px;
  }
  .sf-locator-header {
    padding: 24px 16px 26px 16px;
  }
  .sf-locator-heading {
    font-size: 24px;
  }
  .sf-locator-subheading {
    font-size: 13px;
    margin-bottom: 18px;
  }
  .sf-search-field input {
    height: 44px;
    font-size: 13.5px;
  }
  .sf-locator-content {
    padding: 18px 14px 0 14px;
  }
  .sf-filter-strip {
    padding: 12px;
    border-radius: 10px;
  }
  .sf-type-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .sf-type-tabs::-webkit-scrollbar {
    display: none;
  }
  .sf-tab-item {
    white-space: nowrap;
    font-size: 12px;
    padding: 7px 12px;
  }
  .sf-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sf-store-card {
    padding: 16px;
  }
}

/* ==========================================================================
   Security Combos & CCTV Solution Builder (VigiXcore Storefront UI Design System)
   ========================================================================== */

/* Section & Grid Architecture */
.sf-combos-section {
  max-width: var(--Storefront-container, 1600px);
  margin: auto;
  padding: 24px 28px 0;
}

@media (max-width: 768px) {
  .sf-combos-section {
    padding: 18px 16px 0;
  }
}

.sf-combos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
  width: 100%;
}

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

@media (max-width: 900px) {
  .sf-combos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

@media (max-width: 600px) {
  .sf-combos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
}

/* Authentic VigiXcore Combo Product Card */
.sf-combo-card {
  min-width: 0;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #eef2f5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.sf-combo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.sf-combo-card-media {
  position: relative;
  background: #f1f4f6;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.sf-combo-card-img-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sf-combo-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
}

.sf-combo-card:hover .sf-combo-img {
  transform: scale(1.04);
}

.sf-combo-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f4f6;
  color: #94a3b8;
  font-size: 32px;
}

.sf-combo-card .pbadge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #111111;
  color: #ffffff;
  padding: 3.5px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  z-index: 2;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}

.sf-combo-card .feature-strip {
  background: #fdbb00 !important;
  padding: 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.sf-combo-card .feature-text {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
}

.sf-combo-card-body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sf-combo-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.sf-combo-card-title {
  font-size: 14.5px;
  line-height: 1.25;
  margin: 2px 0 8px 0;
  font-weight: 700;
  color: #1a2024;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}

.sf-combo-card-title a {
  color: #1a2024;
  text-decoration: none;
  transition: color 0.2s;
}

.sf-combo-card-title a:hover {
  color: #ff1c1c;
}

.sf-combo-card-includes {
  margin: 0 0 8px 0;
}

.sf-combo-card-includes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sf-combo-card-includes li {
  font-size: 11.5px;
  color: #475569;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-combo-card-includes li::before {
  content: "•";
  color: #ff1c1c;
  font-weight: 900;
  font-size: 13px;
}

.sf-combo-card-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin: 0 0 8px;
}

.sf-combo-card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-combo-card-pricing {
  display: flex;
  flex-direction: column;
}

.sf-combo-price-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.sf-combo-price-wrap {
  font-size: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sf-combo-price-wrap .curr-price,
.sf-combo-price-wrap b,
.sf-combo-price-wrap ins,
.sf-combo-price-wrap .woocommerce-Price-amount {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  text-decoration: none !important;
}

.sf-combo-price-wrap del,
.sf-combo-price-wrap .orig-price {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  margin-left: 4px;
  text-decoration: line-through !important;
}

.sf-combo-price-wrap .discount-badge {
  font-size: 11px !important;
  color: #149447 !important;
  font-weight: 800 !important;
  margin-left: 2px;
}

.sf-combo-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.sf-btn-view-solution,
a.sf-btn-view-solution,
.sf-combo-card .sf-btn-view-solution {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  background: #1a2024 !important;
  color: #ffffff !important;
  border: 1px solid #1a2024 !important;
  line-height: 1.2 !important;
}

.sf-btn-view-solution:hover,
a.sf-btn-view-solution:hover,
.sf-combo-card .sf-btn-view-solution:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

.sf-btn-combo-buy,
a.sf-btn-combo-buy,
.sf-btn-combo-quote,
a.sf-btn-combo-quote,
.sf-combo-card .sf-btn-combo-buy,
.sf-combo-card .sf-btn-combo-quote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  background: #fdbb00 !important;
  color: #000000 !important;
  border: 1px solid #fdbb00 !important;
  line-height: 1.2 !important;
}

.sf-btn-combo-buy:hover,
a.sf-btn-combo-buy:hover,
.sf-btn-combo-quote:hover,
a.sf-btn-combo-quote:hover,
.sf-combo-card .sf-btn-combo-buy:hover,
.sf-combo-card .sf-btn-combo-quote:hover {
  background: #e5a800 !important;
  color: #000000 !important;
  border-color: #e5a800 !important;
}

/* Combo Card Mobile Grid & Card Optimization */
@media (max-width: 600px) {
  .sf-combos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
  }

  .sf-combo-card {
    border-radius: 10px !important;
  }

  .sf-combo-card-media {
    padding: 8px !important;
  }

  .sf-combo-card .pbadge {
    top: 6px !important;
    left: 6px !important;
    font-size: 8.5px !important;
    padding: 2px 5px !important;
  }

  .sf-combo-card .feature-strip {
    padding: 3px 6px !important;
    min-height: 20px !important;
  }

  .sf-combo-card .feature-text {
    font-size: 9px !important;
    letter-spacing: 0.1px !important;
  }

  .sf-combo-card-body {
    padding: 8px 8px 10px !important;
  }

  .sf-combo-rating-row {
    margin-bottom: 3px !important;
  }

  .sf-combo-rating-row .rating-badge {
    font-size: 10px !important;
    padding: 1px 4px !important;
  }

  .sf-combo-rating-row span:not(.rating-badge) {
    display: none !important;
  }

  .sf-combo-card-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 0 4px 0 !important;
  }

  .sf-combo-card-includes {
    margin: 0 0 6px 0 !important;
  }

  .sf-combo-card-includes ul {
    gap: 2px !important;
  }

  .sf-combo-card-includes li {
    font-size: 10px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  .sf-combo-card-includes li::before {
    margin-right: 2px !important;
    font-size: 11px !important;
  }

  .sf-combo-card-footer {
    gap: 4px !important;
  }

  .sf-combo-price-label {
    font-size: 8.5px !important;
    margin-bottom: 0 !important;
  }

  .sf-combo-price-wrap .curr-price,
  .sf-combo-price-wrap b,
  .sf-combo-price-wrap ins,
  .sf-combo-price-wrap .woocommerce-Price-amount {
    font-size: 13.5px !important;
  }

  .sf-combo-price-wrap del,
  .sf-combo-price-wrap .orig-price {
    font-size: 9.5px !important;
  }

  .sf-combo-price-wrap .discount-badge {
    font-size: 8.5px !important;
    padding: 1px 3px !important;
  }

  .sf-combo-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    margin-top: 2px !important;
  }

  .sf-combo-card .sf-btn-view-solution,
  .sf-combo-card .sf-btn-combo-buy,
  .sf-combo-card .sf-btn-combo-quote {
    height: 28px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 0 2px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 28px !important;
  }
}

/* ==========================================================================
   Single Combo Solution Landing Page Layout
   ========================================================================== */
.sf-single-combo-wrap {
  padding: 20px 0 80px 0;
  background: #ffffff;
}

.sf-single-combo-wrap .sf-container {
  max-width: var(--Storefront-container, 1600px);
  margin: 0 auto;
  padding: 0 28px;
}

@media (max-width: 768px) {
  .sf-single-combo-wrap .sf-container {
    padding: 0 16px;
  }
}

.sf-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6e7987;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sf-breadcrumbs a {
  color: #1a2024;
  text-decoration: none;
}

.sf-breadcrumbs a:hover {
  color: #ff1c1c;
  text-decoration: underline;
}

.sf-breadcrumb-sep {
  color: #cbd5e1;
}

.sf-breadcrumb-current {
  color: #94a3b8;
  font-weight: 500;
}

.sf-combo-hero-section {
  display: grid;
  grid-template-columns: minmax(440px, 46%) 1fr;
  gap: 44px;
  margin-bottom: 36px;
  align-items: start;
}

@media (max-width: 991px) {
  .sf-combo-hero-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.sf-combo-gallery-stage {
  position: relative;
  width: 100%;
  min-height: 480px;
  background: #f8fafc;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #eef2f5;
  box-sizing: border-box;
}

.sf-combo-gallery-stage .sf-main-img-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-combo-gallery-stage .product-gallery-image {
  width: 100%;
  max-height: 440px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.sf-desktop-only {
  display: block;
}

.sf-mobile-only {
  display: none !important;
}

@media (max-width: 991px) {
  .sf-desktop-only {
    display: none !important;
  }
  .sf-mobile-only {
    display: block !important;
  }
}

.sf-combo-kit-strip {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #edf2f5;
}

.sf-kit-strip-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #1a2024;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.sf-kit-mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-mini-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  color: #334155;
}

.sf-mini-chip strong {
  color: #111111;
  font-weight: 800;
}

/* Right Column Purchase & Sticky Box */
.sf-combo-buy-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 90px;
}

@media (max-width: 768px) {
  .sf-combo-buy-card {
    padding: 18px;
    position: static;
  }
}

.sf-buy-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.sf-combo-rating-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.sf-combo-rating-box .sf-stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 1px;
}

.sf-combo-rating-box .sf-score {
  font-weight: 800;
  color: #111111;
}

.sf-combo-rating-box .sf-reviews-count {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.sf-combo-sku-badge {
  font-size: 11px;
  color: #334155;
  background: #f1f5f9;
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.sf-buy-card-pricing-block {
  margin-bottom: 18px;
}

.sf-price-prefix {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
}

.sf-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sf-main-price-display {
  font-size: 32px;
  font-weight: 900;
  color: #111111 !important;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.sf-main-price-display * {
  color: #111111 !important;
}

.sf-main-price-display ins {
  text-decoration: none;
  font-weight: 900;
}

.sf-main-price-display del {
  font-size: 16px;
  color: #94a3b8 !important;
  font-weight: 500;
  margin-left: 6px;
}

.sf-discount-badge {
  background: #e6f7ec;
  color: #149447;
  border: 1px solid #c2ebd0;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.sf-tax-inclusive-text {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.4;
}

.sf-buy-actions-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.sf-btn-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 18px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.sf-combo-hero-right .sf-btn-buy-now,
.sf-combo-hero-right .sf-combo-btn-buy {
  background: #fdbb00 !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border: 1px solid #fdbb00 !important;
  box-shadow: 0 2px 8px rgba(253, 187, 0, 0.28) !important;
}

.sf-combo-hero-right .sf-btn-buy-now *,
.sf-combo-hero-right .sf-combo-btn-buy * {
  color: #000000 !important;
}

.sf-combo-hero-right .sf-btn-buy-now:hover,
.sf-combo-hero-right .sf-combo-btn-buy:hover {
  background: #e5a800 !important;
  border-color: #e5a800 !important;
  color: #000000 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 187, 0, 0.35) !important;
}

.sf-combo-hero-right .sf-btn-add-cart,
.sf-combo-hero-right .sf-combo-btn-cart {
  background: #1a2024 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #1a2024 !important;
}

.sf-combo-hero-right .sf-btn-add-cart *,
.sf-combo-hero-right .sf-combo-btn-cart * {
  color: #ffffff !important;
}

.sf-combo-hero-right .sf-btn-add-cart:hover,
.sf-combo-hero-right .sf-combo-btn-cart:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.sf-hero-quote-divider {
  position: relative;
  text-align: center;
  margin: 20px 0 14px;
}

.sf-hero-quote-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: #e2e8f0;
  z-index: 1;
}

.sf-hero-quote-divider span {
  position: relative;
  z-index: 2;
  background: #ffffff;
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Toggle Quote Form Button */
.sf-btn-toggle-quote {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 16px !important;
  background: #ffffff !important;
  color: #1a2024 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-bottom: 0;
}

.sf-btn-toggle-quote:hover {
  background: #f8fafc !important;
  border-color: #fdbb00 !important;
  color: #000000 !important;
}

.sf-btn-toggle-quote.is-active {
  background: #f8fafc !important;
  border-color: #fdbb00 !important;
  color: #000000 !important;
  margin-bottom: 14px;
}

.sf-toggle-quote-content {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.sf-toggle-quote-content .sf-toggle-icon {
  color: #fdbb00;
  stroke: #fdbb00;
  flex-shrink: 0;
}

.sf-toggle-chevron {
  color: #64748b;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.sf-btn-toggle-quote.is-active .sf-toggle-chevron {
  transform: rotate(180deg);
  color: #1a2024;
}

/* Quote Collapsible Wrapper */
.sf-quote-collapse-wrapper {
  display: none;
}

.sf-quote-collapse-wrapper.is-open {
  display: block;
  animation: sfSlideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sfSlideDownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Quote Box Styling */
.sf-combo-quote-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sf-quote-badge {
  display: inline-block;
  background: #fdbb00;
  color: #000000;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.sf-quote-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a2024;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.sf-quote-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 16px;
  line-height: 1.4;
}

.sf-quote-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-quote-field label,
.sf-quote-field .sf-field-main-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

.sf-quote-input,
.sf-quote-textarea {
  width: 100% !important;
  padding: 9px 12px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1a2024 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}

.sf-quote-input:focus,
.sf-quote-textarea:focus {
  border-color: #fdbb00 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(253, 187, 0, 0.2) !important;
}

.sf-quote-field-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .sf-quote-field-2col {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.sf-quote-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.sf-quote-radio-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.sf-quote-radio-label input[type="radio"] {
  accent-color: #fdbb00;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.sf-quote-consent {
  font-size: 11px;
  color: #64748b;
  margin: 4px 0 6px;
  line-height: 1.4;
}

.sf-quote-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

.sf-quote-checkbox-label input[type="checkbox"] {
  accent-color: #fdbb00;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.sf-quote-submit-wrap {
  margin-top: 4px;
}

.sf-combo-quote-box .sf-quote-submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 46px !important;
  padding: 0 16px !important;
  background: #fdbb00 !important;
  color: #000000 !important;
  border: 1px solid #fdbb00 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(253, 187, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.sf-combo-quote-box .sf-quote-submit-btn * {
  color: #000000 !important;
  font-weight: 800 !important;
}

.sf-combo-quote-box .sf-quote-submit-btn:hover {
  background: #e5a800 !important;
  border-color: #e5a800 !important;
  color: #000000 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 187, 0, 0.35) !important;
}

.sf-quote-feedback-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-top: 10px;
  font-weight: 600;
}

.sf-quote-feedback-msg.is-success {
  background: #e6f7ec;
  color: #149447;
  border: 1px solid #c2ebd0;
}

.sf-quote-feedback-msg.is-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Trust Strip */
.sf-combo-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #edf2f5;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 40px;
}

@media (max-width: 900px) {
  .sf-combo-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 500px) {
  .sf-combo-trust-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.sf-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sf-trust-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.sf-trust-item strong {
  display: block;
  font-size: 13px;
  color: #1a2024;
  font-weight: 800;
  margin-bottom: 2px;
}

.sf-trust-item p {
  margin: 0;
  font-size: 11.5px;
  color: #6e7987;
  line-height: 1.35;
}

/* Common Section Headers */
.sf-combo-section {
  margin-bottom: 48px;
}

.sf-section-header-center {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 30px;
}

.sf-section-header-center .sf-section-tag {
  display: inline-block;
  background: #fdbb00;
  color: #000000;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.sf-section-header-center .sf-section-title {
  font-size: 24px;
  font-weight: 800;
  color: #1a2024;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
}

.sf-section-header-center .sf-section-sub {
  font-size: 13.5px;
  color: #6e7987;
  line-height: 1.5;
  margin: 0;
}

.sf-section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.sf-section-header-text .sf-section-title {
  font-size: 22px;
  font-weight: 800;
  color: #1a2024;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}

.sf-section-header-text .sf-section-sub {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.sf-section-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.sf-section-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Components Grid (Grid of 5 Package Contents) */
.sf-components-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1200px) {
  .sf-components-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .sf-components-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sf-component-item-card {
    padding: 12px 10px !important;
    border-radius: 10px !important;
  }

  .sf-comp-card-media {
    height: 95px !important;
    margin-bottom: 8px !important;
  }

  .sf-comp-card-media img,
  .sf-comp-card-media .sf-comp-img,
  .sf-comp-svg-icon {
    max-height: 75px !important;
    max-width: 85% !important;
  }

  .sf-comp-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin: 0 0 3px !important;
  }

  .sf-comp-spec-sub {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  .sf-comp-qty-bubble {
    width: 20px !important;
    height: 20px !important;
    font-size: 10.5px !important;
    bottom: 2px !important;
    right: 2px !important;
  }
}

.sf-component-item-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  text-align: left;
}

.sf-component-item-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.sf-comp-card-media {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 8px;
}

.sf-comp-card-media img,
.sf-comp-card-media .sf-comp-img {
  max-height: 90px;
  max-width: 90%;
  object-fit: contain;
  display: block;
}

.sf-comp-svg-icon {
  max-height: 85px;
  max-width: 90%;
  object-fit: contain;
  display: block;
}

.sf-comp-qty-bubble {
  position: absolute;
  bottom: 2px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.35);
  line-height: 1;
}

.sf-comp-card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sf-comp-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #1a2024;
  margin: 0 0 4px;
  line-height: 1.35;
}

.sf-comp-spec-sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  display: block;
}

/* Workflow Steps */
.sf-workflow-steps-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #edf2f5;
  border-radius: 12px;
  padding: 28px 20px;
}

@media (max-width: 900px) {
  .sf-workflow-steps-grid {
    flex-direction: column;
    text-align: center;
  }
  .sf-workflow-arrow {
    transform: rotate(90deg);
    margin: 6px 0;
  }
}

.sf-workflow-step {
  flex: 1;
}

.sf-step-num {
  font-size: 11px;
  font-weight: 900;
  color: #ff1c1c;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.sf-step-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.sf-workflow-step h4 {
  font-size: 14px;
  font-weight: 800;
  color: #1a2024;
  margin: 0 0 4px;
}

.sf-workflow-step p {
  margin: 0;
  font-size: 12px;
  color: #6e7987;
  line-height: 1.45;
}

.sf-workflow-arrow {
  font-size: 20px;
  color: #cbd5e1;
  font-weight: bold;
}

/* Horizontal Key Benefits Grid */
.sf-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1024px) {
  .sf-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .sf-benefits-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.sf-benefit-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sf-benefit-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.sf-benefit-icon-wrap {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: #edf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

.sf-benefit-icon-wrap svg {
  width: 22px;
  height: 22px;
  display: block;
}

.sf-benefit-info {
  display: flex;
  flex-direction: column;
}

.sf-benefit-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #1a2024;
  margin: 0 0 3px;
  line-height: 1.25;
}

.sf-benefit-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  margin: 0;
}

/* Specs Table */
.sf-specs-table-wrap {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sf-specs-group {
  background: #ffffff;
  border: 1px solid #edf2f5;
  border-radius: 12px;
  overflow: hidden;
}

.sf-specs-group-title {
  background: #f8fafc;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  color: #1a2024;
  margin: 0;
  border-bottom: 1px solid #edf2f5;
}

.sf-specs-table {
  width: 100%;
  border-collapse: collapse;
}

.sf-specs-table tr {
  border-bottom: 1px solid #f1f5f9;
}

.sf-specs-table tr:last-child {
  border-bottom: none;
}

.sf-specs-table th {
  width: 40%;
  padding: 10px 18px;
  font-size: 12.5px;
  color: #64748b;
  font-weight: 600;
  text-align: left;
  background: #fcfdfe;
}

.sf-specs-table td {
  padding: 10px 18px;
  font-size: 12.5px;
  color: #1a2024;
  font-weight: 700;
}

/* Use Cases (Suitable For Deployments) */
.sf-usecases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1024px) {
  .sf-usecases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .sf-usecases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sf-usecase-card {
    border-radius: 10px !important;
  }

  .sf-usecase-img-wrap {
    height: 105px !important;
  }

  .sf-usecase-content {
    padding: 10px 10px !important;
  }

  .sf-usecase-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
}

.sf-usecase-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sf-usecase-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.sf-usecase-img-wrap {
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-usecase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.sf-usecase-svg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.sf-usecase-card:hover .sf-usecase-img,
.sf-usecase-card:hover .sf-usecase-svg-img {
  transform: scale(1.04);
}

.sf-usecase-content {
  padding: 14px 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sf-usecase-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #1a2024;
  margin: 0;
  line-height: 1.3;
}

.sf-usecase-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin: 4px 0 0;
}

/* FAQ Accordion */
.sf-faqs-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-faq-item {
  background: #ffffff;
  border: 1px solid #edf2f5;
  border-radius: 10px;
  overflow: hidden;
}

.sf-faq-question {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2024;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  list-style: none;
}

.sf-faq-question::-webkit-details-marker {
  display: none;
}

.sf-faq-toggle-icon {
  font-size: 16px;
  font-weight: bold;
  color: #64748b;
  transition: transform 0.2s;
}

.sf-faq-item[open] .sf-faq-toggle-icon {
  transform: rotate(45deg);
}

.sf-faq-answer {
  padding: 0 18px 16px 18px;
  font-size: 13px;
  color: #555555;
  line-height: 1.55;
}

.sf-faq-answer p {
  margin: 0;
}

/* Custom Solution CTA Banner */
.sf-custom-solution-cta-card {
  background: #1a2024;
  border-radius: 14px;
  padding: 40px 28px;
  color: #ffffff;
  text-align: center;
  margin-top: 40px;
}

.sf-cta-badge {
  display: inline-block;
  background: #fdbb00;
  color: #000000;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}

.sf-custom-solution-cta-card h2 {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 10px;
  color: #ffffff;
}

.sf-custom-solution-cta-card p {
  font-size: 14px;
  color: #cbd5e1;
  max-width: 650px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.sf-btn-cta-large {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ff1c1c;
  color: #ffffff;
  padding: 13px 26px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}

.sf-btn-cta-large:hover {
  background: #e01515;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Archive Header & Filter Navigation */
.sf-combos-archive-wrap {
  padding: 24px 0 80px 0;
  background: #ffffff;
}

.sf-combos-archive-wrap .sf-container {
  max-width: var(--Storefront-container, 1600px);
  margin: 0 auto;
  padding: 0 28px;
}

@media (max-width: 768px) {
  .sf-combos-archive-wrap .sf-container {
    padding: 0 16px;
  }
}

.sf-combos-archive-hero {
  margin-bottom: 28px;
}

.sf-archive-hero-title {
  font-size: 28px;
  font-weight: 800;
  color: #1a2024;
  letter-spacing: -0.4px;
  margin: 6px 0 10px;
}

.sf-archive-hero-desc {
  font-size: 14px;
  color: #6e7987;
  max-width: 800px;
  line-height: 1.55;
  margin: 0 0 20px;
}

.sf-combo-categories-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.sf-cat-pill {
  background: #f4f6f8;
  color: #1a2024;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #edf2f5;
  transition: all 0.2s ease;
}

.sf-cat-pill:hover,
.sf-cat-pill.active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

/* Mobile Sticky Bar for Single Page */
.sf-combo-mobile-sticky-bar,
.sf-mobile-sticky-combo-bar {
  display: none !important;
}

@media (max-width: 768px) {
  .sf-combo-mobile-sticky-bar,
  .sf-mobile-sticky-combo-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #edf2f5 !important;
    padding: 10px 16px !important;
    z-index: 990 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06) !important;
  }

  .sf-mobile-sticky-price {
    font-size: 16px;
    font-weight: 900;
    color: #1a2024;
    display: flex;
    flex-direction: column;
  }

  .sf-mobile-sticky-price .sf-sticky-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
  }

  .sf-mobile-sticky-btns {
    display: flex;
    gap: 8px;
  }

  .sf-sticky-btn-quote,
  .sf-sticky-btn-buy {
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
  }

  .sf-sticky-btn-quote {
    background: #1a2024;
    color: #ffffff !important;
  }

  .sf-sticky-btn-buy {
    background: #fdbb00;
    color: #000000 !important;
  }
}

/* ==========================================================================
   VigiXcore Customer Invoice Management & Order Cards
   ========================================================================== */
.sf-customer-invoices-wrap {
  margin: 10px 0 30px;
}

.sf-invoices-header-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sf-invoices-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.sf-invoices-subtitle {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
}

.sf-empty-invoices-box {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  color: #64748b;
}

.sf-empty-invoices-box .sf-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.sf-empty-invoices-box h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
}

.sf-empty-invoices-box p {
  font-size: 14px;
  max-width: 480px;
  margin: 0 auto 18px;
}

.sf-btn-primary-link {
  display: inline-block;
  background: #111111;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sf-btn-primary-link:hover {
  background: #e22323;
}

.sf-invoices-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.sf-invoice-customer-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sf-invoice-customer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.sf-inv-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sf-inv-badge-type {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 8px;
  border-radius: 6px;
}

.sf-inv-status-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sf-inv-status-pill.sf-status-generated {
  background: #dbeafe;
  color: #1e40af;
}

.sf-inv-status-pill.sf-status-sent {
  background: #ede9fe;
  color: #6d28d9;
}

.sf-inv-status-pill.sf-status-paid {
  background: #dcfce7;
  color: #15803d;
}

.sf-inv-status-pill.sf-status-refunded,
.sf-inv-status-pill.sf-status-cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

.sf-inv-number-row {
  margin-bottom: 14px;
}

.sf-inv-number {
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.3px;
}

.sf-inv-details-table {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-inv-meta-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #64748b;
}

.sf-inv-meta-line .sf-inv-val {
  font-weight: 600;
  color: #1e293b;
}

.sf-inv-meta-line.sf-inv-total-line {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #cbd5e1;
}

.sf-inv-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.sf-inv-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sf-btn-inv-view,
.sf-btn-inv-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sf-btn-inv-view {
  background: #eff6ff;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
}

.sf-btn-inv-view:hover {
  background: #dbeafe;
  color: #1e40af !important;
}

.sf-btn-inv-download {
  background: #1d4ed8;
  color: #ffffff !important;
  border: 1px solid #1d4ed8;
}

.sf-btn-inv-download:hover {
  background: #1e40af;
  border-color: #1e40af;
  color: #ffffff !important;
}

/* Order Details / Thank You Highlight Card */
.sf-order-invoice-highlight-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 20px 0 28px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.sf-order-inv-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.sf-order-inv-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.sf-order-inv-num {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.sf-order-inv-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

.sf-order-inv-status {
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  text-transform: uppercase;
}

.sf-order-inv-status.in-stock {
  background: #dcfce7;
  color: #15803d;
}

.sf-order-inv-right {
  text-align: right;
}

.sf-order-inv-total-label {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}

.sf-order-inv-total-val {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  margin-top: 2px;
}

.sf-order-inv-buttons {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

@media (max-width: 640px) {
  .sf-order-inv-top {
    flex-direction: column;
    gap: 12px;
  }
  .sf-order-inv-right {
    text-align: left;
  }
  .sf-order-inv-buttons {
    flex-direction: column;
  }
  .sf-invoices-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Storefront UI: About Us & Contact Us Pages
   ========================================================================== */

/* Common Container & Wrapper */
.storefront-about-us-page,
.storefront-contact-us-page {
  width: 100% !important;
  background: #f8fafc;
  min-height: 80vh;
}

.sf-about-wrap,
.sf-contact-wrap {
  width: 100% !important;
  box-sizing: border-box;
  font-family: inherit;
  color: #1e293b;
  overflow-x: hidden;
}

.sf-about-container,
.sf-contact-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   About Us Styles
   -------------------------------------------------------------------------- */
.sf-about-hero {
  padding: 60px 0 40px;
  text-align: center;
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}

.sf-about-eyebrow,
.sf-contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  color: #2563eb;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
}

.sf-about-badge-dot,
.sf-contact-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
}

.sf-about-hero-title {
  font-size: 38px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.8px;
  max-width: 820px;
  margin: 0 auto 16px;
}

.sf-about-hero-sub {
  font-size: 16px;
  color: #64748b;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 28px;
}

.sf-about-hero-pills {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.sf-about-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* Stats Section */
.sf-about-stats-sec {
  padding: 40px 0;
}

.sf-about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-about-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sf-about-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.sf-stat-number {
  font-size: 34px;
  font-weight: 900;
  color: #2563eb;
  letter-spacing: -0.5px;
  line-height: 1;
}

.sf-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-top: 8px;
}

/* Story Section */
.sf-about-story-sec {
  padding: 50px 0;
}

.sf-about-story-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.sf-about-section-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #2563eb;
  background: #eff6ff;
  border-radius: 6px;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.sf-about-section-title {
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}

.sf-about-story-p {
  font-size: 15px;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 14px;
}

.sf-about-story-checklist {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.sf-check-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.sf-about-story-visual {
  position: relative;
}

.sf-about-visual-card {
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 24px;
  padding: 50px 30px;
  color: #ffffff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2);
  text-align: center;
  overflow: hidden;
}

.sf-about-visual-img {
  max-width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.sf-about-tech-icon {
  width: 76px;
  height: 76px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.sf-about-badge-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.sf-about-badge-sub {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.sf-about-badge-loc {
  font-size: 12px;
  color: #64748b;
}

.sf-about-float-tag {
  position: absolute;
  background: #ffffff;
  color: #0f172a;
  border-radius: 14px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-float-tag-1 {
  bottom: 20px;
  left: -15px;
}

.sf-float-tag-2 {
  top: 20px;
  right: -15px;
}

.sf-float-tag-1 .tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.sf-float-tag-2 .tag-star {
  color: #f59e0b;
}

/* Mission & Vision Section */
.sf-about-mv-sec {
  padding: 40px 0;
}

.sf-about-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sf-about-mv-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.sf-mission-card {
  border-top: 4px solid #2563eb;
}

.sf-vision-card {
  border-top: 4px solid #f59e0b;
}

.sf-mv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.sf-mv-icon {
  font-size: 24px;
}

.sf-mv-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sf-about-mv-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* Values & Principles Section */
.sf-about-values-sec,
.sf-about-solutions-sec {
  padding: 50px 0;
}

.sf-about-sec-header-center,
.sf-faq-header-center {
  text-align: center;
  margin-bottom: 36px;
}

.sf-about-section-subtitle,
.sf-faq-sub {
  font-size: 15px;
  color: #64748b;
  max-width: 600px;
  margin: 8px auto 0;
}

.sf-about-values-grid,
.sf-about-solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-about-value-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sf-about-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.sf-value-icon,
.sf-sol-icon-box {
  font-size: 28px;
  margin-bottom: 14px;
}

.sf-value-title,
.sf-sol-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}

.sf-value-desc,
.sf-sol-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

.sf-about-solution-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.25s ease;
}

.sf-about-solution-card:hover {
  transform: translateY(-3px);
}

/* CTA Banner */
.sf-about-cta-sec {
  padding: 40px 0 70px;
}

.sf-about-cta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  border-radius: 24px;
  padding: 50px 30px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.sf-cta-title {
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
}

.sf-cta-subtitle {
  font-size: 15.5px;
  color: #cbd5e1;
  max-width: 620px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.sf-cta-btn-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.sf-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sf-btn-cta-primary {
  background: #2563eb;
  color: #ffffff;
}

.sf-btn-cta-primary:hover {
  background: #1d4ed8;
  color: #ffffff;
}

.sf-btn-cta-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sf-btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Contact Us Styles
   -------------------------------------------------------------------------- */
.sf-contact-hero {
  padding: 60px 0 35px;
  text-align: center;
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}

.sf-contact-hero-title {
  font-size: 38px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.8px;
  max-width: 750px;
  margin: 0 auto 16px;
}

.sf-contact-hero-sub {
  font-size: 16px;
  color: #64748b;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}

/* Channels Section */
.sf-contact-channels-sec {
  padding: 40px 0 20px;
}

.sf-contact-channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-channel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sf-channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.sf-channel-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.sf-channel-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}

.sf-channel-meta {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px;
  flex: 1;
}

.sf-channel-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s;
}

.sf-channel-link:hover {
  text-decoration: underline;
}

.sf-channel-sublink {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
  text-decoration: none;
}

/* Main Form & Panel Grid */
.sf-contact-main-sec {
  padding: 30px 0 50px;
}

.sf-contact-form-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 36px;
  align-items: start;
}

.sf-contact-form-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03);
}

.sf-form-header {
  margin-bottom: 24px;
}

.sf-form-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.sf-form-sub {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.sf-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.sf-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sf-form-group {
  margin-bottom: 16px;
}

.sf-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.sf-form-label .req {
  color: #ef4444;
}

.sf-form-label .opt {
  color: #94a3b8;
  font-weight: 400;
  font-size: 12px;
}

.sf-form-input,
.sf-form-select,
.sf-form-textarea {
  width: 100%;
  height: 44px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
  box-sizing: border-box;
  transition: all 0.2s ease;
  font-family: inherit;
}

.sf-form-textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}

.sf-form-input:focus,
.sf-form-select:focus,
.sf-form-textarea:focus {
  border-color: #2563eb;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.sf-form-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.sf-contact-submit-btn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  height: 48px;
  padding: 0 28px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.sf-contact-submit-btn:hover {
  background: #1e293b;
}

.sf-form-privacy {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sf-contact-alert {
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.sf-alert-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.sf-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Side Info Blocks */
.sf-contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sf-info-block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
}

.sf-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sf-info-icon {
  font-size: 20px;
}

.sf-info-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sf-hours-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-hour-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #f1f5f9;
}

.sf-hour-row .day {
  color: #64748b;
}

.sf-hour-row .time {
  font-weight: 700;
  color: #1e293b;
}

.sf-hour-row.emergency {
  border-bottom: none;
  padding-bottom: 0;
  color: #2563eb;
}

.sf-hour-row.emergency .time {
  color: #2563eb;
}

.sf-trust-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sf-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sf-t-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
}

.sf-trust-item strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 2px;
}

.sf-trust-item p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* Map Section */
.sf-contact-map-sec {
  padding: 10px 0 50px;
}

.sf-map-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.sf-map-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 12px;
}

.sf-map-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}

.sf-map-sub {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.sf-map-directions-btn {
  background: #eff6ff;
  color: #2563eb;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.sf-map-directions-btn:hover {
  background: #dbeafe;
}

.sf-map-frame-box {
  width: 100%;
  line-height: 0;
}

/* FAQ Section */
.sf-contact-faq-sec {
  padding: 20px 0 70px;
}

.sf-faq-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sf-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.sf-faq-item.is-open {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.05);
}

.sf-faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.sf-faq-chevron {
  transition: transform 0.25s ease;
  color: #64748b;
}

.sf-faq-item.is-open .sf-faq-chevron {
  transform: rotate(180deg);
  color: #2563eb;
}

.sf-faq-answer {
  padding: 0 20px 18px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.65;
}

.sf-faq-answer p {
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .sf-about-stats-grid,
  .sf-about-values-grid,
  .sf-about-solutions-grid,
  .sf-contact-channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-about-story-grid,
  .sf-about-mv-grid,
  .sf-contact-form-grid {
    grid-template-columns: 1fr;
  }

  .sf-about-hero-title,
  .sf-contact-hero-title {
    font-size: 30px;
  }

  .sf-float-tag-1,
  .sf-float-tag-2 {
    position: static;
    margin-top: 12px;
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .sf-about-stats-grid,
  .sf-about-values-grid,
  .sf-about-solutions-grid,
  .sf-contact-channels-grid {
    grid-template-columns: 1fr;
  }

  .sf-form-row-2 {
    grid-template-columns: 1fr;
  }

  .sf-about-hero-title,
  .sf-contact-hero-title {
    font-size: 26px;
  }

  .sf-contact-form-box {
    padding: 24px 18px;
  }
}