:root {
  --meta-primary: #0064e0;
  --meta-primary-deep: #0457cb;
  --meta-primary-soft: #0091ff;
  --meta-on-primary: #fff;
  --meta-ink-button: #000;
  --meta-on-ink-button: #fff;
  --meta-fb-blue: #1876f2;
  --meta-link: #385898;
  --meta-purple: #a121ce;
  --meta-success: #31a24c;
  --meta-success-bg: #24e400;
  --meta-attention: #f2a918;
  --meta-warning: #f7b928;
  --meta-warning-bg: #ffe200;
  --meta-critical: #e41e3f;
  --meta-critical-strong: #f0284a;
  --meta-canvas: #fff;
  --meta-surface-soft: #f1f4f7;
  --meta-ink-deep: #0a1317;
  --meta-ink: #1c1e21;
  --meta-charcoal: #444950;
  --meta-slate: #4b4c4f;
  --meta-steel: #5d6c7b;
  --meta-stone: #8595a4;
  --meta-hairline: #ced0d4;
  --meta-hairline-soft: #dee3e9;
  --meta-disabled: #bcc0c4;
  --meta-r-xs: 2px;
  --meta-r-sm: 4px;
  --meta-r-md: 6px;
  --meta-r-lg: 8px;
  --meta-r-xl: 16px;
  --meta-r-xxl: 24px;
  --meta-r-xxxl: 32px;
  --meta-r-feature: 40px;
  --meta-r-full: 100px;
  --meta-r-circle: 9999px;
  --meta-s-xxs: 4px;
  --meta-s-xs: 8px;
  --meta-s-sm: 10px;
  --meta-s-md: 12px;
  --meta-s-base: 16px;
  --meta-s-lg: 20px;
  --meta-s-xl: 24px;
  --meta-s-xxl: 32px;
  --meta-s-xxxl: 40px;
  --meta-s-section-sm: 48px;
  --meta-s-section: 64px;
  --meta-s-section-lg: 80px;
  --meta-s-hero: 120px;
  --meta-font: 'Optimistic VF', Montserrat, Helvetica, Arial, 'Noto Sans', sans-serif;
  --meta-break-mobile: 480px;
  --meta-break-tablet: 768px;
  --meta-break-desktop: 1024px;
  --meta-break-wide: 1360px
}

.home-page {
  font-family: var(--meta-font);
  color: #0a1317;
  background: #fff
}

.home-page * {
  box-sizing: border-box
}

.home-page h1,
.home-page h2,
.home-page h3 {
  font-family: var(--meta-font);
  font-feature-settings: "ss01", "ss02";
  font-weight: 500;
  color: #0a1317
}

.home-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: #5d6c7b;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 8px
}

.home-hero {
  max-width: 1280px;
  margin: auto;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px
}

.home-hero h1 {
  font-size: 64px;
  line-height: 1.16;
  margin: 0 0 24px
}

.home-lead {
  font-size: 18px;
  line-height: 1.44;
  margin: 0 0 32px
}

.home-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.home-note {
  color: #5d6c7b;
  font-size: 14px
}

.home-hero-image {
  aspect-ratio: 4/3;
  background: #f1f4f7;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.home-hero-image img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain
}

.home-page .meta-button {
  border-radius: 100px;
  min-height: 48px;
  padding: 14px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer
}

.home-page a:focus-visible,
.home-page button:focus-visible,
.home-page input:focus-visible,
.home-page summary:focus-visible {
  outline: 3px solid #1876f2;
  outline-offset: 3px
}

.home-page .meta-primary {
  background: #000;
  border: 2px solid #000;
  color: #fff
}

.home-page .meta-secondary {
  background: transparent;
  border: 2px solid #0a1317;
  color: #0a1317;
  padding: 12px 28px
}

.home-page .meta-buy {
  background: #0064e0;
  border: 2px solid #0064e0;
  color: #fff
}

.home-trust {
  max-width: 1216px;
  margin: auto;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid #dee3e9
}

.home-trust>div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px
}

.home-trust strong,
.home-trust small {
  display: block
}

.home-trust small {
  font-size: 12px;
  color: #5d6c7b
}

.home-section,
.home-spotlight,
.home-newsletter {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px 0
}

.home-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 32px
}

.home-heading h2,
.home-spotlight h2,
.home-newsletter h2 {
  font-size: 48px;
  line-height: 1.17;
  margin: 0
}

.home-heading>a {
  font-weight: 700;
  color: #0a1317
}

.home-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px
}

.home-products .product-card {
  border: 1px solid #dee3e9 !important;
  border-radius: 32px !important;
  box-shadow: none !important;
  overflow: hidden
}

.home-products .product-img-wrap {
  aspect-ratio: 1;
  height: auto !important;
  background: #f1f4f7 !important;
  padding: 16px !important
}

.home-products .card-body {
  padding: 24px !important
}

.home-products .add-to-cart-form button {
  background: #0064e0 !important;
  color: #fff !important;
  border: 0 !important;
  min-height: 44px
}

.home-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.home-benefits article {
  border: 1px solid #dee3e9;
  border-radius: 16px;
  padding: 24px
}

.home-benefits article>span {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #f1f4f7;
  margin-bottom: 16px
}

.home-benefits h3 {
  font-size: 18px
}

.home-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center
}

.home-spotlight-image {
  aspect-ratio: 4/3;
  background: #f1f4f7;
  border-radius: 32px;
  overflow: hidden
}

.home-spotlight-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px
}

.home-price {
  display: block;
  font-size: 24px;
  margin: 16px 0 24px
}

.home-offer {
  max-width: 1200px;
  margin: 80px auto 0;
  padding: 64px 40px;
  background: #0a1317;
  color: #fff;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.home-offer h2 {
  color: #fff
}

.home-faq-item {
  border: 1px solid #dee3e9;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 12px
}

.home-faq-item summary {
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none
}

.home-faq-item p {
  font-size: 16px;
  line-height: 1.5;
  margin: 16px 0 0;
  color: #444950
}

.home-newsletter {
  margin-bottom: 80px;
  background: #f1f4f7;
  border-radius: 32px;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px
}

.home-newsletter h2 {
  font-size: 36px
}

.home-newsletter form {
  display: flex;
  gap: 8px;
  min-width: min(100%, 480px)
}

.home-newsletter input {
  height: 48px;
  flex: 1;
  border: 1px solid #ced0d4;
  border-radius: 8px;
  padding: 12px;
  font: inherit
}

body.home-storefront .topbar,
body.home-storefront .cat-nav {
  background: #fff !important;
  border-bottom: 1px solid #dee3e9;
  color: #0a1317
}

body.home-storefront .topbar {
  position: sticky;
  top: 0
}

body.home-storefront .topbar .navbar-brand,
body.home-storefront .topbar .nav-link,
body.home-storefront .cat-nav .nav-link,
body.home-storefront .topbar .nav-signin-btn {
  color: #0a1317 !important
}

body.home-storefront .topbar .search-form {
  background: #f1f4f7;
  border-radius: 100px;
  box-shadow: none
}

body.home-storefront .topbar .search-cat,
body.home-storefront .topbar .search-input {
  background: transparent
}

body.home-storefront .topbar .nav-cart-btn {
  color: #0a1317 !important
}

body.home-storefront .topbar .navbar-brand .brand-icon {
  color: #0064e0
}

body.home-storefront .footer,
body.home-storefront .footer-bottom {
  background: #fff !important;
  color: #5d6c7b !important
}

body.home-storefront .footer a {
  color: #5d6c7b !important
}

