/*
  USC Commerce OS
  Shared black/white interface layer for public_html.
  Shared components should not force page-level background colors.
*/

:root {
  --usc-bg: #ffffff;
  --usc-surface: #ffffff;
  --usc-surface-soft: rgba(0, 0, 0, .04);
  --usc-ink: #000000;
  --usc-muted: rgba(0, 0, 0, .55);
  --usc-muted-2: rgba(0, 0, 0, .35);
  --usc-line: rgba(0, 0, 0, .1);
  --usc-line-strong: rgba(0, 0, 0, .16);
  --usc-radius: 10px;
  --usc-radius-sm: 8px;
  --usc-nav-h: 56px;
  --usc-gutter: 20px;
  --usc-page-top: 40px;
  --usc-wrap: 1440px;
  --usc-font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --usc-ease: cubic-bezier(.4, 0, .2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  font-family: var(--usc-font) !important;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}
/* Header */
#site-header[data-usc-shell],
#mobile-header[data-usc-shell],
.mobile-header[data-usc-shell] {
  --nav-h: var(--usc-nav-h);
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 900 !important;
  height: var(--usc-nav-h) !important;
  min-height: var(--usc-nav-h) !important;
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid var(--usc-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#site-header[data-usc-shell] *,
#mobile-header[data-usc-shell] *,
.mobile-header[data-usc-shell] * {
  font-family: var(--usc-font) !important;
  letter-spacing: 0 !important;
}

#site-header[data-usc-shell] .nav-inner {
  width: calc(100% - 40px) !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

#site-header[data-usc-shell] .nav-logo,
#mobile-header[data-usc-shell] .nav-logo,
.mobile-header[data-usc-shell] .nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

#site-header[data-usc-shell] .nav-logo img {
  width: auto !important;
  height: 22px !important;
  object-fit: contain !important;
}

#mobile-header[data-usc-shell] .nav-logo img,
.mobile-header[data-usc-shell] .nav-logo img {
  width: auto !important;
  height: 24px !important;
  object-fit: contain !important;
}

#site-header[data-usc-shell] .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 auto 0 36px !important;
}

#site-header[data-usc-shell] .nav-links a {
  padding: 0 !important;
  color: rgba(0, 0, 0, .65) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#site-header[data-usc-shell] .nav-links a:hover {
  color: var(--usc-ink) !important;
  opacity: 1 !important;
}

#site-header[data-usc-shell] .nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.nav-search,
.search-bar,
.mobile-search {
  position: relative !important;
}

.nav-search input,
.nav-search-input,
.search-bar input,
.mobile-search input,
input[type="search"] {
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--usc-line) !important;
  border-radius: var(--usc-radius-sm) !important;
  background: #ffffff !important;
  color: var(--usc-ink) !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.nav-search input:focus,
.nav-search-input:focus,
.search-bar input:focus,
.mobile-search input:focus,
input[type="search"]:focus {
  border-color: var(--usc-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .04) !important;
}

#site-header[data-usc-shell] .nav-icon-btn,
#mobile-header[data-usc-shell] .mob-icon-btn,
.mobile-header[data-usc-shell] .mob-icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--usc-line) !important;
  border-radius: var(--usc-radius-sm) !important;
  background: #ffffff !important;
  color: var(--usc-ink) !important;
  box-shadow: none !important;
}

#site-header[data-usc-shell] .nav-icon-btn img,
#mobile-header[data-usc-shell] .mob-icon-btn img,
.mobile-header[data-usc-shell] .mob-icon-btn img,
.search-bar img,
.mobile-search img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  opacity: .85 !important;
  filter: grayscale(1) brightness(0) !important;
}

#site-header[data-usc-shell] .nav-icon-btn:hover,
#mobile-header[data-usc-shell] .mob-icon-btn:hover,
.mobile-header[data-usc-shell] .mob-icon-btn:hover {
  background: #ffffff !important;
  border-color: var(--usc-line-strong) !important;
}

.pill-btn,
.btn,
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[class*="btn"],
a[class*="button"] {
  border-radius: var(--usc-radius-sm) !important;
}

.pill-btn,
#sign-in,
#sign-up,
#sign-out,
.usc-mobile-login-pill,
.usc-mobile-start-pill {
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 15px !important;
  border: 1px solid var(--usc-line) !important;
  border-radius: var(--usc-radius-sm) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.pill-btn-light,
#sign-in,
.usc-mobile-login-pill {
  background: #ffffff !important;
  color: var(--usc-ink) !important;
}

.pill-btn-dark,
#sign-up,
#sign-out,
.usc-mobile-start-pill,
.shop-btn,
.usc-drawer-btn,
.checkout-btn,
.add-to-cart,
.add-to-bag,
button[type="submit"] {
  background: var(--usc-ink) !important;
  border-color: var(--usc-ink) !important;
  color: #ffffff !important;
}
/* Mobile menu */
#mob-nav-btn .ham-icon,
#mob-nav-btn.active .ham-icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--usc-ink) !important;
}

#mob-nav-btn .bar,
#mob-nav-btn.active .bar,
#mob-nav-btn.active .bar-top,
#mob-nav-btn.active .bar-mid,
#mob-nav-btn.active .bar-bot {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

#mob-nav-dropdown {
  top: var(--usc-nav-h) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 10px var(--usc-gutter) 18px !important;
  background: rgba(255, 255, 255, .98) !important;
  border-top: 1px solid var(--usc-line) !important;
  border-bottom: 1px solid var(--usc-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#mob-nav-dropdown a,
#mob-nav-dropdown .usc-mobile-nav-row {
  min-height: 44px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--usc-line) !important;
  color: var(--usc-ink) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

#mob-nav-dropdown.open,
#mob-nav-dropdown.closing {
  display: flex !important;
}

#mob-nav-dropdown.open {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
/* Main layout */
body:not(.app-view) #main-content,
body:not(.app-view) main#main-content,
body:not(.app-view) .deskContent#main-content,
body:not(.app-view) .phoneContent#main-content,
body:not(.app-view) .main-content.page-main,
body:not(.app-view) main.store-layout {
  margin-top: var(--usc-nav-h) !important;
  padding: var(--usc-page-top) var(--usc-gutter) 64px !important;
}

body:not(.app-view) #main-content,
body:not(.app-view) main#main-content {
  width: 100% !important;
}

body:not(.app-view) #main-content > .usc-card,
body:not(.app-view) #main-content > .hero-card,
body:not(.app-view) #main-content > .about-card,
body:not(.app-view) main#main-content > .usc-card,
body:not(.app-view) main#main-content > .hero-card,
body:not(.app-view) main#main-content > .about-card,
body:not(.app-view) .deskContent#main-content > .usc-card,
body:not(.app-view) .phoneContent#main-content > .usc-card,
body:not(.app-view) #main-content > section[class*="card"],
body:not(.app-view) #main-content > div[class*="card"] {
  width: calc(100vw - 40px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 36px 40px !important;
  border: 1px solid var(--usc-line) !important;
  border-radius: var(--usc-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--usc-ink) !important;
}

body:not(.app-view) #main-content .section-inner,
body:not(.app-view) #main-content .row {
  max-width: none !important;
}
/* Older commerce pages often render dynamic views without a main wrapper. */
.usc-commerce-os > .usc-card,
.usc-commerce-os > div[id$="-info"],
.usc-commerce-os > div[id$="_info"],
.usc-commerce-os > div[id$="-view"],
.usc-commerce-os > div[id$="_view"],
.usc-commerce-os > div[id*="content"],
.usc-commerce-os > div[id*="page"] {
  margin-top: calc(var(--usc-nav-h) + var(--usc-page-top)) !important;
}

