/* === ATGREEN: sjednocení nadpisů + slogan černě === */
:root{
  --atg-title-size: clamp(42px, 4.2vw, 72px);
  --atg-title-color: #111;
  --atg-title-weight: 700;
}

/* SLOGAN (pod lištou / header-title) – černě */
#header .header-title,
#header .header-title span{
  color: var(--atg-title-color) !important;
}
/* SLOGAN – posun o kousek nahoru + ať se neřeže spodní část písmen */
#header .header-title{
  overflow: visible !important;
}

#header .header-title span{
  display: inline-block;
  transform: translateY(-30px); /* zkus -2px, případně -3px */
}

/* STRÁNKOVÉ NADPISY – Obchodní podmínky / Kontakty (h1.header-title) */
h1.header-title,
h1.header-title span{
  color: var(--atg-title-color) !important;
  font-size: var(--atg-title-size) !important;
  font-weight: var(--atg-title-weight) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}

/* E-SHOP nadpis (kategorie) – h1.category-title */
body.type-category #content h1.category-title,
body.type-category h1.category-title{
  color: var(--atg-title-color) !important;
  font-size: var(--atg-title-size) !important;
  font-weight: var(--atg-title-weight) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}
/* Sjednocení hlavních nadpisů stránek (H1) */
body.type-category h1.category-title,
body.type-page #content h1,
body.type-contact #content h1{
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  color: #111 !important;
  text-align: center !important;
  margin: 30px auto 18px !important;
}

/* Mobil */
@media (max-width: 768px){
  body.type-category h1.category-title,
  body.type-page #content h1,
  body.type-contact #content h1{
    font-size: 40px !important;
  }
}
/* ===== SROVNÁNÍ POZICE HLAVNÍHO NADPISU (H1) ===== */
:root{
  --titleOffset: 18px; /* 👈 zvedni/sniž (např. 10px / 25px) podle oka */
}

/* 1) Kategorie (E-shop) – je v .category-top */
body.type-category #content .category-top{
  padding-top: var(60pxtitleOffset) !important;
  margin-top: 0 !important;
}

/* 2) Stránky (Obchodní podmínky / Kontakty) – H1 je většinou hned v #content */
body.type-page #content > h1:first-child,
body.type-contact #content > h1:first-child{
  margin-top: var(--titleOffset) !important;
  padding-top: 0 !important;
}
/* ===== HOMEPAGE: 5 bannerů vedle sebe + odsazení + hover ===== */

/* 1) rodič (tam kde ty bannery jsou) */
body.type-index .banners-top,
body.type-index .bannersTop,
body.type-index .banners,
body.type-index .top-banners,
body.type-index .banner-top{
  display: flex !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;

  /* odsazení od krajů stránky */
  padding-left: 40px !important;
  padding-right: 40px !important;

  /* mezery mezi bannery */
  gap: 18px !important;

  /* kdyby něco tlačilo vlevo/vpravo */
  margin-left: 0 !important;
  margin-right: 0 !important;

  width: 100% !important;
}

/* 2) Shoptet často dává dovnitř .row s negativními marginy – ty zabijeme */
body.type-index .banners-top .row,
body.type-index .bannersTop .row,
body.type-index .banners .row,
body.type-index .top-banners .row,
body.type-index .banner-top .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* 3) zrušíme omezení containeru, aby padding fungoval symetricky */
body.type-index .banners-top .container,
body.type-index .banners-top .container-fluid,
body.type-index .bannersTop .container,
body.type-index .bannersTop .container-fluid,
body.type-index .banners .container,
body.type-index .banners .container-fluid{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) jednotlivé bannery – přesně 5 ks i s gapem */
body.type-index .banners-top > *,
body.type-index .bannersTop > *,
body.type-index .banners > *,
body.type-index .top-banners > *,
body.type-index .banner-top > *{
  float: none !important;
  box-sizing: border-box !important;

  /* 5 prvků, 4 mezery (gap) => odečteme 4*18px */
  flex: 0 0 calc((100% - (4 * 18px)) / 5) !important;
  max-width: calc((100% - (4 * 18px)) / 5) !important;

  overflow: hidden !important;
  border-radius: 16px !important;

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
  will-change: transform;
}

