/* =====================================================
   BMS GREEN THEME — palette locked to your crown green
   Main green (1:1): #54843B
   ===================================================== */

:root{
  --bms-green: #54843B;           /* 1:1 */
  --bms-green-2: #6E9658;         /* lighter */
  --bms-green-3: #749D5F;         /* hover lighter */
  --bms-green-rgb: 84,132,59;

  --bg1:#050a06;
  --bg2:#030604;
  --bg3:#020503;

  --card-dark:#050a06;
  --card-dark-2:#030604;

  --text:#eaffef;
  --muted: rgba(234,255,239,.72);

  --border-soft: rgba(var(--bms-green-rgb), .18);
  --border-mid:  rgba(var(--bms-green-rgb), .25);
  --border-strong: rgba(var(--bms-green-rgb), .45);
}

/* ===== GLOBAL BACKGROUND ===== */
body{
  background:
    radial-gradient(circle at 70% 20%, rgba(var(--bms-green-rgb), .22), transparent 45%),
    radial-gradient(circle at 20% 70%, rgba(var(--bms-green-rgb), .12), transparent 55%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%) !important;
  color: var(--text);
  background-attachment: fixed;
  filter: saturate(0.95);
}

/* stars/particles layer (if exists) */
body:before{
  opacity: .12 !important;
}

/* MAIN WRAPPER */
#app, .app, main{
  background: transparent !important;
}

/* ===============================
   REMOVE ALL BLUE / GREY PANELS
================================ */
.bg-background,
.bg-card,
.bg-white\/5,
.bg-white\/10,
.bg-white\/\[0\.025\],
.bg-white\/\[0\.05\]{
  background-color: var(--card-dark) !important;
  backdrop-filter: none !important;
}

/* ===============================
   HEADER + FOOTER — BLEND INTO BG
================================ */
.shop-header,
.shop-banner,
header{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}

.shop-header *{
  color: rgba(255,255,255,.92) !important;
}

/* footer */
footer, .shop-footer{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

footer, .shop-footer{
  color: rgba(255,255,255,.80) !important;
}
footer a, .shop-footer a{
  color: rgba(255,255,255,.70) !important;
}
footer a:hover, .shop-footer a:hover{
  color: rgba(255,255,255,.92) !important;
}

/* =====================================
   ICON BACKGROUND = SAME AS PAGE BG
   (header icons / currency / cart)
===================================== */
.shop-header button,
.shop-header .icon,
.shop-header .cart,
.shop-header .currency-selector,
.shop-header .header-icon{
  background:
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: none !important;
}

.shop-header button:hover,
.shop-header .header-icon:hover{
  background:
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%) !important;
}

/* =====================================
   HERO — REMOVE BUBBLE / PANEL
===================================== */
.components > *{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 80px 40px !important;
}
.components > *::before{
  display: none !important;
}
@media(max-width:900px){
  .components > *{ padding: 50px 22px !important; }
}

/* =====================================
   TITLE LEFT ACCENT FIX (kill the line)
===================================== */
h2.border-l-4{
  border-left: none !important;
  padding-left: 0 !important;
}
.border-l-accent-500,
.border-accent-500,
[class*="accent"]{
  border-color: transparent !important;
}