.usc-commerce-os > div[id$="-info"] > .usc-card,
.usc-commerce-os > div[id$="_info"] > .usc-card,
.usc-commerce-os > div[id$="-view"] > .usc-card,
.usc-commerce-os > div[id$="_view"] > .usc-card,
.usc-commerce-os > div[id*="content"] > .usc-card,
.usc-commerce-os > div[id*="page"] > .usc-card,
.usc-commerce-os > .usc-card {
  width: calc(100vw - 40px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 36px 40px !important;
  border: 1px solid var(--usc-line) !important;
  border-radius: var(--usc-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--usc-ink) !important;
}
/* Repeated cards inside grids keep a tidy commerce-card footprint. */
.product-card,
.store-card,
.reward-card,
.service-panel,
.menu-card,
.metric-card,
.notification-card,
.order-card,
.download-card,
.post-card,
.thread-card,
.conversation-card {
  border: 1px solid var(--usc-line) !important;
  border-radius: var(--usc-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--usc-ink) !important;
}

.product-card:hover,
.store-card:hover,
.service-panel:hover,
.menu-card:hover,
.order-card:hover {
  border-color: var(--usc-line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title {
  color: var(--usc-ink) !important;
  letter-spacing: 0 !important;
}

h1 {
  font-size: clamp(28px, 4vw, 56px) !important;
  font-weight: 650 !important;
  line-height: 1.02 !important;
}

h2,
.about-card h2,
.usc-card > b:first-child,
.usc-card b.inter-font:first-child {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

p,
li,
td,
th,
label,
.muted,
.inter-font {
  font-size: 13px;
}

p,
.about-card p,
.usc-card p,
.hero-card p {
  color: var(--usc-muted) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}

.price,
.product-price,
.usc-price,
[class*="price"] {
  color: var(--usc-ink) !important;
}
/* Forms and controls */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: 1px solid var(--usc-line) !important;
  border-radius: var(--usc-radius-sm) !important;
  background: #ffffff !important;
  color: var(--usc-ink) !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: 0 !important;
  border-color: var(--usc-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .04) !important;
}

table {
  border-color: var(--usc-line) !important;
}

hr {
  border: 0 !important;
  border-top: 1px solid var(--usc-line) !important;
}
/* Drawers, modals, cart, chat */
.usc-cart-overlay {
  background: rgba(0, 0, 0, .2) !important;
}

#cart,
.usc-cart-drawer,
.modal,
.dialog,
[role="dialog"] {
  background: #ffffff !important;
  color: var(--usc-ink) !important;
  border-color: var(--usc-line) !important;
  box-shadow: none !important;
}

.usc-cart-count {
  background: var(--usc-ink) !important;
  color: #ffffff !important;
  border: 1px solid var(--usc-ink) !important;
  box-shadow: none !important;
}
/* Footer */
footer[data-usc-shell] {
  margin-top: 64px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-top: 1px solid var(--usc-line) !important;
  color: var(--usc-ink) !important;
  box-shadow: none !important;
}

footer[data-usc-shell] .footer-inner {
  width: calc(100% - 40px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 44px 0 28px !important;
}

footer[data-usc-shell] .footer-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 36px !important;
}

footer[data-usc-shell] .footer-col h4 {
  margin: 0 0 14px !important;
  color: var(--usc-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

footer[data-usc-shell] .footer-col ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

footer[data-usc-shell] .footer-col a {
  color: var(--usc-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

footer[data-usc-shell] .footer-col a:hover {
  color: var(--usc-ink) !important;
}

footer[data-usc-shell] .footer-bottom {
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--usc-line) !important;
  color: var(--usc-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
/* Legacy remnants */
[style*="box-shadow"] {
  box-shadow: none !important;
}

[style*="border-radius:16px"],
[style*="border-radius: 16px"] {
  border-radius: var(--usc-radius) !important;
}

@media (max-width: 900px) {
  :root {
    --usc-nav-h: 52px;
    --usc-gutter: 14px;
  }

  #site-header[data-usc-shell].desktop-only {
    display: none !important;
  }

  #mobile-header[data-usc-shell],
  .mobile-header[data-usc-shell] {
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
  }

  body:not(.app-view) #main-content,
  body:not(.app-view) main#main-content,
  body:not(.app-view) .main-content.page-main,
  body:not(.app-view) main.store-layout {
    padding: 40px 14px 56px !important;
  }

  body:not(.app-view) #main-content > .usc-card,
  body:not(.app-view) #main-content > .hero-card,
  body:not(.app-view) #main-content > .about-card,
  body:not(.app-view) main#main-content > .usc-card,
  body:not(.app-view) main#main-content > .hero-card,
  body:not(.app-view) main#main-content > .about-card,
  body:not(.app-view) #main-content > section[class*="card"],
  body:not(.app-view) #main-content > div[class*="card"] {
    width: calc(100vw - 28px) !important;
    padding: 24px 20px !important;
  }

  footer[data-usc-shell] .footer-inner {
    width: calc(100% - 28px) !important;
    padding: 36px 0 24px !important;
  }

  footer[data-usc-shell] .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: 34px !important;
  }

  footer[data-usc-shell] .footer-grid {
    grid-template-columns: 1fr !important;
  }
}
/* USC Commerce Design System override - 2026-07-30 */
:root {
  --usc-bg: #ffffff;
  --usc-surface: #ffffff;
  --usc-surface-soft: rgba(0, 0, 0, .04);
  --usc-text: #000000;
  --usc-muted: rgba(0, 0, 0, .55);
  --usc-muted-light: rgba(0, 0, 0, .35);
  --usc-border: rgba(0, 0, 0, .08);
  --usc-border-strong: rgba(0, 0, 0, .14);
  --usc-purple: #6558d3;
  --usc-purple-soft: #ede9ff;
  --usc-green: #278a57;
  --usc-green-soft: #e5f7ed;
  --usc-blue: #287caf;
  --usc-blue-soft: #e8f6ff;
  --usc-pink: #c54f7c;
  --usc-pink-soft: #fff0f5;
  --usc-radius-button: 10px;
  --usc-radius-card: 18px;
  --usc-radius-section: 28px;
  --usc-radius-window: 22px;
  --usc-shadow-card: 0 22px 54px rgba(30, 30, 44, .12);
  --usc-shadow-window: 0 30px 70px rgba(56, 48, 119, .18);
  --usc-shadow-floating: 0 16px 40px rgba(52, 45, 103, .14);
  --usc-page-gutter: 50px;
  --usc-max-width: 1600px;
  --usc-nav-height: 56px;
  --usc-ease: cubic-bezier(.4, 0, .2, 1);
  --usc-font: "Inter var", "Inter", system-ui, -apple-system, sans-serif;
  --usc-nav-h: var(--usc-nav-height);
  --usc-gutter: 20px;
  --usc-wrap: 1440px;
  --usc-ink: var(--usc-text);
  --usc-line: var(--usc-border);
  --usc-line-strong: var(--usc-border-strong);
}

html,
body {
  font-family: var(--usc-font) !important;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0 !important;
}

:focus-visible {
  outline: 3px solid rgba(101, 88, 211, .28);
  outline-offset: 3px;
}

#site-header[data-usc-shell],
#mobile-header[data-usc-shell],
.mobile-header[data-usc-shell] {
  --nav-h: var(--usc-nav-height);
  height: var(--usc-nav-height) !important;
  min-height: var(--usc-nav-height) !important;
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid var(--usc-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#site-header[data-usc-shell] .nav-inner {
  width: calc(100% - 60px) !important;
  gap: 28px !important;
}

#site-header[data-usc-shell] .nav-logo img { height: 22px !important; }
#mobile-header[data-usc-shell] .nav-logo img,
.mobile-header[data-usc-shell] .nav-logo img { height: 24px !important; }

#site-header[data-usc-shell] .nav-links { gap: 18px !important; margin-left: 36px !important; }
#site-header[data-usc-shell] .nav-links a {
  color: rgba(0, 0, 0, .65) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
#site-header[data-usc-shell] .nav-links a:hover { color: var(--usc-text) !important; }

.nav-search input,
.nav-search-input,
.search-bar input,
.mobile-search input,
input[type="search"],
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: 1px solid var(--usc-border) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--usc-text) !important;
  box-shadow: none !important;
}

.nav-search input:focus,
.nav-search-input:focus,
.search-bar input:focus,
.mobile-search input:focus,
input[type="search"]:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: 0 !important;
  border-color: var(--usc-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(101, 88, 211, .12) !important;
}

.usc-button,
.features-btn,
.service-panel-btn,
.pill-btn,
#sign-in,
#sign-up,
#sign-out,
.usc-mobile-login-pill,
.usc-mobile-start-pill,
.shop-btn,
.checkout-btn,
.add-to-cart,
.add-to-bag,
.usc-drawer-btn,
button[type="submit"],
input[type="button"],
input[type="submit"],
input[type="reset"],
a[class*="btn"],
a[class*="button"] {
  border-radius: var(--usc-radius-button) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.usc-button,
.features-btn,
.service-panel-btn {
  min-height: 48px !important;
  padding: 0 24px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: transform .18s var(--usc-ease), box-shadow .18s var(--usc-ease), background .18s var(--usc-ease) !important;
}

.usc-button:hover,
.features-btn:hover,
.service-panel:hover .service-panel-btn { transform: translateY(-2px) !important; }

.usc-button-primary,
.features-btn-primary,
.pill-btn-dark,
#sign-up,
#sign-out,
.usc-mobile-start-pill,
.shop-btn,
.checkout-btn,
.add-to-cart,
.add-to-bag,
.usc-drawer-btn,
button[type="submit"] {
  background: var(--usc-text) !important;
  border-color: var(--usc-text) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(17, 17, 24, .16) !important;
}

.usc-button-secondary,
.features-btn-secondary,
.service-panel-btn,
.pill-btn-light,
#sign-in,
.usc-mobile-login-pill {
  background: rgba(255, 255, 255, .86) !important;
  color: var(--usc-text) !important;
  border: 1px solid rgba(17, 17, 24, .10) !important;
  box-shadow: none !important;
}

body:not(.app-view) #main-content,
body:not(.app-view) main#main-content,
body:not(.app-view) .deskContent#main-content,
body:not(.app-view) .phoneContent#main-content,
body:not(.app-view) .main-content.page-main,
body:not(.app-view) main.store-layout {
  width: 100% !important;
  margin-top: var(--usc-nav-height) !important;
  padding: 48px var(--usc-page-gutter) 80px !important;
}

body.usc-page-features #main-content,
body.usc-page-index #main-content,
body.page-home #main-content,
body.usc-page-home #main-content,
body.usc-page-what-is-usc #main-content,
body.usc-page-usc-story #main-content,
body.usc-page-personal #main-content,
body.usc-page-pricing #main-content {
  margin-top: 0 !important;
  padding: var(--usc-nav-height) 0 0 !important;
  overflow: hidden !important;
}

.usc-page,
.features-page { width: 100% !important; max-width: none !important; margin: 0 !important; }

.content-wrap,
.services-stack {
  width: min(calc(100% - 100px), var(--usc-max-width)) !important;
  max-width: var(--usc-max-width) !important;
  margin: 0 auto !important;
}

.usc-hero,
.features-hero,
.hero-card {
  width: 100% !important;
  min-height: 680px !important;
  margin: 0 !important;
  padding: 84px max(var(--usc-page-gutter), calc((100vw - var(--usc-max-width)) / 2)) 76px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr) !important;
  align-items: center !important;
  gap: 72px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #f4f0ff 0%, #f9f7ff 42%, #eef8ff 100%) !important;
  box-shadow: none !important;
}

.features-hero-copy,
.usc-hero-copy,
.hero-body { max-width: 690px !important; position: relative !important; z-index: 2 !important; }

.usc-kicker,
.features-kicker,
.service-panel-eyebrow,
.usc-shop-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
  color: rgba(0, 0, 0, .55) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.usc-kicker::before,
.features-kicker::before,
.service-panel-eyebrow::before,
.usc-shop-eyebrow::before {
  content: "" !important;
  width: 24px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

.usc-display-title,
.features-hero h1,
.hero-card h1,
h1.page-title {
  margin: 0 !important;
  color: var(--usc-text) !important;
  font-size: clamp(48px, 5vw, 78px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}

.features-hero-copy > p,
.usc-hero-copy > p,
.hero-body p {
  max-width: 640px !important;
  margin-top: 26px !important;
  color: rgba(0, 0, 0, .65) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.features-hero-actions,
.usc-hero-actions,
.hero-actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 32px !important; }

.features-hero-visual,
.usc-hero-visual,
.marketplace-window,
.hero-img {
  min-width: 0 !important;
  min-height: 430px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.marketplace-window,
.usc-browser-window {
  width: min(650px, 95%) !important;
  min-height: 410px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, .09) !important;
  border-radius: var(--usc-radius-window) !important;
  box-shadow: var(--usc-shadow-window) !important;
  overflow: hidden !important;
}

.feature-intro,
.usc-intro {
  max-width: 850px !important;
  margin: 0 auto !important;
  padding: 110px 30px 74px !important;
  text-align: center !important;
}

.feature-intro h2,
.usc-intro h2 {
  margin: 0 !important;
  color: var(--usc-text) !important;
  font-size: clamp(36px, 4vw, 58px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  font-weight: 780 !important;
}

.feature-intro p,
.usc-intro p {
  max-width: 720px !important;
  margin: 22px auto 0 !important;
  color: rgba(0, 0, 0, .55) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.usc-showcase,
.feature-showcase,
.showcase-section {
  width: min(calc(100% - 100px), var(--usc-max-width)) !important;
  min-height: 650px !important;
  margin: 0 auto 32px !important;
  padding: 80px !important;
  border: 0 !important;
  border-radius: var(--usc-radius-section) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 80px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.usc-showcase-dark { background: #16161d !important; color: #ffffff !important; }
.usc-showcase-pink { background: var(--usc-pink-soft) !important; }
.usc-showcase-blue { background: var(--usc-blue-soft) !important; }

.usc-showcase-copy,
.showcase-copy { max-width: 590px !important; position: relative !important; z-index: 2 !important; }

.usc-showcase-copy > p,
.showcase-copy > p { margin-top: 24px !important; color: var(--usc-muted) !important; font-size: 17px !important; line-height: 1.7 !important; }

.usc-section-title,
.showcase-copy h2,
.feature-showcase h2,
.showcase-section h2 {
  margin: 0 !important;
  color: inherit !important;
  font-size: clamp(38px, 4vw, 60px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  font-weight: 780 !important;
}

.usc-showcase-number,
.showcase-number {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--usc-border) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  color: var(--usc-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.usc-showcase-visual,
.showcase-visual { min-width: 0 !important; min-height: 480px !important; position: relative !important; display: grid !important; place-items: center !important; overflow: hidden !important; }

.usc-showcase-reverse .usc-showcase-copy,
.feature-showcase:nth-of-type(even) .showcase-copy,
.showcase-section:nth-of-type(even) .showcase-copy { order: 2 !important; }

.usc-showcase-reverse .usc-showcase-visual,
.feature-showcase:nth-of-type(even) .showcase-visual,
.showcase-section:nth-of-type(even) .showcase-visual { order: 1 !important; }

.usc-check-list,
.showcase-list,
.feature-list { display: grid !important; gap: 13px !important; margin-top: 28px !important; padding: 0 !important; list-style: none !important; }

.usc-check-list li,
.showcase-list li,
.feature-list li { display: flex !important; align-items: center !important; gap: 11px !important; color: inherit !important; font-size: 14px !important; font-weight: 650 !important; }

.usc-check-list i,
.showcase-list i,
.feature-list i { width: 22px !important; height: 22px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: var(--usc-text) !important; color: #ffffff !important; font-size: 10px !important; flex: 0 0 auto !important; }

.features-mini-grid,
.usc-support-grid { width: min(calc(100% - 100px), var(--usc-max-width)) !important; margin: 90px auto !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; }

.features-mini-grid article,
.usc-support-card,
.service-panel { border: 1px solid var(--usc-border) !important; border-radius: var(--usc-radius-card) !important; background: #ffffff !important; box-shadow: none !important; color: var(--usc-text) !important; overflow: hidden !important; }

.features-mini-grid article,
.usc-support-card { min-height: 260px !important; padding: 28px !important; }

.features-mini-grid article h3,
.usc-support-card h3,
.service-panel h2 { margin: 0 !important; color: var(--usc-text) !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 760 !important; }

.features-mini-grid article p,
.usc-support-card p,
.service-panel p { margin-top: 12px !important; color: var(--usc-muted) !important; font-size: 14px !important; line-height: 1.65 !important; }

.service-panel { display: block !important; min-height: 0 !important; padding: 28px !important; transition: border-color .18s var(--usc-ease), transform .18s var(--usc-ease), box-shadow .18s var(--usc-ease) !important; }
.service-panel:hover { border-color: var(--usc-border-strong) !important; box-shadow: var(--usc-shadow-card) !important; transform: translateY(-2px) !important; }
.service-panel-inner { min-height: 170px !important; padding: 0 !important; display: grid !important; grid-template-columns: 84px minmax(0, 1fr) !important; align-items: center !important; gap: 26px !important; }
.service-panel-logo-wrap { width: 84px !important; height: 84px !important; margin-bottom: 0 !important; border-radius: 12px !important; display: grid !important; place-items: center !important; background: rgba(0, 0, 0, .04) !important; color: #000000 !important; }
.service-panel-logo { max-width: 58px !important; max-height: 58px !important; object-fit: contain !important; }

.features-final-cta,
.usc-final-cta {
  width: min(calc(100% - 100px), var(--usc-max-width)) !important;
  margin: 32px auto 96px !important;
  padding: 92px 50px !important;
  border: 0 !important;
  border-radius: var(--usc-radius-section) !important;
  background: linear-gradient(135deg, #eee9ff, #f8f4ff 45%, #eaf6ff) !important;
  text-align: center !important;
  box-shadow: none !important;
}

.features-final-cta h2,
.usc-final-cta h2 { max-width: 880px !important; margin: 0 auto !important; color: var(--usc-text) !important; font-size: clamp(38px, 5vw, 68px) !important; line-height: 1 !important; letter-spacing: 0 !important; font-weight: 800 !important; }
.features-final-cta p,
.usc-final-cta p { max-width: 650px !important; margin: 22px auto 0 !important; color: var(--usc-muted) !important; font-size: 17px !important; line-height: 1.7 !important; }
.features-final-cta .features-hero-actions,
.usc-final-cta .usc-hero-actions { justify-content: center !important; }

#main-content.usc-shop-marketplace,
body.usc-page-shop #main-content {
  margin-top: var(--usc-nav-height) !important;
  padding: 48px max(24px, calc((100vw - var(--usc-max-width)) / 2)) 80px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
  gap: 28px !important;
}

.usc-shop-categories,
.usc-shop-stores { border: 1px solid var(--usc-border) !important; border-radius: var(--usc-radius-card) !important; background: #ffffff !important; box-shadow: none !important; }
.usc-shop-categories { align-self: start !important; position: sticky !important; top: calc(var(--usc-nav-height) + 24px) !important; padding: 24px !important; }
.usc-shop-stores { padding: 0 !important; border: 0 !important; }
.usc-shop-section-heading span,
.usc-shop-stores-head h1 { color: var(--usc-text) !important; letter-spacing: 0 !important; }
.usc-shop-stores-head h1 { font-size: clamp(34px, 4vw, 58px) !important; line-height: 1.05 !important; font-weight: 780 !important; }
.usc-shop-ad-banner { min-height: 260px !important; margin: 28px 0 !important; border-radius: var(--usc-radius-section) !important; overflow: hidden !important; border: 0 !important; box-shadow: none !important; }
.usc-shop-ad-banner::before { background: linear-gradient(90deg, rgba(17, 17, 24, .72), rgba(17, 17, 24, .18)) !important; }
.usc-shop-ad-overlay { max-width: 620px !important; padding: 34px !important; }
.usc-shop-ad-label { color: rgba(255, 255, 255, .78) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.usc-shop-ad-overlay strong { color: #ffffff !important; font-size: clamp(28px, 4vw, 50px) !important; line-height: 1.04 !important; font-weight: 800 !important; letter-spacing: 0 !important; }
.usc-shop-ad-copy { color: rgba(255, 255, 255, .84) !important; font-size: 15px !important; line-height: 1.7 !important; }

.usc-store-list,
.product-grid,
.products-grid,
.grid-products { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 18px !important; }

.usc-store-card,
.product-card,
.store-card,
.reward-card,
.download-card,
.post-card,
.thread-card,
.conversation-card,
.notification-card,
.order-card,
.menu-card,
.metric-card { border: 1px solid var(--usc-border) !important; border-radius: var(--usc-radius-card) !important; background: #ffffff !important; box-shadow: none !important; color: var(--usc-text) !important; overflow: hidden !important; }

.usc-store-card:hover,
.product-card:hover,
.store-card:hover,
.order-card:hover,
.menu-card:hover { border-color: var(--usc-border-strong) !important; box-shadow: var(--usc-shadow-card) !important; transform: translateY(-2px) !important; }
.usc-store-cover,
.product-card img,
.product-image img,
.product-gallery img { background-color: var(--usc-surface-soft) !important; }
.usc-store-body { padding: 14px !important; }
.usc-store-avatar { border: 1px solid var(--usc-border) !important; box-shadow: none !important; }
.usc-store-title-row strong,
.product-card h3,
.product-title,
#product-name { color: var(--usc-text) !important; font-weight: 750 !important; letter-spacing: 0 !important; }
.usc-store-meta,
.usc-store-copy span,
.product-card p,
.product-meta { color: var(--usc-muted) !important; }

body.usc-page-terms #main-content,
body.usc-page-privacy #main-content,
body.usc-page-returns #main-content,
body.usc-page-instructions #main-content,
body.usc-page-troubleshooting #main-content {
  width: min(calc(100% - 40px), 920px) !important;
  margin: 0 auto !important;
  padding: calc(var(--usc-nav-height) + 64px) 0 96px !important;
}

body.usc-page-terms #main-content > *,
body.usc-page-privacy #main-content > *,
body.usc-page-returns #main-content > *,
body.usc-page-instructions #main-content > *,
body.usc-page-troubleshooting #main-content > * {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.usc-page-terms h1,
body.usc-page-privacy h1,
body.usc-page-returns h1,
body.usc-page-instructions h1,
body.usc-page-troubleshooting h1 { font-size: clamp(40px, 6vw, 62px) !important; line-height: 1 !important; letter-spacing: 0 !important; font-weight: 800 !important; }

body.usc-page-terms h2,
body.usc-page-privacy h2,
body.usc-page-returns h2,
body.usc-page-instructions h2,
body.usc-page-troubleshooting h2 { margin-top: 54px !important; font-size: 26px !important; line-height: 1.18 !important; font-weight: 760 !important; }

body.usc-page-terms p,
body.usc-page-terms li,
body.usc-page-privacy p,
body.usc-page-privacy li,
body.usc-page-returns p,
body.usc-page-returns li,
body.usc-page-instructions p,
body.usc-page-instructions li,
body.usc-page-troubleshooting p,
body.usc-page-troubleshooting li { color: #555560 !important; font-size: 15px !important; line-height: 1.8 !important; }

body:not(.usc-page-features):not(.usc-page-index):not(.page-home):not(.usc-page-home):not(.usc-page-shop):not(.usc-page-terms):not(.usc-page-privacy) #main-content > .usc-card,
body:not(.usc-page-features):not(.usc-page-index):not(.page-home):not(.usc-page-home):not(.usc-page-shop):not(.usc-page-terms):not(.usc-page-privacy) #main-content > .about-card,
body:not(.usc-page-features):not(.usc-page-index):not(.page-home):not(.usc-page-home):not(.usc-page-shop):not(.usc-page-terms):not(.usc-page-privacy) main#main-content > .usc-card,
body:not(.usc-page-features):not(.usc-page-index):not(.page-home):not(.usc-page-home):not(.usc-page-shop):not(.usc-page-terms):not(.usc-page-privacy) main#main-content > .about-card {
  width: min(calc(100vw - 100px), 1440px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 36px 40px !important;
  border: 1px solid var(--usc-border) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--usc-text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title { color: var(--usc-text) !important; letter-spacing: 0 !important; }

h1 { font-size: clamp(34px, 5vw, 62px) !important; font-weight: 780 !important; line-height: 1.04 !important; }
h2,
.about-card h2,
.usc-card > b:first-child,
.usc-card b.inter-font:first-child { font-size: clamp(24px, 3vw, 38px) !important; font-weight: 760 !important; line-height: 1.15 !important; }

p,
li,
td,
th,
label,
.muted,
.inter-font { font-size: 14px; }

p,
.about-card p,
.usc-card p,
.hero-card p { color: var(--usc-muted) !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: 0 !important; }

.price,
.product-price,
.usc-price,
[class*="price"] { color: var(--usc-text) !important; }

table { border-color: var(--usc-border) !important; }
hr { border: 0 !important; border-top: 1px solid var(--usc-border) !important; }

.usc-cart-overlay { background: rgba(0, 0, 0, .2) !important; }
#cart,
.usc-cart-drawer,
.modal,
.dialog,
[role="dialog"] { background: #ffffff !important; color: var(--usc-text) !important; border-color: var(--usc-border) !important; box-shadow: var(--usc-shadow-card) !important; }
.usc-cart-count { background: var(--usc-text) !important; color: #ffffff !important; border: 1px solid var(--usc-text) !important; box-shadow: none !important; }

footer[data-usc-shell] { margin-top: 64px !important; padding: 0 !important; background: #ffffff !important; border-top: 1px solid var(--usc-border) !important; color: var(--usc-text) !important; box-shadow: none !important; }
footer[data-usc-shell] .footer-inner { width: calc(100% - 60px) !important; max-width: none !important; margin: 0 auto !important; padding: 44px 0 28px !important; }
footer[data-usc-shell] .footer-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 36px !important; }
footer[data-usc-shell] .footer-col h4 { margin: 0 0 14px !important; color: var(--usc-text) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
footer[data-usc-shell] .footer-col ul { display: flex !important; flex-direction: column !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
footer[data-usc-shell] .footer-col a { color: var(--usc-muted) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; }
footer[data-usc-shell] .footer-col a:hover { color: var(--usc-text) !important; }
footer[data-usc-shell] .footer-bottom { margin-top: 32px !important; padding-top: 24px !important; border-top: 1px solid var(--usc-border) !important; color: var(--usc-muted) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.5 !important; }

.usc-reveal,
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--usc-ease), transform .5s var(--usc-ease); }
.usc-reveal.is-visible,
.reveal.show,
.show { opacity: 1 !important; transform: translateY(0) !important; }

@media (max-width: 900px) {
  :root { --usc-nav-height: 52px; --usc-gutter: 14px; --usc-page-gutter: 28px; }
  #site-header[data-usc-shell].desktop-only { display: none !important; }
  #mobile-header[data-usc-shell],
  .mobile-header[data-usc-shell] { display: flex !important; align-items: center !important; padding: 0 14px !important; }
  #site-header[data-usc-shell] .nav-inner,
  footer[data-usc-shell] .footer-inner { width: calc(100% - 28px) !important; }
  body:not(.app-view) #main-content,
  body:not(.app-view) main#main-content,
  body:not(.app-view) .main-content.page-main,
  body:not(.app-view) main.store-layout { padding: 40px 20px 64px !important; }
  .usc-hero,
  .features-hero,
  .hero-card { min-height: 0 !important; padding: 72px 28px 64px !important; grid-template-columns: 1fr !important; gap: 48px !important; }
  .features-hero-visual,
  .usc-hero-visual,
  .marketplace-window,
  .hero-img { min-height: 430px !important; }
  .usc-showcase,
  .feature-showcase,
  .showcase-section,
  .usc-showcase-reverse { width: calc(100% - 40px) !important; min-height: 0 !important; padding: 56px 34px !important; grid-template-columns: 1fr !important; gap: 48px !important; }
  .usc-showcase-reverse .usc-showcase-copy,
  .usc-showcase-reverse .usc-showcase-visual,
  .feature-showcase:nth-of-type(even) .showcase-copy,
  .feature-showcase:nth-of-type(even) .showcase-visual,
  .showcase-section:nth-of-type(even) .showcase-copy,
  .showcase-section:nth-of-type(even) .showcase-visual { order: initial !important; }
  .features-mini-grid,
  .usc-support-grid { width: calc(100% - 40px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .features-final-cta,
  .usc-final-cta { width: calc(100% - 40px) !important; }
  #main-content.usc-shop-marketplace,
  body.usc-page-shop #main-content { display: block !important; padding: 28px 20px 64px !important; }
  .usc-shop-categories { position: static !important; margin-bottom: 24px !important; }
  body:not(.usc-page-features):not(.usc-page-index):not(.page-home):not(.usc-page-home):not(.usc-page-shop):not(.usc-page-terms):not(.usc-page-privacy) #main-content > .usc-card,
  body:not(.usc-page-features):not(.usc-page-index):not(.page-home):not(.usc-page-home):not(.usc-page-shop):not(.usc-page-terms):not(.usc-page-privacy) #main-content > .about-card { width: calc(100vw - 40px) !important; padding: 28px 24px !important; }
  footer[data-usc-shell] .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; }
}

@media (max-width: 600px) {
  :root { --usc-page-gutter: 20px; }
  .usc-hero,
  .features-hero,
  .hero-card { padding: 58px 20px 48px !important; }
  .usc-display-title,
  .features-hero h1,
  .hero-card h1,
  h1.page-title { font-size: clamp(42px, 13vw, 54px) !important; }
  .features-hero-copy > p,
  .usc-hero-copy > p,
  .hero-body p,
  .usc-showcase-copy > p,
  .showcase-copy > p,
  .feature-intro p,
  .usc-intro p,
  .features-final-cta p,
  .usc-final-cta p { font-size: 15px !important; }
  .usc-showcase,
  .feature-showcase,
  .showcase-section { width: calc(100% - 24px) !important; padding: 42px 22px !important; border-radius: 22px !important; }
  .usc-showcase-visual,
  .showcase-visual { min-height: 360px !important; }
  .features-mini-grid,
  .usc-support-grid { width: calc(100% - 24px) !important; grid-template-columns: 1fr !important; }
  .features-final-cta,
  .usc-final-cta { width: calc(100% - 24px) !important; padding: 64px 22px !important; border-radius: 22px !important; }
  .features-hero-actions,
  .usc-hero-actions,
  .hero-actions { align-items: stretch !important; flex-direction: column !important; }
  .usc-button,
  .features-btn,
  .service-panel-btn { width: 100% !important; }
  .service-panel-inner { grid-template-columns: 62px 1fr !important; gap: 16px !important; }
  .service-panel-logo-wrap { width: 62px !important; height: 62px !important; }
  footer[data-usc-shell] .footer-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .usc-reveal,
  .reveal { opacity: 1 !important; transform: none !important; }
}
/* Klarna-inspired editorial commerce layer - 2026-07-30 */
:root {
  --usc-klarna-pink: #ffb3c7;
  --usc-klarna-pink-soft: #ffe7ef;
  --usc-klarna-yellow: #fff2b8;
  --usc-klarna-lilac: #eadcff;
  --usc-klarna-mint: #dff8ed;
  --usc-klarna-blue: #dff2ff;
  --usc-klarna-ink: #0b0b0f;
}

body.usc-marketing-page #main-content {
  max-width: none !important;
  margin-top: 0 !important;
  padding: var(--usc-nav-height) 0 0 !important;
  overflow: hidden !important;
}

body.usc-marketing-page #main-content > .usc-card,
body.usc-marketing-page #main-content > .about-card,
body.usc-marketing-page #main-content > .hero-card,
body.usc-marketing-page #main-content > section,
body.usc-marketing-page #main-content > .content-wrap {
  width: min(calc(100% - 100px), var(--usc-max-width)) !important;
  max-width: var(--usc-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.usc-marketing-page #main-content > .usc-card:first-child,
body.usc-marketing-page #main-content > .about-card:first-child,
body.usc-marketing-page #main-content > .hero-card:first-child,
body.usc-marketing-page #main-content > section:first-child:not(.feature-intro):not(.features-final-cta),
body.usc-marketing-page #main-content > .content-wrap:first-child {
  width: 100% !important;
  max-width: none !important;
  min-height: 650px !important;
  margin: 0 !important;
  padding: 96px max(var(--usc-page-gutter), calc((100vw - var(--usc-max-width)) / 2)) 86px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  align-items: center !important;
  box-shadow: none !important;
}

body.usc-marketing-page #main-content > .content-wrap:first-child.services-stack {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

body.usc-marketing-page #main-content > .usc-card:first-child::before,
body.usc-marketing-page #main-content > .about-card:first-child::before,
body.usc-marketing-page #main-content > .hero-card:first-child::before {
  content: "USC Commerce";
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-bottom: 20px;
  color: var(--usc-klarna-ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.usc-marketing-page #main-content > .usc-card:first-child h1,
body.usc-marketing-page #main-content > .about-card:first-child h1,
body.usc-marketing-page #main-content > .hero-card:first-child h1,
body.usc-marketing-page #main-content > section:first-child h1,
body.usc-marketing-page #main-content > .content-wrap:first-child h1,
body.usc-marketing-page #main-content > .content-wrap:first-child h2 {
  max-width: 980px !important;
  color: var(--usc-klarna-ink) !important;
  font-size: clamp(54px, 8vw, 112px) !important;
  line-height: .92 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.usc-marketing-page #main-content > .usc-card:first-child p,
body.usc-marketing-page #main-content > .about-card:first-child p,
body.usc-marketing-page #main-content > .hero-card:first-child p,
body.usc-marketing-page #main-content > section:first-child p,
body.usc-marketing-page #main-content > .content-wrap:first-child p {
  max-width: 680px !important;
  color: rgba(11, 11, 15, .72) !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  line-height: 1.45 !important;
}

body.usc-marketing-page #main-content > .usc-card:not(:first-child),
body.usc-marketing-page #main-content > .about-card:not(:first-child),
body.usc-marketing-page #main-content > section:not(:first-child):not(.features-final-cta):not(.feature-intro) {
  min-height: 520px !important;
  margin-top: 32px !important;
  margin-bottom: 32px !important;
  padding: 72px !important;
  border: 0 !important;
  border-radius: var(--usc-radius-section) !important;
  box-shadow: none !important;
}

body.usc-marketing-page .features-hero h1,
body.usc-marketing-page .usc-display-title,
body.usc-marketing-page .hero-card h1 {
  font-size: clamp(54px, 8vw, 112px) !important;
  line-height: .92 !important;
  font-weight: 900 !important;
}

body.usc-marketing-page .marketplace-window,
body.usc-marketing-page .usc-browser-window,
body.usc-marketing-page .showcase-visual > *,
body.usc-marketing-page .features-hero-visual > * {
  border-radius: 28px !important;
  box-shadow: 0 34px 80px rgba(83, 38, 60, .18) !important;
}

body.usc-marketing-page .features-mini-grid article,
body.usc-marketing-page .usc-support-card,
body.usc-marketing-page .service-panel {
  border: 0 !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 44px rgba(58, 24, 42, .08) !important;
}

body.usc-marketing-page .service-panel:nth-child(1) .service-panel-logo-wrap { background: var(--usc-klarna-pink-soft) !important; }
body.usc-marketing-page .service-panel:nth-child(2) .service-panel-logo-wrap { background: var(--usc-klarna-yellow) !important; }
body.usc-marketing-page .service-panel:nth-child(3) .service-panel-logo-wrap { background: var(--usc-klarna-mint) !important; }

body.usc-app-page .usc-card,
body.usc-app-page .card,
body.usc-app-page .metric-card,
body.usc-app-page .order-card,
body.usc-app-page .notification-card,
body.usc-app-page .conversation-card {
  border-radius: 16px !important;
  border: 1px solid var(--usc-border) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.usc-document-page #main-content,
body.usc-document-page main#main-content {
  width: min(calc(100% - 40px), 920px) !important;
  margin: 0 auto !important;
  padding: calc(var(--usc-nav-height) + 64px) 0 96px !important;
}

body.usc-document-page h1 {
  font-size: clamp(42px, 6vw, 70px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
}

body.usc-document-page h2 { font-size: 28px !important; }
body.usc-document-page p,
body.usc-document-page li { font-size: 15px !important; line-height: 1.82 !important; color: #555560 !important; }

@media (max-width: 900px) {
  body.usc-marketing-page #main-content > .usc-card,
  body.usc-marketing-page #main-content > .about-card,
  body.usc-marketing-page #main-content > .hero-card,
  body.usc-marketing-page #main-content > section,
  body.usc-marketing-page #main-content > .content-wrap {
    width: calc(100% - 40px) !important;
  }

  body.usc-marketing-page #main-content > .usc-card:first-child,
  body.usc-marketing-page #main-content > .about-card:first-child,
  body.usc-marketing-page #main-content > .hero-card:first-child,
  body.usc-marketing-page #main-content > section:first-child:not(.feature-intro):not(.features-final-cta),
  body.usc-marketing-page #main-content > .content-wrap:first-child {
    width: 100% !important;
    min-height: 0 !important;
    padding: 72px 28px 64px !important;
  }

  body.usc-marketing-page #main-content > .usc-card:first-child h1,
  body.usc-marketing-page #main-content > .about-card:first-child h1,
  body.usc-marketing-page #main-content > .hero-card:first-child h1,
  body.usc-marketing-page #main-content > section:first-child h1,
  body.usc-marketing-page #main-content > .content-wrap:first-child h1,
  body.usc-marketing-page #main-content > .content-wrap:first-child h2 {
    font-size: clamp(48px, 14vw, 76px) !important;
  }

  body.usc-marketing-page #main-content > .usc-card:not(:first-child),
  body.usc-marketing-page #main-content > .about-card:not(:first-child),
  body.usc-marketing-page #main-content > section:not(:first-child):not(.features-final-cta):not(.feature-intro) {
    min-height: 0 !important;
    padding: 48px 28px !important;
  }
}

@media (max-width: 600px) {
  body.usc-marketing-page #main-content > .usc-card,
  body.usc-marketing-page #main-content > .about-card,
  body.usc-marketing-page #main-content > .hero-card,
  body.usc-marketing-page #main-content > section,
  body.usc-marketing-page #main-content > .content-wrap {
    width: calc(100% - 24px) !important;
  }

  body.usc-marketing-page #main-content > .usc-card:first-child,
  body.usc-marketing-page #main-content > .about-card:first-child,
  body.usc-marketing-page #main-content > .hero-card:first-child,
  body.usc-marketing-page #main-content > section:first-child:not(.feature-intro):not(.features-final-cta),
  body.usc-marketing-page #main-content > .content-wrap:first-child {
    width: 100% !important;
    padding: 58px 20px 48px !important;
  }

  body.usc-marketing-page #main-content > .usc-card:not(:first-child),
  body.usc-marketing-page #main-content > .about-card:not(:first-child),
  body.usc-marketing-page #main-content > section:not(:first-child):not(.features-final-cta):not(.feature-intro) {
    padding: 42px 22px !important;
    border-radius: 22px !important;
  }
}
/* USC mobile shell: SecureBin-style nav and footer */
.usc-mobile-footer-shell .usc-mobile-footer {
  display: none;
}

@media (max-width: 768px) {
  html body #mobile-header[data-usc-shell],
  html body .mobile-header[data-usc-shell] {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 1000 !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body #mobile-header[data-usc-shell] .nav-logo img,
  html body .mobile-header[data-usc-shell] .nav-logo img {
    width: auto !important;
    height: 24px !important;
    object-fit: contain !important;
  }

  html body #mob-nav-btn,
  html body #mobile-header[data-usc-shell] #mob-nav-btn,
  html body .mobile-header[data-usc-shell] #mob-nav-btn {
    position: relative !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #mob-nav-btn img,
  html body #mob-nav-btn svg.ham-icon {
    display: none !important;
  }

  html body #mob-nav-btn .usc-menu-lines,
  html body #mob-nav-btn .usc-menu-lines::before,
  html body #mob-nav-btn .usc-menu-lines::after {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #202126 !important;
    content: "" !important;
  }

  html body #mob-nav-btn .usc-menu-lines {
    position: relative !important;
  }

  html body #mob-nav-btn .usc-menu-lines::before {
    position: absolute !important;
    left: 0 !important;
    top: -6px !important;
  }

  html body #mob-nav-btn .usc-menu-lines::after {
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
  }

  html body #mob-nav-btn .usc-cart-count,
  html body #mob-nav-btn .usc-mobile-menu-count {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: #202126 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
  }

  html body #mob-nav-dropdown {
    position: fixed !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
    height: calc(100dvh - 54px) !important;
    padding: 18px 24px 26px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html body #mob-nav-dropdown.open,
  html body #mob-nav-dropdown.closing,
  html body.usc-mobile-nav-open #mob-nav-dropdown {
    display: flex !important;
  }

  html body #mob-nav-dropdown .usc-mobile-product-search {
    display: none !important;
  }

  html body #mob-nav-dropdown .usc-mobile-nav-row {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-bottom: 1px solid #ececee !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1d1d22 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  html body #mob-nav-dropdown .usc-mobile-chevron {
    color: #8e9097 !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  html body #mob-nav-dropdown .usc-mobile-bag-row .usc-cart-count {
    position: static !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #202126 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
  }

  html body #mob-nav-dropdown .usc-mobile-auth-row {
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  html body #mob-nav-dropdown .usc-mobile-login-pill,
  html body #mob-nav-dropdown .usc-mobile-start-pill,
  html body #mob-nav-dropdown #mob-nav-signout {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    border: 1px solid #dedfe4 !important;
    background: #ffffff !important;
    color: #1d1d22 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  html body #mob-nav-dropdown .usc-mobile-start-pill,
  html body #mob-nav-dropdown #mob-nav-signout {
    border-color: #202126 !important;
    background: #202126 !important;
    color: #ffffff !important;
  }

  html body footer[data-usc-shell].usc-mobile-footer-shell,
  html body footer.usc-mobile-footer-shell {
    padding: 24px 23px 26px !important;
    border-top: 1px solid #eeeeef !important;
    background: #ffffff !important;
  }

  html body footer.usc-mobile-footer-shell > .footer-inner,
  html body footer.usc-mobile-footer-shell > .footer-container,
  html body footer.usc-mobile-footer-shell > .footer-grid,
  html body footer.usc-mobile-footer-shell > .footer-top,
  html body footer.usc-mobile-footer-shell > .footer-bottom {
    display: none !important;
  }

  html body footer.usc-mobile-footer-shell .usc-mobile-footer {
    display: block !important;
  }

  .usc-mobile-footer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 13px !important;
  }

  .usc-mobile-footer-icon {
    width: 25px !important;
    height: 25px !important;
    object-fit: contain !important;
    border-radius: 5px !important;
  }

  .usc-mobile-footer-name {
    color: #101116 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .usc-mobile-footer-copy {
    max-width: 320px !important;
    margin: 0 0 27px !important;
    color: #737a8b !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .usc-mobile-footer-section {
    border-bottom: 1px solid #d9dbe2 !important;
  }

  .usc-mobile-footer-toggle {
    width: 100% !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111217 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .usc-mobile-footer-plus {
    color: #111217 !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  .usc-mobile-footer-toggle[aria-expanded="true"] .usc-mobile-footer-plus {
    transform: rotate(45deg) !important;
  }

  .usc-mobile-footer-panel {
    display: none !important;
    padding: 0 0 10px !important;
  }

  .usc-mobile-footer-panel.open {
    display: grid !important;
    gap: 8px !important;
  }

  .usc-mobile-footer-panel a {
    color: #687084 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
  }

  .usc-mobile-footer-bottom {
    margin-top: 19px !important;
    color: #a2a8b5 !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  .usc-mobile-footer-social {
    margin-top: 14px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .usc-mobile-footer-social a {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e1e3e8 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #8a91a0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
}

@media (max-width: 768px) {
  html body footer.usc-mobile-footer-shell,
  html body footer[data-usc-shell].usc-mobile-footer-shell {
    display: block !important;
    visibility: visible !important;
  }
}

/* USC mobile auth/nav consistency */
@media (max-width: 768px) {
  html body #mob-nav-btn,
  html body #mob-nav-btn.mob-icon-btn,
  html body #mobile-header[data-usc-shell] #mob-nav-btn,
  html body #mobile-header[data-usc-shell] #mob-nav-btn.mob-icon-btn,
  html body .mobile-header[data-usc-shell] #mob-nav-btn,
  html body .mobile-header[data-usc-shell] #mob-nav-btn.mob-icon-btn {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #mob-nav-dropdown .usc-mobile-profile-pill {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    border: 1px solid #202126 !important;
    background: #202126 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  html body #mob-nav-dropdown #mob-nav-signout.usc-mobile-login-pill {
    border-color: #dedfe4 !important;
    background: #ffffff !important;
    color: #1d1d22 !important;
  }
}

/* USC desktop signed-in nav consistency */
@media (min-width: 769px) {
  html body #site-header[data-usc-shell] .nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  html body #site-header[data-usc-shell] .nav-right .usc-global-product-search {
    order: 10 !important;
    flex: 0 0 220px !important;
  }

  html body #site-header[data-usc-shell] .nav-right #sign-in {
    order: 20 !important;
  }

  html body #site-header[data-usc-shell] .nav-right #sign-up,
  html body #site-header[data-usc-shell] .nav-right #profile-btn {
    order: 30 !important;
  }

  html body #site-header[data-usc-shell] .nav-right #sign-out {
    order: 40 !important;
  }

  html body #site-header[data-usc-shell] .nav-right .nav-bag-btn,
  html body #site-header[data-usc-shell] .nav-right .usc-cart-trigger {
    order: 50 !important;
  }

  html body #site-header[data-usc-shell] .nav-right #profile-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #111118 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  html body #site-header[data-usc-shell] .nav-right #sign-out {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background: #111118 !important;
    border-color: #111118 !important;
    color: #ffffff !important;
  }
}

/* USC desktop footer cleanup: never show mobile footer shell on desktop */
@media (min-width: 769px) {
  html body footer .usc-mobile-footer,
  html body footer.usc-mobile-footer-shell .usc-mobile-footer,
  html body footer[data-usc-shell].usc-mobile-footer-shell .usc-mobile-footer {
    display: none !important;
    visibility: hidden !important;
  }
}

/* USC cart drawer: keep View Bag readable on dark drawer CTA. */
#cart .usc-drawer-actions .usc-drawer-btn,
#cart .usc-drawer-actions .usc-drawer-btn.secondary,
#cart .usc-drawer-actions a.usc-drawer-btn,
#cart .usc-drawer-actions a.usc-drawer-btn.secondary,
#cart .usc-drawer-actions #usc-view-bag,
#cart .usc-drawer-actions #usc-cart-view-bag {
  background: #1d1d1f !important;
  border-color: #1d1d1f !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

#cart .usc-drawer-actions .usc-drawer-btn:hover,
#cart .usc-drawer-actions .usc-drawer-btn:focus,
#cart .usc-drawer-actions .usc-drawer-btn:visited {
  color: #ffffff !important;
}
/* USC mobile header divider */
@media (max-width: 768px) {
  html body #mobile-header[data-usc-shell],
  html body .mobile-header[data-usc-shell] {
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
  }
}
/* USC mobile footer Font Awesome social icons */
@media (max-width: 768px) {
  .usc-mobile-footer-social i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
}
/* USC mobile header product search */
@media (max-width: 768px) {
  html body #mobile-header[data-usc-shell] .nav-logo img,
  html body .mobile-header[data-usc-shell] .nav-logo img {
    height: 29px !important;
  }

  html body #mobile-header[data-usc-shell] .usc-mobile-product-search,
  html body .mobile-header[data-usc-shell] .usc-mobile-product-search {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 210px !important;
    height: 32px !important;
    margin: 0 12px !important;
    display: block !important;
  }

  html body #mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-icon,
  html body .mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8e9097 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  html body #mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-icon svg,
  html body .mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  html body #mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-input,
  html body .mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-input {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px 0 30px !important;
    border: 1px solid #dedfe4 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #1d1d22 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
  }

  html body #mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-input::placeholder,
  html body .mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-input::placeholder {
    color: #8e9097 !important;
  }

  html body #mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-suggestions,
  html body .mobile-header[data-usc-shell] .usc-mobile-product-search .usc-global-search-suggestions {
    position: fixed !important;
    top: 54px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 1001 !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .12) !important;
  }
}

