:root {
  --background: #0a0a0a;
  --foreground: #ededed;
  --accent: #008cff;
  --accent-foreground: #eaf6ff;

  --container: 80rem;
}

/* Base skin */
body {
  background-color: var(--background) !important;
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;

  /* Next-like background */
  background-image:
    radial-gradient(60% 60% at 30% 10%, rgba(0,140,255,0.28) 0%, transparent 60%),
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px !important;
  background-position: 0 0, -14px -14px, -14px -14px !important;
}

a { color: inherit; }
a:hover { color: #fff; }

/* Kill Storefront's white page panels so the grid background shows through */
html,
body,
#page,
.site,
#content,
.site-content,
.content-area,
.site-main,
.hfeed,
.woocommerce-page #primary,
.woocommerce-page #secondary,
.woocommerce-page .site-content,
.woocommerce-page .content-area,
.woocommerce-page .site-main,
.woocommerce-page .storefront-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header__title,
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .storefront-sorting {
  background: transparent !important;
}

/* Ensure Storefront can't force a white background on wrappers */
#page,
.site {
  background-color: transparent !important;
}

/* Make Storefront content use the same max width as the Next layout */
.col-full {
  max-width: var(--container) !important;
  width: min(var(--container), calc(100% - 3rem)) !important;
  margin-inline: auto !important;
}
@media (min-width: 640px) {
  .col-full { width: min(var(--container), calc(100% - 4rem)) !important; }
}

/* Links & buttons accent */
a.button,
button.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  border-radius: .5rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px -6px rgba(0,140,255,0.65) !important;
  border: none !important;
}

/* Secondary-ish button */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent) !important;
}

/* Promo bar (before header) */
.lc-promo {
  width: 100%;
  border-bottom: 1px solid rgba(0,140,255,0.30);
  background: linear-gradient(90deg, rgba(0,140,255,0.20), rgba(0,140,255,0.15), rgba(0,140,255,0.20));
  backdrop-filter: blur(6px);
}
.lc-promo__inner {
  padding: .65rem 1.5rem;
  text-align: center;
}
.lc-promo__inner p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.lc-promo__inner strong { color: var(--accent); font-weight: 800; }
.lc-promo__link { text-decoration: underline; color: rgba(255,255,255,.9); }
.lc-promo__link:hover { color: #fff; }

/* Storefront header wrapper => fixed like Next */
#masthead.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  border: 0;
  padding: 0 !important;
}
body.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #masthead.site-header { top: 46px; } }

/* Let our header manage widths; don't constrain it with Storefront's header container */
#masthead .col-full {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Offset for promo + fixed header */
#content,
.site-content {
  padding-top: 160px;
}

/* Next-like header layout */
.lc-container {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}
.lc-container--wide {
  width: calc(100% - 1.5rem);
  margin-inline: auto;
  max-width: none;
}

.lc-header { position: relative; z-index: 50; }
.lc-header-shell { transition: all .5s ease-in-out; margin-top: .75rem; }
.lc-header-shell.is-scrolled { width: min(var(--container), calc(100% - 3rem)); }
.lc-header-shell:not(.is-scrolled) { width: calc(100% - 1.5rem); }

.lc-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}
.lc-card { box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; border-radius: .75rem; }

.lc-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
}
.lc-brand { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 800; }
.lc-brand__logo { display: inline-flex; align-items: center; }

/* Hard-cap WP custom logo so it can never explode in size (header/footer/anywhere) */
.custom-logo-link { display: inline-flex !important; align-items: center; }
img.custom-logo {
  max-height: 32px !important;
  height: auto !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
  position: static !important;
}
footer img.custom-logo {
  max-height: 44px !important;
  max-width: 260px !important;
}

.lc-brand__logo img { height: 28px; width: auto; max-height: 32px; object-fit: contain; }

.lc-nav { display: none; font-size: 14px; color: rgba(255,255,255,0.80); }
.lc-nav__list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 1.25rem; }
.lc-nav a { color: rgba(255,255,255,0.80); }
.lc-nav a:hover { color: #fff; }

.lc-actions { display: none; gap: .75rem; }
.lc-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.lc-burger:hover { background: rgba(255,255,255,0.10); }

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  padding: .65rem 1rem;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
  will-change: transform;
}
.lc-btn-primary { background: var(--accent); color: var(--accent-foreground); box-shadow: 0 8px 22px -6px rgba(0,140,255,0.65); }
.lc-btn-primary:hover { transform: scale(1.02); }
.lc-btn-secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: #fff; }
.lc-btn-secondary:hover { background: rgba(255,255,255,0.10); }

