/*
  FETYCI responsive layer v6.2.1
  Loaded after the existing site/admin styles.
  Scope is activated by fetyci-responsive.js.
*/

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.ft-responsive-site,
body.ft-responsive-admin {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

body.ft-responsive-site *,
body.ft-responsive-site *::before,
body.ft-responsive-site *::after,
body.ft-responsive-admin *,
body.ft-responsive-admin *::before,
body.ft-responsive-admin *::after {
  box-sizing: border-box;
  min-width: 0;
}

body.ft-responsive-site img,
body.ft-responsive-site video,
body.ft-responsive-site canvas,
body.ft-responsive-site svg,
body.ft-responsive-admin img,
body.ft-responsive-admin video,
body.ft-responsive-admin canvas,
body.ft-responsive-admin svg {
  max-width: 100%;
}

body.ft-responsive-site button,
body.ft-responsive-site input,
body.ft-responsive-site select,
body.ft-responsive-site textarea,
body.ft-responsive-admin button,
body.ft-responsive-admin input,
body.ft-responsive-admin select,
body.ft-responsive-admin textarea {
  max-width: 100%;
}

body.ft-responsive-site button,
body.ft-responsive-site .button,
body.ft-responsive-site .btn,
body.ft-responsive-admin button,
body.ft-responsive-admin .button,
body.ft-responsive-admin .btn {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

body.ft-responsive-site p,
body.ft-responsive-site h1,
body.ft-responsive-site h2,
body.ft-responsive-site h3,
body.ft-responsive-site h4,
body.ft-responsive-site h5,
body.ft-responsive-site h6,
body.ft-responsive-admin p,
body.ft-responsive-admin h1,
body.ft-responsive-admin h2,
body.ft-responsive-admin h3,
body.ft-responsive-admin h4,
body.ft-responsive-admin h5,
body.ft-responsive-admin h6 {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---------- Public storefront ---------- */

body.ft-responsive-site .container,
body.ft-responsive-site [class*="container"] {
  max-width: min(var(--ft-content, 1420px), calc(100vw - 32px));
}

body.ft-responsive-site .header,
body.ft-responsive-site #siteHeader {
  width: 100%;
  max-width: 100vw;
}

body.ft-responsive-site .header .nav,
body.ft-responsive-site #siteHeader .nav {
  min-width: 0;
}

body.ft-responsive-site .brand {
  flex: 0 1 auto;
  min-width: 0;
}

body.ft-responsive-site .brand span {
  min-width: 0;
}

body.ft-responsive-site .nav-links {
  min-width: 0;
}

body.ft-responsive-site .hero-grid,
body.ft-responsive-site .about-grid,
body.ft-responsive-site .footer-grid,
body.ft-responsive-site .quick-view-grid,
body.ft-responsive-site .product-page-grid {
  min-width: 0;
}

body.ft-responsive-site .product-card,
body.ft-responsive-site .collection-card,
body.ft-responsive-site .hero-showcase,
body.ft-responsive-site .hero-card,
body.ft-responsive-site .hero-product-card {
  max-width: 100%;
}

body.ft-responsive-site .product-image,
body.ft-responsive-site .product-image-wrap img,
body.ft-responsive-site .quick-view-gallery img {
  width: 100%;
  object-fit: cover;
}

body.ft-responsive-site .catalog-toolbar,
body.ft-responsive-site .advanced-filters,
body.ft-responsive-site .catalog-controls {
  max-width: 100%;
}

body.ft-responsive-site .category-filters,
body.ft-responsive-site .filters {
  min-width: 0;
}

body.ft-responsive-site .drawer {
  width: min(460px, 100vw) !important;
  max-width: 100vw !important;
}

body.ft-responsive-site .modal,
body.ft-responsive-site [class*="modal"] {
  max-width: 100vw;
}

body.ft-responsive-site .modal-card,
body.ft-responsive-site .quick-view-card,
body.ft-responsive-site .auth-modal-card,
body.ft-responsive-site .info-modal-card,
body.ft-responsive-site .size-guide-card,
body.ft-responsive-site [class*="modal-card"] {
  width: min(1080px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.ft-public-mobile-backdrop,
.ft-admin-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: none;
  border: 0;
  background: rgba(10, 14, 24, .48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body.ft-public-nav-open .ft-public-mobile-backdrop,
body.ft-admin-nav-open .ft-admin-mobile-backdrop {
  display: block;
}

.ft-public-mobile-toggle {
  display: none;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 13px !important;
}

.ft-public-mobile-toggle span,
.ft-admin-mobile-toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: .2s ease;
}

.ft-public-mobile-toggle span::before,
.ft-public-mobile-toggle span::after,
.ft-admin-mobile-toggle span::before,
.ft-admin-mobile-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: .2s ease;
}

.ft-public-mobile-toggle span::before,
.ft-admin-mobile-toggle span::before {
  top: -6px;
}

.ft-public-mobile-toggle span::after,
.ft-admin-mobile-toggle span::after {
  top: 6px;
}

body.ft-public-nav-open .ft-public-mobile-toggle span,
body.ft-admin-nav-open .ft-admin-mobile-toggle span {
  background: transparent;
}

body.ft-public-nav-open .ft-public-mobile-toggle span::before,
body.ft-admin-nav-open .ft-admin-mobile-toggle span::before {
  top: 0;
  transform: rotate(45deg);
}

body.ft-public-nav-open .ft-public-mobile-toggle span::after,
body.ft-admin-nav-open .ft-admin-mobile-toggle span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---------- Admin ---------- */

body.ft-responsive-admin {
  --ft-admin-sidebar-width: 260px;
  --ft-admin-mobile-topbar: 62px;
}

body.ft-responsive-admin .ft-admin-sidebar {
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

body.ft-responsive-admin .ft-admin-main {
  min-height: 100dvh;
  max-width: 100%;
}

body.ft-responsive-admin .admin-main > section,
body.ft-responsive-admin .ft-admin-main > section {
  width: 100%;
  max-width: 100%;
}

body.ft-responsive-admin .admin-title-row,
body.ft-responsive-admin .page-header,
body.ft-responsive-admin [class*="title-row"],
body.ft-responsive-admin [class*="page-header"] {
  min-width: 0;
}

body.ft-responsive-admin .admin-card,
body.ft-responsive-admin .order-card,
body.ft-responsive-admin [class*="card"],
body.ft-responsive-admin form {
  max-width: 100%;
}

body.ft-responsive-admin .form-grid,
body.ft-responsive-admin .upload-row,
body.ft-responsive-admin .dashboard-grid,
body.ft-responsive-admin .stats-grid,
body.ft-responsive-admin .summary-grid,
body.ft-responsive-admin .settings-grid,
body.ft-responsive-admin .products-grid,
body.ft-responsive-admin .theme-grid,
body.ft-responsive-admin [class*="form-grid"],
body.ft-responsive-admin [class*="stats-grid"],
body.ft-responsive-admin [class*="dashboard-grid"] {
  min-width: 0;
}

body.ft-responsive-admin .admin-table-wrap,
body.ft-responsive-admin .ft-responsive-table-wrap,
body.ft-responsive-admin [class*="table-wrap"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body.ft-responsive-admin table {
  max-width: none;
}

body.ft-responsive-admin .order-head,
body.ft-responsive-admin .order-footer,
body.ft-responsive-admin .order-item-line,
body.ft-responsive-admin .form-actions,
body.ft-responsive-admin .table-actions {
  min-width: 0;
}

.ft-admin-mobile-bar {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10010;
  height: calc(var(--ft-admin-mobile-topbar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(50, 62, 78, .14);
  background: rgba(250, 251, 252, .92);
  box-shadow: 0 10px 28px rgba(20, 28, 40, .10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ft-admin-mobile-brand {
  min-width: 0;
  overflow: hidden;
  color: #202735;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-admin-mobile-toggle {
  display: flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(50, 62, 78, .14);
  border-radius: 13px;
  color: #202735;
  background: #fff;
}

@media (min-width: 901px) {
  body.ft-responsive-admin .ft-admin-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 9000 !important;
    width: var(--ft-admin-sidebar-width) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.ft-responsive-admin .ft-admin-main {
    width: calc(100% - var(--ft-admin-sidebar-width)) !important;
    margin-left: var(--ft-admin-sidebar-width) !important;
  }

  body.ft-responsive-admin .admin-shell,
  body.ft-responsive-admin .ft-admin-shell {
    display: block !important;
    min-height: 100dvh !important;
  }
}

/* ---------- Tablets and phones ---------- */

@media (max-width: 1180px) {
  body.ft-responsive-site .hero-grid {
    gap: clamp(28px, 4vw, 52px) !important;
  }

  body.ft-responsive-site .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ft-responsive-site .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ft-responsive-admin .admin-main,
  body.ft-responsive-admin .ft-admin-main {
    padding: 30px 24px !important;
  }

  body.ft-responsive-admin .stats-grid,
  body.ft-responsive-admin .summary-grid,
  body.ft-responsive-admin [class*="stats-grid"],
  body.ft-responsive-admin [class*="summary-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.ft-responsive-site,
  body.ft-responsive-admin {
    overflow-x: hidden !important;
  }

  body.ft-responsive-site .container,
  body.ft-responsive-site [class*="container"] {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
  }

  body.ft-responsive-site .header .nav,
  body.ft-responsive-site #siteHeader .nav {
    min-height: 68px !important;
    height: auto !important;
    gap: 10px !important;
  }

  body.ft-responsive-site .ft-public-mobile-toggle,
  body.ft-responsive-site .menu-toggle {
    display: flex !important;
    order: 20;
  }

  body.ft-responsive-site .nav-links {
    position: fixed !important;
    z-index: 10030 !important;
    inset: calc(72px + env(safe-area-inset-top)) 12px auto 12px !important;
    display: flex !important;
    max-height: calc(100dvh - 90px - env(safe-area-inset-top)) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: auto !important;
    border: 1px solid rgba(55, 68, 88, .14) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 22px 60px rgba(20, 28, 40, .22) !important;
    transform: translateY(-14px) scale(.98);
    transform-origin: top;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .2s ease;
  }

  body.ft-responsive-site.ft-theme-dark .nav-links {
    color: var(--ft-text, #f7f8ff) !important;
    border-color: var(--ft-line, rgba(255,255,255,.15)) !important;
    background: color-mix(in srgb, var(--ft-header, #151a31) 96%, transparent) !important;
  }

  body.ft-public-nav-open .nav-links {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.ft-responsive-site .nav-links a {
    display: flex !important;
    min-height: 46px !important;
    align-items: center !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  body.ft-responsive-site .nav-links a:hover {
    background: rgba(90, 110, 145, .08) !important;
  }

  body.ft-responsive-site .hero-grid,
  body.ft-responsive-site .about-grid,
  body.ft-responsive-site .quick-view-grid,
  body.ft-responsive-site .product-page-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-site .hero-grid {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  body.ft-responsive-site .hero-copy {
    order: 1;
  }

  body.ft-responsive-site .hero-showcase,
  body.ft-responsive-site .hero-card {
    order: 2;
    width: min(100%, 620px) !important;
    margin-inline: auto !important;
  }

  body.ft-responsive-site .hero h1 {
    font-size: clamp(44px, 10vw, 72px) !important;
    line-height: .98 !important;
  }

  body.ft-responsive-site .hero-meta,
  body.ft-responsive-site .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.ft-responsive-site .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ft-responsive-site .catalog-toolbar,
  body.ft-responsive-site .catalog-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  body.ft-responsive-site .catalog-search,
  body.ft-responsive-site .large-search,
  body.ft-responsive-site .sort-control,
  body.ft-responsive-site .sort-control select {
    width: 100% !important;
  }

  body.ft-responsive-site .category-filters,
  body.ft-responsive-site .filters {
    display: flex !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body.ft-responsive-site .category-filters button,
  body.ft-responsive-site .filters button {
    flex: 0 0 auto !important;
  }

  body.ft-responsive-site .about-logo {
    width: min(100%, 540px) !important;
    margin-inline: auto !important;
  }

  body.ft-responsive-site .social-links {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-site .newsletter-inner,
  body.ft-responsive-site .offer-inner {
    align-items: stretch !important;
  }

  body.ft-responsive-site .newsletter form {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Admin switches to off-canvas navigation. */
  .ft-admin-mobile-bar {
    display: flex;
  }

  body.ft-responsive-admin .admin-shell,
  body.ft-responsive-admin .ft-admin-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }

  body.ft-responsive-admin .ft-admin-main {
    width: 100% !important;
    margin: 0 !important;
    padding:
      calc(var(--ft-admin-mobile-topbar) + env(safe-area-inset-top) + 18px)
      16px
      calc(26px + env(safe-area-inset-bottom)) !important;
  }

  body.ft-responsive-admin .ft-admin-sidebar {
    position: fixed !important;
    z-index: 10040 !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 330px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    box-shadow: 20px 0 55px rgba(10, 14, 24, .26) !important;
  }

  body.ft-admin-nav-open .ft-admin-sidebar {
    transform: translateX(0) !important;
  }

  body.ft-responsive-admin .admin-title-row,
  body.ft-responsive-admin .page-header,
  body.ft-responsive-admin [class*="title-row"],
  body.ft-responsive-admin [class*="page-header"] {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body.ft-responsive-admin .admin-title-row > *,
  body.ft-responsive-admin .page-header > *,
  body.ft-responsive-admin [class*="title-row"] > *,
  body.ft-responsive-admin [class*="page-header"] > * {
    max-width: 100% !important;
  }

  body.ft-responsive-admin .form-grid,
  body.ft-responsive-admin .upload-row,
  body.ft-responsive-admin .settings-grid,
  body.ft-responsive-admin .theme-grid,
  body.ft-responsive-admin [class*="form-grid"],
  body.ft-responsive-admin [class*="settings-grid"],
  body.ft-responsive-admin [class*="theme-grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-admin .dashboard-grid,
  body.ft-responsive-admin [class*="dashboard-grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-admin .order-head,
  body.ft-responsive-admin .order-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.ft-responsive-admin .order-footer select {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.ft-responsive-admin .ft-theme-overlay__layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-admin .ft-theme-overlay__topbar {
    position: static !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.ft-responsive-admin .ft-theme-overlay__top-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

@media (max-width: 700px) {
  body.ft-responsive-site .section,
  body.ft-responsive-site section {
    scroll-margin-top: 74px;
  }

  body.ft-responsive-site .header .nav,
  body.ft-responsive-site #siteHeader .nav {
    padding-block: 8px !important;
  }

  body.ft-responsive-site .brand img {
    width: 40px !important;
    height: 40px !important;
  }

  body.ft-responsive-site .brand {
    font-size: 20px !important;
    letter-spacing: .08em !important;
  }

  body.ft-responsive-site .header .icon-button,
  body.ft-responsive-site .header .profile-button,
  body.ft-responsive-site .header .cart-header-button,
  body.ft-responsive-site .header .cart-button {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  body.ft-responsive-site .header .icon-button svg,
  body.ft-responsive-site .header .profile-button svg,
  body.ft-responsive-site .header .cart-header-button svg,
  body.ft-responsive-site .header .cart-button svg,
  body.ft-responsive-site .header .cart-button span,
  body.ft-responsive-site .header .cart-header-button span {
    font-size: 12px !important;
  }

  body.ft-responsive-site .hero {
    min-height: auto !important;
  }

  body.ft-responsive-site .hero h1 {
    font-size: clamp(40px, 12vw, 58px) !important;
  }

  body.ft-responsive-site .hero p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  body.ft-responsive-site .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.ft-responsive-site .hero-actions > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.ft-responsive-site .hero-meta,
  body.ft-responsive-site .trust-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-site .hero-meta > *,
  body.ft-responsive-site .trust-grid > * {
    border-right: 0 !important;
  }

  body.ft-responsive-site .collection-grid,
  body.ft-responsive-site .product-grid,
  body.ft-responsive-site .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-site .collection-card {
    min-height: 190px !important;
    padding: 24px !important;
  }

  body.ft-responsive-site .collection-card strong {
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  body.ft-responsive-site .section-heading.inline,
  body.ft-responsive-site .section-heading.split {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.ft-responsive-site .section-heading h2,
  body.ft-responsive-site .about h2,
  body.ft-responsive-site .offer h2,
  body.ft-responsive-site .newsletter h2 {
    font-size: clamp(36px, 11vw, 50px) !important;
  }

  body.ft-responsive-site .product-card {
    width: 100% !important;
  }

  body.ft-responsive-site .product-options,
  body.ft-responsive-site .quick-view-options,
  body.ft-responsive-site .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-site .product-bottom {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.ft-responsive-site .product-bottom .add-button,
  body.ft-responsive-site .product-bottom button {
    width: 100% !important;
  }

  body.ft-responsive-site .quick-view-card,
  body.ft-responsive-site .modal-card,
  body.ft-responsive-site .auth-modal-card,
  body.ft-responsive-site .info-modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding:
      calc(58px + env(safe-area-inset-top))
      16px
      calc(22px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
  }

  body.ft-responsive-site .modal {
    padding: 0 !important;
  }

  body.ft-responsive-site .modal-close,
  body.ft-responsive-site [class*="modal-close"],
  body.ft-responsive-site #closeQuickView {
    position: fixed !important;
    z-index: 10070 !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  body.ft-responsive-site .quick-view-gallery img,
  body.ft-responsive-site .quick-view-main-image {
    max-height: 52dvh !important;
    object-fit: contain !important;
  }

  body.ft-responsive-site .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  body.ft-responsive-site .cart-item img {
    width: 64px !important;
    height: 64px !important;
  }

  body.ft-responsive-site .newsletter form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.ft-responsive-site .newsletter input {
    min-height: 48px !important;
    border-right-width: 1px !important;
  }

  body.ft-responsive-admin .admin-main,
  body.ft-responsive-admin .ft-admin-main {
    padding-inline: 12px !important;
  }

  body.ft-responsive-admin .admin-title-row h1,
  body.ft-responsive-admin .page-header h1,
  body.ft-responsive-admin [class*="title-row"] h1,
  body.ft-responsive-admin [class*="page-header"] h1 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.05 !important;
  }

  body.ft-responsive-admin .admin-card,
  body.ft-responsive-admin .order-card,
  body.ft-responsive-admin [class*="card"] {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  body.ft-responsive-admin .stats-grid,
  body.ft-responsive-admin .summary-grid,
  body.ft-responsive-admin [class*="stats-grid"],
  body.ft-responsive-admin [class*="summary-grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-admin .form-actions,
  body.ft-responsive-admin .table-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.ft-responsive-admin .form-actions > *,
  body.ft-responsive-admin .table-actions > * {
    width: 100% !important;
  }

  body.ft-responsive-admin .check-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.ft-responsive-admin .order-item-line {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  body.ft-responsive-admin .ft-theme-presets,
  body.ft-responsive-admin .ft-theme-controls,
  body.ft-responsive-admin .ft-theme-selects,
  body.ft-responsive-admin .ft-theme-overlay__top-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ft-responsive-admin .ft-theme-overlay {
    padding: 8px !important;
  }

  body.ft-responsive-admin .ft-theme-overlay__panel {
    padding: 15px !important;
    border-radius: 17px !important;
  }
}

@media (max-width: 430px) {
  body.ft-responsive-site .container,
  body.ft-responsive-site [class*="container"] {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }

  body.ft-responsive-site .brand span {
    display: none !important;
  }

  body.ft-responsive-site .header .nav,
  body.ft-responsive-site #siteHeader .nav {
    gap: 6px !important;
  }

  body.ft-responsive-site .header .icon-button,
  body.ft-responsive-site .header .profile-button,
  body.ft-responsive-site .header .cart-header-button,
  body.ft-responsive-site .header .cart-button,
  body.ft-responsive-site .ft-public-mobile-toggle,
  body.ft-responsive-site .menu-toggle {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  body.ft-responsive-site .hero h1 {
    font-size: clamp(38px, 12.5vw, 52px) !important;
  }

  body.ft-responsive-site .section {
    padding-block: 54px !important;
  }

  body.ft-responsive-site .product-info {
    padding: 16px !important;
  }

  body.ft-responsive-site .drawer-head,
  body.ft-responsive-site .drawer-body,
  body.ft-responsive-site .drawer-footer {
    padding-inline: 14px !important;
  }

  body.ft-responsive-admin .ft-admin-sidebar {
    width: min(90vw, 310px) !important;
  }

  .ft-admin-mobile-brand {
    max-width: calc(100vw - 72px);
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  body.ft-responsive-site .header .icon-button,
  body.ft-responsive-site .header .profile-button {
    display: none !important;
  }

  body.ft-responsive-site .hero h1 {
    font-size: 37px !important;
  }

  body.ft-responsive-site .button,
  body.ft-responsive-site .btn,
  body.ft-responsive-site button {
    padding-inline: 12px !important;
  }

  body.ft-responsive-admin .admin-card,
  body.ft-responsive-admin .order-card,
  body.ft-responsive-admin [class*="card"] {
    padding: 13px !important;
  }
}

/* Landscape phones and devices with small height. */
@media (max-height: 520px) and (orientation: landscape) {
  body.ft-responsive-site .nav-links {
    inset-top: 58px !important;
    max-height: calc(100dvh - 68px) !important;
  }

  body.ft-responsive-site .quick-view-card,
  body.ft-responsive-site .modal-card {
    max-height: 100dvh !important;
  }

  body.ft-responsive-admin .ft-admin-sidebar {
    padding-top: 10px !important;
  }
}

/* Safe areas on iPhone and Android devices with display cutouts. */
@supports (padding: max(0px)) {
  body.ft-responsive-site .header .nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  body.ft-responsive-site .drawer-footer {
    padding-bottom: max(20px, calc(14px + env(safe-area-inset-bottom)));
  }
}


/* ==========================================================
   v6.2.2: announcement alignment + crisp mobile navigation
   ========================================================== */

/* The backdrop must stay below the sticky header and must not blur the menu. */
.ft-public-mobile-backdrop {
  z-index: 9990 !important;
  background: rgba(9, 13, 24, .36) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 900px) {
  body.ft-responsive-site .header,
  body.ft-responsive-site #siteHeader {
    z-index: 10000 !important;
    isolation: isolate !important;
  }

  body.ft-responsive-site .nav-links {
    z-index: 10020 !important;
    inset:
      calc(70px + env(safe-area-inset-top))
      10px
      auto
      10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top)) !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: 0 22px 60px rgba(10, 14, 24, .25) !important;
    filter: none !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  }

  body.ft-responsive-site.ft-theme-dark .nav-links {
    color: var(--ft-text, #f6f7ff) !important;
    border-color: var(--ft-line, rgba(255,255,255,.16)) !important;
    background: color-mix(
      in srgb,
      var(--ft-header, #171c35) 97%,
      #080b16
    ) !important;
  }

  body.ft-responsive-site .nav-links a {
    color: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.ft-responsive-site .nav-links a::after {
    display: none !important;
  }

  body.ft-public-nav-open main,
  body.ft-public-nav-open footer,
  body.ft-public-nav-open .site-announcement {
    filter: none !important;
  }
}

/* Announcement: do not let the action grow across half of the banner. */
body.ft-responsive-site .site-announcement {
  width: 100% !important;
  max-width: 100vw !important;
}

body.ft-responsive-site .site-announcement .announcement-inner {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
}

body.ft-responsive-site .site-announcement .announcement-icon,
body.ft-responsive-site .site-announcement:not([data-layout="image"]) .announcement-image {
  flex: 0 0 auto !important;
}

body.ft-responsive-site .site-announcement .announcement-copy {
  flex: 1 1 460px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 650px !important;
}

body.ft-responsive-site .site-announcement .announcement-copy strong,
body.ft-responsive-site .site-announcement .announcement-copy span {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

body.ft-responsive-site .site-announcement .announcement-action {
  flex: 0 0 clamp(180px, 18vw, 270px) !important;
  width: auto !important;
  min-width: 180px !important;
  max-width: 270px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

body.ft-responsive-site .site-announcement .announcement-close {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tablet: text on the first row, action below without overflow. */
@media (max-width: 900px) {
  body.ft-responsive-site .site-announcement .announcement-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon copy close"
      "action action action" !important;
    justify-content: stretch !important;
    gap: 10px 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body.ft-responsive-site .site-announcement .announcement-icon {
    grid-area: icon !important;
  }

  body.ft-responsive-site .site-announcement .announcement-image {
    display: none !important;
  }

  body.ft-responsive-site .site-announcement .announcement-copy {
    grid-area: copy !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.ft-responsive-site .site-announcement .announcement-action {
    grid-area: action !important;
    justify-self: start !important;
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    max-width: 360px !important;
    margin: 0 !important;
  }

  body.ft-responsive-site .site-announcement .announcement-close {
    grid-area: close !important;
    align-self: start !important;
  }
}

/* Phones: one compact readable card, full-width action. */
@media (max-width: 620px) {
  body.ft-responsive-site .site-announcement .announcement-inner {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    grid-template-columns: 40px minmax(0, 1fr) 36px !important;
    gap: 9px 10px !important;
    padding: 10px 0 !important;
  }

  body.ft-responsive-site .site-announcement .announcement-icon {
    width: 40px !important;
    height: 40px !important;
  }

  body.ft-responsive-site .site-announcement .announcement-copy strong {
    font-size: clamp(20px, 6.2vw, 25px) !important;
    line-height: 1.02 !important;
  }

  body.ft-responsive-site .site-announcement .announcement-copy span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.ft-responsive-site .site-announcement .announcement-action {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
  }

  body.ft-responsive-site .site-announcement .announcement-close {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 380px) {
  body.ft-responsive-site .site-announcement .announcement-inner {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    grid-template-areas:
      "copy close"
      "action action" !important;
  }

  body.ft-responsive-site .site-announcement .announcement-icon {
    display: none !important;
  }
}