@media (max-width: 380px) {
  html body #mobile-header[data-usc-shell],
  html body .mobile-header[data-usc-shell] {
    padding: 0 14px !important;
  }

  html body #mobile-header[data-usc-shell] .usc-mobile-product-search,
  html body .mobile-header[data-usc-shell] .usc-mobile-product-search {
    max-width: none !important;
    margin: 0 8px !important;
  }
}
/* USC cart drawer parity with /commerce/features */
.usc-cart-overlay,
html body .usc-cart-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .12) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease, cubic-bezier(.4, 0, .2, 1)) !important;
  z-index: 1998 !important;
}

.usc-cart-overlay.open,
html body .usc-cart-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#cart,
#cart.usc-cart-drawer,
html body #cart,
html body #cart.usc-cart-drawer,
html body .usc-cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(400px, 92vw) !important;
  max-width: min(400px, 92vw) !important;
  height: 100dvh !important;
  background: #ffffff !important;
  color: #111118 !important;
  border-left: 1px solid rgba(0, 0, 0, .08) !important;
  border-radius: 0 !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .08) !important;
  overflow: hidden !important;
  transform: translateX(105%) !important;
  transition: transform .28s var(--ease, cubic-bezier(.4, 0, .2, 1)) !important;
  z-index: 1999 !important;
}

