/* === MaiBi Valentine CSS – toggle přes body.val-mode === */

/* vrstvy */
.val-bar{z-index:60}
#valHeartsCanvas{position:fixed;inset:0;z-index:40;pointer-events:none}

/* promo lišta */
.val-bar{
  position:fixed;left:0;right:0;top:0;
  background:linear-gradient(90deg,#ff2d55,#ff6a88,#ff2d55);
  color:#fff;text-align:center;padding:10px 16px;font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  display:flex;justify-content:center;align-items:center;gap:12px
}
.val-bar__wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.val-bar__close{background:#ffffff1a;border:0;border-radius:16px;color:#fff;padding:6px 10px;cursor:pointer}
.val-bar__cta{
  display:inline-flex;align-items:center;
  padding:8px 16px;background:rgba(255,255,255,.18);
  border-radius:16px;font-size:16px;font-weight:700;color:#fff!important;
  text-decoration:none;transition:background .2s ease,transform .2s ease
}
.val-bar__cta:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
@media(max-width:480px){.val-bar{padding:8px 10px;font-size:13px}}
body.val-mode{--vbar-h:44px}
body.val-mode #content,body.val-mode .page,body.val-mode .layout,
body.val-mode .main-wrapper,body.val-mode .page-wrapper{padding-top:var(--vbar-h)!important}

/* =========================
   HEADER + MENU: bez bílých bloků
   ========================= */

/* komplet header transparent (včetně různých wrapperů) */
body.val-mode :is(
  header#header,.site-header,.header,.header-top,.header-main,.header-bottom,
  .navigation-wrapper,nav#navigation,
  .container.navigation-wrapper.header-top-wrapper,
  .header-top .container,.header-main .container,.header-bottom .container,
  .header-tools,.header-cart,.header-cart a
){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important
}

/* často bílý blok dělá ::before/::after */
body.val-mode :is(
  header#header,.site-header,.header,.header-top,.header-main,.header-bottom,
  .navigation-wrapper,nav#navigation,
  .container.navigation-wrapper.header-top-wrapper,
  .header-top .container,.header-main .container,.header-bottom .container
)::before,
body.val-mode :is(
  header#header,.site-header,.header,.header-top,.header-main,.header-bottom,
  .navigation-wrapper,nav#navigation,
  .container.navigation-wrapper.header-top-wrapper,
  .header-top .container,.header-main .container,.header-bottom .container
)::after{
  content:none!important;
  background:transparent!important;
  box-shadow:none!important
}

/* === SHOPTET SPEC: headerMenuItem / headerMenu (zruš bílé pozadí) === */
body.val-mode :is(.headerMenu,.header-menu,.headerMenuWrapper,.header-menu-wrapper,.headerMenuItems,.header-menu-items){
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important
}
body.val-mode :is(.headerMenu,.header-menu,.headerMenuWrapper,.header-menu-wrapper,.headerMenuItems,.header-menu-items)::before,
body.val-mode :is(.headerMenu,.header-menu,.headerMenuWrapper,.header-menu-wrapper,.headerMenuItems,.header-menu-items)::after{
  content:none!important;
  background:transparent!important
}

/* Menu item text – růžový (jak chceš) */
body.val-mode :is(.headerMenuItem,.header-menu-item,.headerMenuItem a,.header-menu-item a){
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important
}
body.val-mode :is(.headerMenuItem a,.header-menu-item a,nav#navigation .menu-level-1>li>a){
  color:#ff2d55!important; /* růžová/červená MaiBi */
  font-weight:800!important;
  border-radius:12px;
  padding:10px 14px;
  transition:background .15s ease,transform .15s ease,filter .15s ease
}

/* hover/active – růžová „pilulka“, ale bez bílého pozadí */
body.val-mode :is(.headerMenuItem a:hover,.header-menu-item a:hover,nav#navigation .menu-level-1>li>a:hover),
body.val-mode :is(.headerMenuItem.is-active a,.header-menu-item.is-active a,nav#navigation .menu-level-1>li.is-active>a),
body.val-mode :is(.headerMenuItem.active a,.header-menu-item.active a,nav#navigation .menu-level-1>li.active>a),
body.val-mode :is(nav#navigation .menu-level-1>li[aria-current="page"]>a){
  background:rgba(255,45,85,.18)!important;
  transform:translateY(-1px);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))
}

/* dropdown ať je čitelný a ne bílý */
body.val-mode :is(nav#navigation .menu-level-2,.menu-level-2){
  background:rgba(0,0,0,.35)!important;
  backdrop-filter:blur(3px);
  border:0!important
}
body.val-mode :is(nav#navigation .menu-level-2>li>a,.menu-level-2>li>a){
  color:#fff!important;
  border-radius:10px
}
body.val-mode :is(nav#navigation .menu-level-2>li>a:hover,.menu-level-2>li>a:hover){
  background:rgba(255,45,85,.65)!important
}

/* =========================
   BUTTONS
   ========================= */
body.val-mode .btn,body.val-mode .btn-primary,body.val-mode .btn-cart,
body.val-mode button[class*="btn"],body.val-mode a[class*="btn"],
body.val-mode .btn-conversion,body.val-mode .add-to-cart-button{
  background:#ff2d55!important;color:#fff!important;border-radius:10px;
  position:relative!important;overflow:visible!important;z-index:1;
  box-shadow:0 10px 22px rgba(0,0,0,.22)!important;border:0!important
}
body.val-mode .btn:hover,body.val-mode .btn-primary:hover,body.val-mode .add-to-cart-button:hover{filter:brightness(1.07)}

/* produktové fotky – jemný „romantický“ rámeček */
body.val-mode .product img{
  border-radius:14px;
  outline:3px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 8px rgba(255,45,85,.12),0 14px 30px rgba(0,0,0,.18)
}

/* texty v listingu – bílé */
body.val-mode .product-name,
body.val-mode .product .name,
body.val-mode .product h3,
body.val-mode .product h4,
body.val-mode .product a.name,
body.val-mode .price-final,
body.val-mode .price-without-vat,
body.val-mode .price-standard,
body.val-mode .product .price,
body.val-mode .product .price span,
body.val-mode .product .price strong,
body.val-mode .product .flags span,
body.val-mode .product .availability,
body.val-mode .product .parameters,
body.val-mode .product .description{color:#fff!important}

/* zrušení bílých podkladů na stránce */
body.val-mode :is(.page,.page-wrapper,.layout,.layout-in,.site-wrapper,.main-wrapper,
  .content-wrapper,.container,.row,#content,.content){
  background:transparent!important;
  box-shadow:none!important;
  border:0!important
}
body.val-mode :is(.page,.page-wrapper,.layout,.layout-in,.content,#content,.container)::before{
  content:none!important;
  background:transparent!important;
  box-shadow:none!important
}

/* homepage titulky – bílé */
body.val-mode .homepage-group-title,
body.val-mode .homepage-group-title span{
  color:#fff!important;
  text-shadow:0 2px 6px rgba(0,0,0,.35)
}

/* === VAL pozadí === */
html.val-mode,body.val-mode{background:transparent!important}
body.val-mode{position:relative}
body.val-mode::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url("https://www.maibi.eu/user/documents/upload/Valentyne/bg.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat
}

/* detail produktu – bílé texty */
body.val-mode .p-detail .p-data-wrapper,
body.val-mode .p-detail .p-data-wrapper *{color:#fff!important}
body.val-mode .p-detail .availability span{color:#9fff9f!important}

/* bílé ikony a drobnosti */
body.val-mode .link-icons .link-icon i,
body.val-mode .link-icons .link-icon span{color:#fff!important;fill:#fff!important}