@media(max-width:1023px) {
  .home-hero {
    padding: 64px 24px
  }

  .home-products {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .home-benefits {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:767px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: 48px 16px;
    gap: 24px
  }

  .home-hero h1 {
    font-size: 36px
  }

  .home-trust {
    grid-template-columns: 1fr
  }

  .home-trust>div {
    justify-content: flex-start
  }

  .home-section,
  .home-spotlight {
    padding-left: 16px;
    padding-right: 16px
  }

  .home-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .home-heading h2,
  .home-spotlight h2 {
    font-size: 36px
  }

  .home-benefits,
  .home-spotlight {
    grid-template-columns: 1fr
  }

  .home-offer,
  .home-newsletter {
    margin: 0 16px;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px
  }

  .home-newsletter form {
    min-width: 100%;
    flex-direction: column
  }
}

@media(max-width:479px) {
  .home-hero h1 {
    font-size: 24px
  }

  .home-actions {
    flex-direction: column
  }

  .home-actions .meta-button {
    width: 100%
  }

  .home-products {
    gap: 12px
  }

  .home-products .card-body {
    padding: 16px !important
  }
}

/* Shared components: tokenized Meta commerce patterns */
:root {
  --meta-type-hero: 64px;
  --meta-type-display: 48px;
  --meta-type-heading-lg: 36px;
  --meta-type-heading-md: 28px;
  --meta-type-heading-sm: 24px;
  --meta-type-subtitle: 18px;
  --meta-type-body: 16px;
  --meta-type-small: 14px;
  --meta-type-caption: 12px;
  --meta-line-hero: 1.16;
  --meta-line-display: 1.17;
  --meta-line-heading-lg: 1.28;
  --meta-line-heading-md: 1.21;
  --meta-line-heading-sm: 1.25;
  --meta-line-subtitle: 1.44;
  --meta-line-body: 1.5;
  --meta-line-small: 1.43;
  --meta-line-caption: 1.33;
  --meta-letter-body: -.16px;
  --meta-letter-small: -.14px;
}

body .topbar,
body .cat-nav {
  background: var(--meta-canvas) !important;
  color: var(--meta-ink-deep) !important;
  border-color: var(--meta-hairline-soft) !important
}

body .topbar {
  padding: 8px 0
}

body .topbar .navbar-brand,
body .topbar .brand-text,
body .topbar .nav-actions a:not(.nav-register-btn),
body .topbar .deliver-to,
body .topbar .deliver-to strong,
body .cat-nav .nav-link {
  color: var(--meta-ink-deep) !important
}

body .topbar .nav-actions a.nav-register-btn,
body .topbar .nav-actions .nav-register-btn {
  background-color: var(--meta-ink-button) !important;
  color: var(--meta-on-ink-button) !important;
  border: 1px solid var(--meta-ink-button) !important;
  border-radius: var(--meta-r-full) !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  text-decoration: none !important
}

body .topbar .nav-actions a.nav-register-btn:hover,
body .topbar .nav-actions .nav-register-btn:hover {
  background-color: var(--meta-charcoal) !important;
  color: var(--meta-on-ink-button) !important;
  border-color: var(--meta-charcoal) !important
}

body .topbar .navbar-brand {
  font-family: var(--meta-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px
}

body .topbar .navbar-brand .brand-icon {
  color: var(--meta-primary) !important
}

body .topbar .navbar-brand:hover,
body .topbar .nav-actions>a:hover {
  border-color: var(--meta-hairline) !important
}

body .topbar .search-form {
  height: 44px;
  border: 1px solid var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-full) !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  overflow: hidden
}

body:not(.admin-body) .topbar select.search-cat,
body .topbar .search-cat {
  border: 0 !important;
  border-right: 1px solid var(--meta-hairline-soft) !important;
  background: transparent !important;
  color: var(--meta-steel) !important;
  min-height: auto !important;
  height: 100% !important;
  border-radius: 0 !important;
  padding: 0 8px 0 14px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer
}

body:not(.admin-body) .topbar .search-input,
body .topbar .search-input {
  font: 400 var(--meta-type-small)/var(--meta-line-small) var(--meta-font);
  letter-spacing: var(--meta-letter-small);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
  height: 100% !important;
  padding: 0 14px !important;
  outline: none !important
}

body .topbar .search-btn {
  background: transparent !important;
  color: var(--meta-ink) !important;
  border-radius: var(--meta-r-full);
  width: 44px;
  border: 0 !important;
  box-shadow: none !important
}

body .topbar .search-form:focus-within {
  border-color: var(--meta-primary) !important;
  outline: 2px solid var(--meta-fb-blue);
  outline-offset: 2px;
  background: var(--meta-canvas) !important
}

body .topbar .deliver-to {
  border: 0
}

body .topbar .deliver-to span {
  color: var(--meta-steel) !important
}

body .topbar .nav-actions>a,
body .topbar .nav-signin-btn {
  border-radius: var(--meta-r-full) !important
}

body .topbar #cart-link {
  min-height: 44px;
  padding: 8px 12px
}

body .topbar #cart-badge {
  background: var(--meta-primary) !important;
  color: var(--meta-on-primary);
  font-size: var(--meta-type-caption) !important;
  min-width: 20px;
  text-align: center
}

body .cat-nav {
  padding: 4px 10px
}

body .cat-nav .navbar-nav {
  gap: 8px
}

body .cat-nav .navbar-nav .nav-link {
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font);
  letter-spacing: var(--meta-letter-small);
  padding: 8px 16px;
  margin: 0;
  border: 1px solid var(--meta-hairline);
  border-radius: var(--meta-r-full)
}

body .cat-nav .navbar-nav .nav-link:hover,
body .cat-nav .navbar-nav .nav-link:focus-visible {
  background: var(--meta-ink-deep);
  border-color: var(--meta-ink-deep);
  color: var(--meta-canvas) !important
}

body .topbar a:focus-visible,
body .cat-nav a:focus-visible,
body .cat-nav button:focus-visible {
  outline: 3px solid var(--meta-fb-blue);
  outline-offset: 3px
}

body .cat-nav .navbar-toggler {
  border-radius: var(--meta-r-circle);
  color: var(--meta-ink-deep) !important
}

body .cat-nav .navbar-toggler i,
body .cat-nav .navbar-toggler span {
  color: var(--meta-ink-deep) !important
}

body .search-row-mobile {
  background: var(--meta-canvas) !important;
  padding: 8px 16px 12px
}

body .footer,
body .footer-bottom,
body .footer>div:nth-child(2) {
  background: var(--meta-canvas) !important;
  color: var(--meta-steel) !important
}

body .footer {
  border-top: 1px solid var(--meta-hairline-soft);
  margin-top: 0 !important
}

body .footer-top {
  background: var(--meta-canvas) !important;
  border-bottom: 1px solid var(--meta-hairline-soft) !important
}

body .footer-top a,
body .footer a,
body .footer .text-muted {
  color: var(--meta-steel) !important
}

body .footer h6 {
  color: var(--meta-ink) !important;
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font) !important
}

body .footer-bottom {
  border-top: 1px solid var(--meta-hairline-soft);
  font: 400 var(--meta-type-caption)/var(--meta-line-caption) var(--meta-font)
}

body .footer .btn {
  border-radius: var(--meta-r-full)
}

body .footer input[type=email] {
  height: 44px;
  border: 1px solid var(--meta-hairline);
  border-radius: var(--meta-r-lg) !important
}

body .footer form button {
  background: var(--meta-ink-button) !important;
  border-color: var(--meta-ink-button) !important;
  color: var(--meta-on-ink-button) !important;
  border-radius: var(--meta-r-full) !important
}

.product-card {
  position: relative;
  background: var(--meta-canvas) !important;
  border: 1px solid var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-xxxl) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: none !important
}

.product-card:hover {
  transform: none !important;
  box-shadow: none !important
}

.product-card .product-card-media {
  position: relative;
  aspect-ratio: 1;
  background: var(--meta-surface-soft)
}

.product-card .product-card-image-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--meta-space-base)
}