/* 5) obrázek v banneru */
body.type-index .banners-top img,
body.type-index .bannersTop img,
body.type-index .banners img,
body.type-index .top-banners img,
body.type-index .banner-top img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 6) hover efekt – “vystouplý” */
body.type-index .banners-top > *:hover,
body.type-index .bannersTop > *:hover,
body.type-index .banners > *:hover,
body.type-index .top-banners > *:hover,
body.type-index .banner-top > *:hover{
  transform: translateY(-25px) scale(1.02) !important;
  box-shadow: 0 25px 40px rgba(0,0,0,.18) !important;
  filter: saturate(1.05);
}

/* 7) responsive */
@media (max-width: 1200px){
  body.type-index .banners-top,
  body.type-index .bannersTop,
  body.type-index .banners,
  body.type-index .top-banners,
  body.type-index .banner-top{
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 14px !important;
  }
}

@media (max-width: 768px){
  body.type-index .banners-top,
  body.type-index .bannersTop,
  body.type-index .banners,
  body.type-index .top-banners,
  body.type-index .banner-top{
    flex-wrap: wrap !important;
  }

  body.type-index .banners-top > *,
  body.type-index .bannersTop > *,
  body.type-index .banners > *,
  body.type-index .top-banners > *,
  body.type-index .banner-top > *{
    flex: 0 0 calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
  }
}
/* --- POPUP "mléčné sklo" (search/login/cart) --- */
.popup-widget .popup-widget-inner,
#login .popup-widget-inner,
#cart-widget .popup-widget-inner,
#search-widget .popup-widget-inner{
  background: rgba(255,255,255,.55) !important;      /* mléčné sklo */
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important; /* Safari */
  backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.18) !important;
  border-radius: 18px !important;
}

/* často má bílý podklad ještě vnitřní obsah – tak ho shodíme */
.popup-widget .popup-widget-inner .search,
.popup-widget .popup-widget-inner .recommended-products,
.popup-widget .popup-widget-inner form,
.popup-widget .popup-widget-inner .popup-widget-content,
.popup-widget .popup-widget-inner .content{
  background: transparent !important;
}

/* aby i inputy sedly do "glass" stylu */
.popup-widget input[type="text"],
.popup-widget input[type="email"],
.popup-widget input[type="password"],
.popup-widget input[type="search"]{
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
}
/* ==============================
   POPUP – doporučené produkty (search popup)
   odstranění bílých pruhů u miniatur
   ============================== */

/* ten klikací blok jen pro obrázek */
.popup-widget .recommended-products a.recommended-product{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;   /* udělá čtverec */
  overflow: hidden !important;       /* ořízne přesahy */
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;         /* někdy dělá “mezery” */
  border-radius: 12px;               /* volitelné */
}

/* samotný obrázek */
.popup-widget .recommended-products a.recommended-product > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* ořez */
  object-position: center !important;
  display: block !important;
  transform: scale(1.30) !important; /* schová bílé okraje v JPG */
}
/* =========================
   ATGREEN – GLASSMORPHISM UI
   ========================= */

/* 1) Společné "glass" proměnné (můžeš si doladit průhlednost) */
:root{
  --atg-glass-bg: rgba(255,255,255,.42);
  --atg-glass-bg-strong: rgba(255,255,255,.55);
  --atg-glass-border: rgba(255,255,255,.40);
  --atg-glass-shadow: 0 18px 40px rgba(0,0,0,.14);
  --atg-glass-radius: 22px;
  --atg-glass-blur: 14px;
}

