/**
 * Shopify-inspired monochrome storefront — loads after other theme layers.
 * Black / white / neutral grey only; responsive patterns preserved.
 */

/* ------------------------------------------------------------------ tokens */
:root,
html.gsb-theme-light {
  color-scheme: light;
  --sf-ink: #121212;
  --sf-ink-muted: #6b6b6b;
  --sf-bg: #ffffff;
  --sf-bg-subtle: #fafafa;
  --sf-border: #e3e3e3;
  --sf-primary: #121212;
  --sf-primary-contrast: #ffffff;
  --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sf-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --sf-radius: 2px;
  --sf-radius-card: 4px;
  --sf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --background: var(--sf-bg) !important;
  --foreground: var(--sf-ink) !important;
  --card: var(--sf-bg) !important;
  --card-foreground: var(--sf-ink) !important;
  --primary: var(--sf-primary) !important;
  --primary-foreground: var(--sf-primary-contrast) !important;
  --secondary: var(--sf-bg-subtle) !important;
  --muted: #f4f4f4 !important;
  --muted-foreground: var(--sf-ink-muted) !important;
  --border: var(--sf-border) !important;
  --primary-soft: rgba(18, 18, 18, 0.12) !important;
  --shadow-sm: var(--sf-shadow-sm);
  --shadow-md: var(--sf-shadow-md);
  --shadow-card: var(--sf-shadow-sm);
  --glass: #ffffff !important;
  --glass-border: var(--sf-border) !important;
  --glow-primary: #121212 !important;

  --gsb-accent: #121212 !important;
  --gsb-accent-2: #121212 !important;
  --gsb-surface: #ffffff !important;
  --gsb-surface-soft: #fafafa !important;
  --gsb-ink: #121212 !important;

  --gsb-up-accent: #121212 !important;
  --gsb-up-accent-2: #121212 !important;
  --gsb-up-light-bg: #ffffff !important;
  --gsb-up-light-surface: #ffffff !important;
  --gsb-up-light-ink: #121212 !important;
}

html.gsb-theme-dark,
body.gsb-dark {
  color-scheme: dark;
  --sf-ink: #fafafa;
  --sf-ink-muted: #a3a3a3;
  --sf-bg: #121212;
  --sf-bg-subtle: #1a1a1a;
  --sf-border: #2e2e2e;
  --sf-primary: #fafafa;
  --sf-primary-contrast: #121212;

  --background: var(--sf-bg) !important;
  --foreground: var(--sf-ink) !important;
  --card: #1a1a1a !important;
  --card-foreground: var(--sf-ink) !important;
  --primary: #fafafa !important;
  --primary-foreground: #121212 !important;
  --secondary: #1f1f1f !important;
  --muted: #1f1f1f !important;
  --muted-foreground: var(--sf-ink-muted) !important;
  --border: var(--sf-border) !important;
  --primary-soft: rgba(250, 250, 250, 0.15) !important;

  --gsb-surface: #121212 !important;
  --gsb-surface-soft: #1a1a1a !important;
  --gsb-ink: #fafafa !important;

  --gsb-up-dark-bg: #121212 !important;
  --gsb-up-dark-surface: #1a1a1a !important;
  --gsb-up-dark-ink: #fafafa !important;
}