.product-card .product-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.product-card .product-card-badges {
  position: absolute;
  z-index: 2;
  top: var(--meta-space-md);
  left: var(--meta-space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  pointer-events: none;
}

.product-card .product-card-badge {
  position: static;
  border-radius: var(--meta-r-full);
  padding: 4px 10px;
  font: 700 var(--meta-type-caption)/var(--meta-line-caption) var(--meta-font);
  display: inline-block;
  white-space: nowrap;
}

.product-card > .product-card-badge,
.product-card-media > .product-card-badge {
  position: absolute;
  z-index: 2;
  top: var(--meta-space-md);
  left: var(--meta-space-md);
}

.product-card .product-card-badge-promo {
  background: var(--meta-warning);
  color: var(--meta-ink-deep);
}

.product-card .product-card-badge-best {
  background: var(--meta-success);
  color: var(--meta-canvas);
}

.product-card .product-card-wishlist {
  position: absolute;
  z-index: 3;
  right: var(--meta-space-md);
  top: var(--meta-space-md);
  width: 38px;
  height: 38px;
  border-radius: var(--meta-r-circle);
  background: var(--meta-canvas);
  border: 1px solid var(--meta-hairline-soft);
  color: var(--meta-ink);
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform var(--meta-duration-quick) var(--meta-ease), background var(--meta-duration-quick) var(--meta-ease);
}

.product-card .product-card-wishlist:hover {
  transform: scale(1.08);
  background: var(--meta-surface-soft);
  color: var(--meta-critical-strong);
}

.product-card .product-card-body {
  display: flex;
  flex-direction: column;
  padding: var(--meta-space-xxl);
  background: var(--meta-canvas)
}

.product-card .product-card-name-link {
  color: var(--meta-ink-deep);
  text-decoration: none
}

.product-card .product-name {
  font: 500 var(--meta-type-heading-sm)/var(--meta-line-heading-sm) var(--meta-font);
  font-feature-settings: "ss01", "ss02";
  color: var(--meta-ink-deep);
  margin: 0 0 var(--meta-space-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.product-card .product-card-rating {
  display: flex;
  align-items: center;
  gap: var(--meta-space-xs);
  font-size: var(--meta-type-small);
  line-height: var(--meta-line-small);
  margin-bottom: var(--meta-space-base)
}

.product-card .product-card-stars {
  color: var(--meta-ink)
}

.product-card .product-card-review-count,
.product-card .product-card-original-price {
  color: var(--meta-steel);
  font-size: var(--meta-type-caption);
  line-height: var(--meta-line-caption)
}

.product-card .product-card-price-block {
  margin-top: auto
}

.product-card .product-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.product-card .product-card-price {
  color: var(--meta-ink);
  font: 700 20px/1.2 var(--meta-font);
  white-space: nowrap;
}

.product-card .product-card-original-price {
  color: var(--meta-steel);
  font-size: 13px;
  line-height: 1;
  text-decoration: line-through;
  margin-top: 0;
  white-space: nowrap;
}

.product-card .product-card-original-price span {
  text-decoration: line-through;
}

.product-card .product-card-discount-text {
  color: #388e3c;
  font: 700 13px/1 var(--meta-font);
  white-space: nowrap;
}

.product-card .product-card-flash {
  font-size: var(--meta-type-caption);
  font-weight: 700;
  color: var(--meta-deep);
  margin-top: var(--meta-space-xs)
}

.product-card .add-to-cart-form {
  margin-top: var(--meta-space-base)
}

.product-card .product-card-add {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--meta-r-full);
  background: var(--meta-primary);
  color: var(--meta-on-primary);
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font);
  letter-spacing: var(--meta-letter-small);
  padding: 14px 30px;
  cursor: pointer
}

.product-card .product-card-add:active {
  background: var(--meta-primary-deep)
}

.product-card .product-card-add:disabled {
  background: var(--meta-disabled);
  color: var(--meta-canvas);
  cursor: not-allowed
}

.product-card button:focus-visible,
.product-card a:focus-visible {
  outline: 3px solid var(--meta-fb-blue);
  outline-offset: 3px
}

@media(max-width:767px) {
  body .cat-nav.navbar-expand-md {
    padding-inline: 8px
  }

  .product-card .product-card-body {
    padding: var(--meta-space-xl)
  }
}

@media(max-width:479px) {
  .product-card .product-card-body {
    padding: var(--meta-space-base)
  }

  .product-card .product-name {
    font-size: 18px
  }
}


:root {
  --meta-space-xxs: var(--meta-s-xxs);
  --meta-space-xs: var(--meta-s-xs);
  --meta-space-sm: var(--meta-s-sm);
  --meta-space-md: var(--meta-s-md);
  --meta-space-base: var(--meta-s-base);
  --meta-space-lg: var(--meta-s-lg);
  --meta-space-xl: var(--meta-s-xl);
  --meta-space-xxl: var(--meta-s-xxl);
  --meta-space-xxxl: var(--meta-s-xxxl);
  --meta-radius-xs: var(--meta-r-xs);
  --meta-radius-sm: var(--meta-r-sm);
  --meta-radius-md: var(--meta-r-md);
  --meta-radius-lg: var(--meta-r-lg);
  --meta-radius-xl: var(--meta-r-xl);
  --meta-radius-xxl: var(--meta-r-xxl);
  --meta-radius-xxxl: var(--meta-r-xxxl);
  --meta-radius-full: var(--meta-r-full);
  --meta-radius-circle: var(--meta-r-circle);
  --meta-deep: var(--meta-ink-deep)
}

body .topbar .nav-actions .btn,
body .topbar .nav-actions .nav-signin-btn,
body .topbar .nav-actions .nav-register-btn {
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center
}

body .topbar .nav-actions .btn i,
body .topbar .nav-actions .nav-signin-btn i {
  font-size: 18px !important
}

body .topbar .nav-actions #cart-link i {
  font-size: 20px !important
}

body .cat-nav .nav-link.active {
  background: var(--meta-ink-deep);
  border-color: var(--meta-ink-deep);
  color: var(--meta-canvas) !important
}

body .cat-nav .navbar-collapse.show {
  background: var(--meta-canvas);
  border-top: 1px solid var(--meta-hairline-soft)
}

body .footer .row {
  align-items: start
}

body .footer .footer-bottom img {
  max-width: 100%;
  height: auto
}

body .footer .text-warning {
  color: var(--meta-steel) !important
}

@media(max-width:767px) {

  body .topbar .nav-actions .btn,
  body .topbar .nav-actions .nav-signin-btn,
  body .topbar .nav-actions .nav-register-btn {
    min-width: 44px;
    min-height: 44px
  }

  /* Best seller badge is at bottom-left — no offset needed on mobile */
}

/* Shared tokens and components for operations surfaces */
body.admin-body {
  background: var(--meta-canvas);
  color: var(--meta-ink);
  font-family: var(--meta-font);
  font-size: var(--meta-type-body);
  line-height: var(--meta-line-body)
}

body.admin-body h1,
body.admin-body h2,
body.admin-body h3,
body.admin-body h4,
body.admin-body h5,
body.admin-body h6 {
  font-family: var(--meta-font);
  font-feature-settings: "ss01", "ss02";
  font-weight: 500;
  color: var(--meta-ink-deep)
}

body.admin-body .admin-sidebar {
  background: var(--meta-canvas) !important;
  color: var(--meta-ink) !important;
  border-right: 1px solid var(--meta-hairline-soft)
}

body.admin-body .sidebar-header {
  border-color: var(--meta-hairline-soft) !important
}

body.admin-body .sidebar-header a,
body.admin-body .sidebar-header .text-warning {
  color: var(--meta-ink-deep) !important
}

body.admin-body .sidebar-group-label {
  color: var(--meta-steel) !important;
  font: 700 var(--meta-type-caption)/var(--meta-line-caption) var(--meta-font) !important;
  letter-spacing: .04em !important
}

body.admin-body .sidebar-link {
  color: var(--meta-charcoal) !important;
  border-radius: var(--meta-r-full) !important;
  font: 400 var(--meta-type-small)/var(--meta-line-small) var(--meta-font)
}

body.admin-body .sidebar-link:hover,
body.admin-body .sidebar-link.active {
  background: var(--meta-ink-deep) !important;
  color: var(--meta-canvas) !important
}

body.admin-body .sidebar-link:focus-visible,
body.admin-body button:focus-visible,
body.admin-body a:focus-visible,
body.admin-body input:focus-visible,
body.admin-body select:focus-visible,
body.admin-body textarea:focus-visible {
  outline: 3px solid var(--meta-fb-blue);
  outline-offset: 2px
}

body.admin-body .admin-main {
  background: var(--meta-canvas)
}

body.admin-body .admin-topbar {
  background: var(--meta-canvas) !important;
  border-color: var(--meta-hairline-soft) !important;
  box-shadow: none !important
}

body.admin-body .admin-topbar .badge {
  color: var(--meta-ink) !important;
  border-radius: var(--meta-r-full)
}

body.admin-body .admin-content {
  background: var(--meta-canvas)
}

body.admin-body .card,
body.admin-body .modal-content {
  background: var(--meta-canvas);
  border: 1px solid var(--meta-hairline-soft);
  border-radius: var(--meta-r-xl);
  box-shadow: none
}