/* 2) Produktové karty (kategorie + výpisy produktů + doporučené sekce) */
.products-block .product,
.products .product,
.type-category .products .product,
.type-index .products .product{
  background: var(--atg-glass-bg) !important;
  border: 1px solid var(--atg-glass-border) !important;
  border-radius: var(--atg-glass-radius) !important;
  box-shadow: var(--atg-glass-shadow) !important;
  -webkit-backdrop-filter: blur(var(--atg-glass-blur));
  backdrop-filter: blur(var(--atg-glass-blur));
  overflow: hidden; /* aby se nic "nepřeřezávalo" mimo kartu */
}

/* Jemný hover “vystoupení” */
.products-block .product:hover,
.products .product:hover{
  transform: translateY(-10px);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  box-shadow: 0 26px 55px rgba(0,0,0,.18) !important;
}

/* 3) Detaily produktu – udělat z pravého panelu (a klidně i celé oblasti) sklo */
.type-product .p-detail,
.type-product .p-detail-inner,
.type-product #content .p-detail{
  background: var(--atg-glass-bg-strong) !important;
  border: 1px solid var(--atg-glass-border) !important;
  border-radius: calc(var(--atg-glass-radius) + 8px) !important;
  box-shadow: var(--atg-glass-shadow) !important;
  -webkit-backdrop-filter: blur(var(--atg-glass-blur));
  backdrop-filter: blur(var(--atg-glass-blur));
}

/* Pokud se ti “sklo” aplikuje jen na část, pomůže často i tohle: */
.type-product .content-wrapper,
.type-category .content-wrapper{
  background: transparent !important;
}

/* 4) Popup okna (hledání / košík / login) – mléčné sklo */
.popup-widget .popup-widget-inner,
.popup-widget .popup-widget-inner > div,
#cart-widget.popup-widget,
#login-widget.popup-widget,
#search-widget.popup-widget{
  background: var(--atg-glass-bg-strong) !important;
  border: 1px solid var(--atg-glass-border) !important;
  border-radius: calc(var(--atg-glass-radius) + 6px) !important;
  box-shadow: var(--atg-glass-shadow) !important;
  -webkit-backdrop-filter: blur(calc(var(--atg-glass-blur) + 2px));
  backdrop-filter: blur(calc(var(--atg-glass-blur) + 2px));
}

/* 5) Bílé pruhy nahoře/dole u fotek – typicky je to tím,
      že wrapper je "vyšší" než obrázek. Uděláme jednotný výřez. */
.products .p-image,
.products-block .p-image,
.popup-widget .recommended-products .recommended-product,
.type-product .p-detail .p-image{
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px;
}

/* Donutíme obrázky vyplnit box (ořez místo pruhů) */
.products .p-image img,
.products-block .p-image img,
.popup-widget .recommended-products img,
.type-product .p-detail .p-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Doporučení v popupu mívá natvrdo width/height 100px – a pak jsou pruhy vidět.
   Dáme tomu hezký čtverec, který se "vyplní" ořezem. */
.popup-widget .recommended-products .recommended-product img{
  width: 120px !important;
  height: 120px !important;
}

/* 6) Malé vyčištění vnitřních bílých ploch v kartách (často Shoptet dává bílé boxy) */
.products .product .p,
.products-block .product .p{
  background: transparent !important;
}
/* DETAIL PRODUKTU – pryč levý sidebar (kategorie / platby / Top 10) */
body.type-detail aside.sidebar,
body.type-detail .sidebar.sidebar-left,
body.type-detail .sidebar{
  display: none !important;
}

/* DETAIL PRODUKTU – ať se hlavní obsah roztáhne na celou šířku */
body.type-detail main#content,
body.type-detail #content{
  width: 100% !important;
  max-width: 100% !important;
}

/* Kdyby layout pořád držel 2 sloupce, zahoď mřížku/flex na 1 sloupec */
body.type-detail .content-wrapper-in{
  display: block !important;
}
/* =========================================
   ATG – DETAIL PRODUKTU: 2x MLÉČNÉ SKLO + “VÍCE”
   ========================================= */