.lc-mobile { width: min(var(--container), calc(100% - 3rem)); margin-inline: auto; }
.lc-mobile-panel {
  overflow: hidden;
  border-radius: .75rem;
  margin-top: .75rem;
  opacity: 0;
  max-height: 0;
  transition: max-height .35s ease, opacity .2s ease;
}
.lc-mobile-panel.is-open { opacity: 1; max-height: 340px; }
.lc-mobile-panel__inner { padding: 1rem; display: flex; flex-direction: column; gap: .25rem; color: rgba(255,255,255,0.85); }
.lc-mobile__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.lc-mobile-panel__inner a { padding: .5rem .5rem; border-radius: .5rem; display: block; }
.lc-mobile-panel__inner a:hover { background: rgba(255,255,255,0.10); }
.lc-divider { height: 1px; background: rgba(255,255,255,0.10); margin: .75rem 0; }
.lc-mobile-actions { display: flex; gap: .5rem; }
.lc-mobile-actions .lc-btn { flex: 1; }

@media (min-width: 768px) {
  .lc-nav { display: flex; }
  .lc-actions { display: inline-flex; align-items: center; }
  .lc-burger, .lc-mobile { display: none; }
}

/* Hide default page title area on the homepage (it doesn't match the Next hero) */
body.home .entry-header,
body.front-page .entry-header {
  display: none;
}

/* Glass cards */
.site-content .woocommerce-product-gallery,
.woocommerce .products li.product,
.woocommerce div.product div.summary,
.widget,
.site-main article,
.hentry {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: .75rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}

/* Make WooCommerce grid spacing closer to Next cards */
.woocommerce ul.products {
  margin-top: 1.5rem;
}
.woocommerce ul.products li.product {
  padding: 1rem !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .3s ease;
}
.woocommerce ul.products li.product:hover {
  transform: scale(1.01);
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 40px -12px rgba(0,140,255,0.30);
}

/* Product title/text colors */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: #fff !important;
  font-weight: 800;
}
.woocommerce ul.products li.product .price {
  color: rgba(255,255,255,0.80) !important;
}

/* Shop header */
.woocommerce-products-header {
  padding: 1rem 0 0;
}
.woocommerce-products-header__title.page-title {
  color: #fff !important;
}
.storefront-sorting,
.woocommerce-result-count {
  color: rgba(255,255,255,0.65) !important;
}

/* Demo store notice (bottom bar) - match theme (you can also disable it in WooCommerce settings) */
.woocommerce-store-notice,
p.demo_store {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px);
}
.woocommerce-store-notice a,
p.demo_store a {
  color: var(--accent) !important;
}

/* Footer (Next-like) */
.lc-footer {
  position: relative;
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.lc-footer__inner { padding: 2rem 0 2.5rem; }
.lc-footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .lc-footer__grid { grid-template-columns: 1.2fr 1fr; } }
@media (min-width: 1024px) { .lc-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; } }
.lc-footer h3 { margin: 0 0 1rem; font-size: 16px; font-weight: 700; color: #fff; }
.lc-footer p { margin: .75rem 0 0; color: rgba(255,255,255,0.70); }
.lc-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lc-footer li a { color: rgba(255,255,255,0.60); display: inline-flex; gap: .5rem; align-items: center; }
.lc-footer li a:hover { color: var(--accent); }
.lc-footer__dot { width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.40); transition: background-color .2s ease; }
.lc-footer li a:hover .lc-footer__dot { background: var(--accent); }
.lc-footer__bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 640px) { .lc-footer__bottom { flex-direction: row; } }
.lc-footer__bottom small { color: rgba(255,255,255,0.50); }
.lc-footer__bottom a { color: rgba(255,255,255,0.60); }
.lc-footer__bottom a:hover { color: var(--accent); }

/* Typography */
h1, h2, h3, h4, h5, h6 { color: #fff; }
.site-content, .entry-content, .woocommerce, .widget { color: rgba(255,255,255,0.75); }

/* WooCommerce price accent */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: #fff;
}