body.admin-body .card-header {
  background: var(--meta-canvas);
  border-bottom: 1px solid var(--meta-hairline-soft)
}

body.admin-body .btn {
  border-radius: var(--meta-r-full);
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font);
  letter-spacing: var(--meta-letter-small);
  min-height: 44px;
  padding: 12px 22px
}

body.admin-body .btn-primary {
  background: var(--meta-ink-button) !important;
  border-color: var(--meta-ink-button) !important;
  color: var(--meta-on-ink-button) !important
}

body.admin-body .btn-primary:active {
  background: var(--meta-charcoal) !important
}

body.admin-body .btn-secondary,
body.admin-body .btn-outline-secondary {
  background: transparent !important;
  border: 2px solid rgba(10, 19, 23, .12) !important;
  color: var(--meta-ink-deep) !important
}

body.admin-body .btn-warning {
  background: var(--meta-warning) !important;
  border-color: var(--meta-warning) !important;
  color: var(--meta-ink-deep) !important
}

body.admin-body .btn-danger {
  background: var(--meta-critical) !important;
  border-color: var(--meta-critical) !important;
  color: var(--meta-canvas) !important
}

body.admin-body .btn-success {
  background: var(--meta-success) !important;
  border-color: var(--meta-success) !important;
  color: var(--meta-canvas) !important
}

body.admin-body .form-control,
body.admin-body .form-select,
body.admin-body textarea {
  background: var(--meta-canvas);
  border: 1px solid var(--meta-hairline);
  border-radius: var(--meta-r-lg);
  color: var(--meta-ink);
  font: 400 var(--meta-type-body)/var(--meta-line-body) var(--meta-font);
  min-height: 44px;
  padding: var(--meta-space-md)
}

body.admin-body .form-control:focus,
body.admin-body .form-select:focus,
body.admin-body textarea:focus {
  border: 2px solid var(--meta-fb-blue);
  box-shadow: none
}

body.admin-body .form-control.is-invalid,
body.admin-body .form-select.is-invalid {
  border-color: var(--meta-critical-strong)
}

body.admin-body .form-text,
body.admin-body .text-muted {
  color: var(--meta-steel) !important
}

body.admin-body .table-responsive {
  border: 1px solid var(--meta-hairline-soft);
  border-radius: var(--meta-r-lg);
  background: var(--meta-canvas)
}

body.admin-body .table {
  --bs-table-color: var(--meta-ink);
  --bs-table-bg: var(--meta-canvas);
  --bs-table-border-color: var(--meta-hairline-soft);
  font: 400 var(--meta-type-small)/var(--meta-line-small) var(--meta-font);
  margin-bottom: 0
}

body.admin-body .table thead th {
  background: var(--meta-surface-soft);
  color: var(--meta-ink);
  font-weight: 700
}

body.admin-body .table th,
body.admin-body .table td {
  padding: var(--meta-space-md);
  vertical-align: middle
}

body.admin-body .badge {
  border-radius: var(--meta-r-full);
  font: 700 var(--meta-type-caption)/var(--meta-line-caption) var(--meta-font);
  padding: 4px 10px
}

body.admin-body .badge.bg-warning {
  background: var(--meta-warning) !important;
  color: var(--meta-ink-deep) !important
}

body.admin-body .badge.bg-success {
  background: var(--meta-success) !important;
  color: var(--meta-canvas) !important
}

body.admin-body .badge.bg-danger {
  background: var(--meta-critical) !important;
  color: var(--meta-canvas) !important
}

body.admin-body .alert {
  border-radius: var(--meta-r-xl);
  border-color: var(--meta-hairline-soft);
  font: 400 var(--meta-type-body)/var(--meta-line-body) var(--meta-font)
}

body.admin-body .alert-success {
  background: var(--meta-canvas);
  color: var(--meta-success)
}

body.admin-body .alert-warning {
  background: var(--meta-warning-bg);
  color: var(--meta-ink-deep)
}

body.admin-body .alert-danger {
  background: var(--meta-canvas);
  color: var(--meta-critical)
}

body.admin-body .modal-header,
body.admin-body .modal-footer {
  border-color: var(--meta-hairline-soft)
}

body.admin-body .dropdown-menu {
  border: 1px solid var(--meta-hairline-soft);
  border-radius: var(--meta-r-xl);
  box-shadow: none
}

@media(max-width:767px) {
  body.admin-body .admin-content {
    padding: var(--meta-space-base) !important
  }

  body.admin-body .admin-sidebar {
    box-shadow: none !important
  }
}

body:not(.admin-body) .btn {
  border-radius: var(--meta-r-full);
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font);
  letter-spacing: var(--meta-letter-small);
  min-height: 44px;
  padding: 12px 22px
}

body:not(.admin-body) .btn.btn-sm,
body:not(.admin-body) .btn-sm {
  min-height: 30px !important;
  height: 30px;
  padding: 0 14px !important;
  font-size: 13px !important;
  line-height: 28px !important;
  letter-spacing: normal !important;
}

/* Number input spinner reset for cleaner UI in filters */
input[type="number"].price-filter-input::-webkit-outer-spin-button,
input[type="number"].price-filter-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].price-filter-input {
  -moz-appearance: textfield;
  appearance: textfield;
}


body:not(.admin-body) .btn-primary {
  background: var(--meta-ink-button) !important;
  border-color: var(--meta-ink-button) !important;
  color: var(--meta-on-ink-button) !important
}

body:not(.admin-body) .btn-primary:active {
  background: var(--meta-charcoal) !important
}

body:not(.admin-body) .btn-secondary,
body:not(.admin-body) .btn-outline-secondary {
  background: transparent !important;
  border: 2px solid rgba(10, 19, 23, .12) !important;
  color: var(--meta-ink-deep) !important
}

body:not(.admin-body) .btn-warning {
  background: var(--meta-warning) !important;
  border-color: var(--meta-warning) !important;
  color: var(--meta-ink-deep) !important
}

body:not(.admin-body) .form-control,
body:not(.admin-body) .form-select {
  background: var(--meta-canvas);
  border: 1px solid var(--meta-hairline);
  border-radius: var(--meta-r-lg);
  color: var(--meta-ink);
  font: 400 var(--meta-type-body)/var(--meta-line-body) var(--meta-font);
  min-height: 44px;
  padding: var(--meta-space-md)
}

body:not(.admin-body) .form-control:focus,
body:not(.admin-body) .form-select:focus {
  border: 2px solid var(--meta-fb-blue);
  box-shadow: none
}

body:not(.admin-body) .card {
  border: 1px solid var(--meta-hairline-soft);
  border-radius: var(--meta-r-xl);
  box-shadow: none
}

body:not(.admin-body) .table {
  --bs-table-color: var(--meta-ink);
  --bs-table-bg: var(--meta-canvas);
  --bs-table-border-color: var(--meta-hairline-soft)
}

body:not(.admin-body) .badge {
  border-radius: var(--meta-r-full);
  font: 700 var(--meta-type-caption)/var(--meta-line-caption) var(--meta-font);
  padding: 4px 10px
}

body:not(.admin-body) .modal-content {
  background: var(--meta-canvas);
  border: 1px solid var(--meta-hairline-soft);
  border-radius: var(--meta-r-xl) !important;
  box-shadow: none !important
}

body:not(.admin-body) .modal-header,
body:not(.admin-body) .modal-footer {
  border-color: var(--meta-hairline-soft)
}

body:not(.admin-body) .alert {
  border-radius: var(--meta-r-xl);
  box-shadow: none !important
}

body:not(.admin-body) input:focus-visible,
body:not(.admin-body) select:focus-visible,
body:not(.admin-body) textarea:focus-visible,
body:not(.admin-body) button:focus-visible,
body:not(.admin-body) a:focus-visible {
  outline: 3px solid var(--meta-fb-blue);
  outline-offset: 2px
}

/* Storefront purchase flows and catalog surfaces */
body:not(.admin-body) .filter-panel,
body:not(.admin-body) .cart-items,
body:not(.admin-body) .order-summary {
  background: var(--meta-canvas) !important;
  border: 1px solid var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-xl) !important;
  box-shadow: none !important
}

body:not(.admin-body) .filter-panel {
  padding: var(--meta-space-base) !important
}

body:not(.admin-body) .cart-item {
  border-color: var(--meta-hairline-soft) !important
}