/* A) bezpečný reset – ať se ti už nikdy neudělají obří skleněné vrstvy */
body.type-detail main#content,
body.type-detail .content-wrapper-in,
body.type-detail .content.narrow {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* B) nové sklo – hlavní panel */
.atg-glass-main{
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  border-radius: 22px;
  width: min(1180px, 92vw);
  margin: 26px auto 0;
  padding: 26px 26px 44px; /* dole místo na tlačítko */
  position: relative;
}

/* C) tlačítko “více” uprostřed dole */
.atg-more-toggle{
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: 5;
}

.atg-more-toggle:hover{
  transform: translateX(-50%) translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.atg-more-toggle svg{
  width: 20px;
  height: 20px;
  opacity: .85;
  transition: transform .18s ease;
}

.atg-more-toggle[aria-expanded="true"] svg{
  transform: rotate(180deg);
}

/* D) druhý panel – rozbalovací sklo s textem */
.atg-glass-more{
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  border-radius: 22px;
  width: min(1180px, 92vw);
  margin: 26px auto 40px;
  padding: 22px 26px;
  display: none; /* skryté, dokud se neklikne */
}

.atg-glass-more.is-open{ display: block; }

/* E) drobnost: aby to uvnitř bylo hezky čitelné */
.atg-glass-more, .atg-glass-main{
  color: #111;
}

/* F) když Shoptet uvnitř má vlastní boxy s bílým pozadím, ztransparentníme je */
.atg-glass-main .box,
.atg-glass-more .box{
  background: transparent !important;
}
/* === Spodní skleněná lišta: Popis vlevo, Diskuze vpravo, Více uprostřed === */
.atg-glass-more{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;              /* výška/“tloušťka” lišty */
}

/* Popis / Diskuze jako “taby” */
.atg-glass-more .atg-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

/* Kolečko “Více” přesně doprostřed lišty */
.atg-glass-more .atg-more-toggle{
  position: absolute;
  left: 50%;
  top: 50%;                        /* tím ho dostaneme doprostřed skla */
  transform: translate(-50%, -50%);
  margin: 0 !important;
}

/* Když by Shoptet/šablona tlačítku dávala nějaký spodní offset */
.atg-glass-more .atg-more-toggle{
  bottom: auto !important;
}
/* === VÍCE: vycentrovat do prostřed skleněného okna === */
.atg-glass-main{
  position: relative; /* jistota, aby absolute fungovalo vůči oknu */
}

.atg-glass-main .atg-more-toggle{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;

  z-index: 50;
}
/* ===== ATG GLASS – lišta uprostřed: Popis | Více | Diskuze ===== */
.atg-glass-main{ position:relative; }

/* Více doprostřed skla */
.atg-glass-main .atg-more-toggle{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  z-index:60;
}

/* Nová tlačítka Popis/Diskuze */
.atg-glass-main .atg-midtab{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:60;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:0 10px 28px rgba(0,0,0,.12);

  cursor:pointer;
  font-weight:600;
  color:#111;
}

.atg-glass-main .atg-midtab:hover{
  transform:translate(-50%,-50%) scale(1.02);
}

.atg-glass-main .atg-midtab--desc{ left:34%; }
.atg-glass-main .atg-midtab--disc{ left:66%; }

/* mobil – ať se to nesrazí */
@media (max-width: 768px){
  .atg-glass-main .atg-midtab--desc{ left:25%; }
  .atg-glass-main .atg-midtab--disc{ left:75%; }
  .atg-glass-main .atg-midtab{
    padding:8px 12px;
    font-size:14px;
/* =========================
   ATG – Skleněné záložky v detailu produktu (Shoptet)
   ========================= */

/* KILL starého "Více" řešení, pokud tam někde zůstalo */
.atg-more-toggle,
.atg-glass-more {
  display: none !important;
}

/* Záložky – jen jemný vzhled, logiku necháme Shoptetu */
.p-detail-tabs-wrapper .shp-tabs-holder,
.p-detail-tabs-wrapper .shp-tabs {
  background: transparent !important;
  border: 0 !important;
}

.p-detail-tabs-wrapper .shp-tab-link {
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.p-detail-tabs-wrapper .shp-tab.active .shp-tab-link,
.p-detail-tabs-wrapper .shp-tab-link:focus,
.p-detail-tabs-wrapper .shp-tab-link:hover {
  color: #000 !important;
  font-weight: 700 !important;
}

/* === Start: SCHOVAT VŠECHEN obsah pod záložkami (dokud neklikneš) === */
.p-detail-tabs-wrapper .tab-content {
  display: none;
}

/* Skleněný kontejner (vytvoří se JS) */
.p-detail-tabs-wrapper .atg-tabs-glass {
  display: none;               /* defaultně schované */
  margin-top: 14px;
  padding: 18px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Když je otevřeno, ukaž skleněné okno */
.p-detail-tabs-wrapper.atg-tabs-open .atg-tabs-glass {
  display: block;
}

/* V okně vždy jen 1 panel */
.p-detail-tabs-wrapper .atg-tabs-glass .tab-pane {
  display: none;
}
.p-detail-tabs-wrapper.atg-tabs-open .atg-tabs-glass .tab-pane.is-active,
.p-detail-tabs-wrapper.atg-tabs-open .atg-tabs-glass .tab-pane.active {
  display: block;
}
=========================================================
   ATG – ONE GLASS (jen 1 vrstva skla na produktu)
   VLOŽ NA KONEC custom11.css
   ========================================================= */

/* 1) ZRUŠ sklo na vnějším wrapperu (to dělá druhou vrstvu) */
body.type-product.type-detail .p-detail,
body.type-product.type-detail #content .p-detail{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 2) Jediné sklo bude na p-detail-inner */
body.type-product.type-detail .p-detail-inner{
  background: rgba(255,255,255,.14) !important;         /* <-- když chceš víc průhledné, dej .10 nebo .08 */
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.12) !important;
  border-radius: 26px !important;

  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;

  overflow: hidden !important; /* ať nic neleze přes radius */
}

/* 3) Kdyby šablona kreslila ještě nějakou “fólii” přes pseudo-elementy */
body.type-product.type-detail .p-detail-inner::before,
body.type-product.type-detail .p-detail-inner::after{
  content: none !important;
}

/* 4) Uvnitř vše bez vlastních bílých pozadí (ať se to zbytečně nemléční) */
body.type-product.type-detail .p-detail-inner .p-detail-top,
body.type-product.type-detail .p-detail-inner .p-detail-bottom,
body.type-product.type-detail .p-detail-inner .p-image-wrapper,
body.type-product.type-detail .p-detail-inner .p-info-wrapper,
body.type-product.type-detail .p-detail-inner .p-thumbnails,
body.type-product.type-detail .p-detail-inner form,
body.type-product.type-detail .p-detail-inner .add-to-cart,
body.type-product.type-detail .p-detail-inner .quantity,
body.type-product.type-detail .p-detail-inner .variant-list{
  background: transparent !important;
/* =========================================
   ATGREEN – ONE GLASS (DETAIL PRODUKTU)
   Cíl: jen 1x mléčné sklo (bez vrstvení)
   VLOŽ ÚPLNĚ NA KONEC custom11.css
   ========================================= */

/* 0) Jistota: detail produktu je v Shoptetu typicky body.type-detail */
body.type-detail .p-detail,
body.type-detail .p-detail *{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 1) ZABIJEME "vnější" sklo / bílý panel (vrstva #1) */
body.type-detail .p-detail{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* (někdy to sedí na wrapperu okolo detailu) */
body.type-detail #content,
body.type-detail #content .container,
body.type-detail .content-wrapper,
body.type-detail .content-wrapper .container{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2) JEDINÉ sklo bude na .p-detail-inner (vrstva #2 = finální) */
body.type-detail .p-detail-inner{
  background: rgba(255,255,255,.01) !important;      /* více průhledné */
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.16) !important;
  border-radius: 26px !important;

  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;

  overflow: hidden !important; /* ať se nic “neláme” přes radius */
}

/* 3) Vnitřní bílé boxy – shodit na transparent (to dělá “druhé sklo”) */
body.type-detail .p-detail-inner .p-info-wrapper,
body.type-detail .p-detail-inner .p-detail-top,
body.type-detail .p-detail-inner .p-detail-bottom,
body.type-detail .p-detail-inner .p-detail-info,
body.type-detail .p-detail-inner .p-detail-tabs-wrapper,
body.type-detail .p-detail-inner .shp-tabs-wrapper,
body.type-detail .p-detail-inner .shp-tabs-holder,
body.type-detail .p-detail-inner .tab-content,
body.type-detail .p-detail-inner .box{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 4) DŮLEŽITÉ: NEŠAHAT na košík tlačítko – jen mu zvedneme kontrast, kdyby splývalo */
body.type-detail .p-detail-inner .add-to-cart-button,
body.type-detail .p-detail-inner button[type="submit"],
body.type-detail .p-detail-inner .btn,
body.type-detail .p-detail-inner .btn-cart{
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* 5) Kdyby se někde pořád držel bílý “panel” přes pseudo-element */
body.type-detail .p-detail::before,
body.type-detail .p-detail::after,
body.type-detail .p-detail-inner::before,
body.type-detail .p-detail-inner::after{
  background: transparent !important;
  box-shadow: none !important;
}
/* Sklo: extra průhledné, ale čitelnější */
body.type-detail .p-detail-inner{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.009) 0%,
    rgba(255,255,255,.009) 60%,
    rgba(255,255,255,.009) 100%
  ) !important;

  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.10) !important;

  -webkit-backdrop-filter: blur(26px) saturate(140%) !important;
  backdrop-filter: blur(26px) saturate(140%) !important;
}
/* ===== Sklo méně mléčné (overlay) ===== */
body.type-detail .p-detail-inner{
  position: relative !important;
  background: transparent !important;
}

/* vlastní sklo jako vrstva */
body.type-detail .p-detail-inner::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 26px !important;

  /* TADY se ladí průhlednost: zkus klidně .02 nebo .015 */
  background: rgba(255,255,255,.01) !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.10) !important;

  /* Blur taky dělá mlíko — menší blur = průhlednější */
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;

  pointer-events: none !important;
}

/* obsah nad sklem */
body.type-detail .p-detail-inner > *{
  position: relative !important;
  z-index: 1 !important;
}
=========================================================
   ATG – ONE GLASS (produkt detail) – FIX vrstvení + průhlednost
   VLOŽIT ÚPLNĚ NA KONEC custom11.css
========================================================= */

/* 1) Zruš "sklo" na vnějším wrapperu (to dělalo 2. vrstvu) */
body.type-product.type-detail .p-detail,
body.type-product.type-detail #content .p-detail{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 2) Jediné sklo nech jen na .p-detail-inner (celá karta) */
body.type-product.type-detail .p-detail-inner{
  background: rgba(255,255,255,.10) !important;     /* ✅ víc průhledné (zkus .08 až .12) */
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.12) !important;
  border-radius: 26px !important;

  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;

  overflow: hidden !important; /* ať se nic neláme přes radius */
}

/* 3) Kdyby Shoptet přidával ještě nějakou pseudo-vrstvu */
body.type-product.type-detail .p-detail-inner::before,
body.type-product.type-detail .p-detail-inner::after{
  background: transparent !important;
  box-shadow: none !important;
}

/* 4) Vnitřní bloky nesmí mít vlastní bílé pozadí */
body.type-product.type-detail .p-detail-inner .p-info-wrapper,
body.type-product.type-detail .p-detail-inner .p-detail-top,
body.type-product.type-detail .p-detail-inner .p-detail-bottom,
body.type-product.type-detail .p-detail-inner .p-details,
body.type-product.type-detail .p-detail-inner .add-to-cart,
body.type-product.type-detail .p-detail-inner .quantity{
  background: transparent !important;
}