#cart[hidden],
html body #cart[hidden] {
  display: none !important;
}

#cart.open,
#cart.show,
#cart.usc-cart-drawer.open,
#cart.usc-cart-drawer.show,
html body #cart.open,
html body #cart.show,
html body #cart.usc-cart-drawer.open,
html body #cart.usc-cart-drawer.show {
  transform: translateX(0) !important;
}

#cart .usc-cart-shell,
html body #cart .usc-cart-shell {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

#cart .usc-cart-head,
html body #cart .usc-cart-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 20px 20px 14px !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

#cart .usc-cart-head-title,
html body #cart .usc-cart-head-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#cart .usc-cart-head-title strong,
html body #cart .usc-cart-head-title strong {
  color: #111118 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

#cart .usc-cart-head-title span,
html body #cart .usc-cart-head-title span {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

#cart .usc-cart-close,
html body #cart .usc-cart-close {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  background: #ffffff !important;
  color: #6b7280 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background .15s !important;
}

#cart .usc-cart-close:hover,
html body #cart .usc-cart-close:hover {
  background: #ffffff !important;
}

#cart .usc-cart-body,
html body #cart .usc-cart-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 16px 20px !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

#cart .usc-cart-empty,
html body #cart .usc-cart-empty {
  border: 1px dashed rgba(0, 0, 0, .12) !important;
  border-radius: 10px !important;
  padding: 28px 18px !important;
  text-align: center !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