body:not(.admin-body) .cart-item img {
  border-radius: var(--meta-r-lg) !important;
  object-fit: cover
}

body:not(.admin-body) .order-summary {
  padding: var(--meta-space-xl) !important
}

body:not(.admin-body) .order-summary .table,
body:not(.admin-body) #checkoutForm .table {
  font-size: var(--meta-type-small);
  margin-bottom: var(--meta-space-base)
}

body:not(.admin-body) .order-summary .table td,
body:not(.admin-body) #checkoutForm .table td {
  padding: var(--meta-space-sm) var(--meta-space-xs)
}

body:not(.admin-body) .btn-warning {
  background: var(--meta-primary) !important;
  border-color: var(--meta-primary) !important;
  color: var(--meta-on-primary) !important
}

body:not(.admin-body) .btn-warning:hover,
body:not(.admin-body) .btn-warning:focus {
  background: var(--meta-primary-deep) !important;
  border-color: var(--meta-primary-deep) !important
}

body:not(.admin-body) .btn-outline-warning {
  color: var(--meta-ink-deep) !important;
  border-color: var(--meta-hairline) !important;
  background: transparent !important
}

body:not(.admin-body) .btn-outline-warning:hover {
  color: var(--meta-ink-deep) !important
}

body:not(.admin-body) .text-warning {
  color: var(--meta-primary-deep) !important
}

body:not(.admin-body) .text-danger {
  color: var(--meta-critical) !important
}

body:not(.admin-body) .text-success {
  color: var(--meta-success) !important
}

body:not(.admin-body) .form-check-input:checked {
  background-color: var(--meta-primary);
  border-color: var(--meta-primary)
}

body:not(.admin-body) #checkoutForm .form-check.border {
  border-color: var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-lg) !important;
  background: var(--meta-canvas);
  padding: var(--meta-space-base) !important
}

body:not(.admin-body) #checkoutForm .form-check.border:has(input:checked) {
  border-color: var(--meta-primary) !important;
  background: var(--meta-surface-soft)
}

body:not(.admin-body) #checkoutForm .card {
  margin-bottom: var(--meta-space-xl) !important
}

body:not(.admin-body) #checkoutForm .card-header {
  background: var(--meta-canvas);
  border-bottom: 1px solid var(--meta-hairline-soft);
  padding: var(--meta-space-base) var(--meta-space-xl);
  font-weight: 700
}

body:not(.admin-body) #checkoutForm .card-body {
  padding: var(--meta-space-xl)
}

body:not(.admin-body) .pd-page {
  background: var(--meta-canvas) !important;
  color: var(--meta-ink) !important;
  padding: var(--meta-space-base) 0 var(--meta-space-section) !important;
  font-family: var(--meta-font) !important
}

body:not(.admin-body) .pd-breadcrumb,
body:not(.admin-body) .pd-breadcrumb a,
body:not(.admin-body) .pd-breadcrumb .sep {
  color: var(--meta-steel) !important;
  font-size: var(--meta-type-caption) !important
}

body:not(.admin-body) .pd-main-img-wrap,
body:not(.admin-body) .pd-main-placeholder {
  border: 1px solid var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-xxl) !important
}

body:not(.admin-body) .pd-main-img-wrap {
  min-height: 320px;
  padding: var(--meta-space-xl) !important
}

body:not(.admin-body) .pd-main-img-wrap img {
  max-height: 520px !important
}

body:not(.admin-body) .pd-thumb {
  width: 64px !important;
  height: 64px !important;
  border: 1px solid var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-xl) !important;
  background: var(--meta-canvas) !important;
  padding: var(--meta-space-xs) !important
}

body:not(.admin-body) .pd-thumb:hover,
body:not(.admin-body) .pd-thumb.active {
  border: 2px solid var(--meta-primary) !important;
  box-shadow: none !important
}

body:not(.admin-body) .pd-title {
  font: 500 var(--meta-type-heading-sm)/var(--meta-line-heading-sm) var(--meta-font) !important;
  color: var(--meta-ink-deep) !important
}

body:not(.admin-body) .pd-brand-link,
body:not(.admin-body) .pd-rating-count,
body:not(.admin-body) .pd-action-btn {
  color: var(--meta-link) !important
}

body:not(.admin-body) .pd-stars {
  color: var(--meta-warning) !important
}

body:not(.admin-body) .pd-price-sale,
body:not(.admin-body) .pd-price-regular {
  font-size: var(--meta-type-heading-md) !important;
  color: var(--meta-ink-deep) !important
}

body:not(.admin-body) .pd-price-original {
  color: var(--meta-steel) !important
}

body:not(.admin-body) .pd-discount-pill {
  color: var(--meta-critical) !important
}

body:not(.admin-body) .pd-divider {
  background: var(--meta-hairline-soft) !important
}

body:not(.admin-body) .pd-variant-btn {
  border: 1px solid var(--meta-hairline) !important;
  border-radius: var(--meta-r-lg) !important;
  background: var(--meta-canvas) !important;
  color: var(--meta-ink) !important;
  padding: var(--meta-space-sm) var(--meta-space-base) !important
}

body:not(.admin-body) .pd-variant-btn.active {
  border: 2px solid var(--meta-primary) !important;
  box-shadow: none !important
}

body:not(.admin-body) .pd-delivery-card {
  border: 1px solid var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-xl) !important;
  padding: var(--meta-space-xl) !important;
  background: var(--meta-canvas)
}

body:not(.admin-body) .pd-qty-wrap {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--meta-hairline) !important;
  border-radius: var(--meta-r-full) !important;
  overflow: hidden !important;
  background: var(--meta-canvas) !important;
  box-shadow: 0 1px 3px rgba(15, 17, 17, .06) !important
}

body:not(.admin-body) .pd-qty-btn {
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 20px !important;
  cursor: pointer !important;
  color: var(--meta-ink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important
}

body:not(.admin-body) .pd-qty-btn:hover {
  background: var(--meta-surface-soft) !important
}

body:not(.admin-body) .pd-qty-input {
  border: none !important;
  border-left: 1px solid var(--meta-hairline) !important;
  border-right: 1px solid var(--meta-hairline) !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  width: 52px !important;
  text-align: center !important;
  min-height: 40px !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important
}

body:not(.admin-body) .pd-pin-form {
  border: 1px solid var(--meta-hairline) !important;
  border-radius: var(--meta-r-lg) !important;
  background: var(--meta-canvas) !important;
  box-shadow: none !important;
  overflow: hidden !important
}

body:not(.admin-body) .pd-qty-input:focus,
body:not(.admin-body) .pd-pin-form:focus-within {
  border-color: var(--meta-fb-blue) !important;
  box-shadow: none !important
}

body:not(.admin-body) .pd-btn-cart,
body:not(.admin-body) .pd-btn-buy {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: var(--meta-r-full) !important;
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font) !important;
  box-shadow: none !important
}

body:not(.admin-body) .pd-btn-cart {
  background: var(--meta-ink-button) !important;
  color: var(--meta-on-ink-button) !important
}

body:not(.admin-body) .pd-btn-cart:hover,
body:not(.admin-body) .pd-btn-cart:focus {
  background: var(--meta-charcoal) !important;
  color: var(--meta-on-ink-button) !important
}

body:not(.admin-body) .pd-btn-buy {
  background: var(--meta-primary) !important;
  color: var(--meta-on-primary) !important
}

body:not(.admin-body) .pd-btn-buy:hover {
  background: var(--meta-primary-deep) !important
}

body:not(.admin-body) .pd-tabs {
  border-color: var(--meta-hairline-soft) !important
}

body:not(.admin-body) .pd-tab-list {
  border-color: var(--meta-hairline-soft) !important
}

body:not(.admin-body) .pd-tab-btn {
  color: var(--meta-charcoal) !important;
  font: 700 var(--meta-type-body)/var(--meta-line-body) var(--meta-font) !important
}

body:not(.admin-body) .pd-tab-btn.active {
  color: var(--meta-primary-deep) !important;
  border-bottom-color: var(--meta-primary) !important
}

body:not(.admin-body) .pd-specs-table,
body:not(.admin-body) .pd-specs-table td {
  border-color: var(--meta-hairline-soft) !important;
  color: var(--meta-ink) !important
}

body:not(.admin-body) .pd-specs-table td:first-child {
  background: var(--meta-surface-soft) !important
}