/* ------------------------------------------------------------------ base */
body {
  font-family: var(--sf-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.gsb-section-title,
.gsb-products-title,
.gsb-product-title,
.gsb-cart-page-title,
.gsb-checkout-title {
  font-family: var(--sf-font);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.container {
  max-width: min(1320px, 100%);
}

/* Strip decorative page grid & gradient backgrounds (overrides attractive-upgrade) */
body {
  background: var(--sf-bg) !important;
  color: var(--sf-ink) !important;
}

body:not(.gsb-dark) {
  background: var(--sf-bg) !important;
  color: var(--sf-ink) !important;
}

body.gsb-dark {
  background: var(--sf-bg) !important;
  color: var(--sf-ink) !important;
}

h1,
h2,
h3,
.gsb-section-title,
.gsb-brand-wordmark {
  text-transform: none;
  letter-spacing: -0.02em;
}

.gsb-main > .container::before {
  display: none !important;
}

/* HTMX progress bar — neutral */
body.htmx-request::before {
  background: linear-gradient(90deg, #121212, #6b6b6b) !important;
}

/* ------------------------------------------------------------------ header */
.gsb-header-wrap {
  background: var(--sf-bg) !important;
  border-bottom: 1px solid var(--sf-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.gsb-dark .gsb-header-wrap {
  background: var(--sf-bg) !important;
}

.gsb-navbar,
body:not(.gsb-dark) .gsb-navbar,
body.gsb-dark .gsb-navbar {
  background: transparent !important;
}

.gsb-nav-links a,
.gsb-nav-dropdown-trigger {
  color: var(--sf-ink) !important;
  text-shadow: none !important;
  text-transform: none;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

.gsb-nav-links a:hover,
.gsb-nav-links a.active,
.gsb-nav-dropdown-trigger:hover,
.gsb-nav-dropdown-trigger.active {
  color: var(--sf-ink) !important;
  text-shadow: none !important;
  opacity: 0.65;
}

.gsb-store-banner {
  background: #121212 !important;
  color: #fff !important;
  border-bottom: none !important;
}

.gsb-store-banner-label,
.gsb-store-banner-countries {
  color: rgba(255, 255, 255, 0.92) !important;
}

.gsb-navbar .gsb-nav-links a:hover,
.gsb-navbar .gsb-nav-links a.active,
.gsb-nav-dropdown-trigger:hover,
.gsb-nav-dropdown-trigger.active {
  color: var(--sf-ink) !important;
}

body.gsb-dark .gsb-navbar .gsb-nav-links a:hover,
body.gsb-dark .gsb-navbar .gsb-nav-links a.active {
  color: #fff !important;
}

.gsb-nav-dropdown {
  border-radius: var(--sf-radius-card) !important;
  box-shadow: var(--sf-shadow-md) !important;
  border: 1px solid var(--sf-border) !important;
}

.gsb-nav-dropdown a:hover {
  background: var(--sf-bg-subtle) !important;
  color: var(--sf-ink) !important;
}

.gsb-search-input {
  border-radius: var(--sf-radius-card) !important;
  border: 1px solid var(--sf-border) !important;
  background: var(--sf-bg) !important;
}

.gsb-navbar .gsb-nav-cta,
.gsb-nav-cta,
.gsb-btn-modern,
.gsb-btn-view-all,
.gsb-vortex-add-btn {
  border-radius: var(--sf-radius-card) !important;
  background: var(--sf-primary) !important;
  color: var(--sf-primary-contrast) !important;
  border: 1px solid var(--sf-primary) !important;
  box-shadow: none !important;
  padding: 0.5rem 1rem !important;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gsb-navbar .gsb-nav-cta:hover,
.gsb-nav-cta:hover,
.gsb-btn-modern:hover,
.gsb-btn-view-all:hover,
.gsb-vortex-add-btn:hover {
  filter: none !important;
  opacity: 0.88;
  transform: none !important;
  box-shadow: var(--sf-shadow-sm) !important;
}

.gsb-brand-mark-wrap {
  border: 1px solid var(--sf-border) !important;
  background: var(--sf-bg-subtle) !important;
}

.gsb-brand-subword {
  color: var(--sf-ink-muted) !important;
}

/* ------------------------------------------------------------------ hero & home */
.gsb-hero-dynamic-halo {
  display: none !important;
}

.gsb-hero,
.gsb-hero-immersive,
body:not(.gsb-dark) .gsb-hero,
body.gsb-dark .gsb-hero {
  background: var(--sf-bg-subtle) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: var(--sf-radius-card) !important;
  box-shadow: none !important;
}

body.gsb-dark .gsb-hero,
body.gsb-dark .gsb-hero-immersive {
  background: #1a1a1a !important;
}

.gsb-hero h1 {
  color: var(--sf-ink) !important;
}

.gsb-hero .lead {
  color: var(--sf-ink-muted) !important;
}

.gsb-hero-trust-item,
.gsb-hero-stats .stat-label {
  color: var(--sf-ink-muted) !important;
}

.gsb-hero-stats .stat-value {
  color: var(--sf-ink) !important;
}

.accent {
  color: var(--sf-ink) !important;
}

.gsb-pill {
  border-color: var(--sf-border) !important;
}

.gsb-hero-pills span,
.gsb-hero-badge {
  border-color: var(--sf-border) !important;
  background: var(--sf-bg) !important;
  color: var(--sf-ink) !important;
}

.gsb-featured-section,
.gsb-home-section,
.gsb-media-spotlight,
.gsb-value-strip,
.gsb-tech-grid,
.gsb-quick-collections {
  border-color: var(--sf-border) !important;
}

.gsb-category-item,
.gsb-tech-card,
.gsb-vortex-features,
.gsb-detail-card {
  border-radius: var(--sf-radius-card) !important;
  border: 1px solid var(--sf-border) !important;
  box-shadow: var(--sf-shadow-sm) !important;
}

.gsb-btn-cart,
.gsb-btn-buy {
  border-radius: var(--sf-radius-card) !important;
}

.gsb-btn-cart:hover,
.gsb-btn-buy:hover {
  transform: none !important;
  box-shadow: var(--sf-shadow-sm) !important;
  filter: none !important;
}

.gsb-btn-cart,
.gsb-btn-buy,
.gsb-btn-modern--primary,
.btn-primary {
  background: var(--sf-primary) !important;
  border-color: var(--sf-primary) !important;
  color: var(--sf-primary-contrast) !important;
}

.btn-outline-primary {
  color: var(--sf-ink) !important;
  border-color: var(--sf-border) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--sf-bg-subtle) !important;
  border-color: var(--sf-ink) !important;
  color: var(--sf-ink) !important;
}

/* ------------------------------------------------------------------ cards & PLP */
.gsb-card,
.gsb-vortex-card,
.gsb-product-card,
.gsb-search-overlay-panel,
.gsb-cart-drawer-panel {
  border-radius: var(--sf-radius-card) !important;
  border: 1px solid var(--sf-border) !important;
  box-shadow: none !important;
}

.gsb-vortex-card:hover,
.gsb-product-card:hover {
  box-shadow: var(--sf-shadow-md) !important;
  border-color: var(--sf-ink) !important;
  transform: none !important;
}

.gsb-card-badge {
  background: #121212 !important;
  color: #fff !important;
  border-radius: var(--sf-radius) !important;
}

body.gsb-dark .gsb-card-badge {
  background: #fafafa !important;
  color: #121212 !important;
}

.gsb-product-price,
body.gsb-dark .gsb-product-price,
body.gsb-dark .price,
.price {
  color: var(--sf-ink) !important;
}

.gsb-vortex-media .gsb-wishlist-inline-btn:hover {
  color: var(--sf-ink) !important;
  border-color: var(--sf-border) !important;
}

.gsb-wishlist-remove-btn:hover {
  color: var(--sf-ink) !important;
  border-color: var(--sf-border) !important;
}

/* ------------------------------------------------------------------ PDP */
.gsb-product-gallery {
  border-radius: var(--sf-radius-card) !important;
  border: 1px solid var(--sf-border) !important;
}

.gsb-gallery-thumb:hover {
  transform: none !important;
}

.gsb-pdp-trust li {
  background: var(--sf-bg-subtle) !important;
  border-color: var(--sf-border) !important;
  color: var(--sf-ink-muted) !important;
}

.gsb-pdp-trust li i {
  color: var(--sf-ink) !important;
}

/* ------------------------------------------------------------------ cart & checkout */
.gsb-cart-card,
.gsb-checkout-summary-card,
.gsb-checkout-section {
  border-radius: var(--sf-radius-card) !important;
  border: 1px solid var(--sf-border) !important;
}

.gsb-cart-line-img,
.gsb-cart-thumb {
  border-radius: var(--sf-radius) !important;
}

/* ------------------------------------------------------------------ search overlay */
.gsb-search-overlay-panel {
  box-shadow: var(--sf-shadow-md) !important;
}

.gsb-search-overlay-product:hover {
  border-color: var(--sf-border) !important;
  background: var(--sf-bg-subtle) !important;
}

.gsb-search-overlay-view-all {
  color: var(--sf-ink) !important;
  border-color: var(--sf-border) !important;
}

/* ------------------------------------------------------------------ footer */
.gsb-footer {
  background: var(--sf-bg-subtle) !important;
  border-top: 1px solid var(--sf-border) !important;
  margin-top: 3rem;
}

.gsb-footer ul a:hover {
  color: var(--sf-ink) !important;
}

.gsb-footer-newsletter-btn {
  background: var(--sf-primary) !important;
  color: var(--sf-primary-contrast) !important;
  border: 1px solid var(--sf-primary) !important;
  border-radius: var(--sf-radius-card) !important;
}

.gsb-social-icon {
  color: var(--sf-ink) !important;
}

/* ------------------------------------------------------------------ contact widget */
.gsb-contact-btn {
  border-radius: var(--sf-radius-card) !important;
  background: #121212 !important;
  color: #fff !important;
  border: 1px solid #121212 !important;
}

body.gsb-dark .gsb-contact-btn {
  background: #fafafa !important;
  color: #121212 !important;
  border-color: #fafafa !important;
}

/* ------------------------------------------------------------------ back to top */
.gsb-back-to-top {
  background: var(--sf-primary) !important;
  color: var(--sf-primary-contrast) !important;
  border: 1px solid var(--sf-border) !important;
}

/* ------------------------------------------------------------------ forms */
.form-control,
.form-select {
  border-radius: var(--sf-radius-card) !important;
  border-color: var(--sf-border) !important;
}

body.gsb-dark .gsb-search-input,
body.gsb-dark .form-control,
body.gsb-dark .form-select,
body.gsb-dark .gsb-sort-select {
  background: #1a1a1a !important;
  color: #fafafa !important;
  border-color: var(--sf-border) !important;
}

body.gsb-dark .gsb-product-title,
body.gsb-dark .gsb-detail-card-title,
body.gsb-dark .name,
body.gsb-dark .gsb-section-title {
  color: #fafafa !important;
}

body.gsb-dark .gsb-option-label,
body.gsb-dark .gsb-rating-count,
body.gsb-dark .gsb-detail-desc,
body.gsb-dark .gsb-spec-list,
body.gsb-dark .gsb-card .cert,
body.gsb-dark .gsb-card .category,
body.gsb-dark .gsb-footer .tagline,
body.gsb-dark .gsb-footer ul a,
body.gsb-dark .gsb-footer .contact-item {
  color: var(--sf-ink-muted) !important;
}

/* Alerts — minimal monochrome */
.alert-success {
  background: var(--sf-bg-subtle) !important;
  border-color: var(--sf-border) !important;
  color: var(--sf-ink) !important;
}

.alert-danger {
  background: var(--sf-bg-subtle) !important;
  border-color: var(--sf-border) !important;
  color: var(--sf-ink) !important;
}

.modal-content {
  border-radius: var(--sf-radius-card) !important;
  border: 1px solid var(--sf-border) !important;
}

/* attractive-upgrade: home grids, carousel, policy accordions, scroll bar */
.gsb-vortex-card,
.gsb-tech-card,
.gsb-category-item,
.gsb-value-item,
.gsb-qc-item,
.gsb-media-main,
.gsb-media-side,
.gsb-carousel-slide,
.gsb-metrics-grid article {
  border-radius: var(--sf-radius-card) !important;
  border: 1px solid var(--sf-border) !important;
  box-shadow: var(--sf-shadow-sm) !important;
}

.gsb-vortex-card:hover,
.gsb-tech-card:hover,
.gsb-category-item:hover,
.gsb-qc-item:hover {
  transform: none !important;
  border-color: var(--sf-ink) !important;
  box-shadow: var(--sf-shadow-md) !important;
}

body.gsb-dark .gsb-vortex-card,
body.gsb-dark .gsb-tech-card,
body.gsb-dark .gsb-category-item,
body.gsb-dark .gsb-value-item,
body.gsb-dark .gsb-qc-item,
body.gsb-dark .gsb-media-main,
body.gsb-dark .gsb-media-side,
body.gsb-dark .gsb-carousel-slide,
body.gsb-dark .gsb-metrics-grid article {
  background: #1a1a1a !important;
  border-color: var(--sf-border) !important;
  box-shadow: none !important;
}

.gsb-carousel-dot.active {
  background: var(--sf-ink) !important;
  box-shadow: none !important;
}

.gsb-footer h4 {
  color: var(--sf-ink) !important;
  text-transform: none;
  letter-spacing: 0.04em;
}

.gsb-footer ul a:hover,
.gsb-footer .legal a:hover,
.gsb-footer .contact-item a:hover {
  text-shadow: none !important;
}

.gsb-policy-content .accordion-item {
  border-color: var(--sf-border) !important;
  border-radius: var(--sf-radius-card) !important;
  box-shadow: var(--sf-shadow-sm) !important;
}

.gsb-policy-content .accordion-button:not(.collapsed) {
  color: var(--sf-ink) !important;
  background: var(--sf-bg-subtle) !important;
}

.gsb-policy-content .accordion-button:focus {
  box-shadow: 0 0 0 2px var(--sf-border) !important;
}

body.gsb-dark .gsb-policy-content .accordion-button:not(.collapsed) {
  background: #252525 !important;
  color: #fafafa !important;
}

body.gsb-dark .gsb-policy-content .accordion-item {
  background: #1a1a1a !important;
  border-color: var(--sf-border) !important;
}

.gsb-scroll-progress {
  background: linear-gradient(90deg, #121212, #8a8a8a) !important;
  box-shadow: none !important;
}

.gsb-btn-modern--ghost {
  background: transparent !important;
  border-color: var(--sf-border) !important;
  color: var(--sf-ink) !important;
  box-shadow: none !important;
}

.gsb-filter-wrap,
.gsb-filter-card,
.gsb-sort-select,
.gsb-pagination a {
  border-color: var(--sf-border) !important;
  border-radius: var(--sf-radius-card) !important;
}

body.gsb-dark .gsb-filter-wrap,
body.gsb-dark .gsb-filter-card {
  background: #1a1a1a !important;
}

/* ------------------------------------------------------------------ home product showcase (Featured / New / Best sellers) */
.gsb-home-showcase-head {
  max-width: 44rem;
  margin-inline: auto;
}

.gsb-home-showcase-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-ink-muted);
  margin: 0;
}

.gsb-home-showcase-title {
  font-size: clamp(1.65rem, 3.8vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.gsb-home-showcase-sub {
  max-width: 38rem;
  color: var(--sf-ink-muted);
  font-size: 1.025rem;
  line-height: 1.6;
}

.gsb-home-showcase-tabs .nav-link {
  border: 1px solid var(--sf-border) !important;
  border-radius: 999px !important;
  color: var(--sf-ink-muted) !important;
  background: var(--sf-bg) !important;
  padding: 0.5rem 1.2rem !important;
  font-weight: 600;
  font-size: 0.875rem;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.gsb-home-showcase-tabs .nav-link:hover {
  color: var(--sf-ink) !important;
  border-color: var(--sf-ink) !important;
}

.gsb-home-showcase-tabs .nav-link.active {
  color: var(--sf-primary-contrast) !important;
  background: var(--sf-primary) !important;
  border-color: var(--sf-primary) !important;
  box-shadow: var(--sf-shadow-sm);
}

body.gsb-dark .gsb-home-showcase-tabs .nav-link.active {
  color: #121212 !important;
  background: #fafafa !important;
  border-color: #fafafa !important;
}

.gsb-home-showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 1.25rem !important;
  align-items: stretch;
}

@media (min-width: 992px) {
  .gsb-home-showcase-grid {
    gap: 1.5rem !important;
  }
}

.gsb-home-sold-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  color: var(--sf-ink-muted);
}

.gsb-home-showcase-card .gsb-card-img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--sf-bg-subtle);
}

/* ------------------------------------------------------------------ responsive tightening */
@media (max-width: 991.98px) {
  .gsb-navbar .container {
    gap: 0.75rem;
  }

  .gsb-hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  .gsb-footer-grid {
    text-align: left;
  }
}