#cart .usc-cart-item,
html body #cart .usc-cart-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
  background: transparent !important;
}

#cart .usc-cart-thumb,
html body #cart .usc-cart-thumb {
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: #f7f7f8 !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
}

#cart .usc-cart-name,
html body #cart .usc-cart-name {
  margin: 0 0 3px !important;
  color: #111118 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

#cart .usc-cart-meta,
html body #cart .usc-cart-meta {
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#cart .usc-cart-price,
html body #cart .usc-cart-price {
  color: #111118 !important;
  white-space: nowrap !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#cart .usc-cart-actions-row,
html body #cart .usc-cart-actions-row {
  position: static !important;
  margin-top: 10px !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#cart .usc-qty-wrap,
html body #cart .usc-qty-wrap {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f7f7f8 !important;
}

#cart .usc-qty-btn,
html body #cart .usc-qty-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #111118 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#cart .usc-qty-num,
html body #cart .usc-qty-num {
  min-width: 26px !important;
  text-align: center !important;
  color: #111118 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#cart .usc-remove-btn,
html body #cart .usc-remove-btn {
  position: static !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  background: #ffffff !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#cart .usc-cart-foot,
html body #cart .usc-cart-foot {
  border-top: 1px solid rgba(0, 0, 0, .08) !important;
  padding: 16px 20px max(20px, calc(16px + env(safe-area-inset-bottom))) !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