body:not(.admin-body) .pd-review-item {
  border-color: var(--meta-hairline-soft) !important
}

body:not(.admin-body) .pd-page a:focus-visible,
body:not(.admin-body) .pd-page button:focus-visible,
body:not(.admin-body) .pd-page input:focus-visible {
  outline: 3px solid var(--meta-fb-blue) !important;
  outline-offset: 2px !important
}

@media(max-width:767px) {
  body:not(.admin-body) .order-summary {
    padding: var(--meta-space-base) !important
  }

  body:not(.admin-body) #checkoutForm .card-body {
    padding: var(--meta-space-base)
  }

  body:not(.admin-body) .pd-main-img-wrap {
    min-height: 240px
  }

  body:not(.admin-body) .pd-delivery-card {
    margin-top: var(--meta-space-base)
  }
}

/* Existing homepage sections, restyled without changing template behavior */
body.home-storefront .hero-banner,
body.home-storefront .category-card,
body.home-storefront .feature-box,
body.home-storefront .brand-badge {
  background: var(--meta-canvas) !important;
  border: 1px solid var(--meta-hairline-soft) !important;
  border-radius: var(--meta-r-xl) !important;
  box-shadow: none !important
}

body.home-storefront .carousel-inner {
  border-radius: var(--meta-r-xxl) !important;
  box-shadow: none !important
}

body.home-storefront .hero-banner::before {
  background: linear-gradient(45deg, var(--meta-surface-soft), var(--meta-canvas)) !important;
  opacity: .35
}

body.home-storefront .section-header {
  border-color: var(--meta-hairline-soft) !important;
  border-bottom-width: 1px !important;
  padding-bottom: var(--meta-space-md) !important;
  margin-bottom: var(--meta-space-xl) !important
}

body.home-storefront .section-title {
  font: 500 var(--meta-type-heading-md)/var(--meta-line-heading-md) var(--meta-font) !important;
  color: var(--meta-ink-deep) !important
}

body.home-storefront .section-title::after {
  background: var(--meta-primary) !important;
  border-radius: var(--meta-r-full) !important
}

body.home-storefront .category-card,
body.home-storefront .feature-box {
  padding: var(--meta-space-xl) !important
}

body.home-storefront .category-card:hover,
body.home-storefront .feature-box:hover,
body.home-storefront .brand-badge:hover {
  border-color: var(--meta-hairline) !important;
  box-shadow: none !important;
  transform: translateY(-1px)
}

body.home-storefront .feature-icon {
  width: 48px;
  height: 48px;
  color: var(--meta-ink-deep) !important;
  border-radius: var(--meta-r-circle) !important
}

body.home-storefront .cat-icon i {
  color: var(--meta-ink-deep) !important
}

body.home-storefront .flash-sale-section {
  background: var(--meta-ink-deep) !important;
  border-radius: var(--meta-r-xxl) !important;
  box-shadow: none !important
}

body.home-storefront .flash-sale-section .btn-light {
  background: var(--meta-canvas);
  border: 1px solid var(--meta-canvas);
  border-radius: var(--meta-r-full);
  color: var(--meta-ink-deep)
}

body.home-storefront .brand-badge {
  border-radius: var(--meta-r-full) !important
}

body.home-storefront .hero-banner img {
  border-radius: var(--meta-r-xxl)
}

body.home-storefront .alert-warning {
  background: var(--meta-warning-bg);
  border-color: var(--meta-warning);
  color: var(--meta-ink-deep)
}

/* Responsive behavior at the design-system breakpoints */
@media(max-width:1023.98px) {
  body:not(.admin-body) .pd-gallery {
    position: static !important
  }

  body:not(.admin-body) .pd-delivery-card {
    position: static !important;
    top: auto !important
  }

  body:not(.admin-body) .footer .row {
    row-gap: var(--meta-space-xl)
  }

  body:not(.admin-body) .footer .footer-links {
    max-width: 100%
  }
}

@media(max-width:767.98px) {
  body:not(.admin-body) .topbar-row1 {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--meta-space-xs) !important
  }

  body:not(.admin-body) .topbar-row1>.search-form {
    display: none !important
  }

  body:not(.admin-body) .search-row-mobile {
    display: flex !important;
    margin-top: var(--meta-space-xs) !important
  }

  body:not(.admin-body) .search-row-mobile .search-form {
    width: 100%;
    min-height: 44px
  }

  body:not(.admin-body) .topbar .container-fluid {
    padding-inline: var(--meta-space-base)
  }

  body:not(.admin-body) .topbar .navbar-brand {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis
  }

  body:not(.admin-body) .nav-actions {
    gap: var(--meta-space-xxs)
  }

  body:not(.admin-body) .cat-nav .navbar-collapse {
    max-height: calc(100dvh - 160px);
    overflow-y: auto
  }

  body:not(.admin-body) .footer .row>[class*="col-"] {
    width: 50%;
  }

  body:not(.admin-body) .footer form {
    flex-wrap: wrap;
    gap: var(--meta-space-xs)
  }

  body:not(.admin-body) .footer form .form-control {
    min-width: 0;
    flex: 1 1 130px
  }

  body:not(.admin-body) .footer form .btn {
    flex: 0 0 auto
  }

  body:not(.admin-body) .pd-page>.container {
    padding-inline: var(--meta-space-base)
  }

  body:not(.admin-body) .pd-main-img-wrap {
    min-height: 280px
  }

  body:not(.admin-body) .pd-main-img-wrap img {
    max-height: 360px !important
  }

  body:not(.admin-body) .pd-thumbs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 0 6px
  }

  body:not(.admin-body) .pd-tab-list {
    scrollbar-width: thin
  }

  body:not(.admin-body) #checkoutForm .sticky-top {
    position: static !important;
    top: auto !important
  }

  body:not(.admin-body) .home-page,
  body.home-storefront main {
    max-width: 100%;
    overflow-x: clip
  }

  body.home-storefront .hero-banner {
    min-height: 0
  }

  body.home-storefront .hero-banner .container {
    padding-block: var(--meta-space-xxl) !important
  }

  body.home-storefront .section-header {
    align-items: flex-start;
    gap: var(--meta-space-sm)
  }

  body.home-storefront .section-title {
    font-size: var(--meta-type-heading-sm) !important
  }

  body.home-storefront .feature-box {
    height: 100%
  }

  body.home-storefront .flash-sale-section {
    padding: var(--meta-space-base) !important
  }

  body:not(.admin-body) .filter-panel {
    max-height: min(70dvh, 560px);
    overflow-y: auto
  }
}

@media(max-width:575.98px) {
  body:not(.admin-body) .footer .row>[class*="col-"] {
    width: 100%
  }

  body:not(.admin-body) .cart-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--meta-space-md) !important;
    padding: var(--meta-space-base) !important
  }

  body:not(.admin-body) .cart-item>a:first-child {
    grid-row: span 2
  }

  body:not(.admin-body) .cart-item>a:first-child img {
    width: 72px !important;
    height: 72px !important
  }

  body:not(.admin-body) .cart-item>.text-end {
    grid-column: 2;
    text-align: left !important
  }

  body:not(.admin-body) .cart-item form {
    max-width: 100%
  }

  body:not(.admin-body) .order-summary {
    position: static !important;
    top: auto !important
  }

  body:not(.admin-body) .pd-title {
    font-size: var(--meta-type-heading-sm) !important
  }

  body:not(.admin-body) #checkoutForm .card-header {
    padding: var(--meta-space-base)
  }

  body:not(.admin-body) #checkoutForm .card-body {
    padding: var(--meta-space-base)
  }

  body:not(.admin-body) #checkoutForm .form-check.border {
    padding: var(--meta-space-md) !important
  }

  body:not(.admin-body) .table-responsive {
    max-width: 100%
  }
}

@media(max-width:479.98px) {
  body:not(.admin-body) .topbar .container-fluid {
    padding-inline: var(--meta-space-xs)
  }

  body:not(.admin-body) .topbar .navbar-brand {
    font-size: var(--meta-type-small);
    max-width: 45%
  }

  body:not(.admin-body) .topbar .nav-actions>a,
  body:not(.admin-body) .topbar .nav-actions .nav-signin-btn {
    padding: var(--meta-space-xxs) !important
  }

  body:not(.admin-body) .cat-nav {
    padding-inline: var(--meta-space-xs)
  }

  body:not(.admin-body) .pd-main-img-wrap {
    min-height: 220px
  }

  body:not(.admin-body) .order-summary {
    padding: var(--meta-space-base) !important
  }

  body:not(.admin-body) .filter-panel {
    padding: var(--meta-space-md) !important
  }

  body.home-storefront .flash-sale-section .row {
    --bs-gutter-x: var(--meta-space-xs)
  }
}