/* ===============================
   FORCE WHITE ICONS IN BUTTONS
================================ */
.components a svg,
.buy-button svg,
.product-buy svg{
  fill: #ffffff !important;
  color: #ffffff !important;
}
.components a i,
.buy-button i,
.product-buy i{
  color: #ffffff !important;
}
.components a:hover svg,
.components a:hover i{
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* ===============================
   TEXT COLORS
================================ */
.text-t-primary{ color: #ffffff !important; }
.text-t-primary\/60,
.text-t-primary\/70,
.text-t-primary\/50{
  color: rgba(255,255,255,0.65) !important;
}

/* ===============================
   PRODUCT CARDS (GLOBAL)
================================ */
.product-card,
[class*="product"],
[data-product-id]{
  background: linear-gradient(180deg, var(--card-dark) 0%, var(--card-dark-2) 100%) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 14px;
  box-shadow: none !important;
}
.product-card img{ border-radius: 10px; }

/* ===============================
   PRODUCT PRICES – LIGHT GREEN
================================ */
.product-price,
[class*="price"],
.text-accent-500,
.text-green-400,
.text-green-500,
.text-emerald-400,
.text-emerald-500{
  color: var(--bms-green-2) !important;
}

/* optional soft glow */
.product-price{
  text-shadow: 0 0 6px rgba(var(--bms-green-rgb), .25);
}

/* ===============================
   BUTTONS (GLOBAL)
================================ */
button,
.btn,
a.btn{
  background: linear-gradient(180deg, #1a6b3a, #0f3f25) !important;
  border: 1px solid rgba(var(--bms-green-rgb), .25) !important;
  color: #d8ffe9 !important;
  box-shadow: none !important;
}
button:hover,
.btn:hover{
  background: linear-gradient(180deg, #208a4c, #145a33) !important;
}

/* ===============================
   INPUTS
================================ */
input,
select,
textarea{
  background: #050905 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
input::placeholder{ color: rgba(255,255,255,0.35); }

/* ===============================
   REMOVE GREEN GLOW EVERYWHERE
================================ */
*{ box-shadow: none !important; }

/* ===============================
   LINKS
================================ */
a{ color: var(--bms-green-2); }
a:hover{ color: var(--bms-green-3); }

/* =====================================
   PRODUCTS: FORCE DARK CARDS (SELLAUTH)
   (works even if classes are random)
===================================== */

/* Product card is usually an <a> linking to product */
.products-page a[href*="/product"],
.products-page a[href*="/products/"],
.products-page a[href*="product"]{
  background: linear-gradient(180deg,var(--card-dark) 0%, var(--card-dark-2) 100%) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.75) !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}

/* kill overlays */
.products-page a[href*="/product"]::before,
.products-page a[href*="/product"]::after,
.products-page a[href*="/products/"]::before,
.products-page a[href*="/products/"]::after,
.products-page a[href*="product"]::before,
.products-page a[href*="product"]::after{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* inner blocks */
.products-page a[href*="/product"] *,
.products-page a[href*="/products/"] *,
.products-page a[href*="product"] *{
  background-color: transparent !important;
}

/* images */
.products-page a[href*="/product"] img,
.products-page a[href*="/products/"] img,
.products-page a[href*="product"] img{
  border-radius: 12px !important;
}

/* prices inside cards */
.products-page a[href*="/product"] [class*="price"],
.products-page a[href*="/products/"] [class*="price"],
.products-page a[href*="product"] [class*="price"]{
  color: var(--bms-green-2) !important;
  font-weight: 800 !important;
}

/* hover */
.products-page a[href*="/product"]:hover,
.products-page a[href*="/products/"]:hover,
.products-page a[href*="product"]:hover{
  transform: translateY(-6px);
  border-color: var(--border-strong) !important;
  box-shadow:
    0 0 28px rgba(var(--bms-green-rgb), .14),
    0 22px 60px rgba(0,0,0,.90) !important;
}

/* =====================================
   PRODUCTS FILTER SIDEBAR – BASIC BLACK
   + DARK GREEN BUTTONS
===================================== */

/* whole box */
aside > div,
.filters,
.sticky > div{
  background: #070707 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* headings */
aside label,
aside h3,
aside h2{
  color: #ffffff !important;
  font-weight: 600;
}

/* text */
aside,
aside span,
aside p{
  color: rgba(255,255,255,.75) !important;
}

/* inputs */
aside input,
aside select{
  background: #0c0c0c !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
aside input::placeholder{ color: rgba(255,255,255,.45) !important; }

/* category buttons */
aside a{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.85) !important;
}

/* active category */
aside a.bg-white\/5,
aside a[aria-current="true"]{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* APPLY */
aside button[type="submit"]{
  background: linear-gradient(180deg, #1a6b3a, #0f3f25) !important;
  border: 1px solid rgba(var(--bms-green-rgb), 0.25) !important;
  color: #d8ffe9 !important;
  box-shadow: none !important;
}

/* RESET */
aside a[href*="products"]{
  background: linear-gradient(180deg, #1a6b3a, #0f3f25) !important;
  border: 1px solid rgba(var(--bms-green-rgb), 0.25) !important;
  color: #d8ffe9 !important;
  box-shadow: none !important;
}

/* hover */
aside button[type="submit"]:hover,
aside a[href*="products"]:hover{
  background: linear-gradient(180deg, #208a4c, #145a33) !important;
}

/* icons in sidebar buttons */
aside button svg,
aside a svg{
  color: #b7ffd6 !important;
}

/* modal filters on mobile */
[x-show="filtersModalOpen"] > div > div{
  background: #070707 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* =========================================
   DESKTOP: hide left sidebar, keep 3 products
========================================= */
@media (min-width: 1024px){
  section.component .grid[class*="lg:grid-cols-[280px_1fr]"]{
    grid-template-columns: 1fr !important;
  }
  section.component .grid[class*="lg:grid-cols-[280px_1fr]"] > aside{
    display: none !important;
  }
  section.component .grid[class*="lg:grid-cols-[280px_1fr]"] > div:not(aside) .w-full.sm\:w-\[calc\(\(100\%-1rem\)\/2\)\].xl\:w-\[calc\(\(100\%-2rem\)\/3\)\]{
    width: calc((100% - 2rem)/3) !important;
  }
  section.component .grid[class*="lg:grid-cols-[280px_1fr]"] > div:not(aside) .flex.flex-wrap.gap-4{
    gap: 1rem !important;
  }
}

/* =========================================
   View All Reviews — text only (no bg / no hover bg)
========================================= */
a.text-accent-500,
a[href*="/feedback"]{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
}

a.text-accent-500,
a[href*="/feedback"]{
  color: var(--bms-green-2) !important;
  text-decoration: none !important;
}

a.text-accent-500:hover,
a[href*="/feedback"]:hover{
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  color: var(--bms-green-3) !important;
}

a[href*="/feedback"]::before,
a[href*="/feedback"]::after{
  display: none !important;
}

.hero-typing {
  font-size: clamp(1.8rem, 4vw, 3rem); /* větší font */
  font-weight: 700;
  line-height: 1.2;
}

.typing-wrap {
  position: relative;
  display: inline-block;
  min-width: 380px; /* podle nejdelšího slova */
  height: 1.4em; /* drží výšku, aby se slova nepřekrývala */
  vertical-align: baseline;
}

.word {
  position: absolute;
  left: 0;
  top: 0;

  font-size: inherit;
  font-weight: inherit;

  white-space: nowrap;
  overflow: hidden;

  opacity: 0;
  border-right: 3px solid currentColor;
  padding-right: 8px;
  color: #00ff99; !important /* zelená */

  animation: typecycle 25s infinite; /* 3s delay mezi slovy */
}

.w1 { animation-delay: 0s; }
.w2 { animation-delay: 3s; }
.w3 { animation-delay: 6s; }
.w4 { animation-delay: 9s; }
.w5 { animation-delay: 12s; }


@keyframes typecycle {
  0%   { opacity: 0; width: 0 }
  10%  { opacity: 1; width: 100% }
  60%  { opacity: 1; width: 100% }
  80%  { opacity: 1; width: 0 }
  100% { opacity: 0; width: 0 }
}

.subtext {
  font-size: 1rem;
  color: #aaa; /* jemný podtext */
}