#cart .summary-row,
#cart .usc-summary-row,
html body #cart .summary-row,
html body #cart .usc-summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#cart .summary-row.total,
#cart .usc-summary-row.total,
html body #cart .summary-row.total,
html body #cart .usc-summary-row.total {
  display: flex !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  color: #111118 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#cart .summary-row span:last-child,
#cart .usc-summary-row span:last-child,
html body #cart .summary-row span:last-child,
html body #cart .usc-summary-row span:last-child {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#cart .usc-drawer-actions,
html body #cart .usc-drawer-actions {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

#cart .usc-drawer-actions .usc-drawer-btn,
#cart .usc-drawer-btn,
html body #cart .usc-drawer-actions .usc-drawer-btn,
html body #cart .usc-drawer-btn {
  min-height: 42px !important;
  height: auto !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111118 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#cart .usc-drawer-actions .usc-drawer-btn.secondary,
#cart .usc-drawer-actions a.usc-drawer-btn.secondary,
#cart .usc-drawer-actions #usc-view-bag,
#cart .usc-drawer-actions #usc-cart-view-bag,
html body #cart .usc-drawer-actions .usc-drawer-btn.secondary,
html body #cart .usc-drawer-actions a.usc-drawer-btn.secondary,
html body #cart .usc-drawer-actions #usc-view-bag,
html body #cart .usc-drawer-actions #usc-cart-view-bag {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, .08) !important;
  color: #111118 !important;
  -webkit-text-fill-color: #111118 !important;
}

body.usc-cart-open,
html body.usc-cart-open {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  #cart,
  #cart.usc-cart-drawer,
  html body #cart,
  html body #cart.usc-cart-drawer,
  html body .usc-cart-drawer {
    width: min(400px, 92vw) !important;
    max-width: min(400px, 92vw) !important;
    left: auto !important;
    right: 0 !important;
    border-left: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 0 !important;
  }
}