body.home-storefront .footer>div.py-4 {
  background: var(--meta-canvas) !important;
  border-top: 1px solid var(--meta-hairline-soft)
}

body.home-storefront .footer h6 {
  color: var(--meta-ink-deep) !important
}

body.home-storefront .footer .text-warning {
  color: var(--meta-ink-deep) !important
}

body.home-storefront .footer .text-muted {
  color: var(--meta-steel) !important
}

/* Product detail layout polish for wide screens */
@media(min-width:1200px) {
  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-5 {
    flex: 0 0 48%;
    max-width: 48%
  }

  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-4 {
    flex: 0 0 30%;
    max-width: 30%
  }

  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-3 {
    flex: 0 0 22%;
    max-width: 22%
  }
}

body:not(.admin-body) .pd-main-img-wrap,
body:not(.admin-body) .pd-main-placeholder {
  border-radius: var(--meta-r-xxxl) !important
}

body:not(.admin-body) .pd-delivery-card {
  box-shadow: none !important;
  align-self: start
}

body:not(.admin-body) .pd-delivery-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--meta-space-sm);
  align-items: start;
  margin-bottom: var(--meta-space-base)
}

body:not(.admin-body) .pd-delivery-icon {
  margin: 0 !important;
  width: 24px;
  text-align: center
}

body:not(.admin-body) .pd-delivery-label {
  font-weight: 700;
  color: var(--meta-ink-deep)
}

body:not(.admin-body) .pd-delivery-sub {
  color: var(--meta-charcoal);
  line-height: var(--meta-line-small)
}

body:not(.admin-body) .pd-info {
  padding-inline: var(--meta-space-sm)
}

body:not(.admin-body) .pd-title {
  font-size: clamp(var(--meta-type-heading-sm), 2vw, var(--meta-type-heading-md)) !important;
  line-height: var(--meta-line-heading-md) !important
}

body:not(.admin-body) .pd-rating-row {
  gap: var(--meta-space-sm)
}

body:not(.admin-body) .pd-badge-bestseller {
  background: var(--meta-warning) !important;
  color: var(--meta-ink-deep) !important;
  border-radius: var(--meta-r-full) !important;
  padding: 4px 10px !important
}

body:not(.admin-body) .pd-btn-cart,
body:not(.admin-body) .pd-btn-buy {
  width: 100%;
  padding: 14px var(--meta-space-xl) !important
}

body:not(.admin-body) .pd-btn-cart {
  background: var(--meta-primary) !important;
  color: var(--meta-on-primary) !important
}

body:not(.admin-body) .pd-btn-cart:hover,
body:not(.admin-body) .pd-btn-cart:focus {
  background: var(--meta-primary-deep) !important;
  color: var(--meta-on-primary) !important
}

body:not(.admin-body) .pd-btn-buy {
  background: var(--meta-ink-button) !important;
  color: var(--meta-on-ink-button) !important
}

body:not(.admin-body) .pd-btn-buy:hover {
  background: var(--meta-charcoal) !important
}

body:not(.admin-body) .pd-btn-cart:disabled,
body:not(.admin-body) .pd-btn-buy:disabled {
  background: var(--meta-disabled) !important;
  color: var(--meta-canvas) !important
}

/* Modernize the existing homepage while retaining its dynamic sections */
body.home-storefront .main-content {
  padding-top: var(--meta-space-base)
}

body.home-storefront .main-content>.container-fluid {
  width: min(100% - 32px, 1360px);
  margin-inline: auto;
  padding: var(--meta-space-base) 0 !important
}

body.home-storefront #heroCarousel {
  margin-bottom: var(--meta-space-section) !important
}

body.home-storefront #heroCarousel .carousel-indicators {
  margin-bottom: var(--meta-space-md)
}

body.home-storefront #heroCarousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: var(--meta-r-circle);
  background: var(--meta-stone)
}

body.home-storefront #heroCarousel .carousel-indicators .active {
  width: 24px;
  border-radius: var(--meta-r-full);
  background: var(--meta-ink-deep)
}

body.home-storefront .hero-banner {
  min-height: clamp(420px, 46vw, 600px);
  border: 0 !important;
  border-radius: var(--meta-r-xxxl) !important;
  overflow: hidden
}

body.home-storefront .hero-banner::before {
  display: none
}

body.home-storefront .hero-banner .container {
  width: 100%;
  max-width: 1360px;
  padding-inline: clamp(var(--meta-space-xl), 5vw, var(--meta-space-section-lg)) !important
}

body.home-storefront .hero-banner .row {
  --bs-gutter-x: var(--meta-space-xxxl);
  min-height: clamp(420px, 46vw, 600px)
}

body.home-storefront .hero-banner .row>div:first-child {
  position: relative;
  z-index: 2
}

body.home-storefront .hero-banner .badge {
  background: var(--meta-warning) !important;
  color: var(--meta-ink-deep) !important;
  border-radius: var(--meta-r-full) !important;
  box-shadow: none !important;
  letter-spacing: .04em
}

body.home-storefront .hero-banner h1 {
  font: 500 clamp(var(--meta-type-heading-lg), 4.4vw, var(--meta-type-hero))/var(--meta-line-hero) var(--meta-font) !important;
  font-feature-settings: "ss01", "ss02";
  color: var(--meta-ink-deep) !important;
  max-width: 12ch
}

body.home-storefront .hero-banner p {
  font: 400 var(--meta-type-subtitle)/var(--meta-line-subtitle) var(--meta-font) !important;
  color: var(--meta-charcoal) !important;
  max-width: 42ch
}

body.home-storefront .hero-banner .btn-warning {
  background: var(--meta-ink-button) !important;
  border-color: var(--meta-ink-button) !important;
  color: var(--meta-on-ink-button) !important;
  border-radius: var(--meta-r-full) !important;
  min-height: 48px;
  padding: 14px 30px !important;
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font) !important
}

body.home-storefront .hero-banner .btn-warning:hover {
  background: var(--meta-charcoal) !important
}

body.home-storefront .hero-banner .col-md-6:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%
}

body.home-storefront .hero-banner img {
  width: min(100%, 560px);
  height: auto;
  max-height: clamp(300px, 38vw, 500px) !important;
  object-fit: contain;
  filter: none !important;
  border-radius: 0 !important
}

body.home-storefront .carousel-control-prev,
body.home-storefront .carousel-control-next {
  width: 48px;
  height: 48px;
  top: calc(50% - 24px);
  bottom: auto;
  background: var(--meta-canvas);
  border: 1px solid var(--meta-hairline-soft);
  border-radius: var(--meta-r-circle);
  opacity: 1
}

body.home-storefront .carousel-control-prev {
  left: var(--meta-space-base)
}

body.home-storefront .carousel-control-next {
  right: var(--meta-space-base)
}

body.home-storefront .carousel-control-prev-icon,
body.home-storefront .carousel-control-next-icon {
  filter: invert(1)
}

body.home-storefront .feature-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--meta-space-base);
  text-align: left;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--meta-space-base) !important;
  box-shadow: none !important;
  transition: none !important
}

body.home-storefront .feature-icon {
  flex: 0 0 48px;
  margin: 0 !important;
  width: 48px;
  height: 48px;
  font-size: 20px
}

body.home-storefront .feature-box h6 {
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font) !important;
  color: var(--meta-ink-deep) !important
}

body.home-storefront .feature-box p {
  font: 400 var(--meta-type-caption)/var(--meta-line-caption) var(--meta-font) !important;
  color: var(--meta-steel) !important
}

body.home-storefront .feature-box:hover {
  transform: none !important
}

body.home-storefront main>div.container-fluid>section.mb-5,
body.home-storefront main>div.container-fluid>div.mb-5 {
  margin-bottom: var(--meta-space-section) !important
}

body.home-storefront .section-header {
  align-items: center;
  border-bottom: 1px solid var(--meta-hairline-soft) !important;
  padding-bottom: var(--meta-space-md) !important;
  margin-bottom: var(--meta-space-xl) !important
}

body.home-storefront .section-title {
  font: 500 var(--meta-type-heading-lg)/var(--meta-line-heading-lg) var(--meta-font) !important;
  font-feature-settings: "ss01", "ss02";
  color: var(--meta-ink-deep) !important
}

body.home-storefront .section-title::after {
  display: none
}

body.home-storefront .section-header>a {
  color: var(--meta-link) !important;
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font) !important;
  text-decoration: none
}

body.home-storefront .category-card {
  padding: var(--meta-space-xl) var(--meta-space-base) !important;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--meta-space-xs);
  transition: none !important
}

body.home-storefront .category-card:hover {
  transform: none !important
}

body.home-storefront .category-card .small {
  font: 700 var(--meta-type-small)/var(--meta-line-small) var(--meta-font) !important;
  color: var(--meta-ink-deep) !important
}

body.home-storefront .flash-sale-section {
  padding: var(--meta-space-xxxl) !important;
  border-radius: var(--meta-r-xxxl) !important
}

body.home-storefront .flash-sale-section>div:first-child {
  position: relative;
  z-index: 2
}

body.home-storefront .flash-sale-section h3 {
  font: 500 var(--meta-type-heading-md)/var(--meta-line-heading-md) var(--meta-font) !important
}

body.home-storefront .flash-sale-section .btn-light {
  min-height: 44px;
  padding: var(--meta-space-sm) var(--meta-space-xl) !important
}

body.home-storefront .row.g-4>[class*="col-md-6"]>.relative {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: var(--meta-space-xl);
  min-height: 320px !important;
  padding: var(--meta-space-xxxl);
  background: var(--meta-ink-deep) !important;
  border-radius: var(--meta-r-xxxl) !important;
  box-shadow: none !important
}

body.home-storefront .row.g-4>[class*="col-md-6"]>.relative>div:first-child {
  width: 100%;
  padding: 0 !important
}

body.home-storefront .row.g-4>[class*="col-md-6"]>.relative>div:last-child {
  width: 100%;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center
}

body.home-storefront .row.g-4>[class*="col-md-6"]>.relative h3 {
  font: 500 var(--meta-type-heading-sm)/var(--meta-line-heading-sm) var(--meta-font) !important;
  font-feature-settings: "ss01", "ss02"
}

body.home-storefront .row.g-4>[class*="col-md-6"]>.relative p {
  color: var(--meta-canvas);
  font: 400 var(--meta-type-body)/var(--meta-line-body) var(--meta-font)
}

body.home-storefront .row.g-4>[class*="col-md-6"]>.relative img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  filter: none !important
}

body.home-storefront .row.g-4>[class*="col-md-6"]>.relative .btn-light {
  background: var(--meta-canvas);
  color: var(--meta-ink-deep);
  border: 0;
  border-radius: var(--meta-r-full);
  min-height: 44px;
  padding: var(--meta-space-sm) var(--meta-space-xl)
}

body.home-storefront .brand-badge {
  min-height: 64px;
  padding: var(--meta-space-base) var(--meta-space-xl) !important
}

body.home-storefront .brand-badge img {
  max-width: 140px;
  max-height: 36px;
  object-fit: contain
}

body.home-storefront .home-storefront a:focus-visible,
body.home-storefront button:focus-visible {
  outline: 3px solid var(--meta-fb-blue);
  outline-offset: 3px
}

@media(max-width:1023.98px) {
  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-5 {
    flex: 0 0 42%;
    max-width: 42%
  }

  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-4 {
    flex: 0 0 34%;
    max-width: 34%
  }

  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-3 {
    flex: 0 0 24%;
    max-width: 24%
  }

  body.home-storefront .hero-banner {
    min-height: 420px
  }

  body.home-storefront .hero-banner .row {
    min-height: 420px
  }

  body.home-storefront .hero-banner h1 {
    font-size: var(--meta-type-heading-lg) !important
  }
}

@media(max-width:767.98px) {

  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-5,
  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-4,
  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%
  }

  body:not(.admin-body) .pd-info {
    padding-inline: 0
  }

  body:not(.admin-body) .pd-main-img-wrap {
    min-height: 320px
  }

  body:not(.admin-body) .pd-title {
    font-size: var(--meta-type-heading-md) !important
  }

  body:not(.admin-body) .pd-delivery-card {
    margin-top: 0
  }

  body.home-storefront .main-content>.container-fluid {
    width: calc(100% - 32px)
  }

  body.home-storefront #heroCarousel {
    margin-bottom: var(--meta-space-section-sm) !important
  }

  body.home-storefront .hero-banner,
  body.home-storefront .hero-banner .row {
    min-height: 0
  }

  body.home-storefront .hero-banner .container {
    padding: var(--meta-space-xxxl) var(--meta-space-xl) !important
  }

  body.home-storefront .hero-banner .row {
    --bs-gutter-y: var(--meta-space-xl)
  }

  body.home-storefront .hero-banner .col-md-6:first-child {
    text-align: center !important
  }

  body.home-storefront .hero-banner h1 {
    font-size: var(--meta-type-heading-lg) !important;
    max-width: 16ch;
    margin-inline: auto
  }

  body.home-storefront .hero-banner p {
    margin-inline: auto
  }

  body.home-storefront .hero-banner .col-md-6:last-child {
    min-height: 260px
  }

  body.home-storefront .hero-banner img {
    max-height: 320px !important
  }

  body.home-storefront .carousel-control-prev,
  body.home-storefront .carousel-control-next {
    width: 40px;
    height: 40px;
    top: auto;
    bottom: var(--meta-space-md)
  }

  body.home-storefront .feature-box {
    justify-content: flex-start
  }

  body.home-storefront .section-title {
    font-size: var(--meta-type-heading-sm) !important
  }

  body.home-storefront .flash-sale-section {
    padding: var(--meta-space-xl) !important
  }

  body.home-storefront .row.g-4>[class*="col-md-6"]>.relative {
    grid-template-columns: 1fr;
    min-height: 0 !important;
    padding: var(--meta-space-xl);
    text-align: center
  }

  body.home-storefront .row.g-4>[class*="col-md-6"]>.relative>div:first-child {
    align-items: center
  }

  body.home-storefront .row.g-4>[class*="col-md-6"]>.relative img {
    max-height: 220px
  }
}

@media(max-width:479.98px) {
  body:not(.admin-body) .pd-main-img-wrap {
    min-height: 260px
  }

  body:not(.admin-body) .pd-title {
    font-size: var(--meta-type-heading-sm) !important
  }

  body.home-storefront .main-content>.container-fluid {
    width: calc(100% - 24px)
  }

  body.home-storefront .hero-banner .container {
    padding: var(--meta-space-xl) var(--meta-space-base) !important
  }

  body.home-storefront .hero-banner h1 {
    font-size: var(--meta-type-heading-md) !important
  }

  body.home-storefront .hero-banner .badge {
    font-size: var(--meta-type-caption)
  }

  body.home-storefront .feature-box {
    padding: var(--meta-space-sm) !important;
    gap: var(--meta-space-xs)
  }

  body.home-storefront .feature-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px
  }

  body.home-storefront .flash-sale-section {
    padding: var(--meta-space-base) !important
  }

  body.home-storefront .section-title {
    font-size: var(--meta-type-subtitle) !important
  }
}

@media(max-width:991.98px) {

  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-5,
  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-4,
  body:not(.admin-body) .pd-page>.container>.row.g-4>.col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%
  }
}

@media(max-width:767.98px) {
  body.home-storefront .main-content>.container-fluid>section.mb-5:first-of-type .row.justify-content-center>[class*="col-"] {
    width: 100%
  }
}

body.home-storefront main a:focus-visible,
body.home-storefront main button:focus-visible {
  outline: 3px solid var(--meta-fb-blue);
  outline-offset: 3px
}

body.home-storefront #homeJewelryAlert {
  background: var(--meta-warning-bg) !important;
  border-color: var(--meta-warning) !important;
  color: var(--meta-ink-deep)
}

body.home-storefront #homeJewelryAlert .text-muted,
body.home-storefront #homeJewelryAlert .text-warning-emphasis {
  color: var(--meta-ink-deep) !important
}