/* ==========================================================
   KM PRODUCT PAGE – LANDING LOOK (Shoptet-safe)
   Wrappery:
   - .p-detail (Product)
   - .p-detail-inner (top: galerie + buy box + krátký popis)
   - .shp-accordion-wrapper.p-detail-tabs-wrapper (dlouhý popis / accordion)
   Aktivace: body.km-product (přidává JS)
   ========================================================== */

:root{
  --km-accent: #eb3b84;     /* konverzní barva */
  --km-soft:   #fadee9;     /* zvýrazněné pozadí */
  --km-navy:   #0a3656;     /* doplňková tmavá */
  --km-text:   #0b1b2a;
  --km-card:   #ffffff;
  --km-border: rgba(10, 54, 86, .14);
  --km-shadow: 0 14px 36px rgba(10, 54, 86, .12);
  --km-radius: 18px;
}

/* ----------------------------------------------------------
   0) “Landing reset” – bez mezer Shoptetu nahoře
   ---------------------------------------------------------- */
body.km-product #content{
  padding-top: 0 !important;
}
body.km-product #content .container,
body.km-product #content .content-wrapper,
body.km-product #content .in-wrapper{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* (volitelné) pokud chceš breadcrumbs ponechat, nech; pokud ne, odkomentuj */
/*
body.km-product .breadcrumbs,
body.km-product .breadcrumb{
  display: none !important;
}
*/

/* ----------------------------------------------------------
   1) “Hero top” – celý produkt jako čistá sekce
   ---------------------------------------------------------- */
body.km-product .p-detail{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* top blok (galerie + info) jako landing hero */
body.km-product .p-detail-inner{
  margin-top: 0 !important;
  padding-top: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (max-width: 990px){
  body.km-product .p-detail-inner{
    grid-template-columns: 1fr !important;
  }
}

/* ----------------------------------------------------------
   2) Galerie – “card” look
   ---------------------------------------------------------- */
body.km-product .p-detail-inner .p-detail-image,
body.km-product .p-detail-inner .p-detail-gallery,
body.km-product .p-detail-inner .p-image{
  background: var(--km-card) !important;
  border-radius: var(--km-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--km-shadow) !important;
  border: 1px solid rgba(10, 54, 86, .08) !important;
}

/* Thumbnails / mini náhledy zjemníme */
body.km-product .p-detail-inner .p-thumbnails,
body.km-product .p-detail-inner .p-gallery-thumbnails{
  margin-top: 10px !important;
}
body.km-product .p-detail-inner .p-thumbnails a,
body.km-product .p-detail-inner .p-gallery-thumbnails a{
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ----------------------------------------------------------
   3) Pravý panel (název, cena, varianty, košík) = “hero card”
   ---------------------------------------------------------- */
body.km-product .p-detail-inner .p-detail-info{
  background: var(--km-card) !important;
  border-radius: var(--km-radius) !important;
  box-shadow: var(--km-shadow) !important;
  border: 1px solid rgba(10, 54, 86, .08) !important;
  padding: 18px !important;
}

/* sticky buy box na desktopu */
@media (min-width: 991px){
  body.km-product .p-detail-inner .p-detail-info{
    position: sticky !important;
    top: 86px !important; /* uprav dle výšky headeru */
  }
}

/* Tag / štítek (pokud máš prvky typu “Novinka/Sleva”) */
body.km-product .p-detail-inner .flags,
body.km-product .p-detail-inner .flag{
  margin-bottom: 10px !important;
}
body.km-product .p-detail-inner .flag{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  background: rgba(250, 222, 233, .85) !important;
  border: 1px solid rgba(10, 54, 86, .10) !important;
  color: var(--km-navy) !important;
  font-weight: 700 !important;
}

/* H1 – jako na landing page */
body.km-product .p-detail-inner .p-detail-info h1{
  color: var(--km-text) !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 6px 0 10px !important;
}

/* Krátký popis */
body.km-product .p-detail-inner .p-short-description{
  font-size: 15px !important;
  line-height: 1.6 !important;
  opacity: .95;
  margin: 8px 0 14px !important;
}

/* Cena */
body.km-product .p-detail-inner .price,
body.km-product .p-detail-inner .p-final-price,
body.km-product .p-detail-inner .p-price{
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--km-text) !important;
}

body.km-product .p-detail-inner .price-save,
body.km-product .p-detail-inner .p-discount,
body.km-product .p-detail-inner .discount{
  color: var(--km-accent) !important;
  font-weight: 800 !important;
}

/* Dostupnost / doručení jako soft box */
body.km-product .p-detail-inner .availability,
body.km-product .p-detail-inner .p-availability,
body.km-product .p-detail-inner .delivery-time{
  background: var(--km-soft) !important;
  border: 1px solid rgba(10, 54, 86, .10) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin: 12px 0 12px !important;
}

/* Varianty / velikosti jako pills */
body.km-product .p-detail-inner .variant-list a,
body.km-product .p-detail-inner .p-variants a,
body.km-product .p-detail-inner .variants a,
body.km-product .p-detail-inner .selectbox,
body.km-product .p-detail-inner select{
  border-radius: 999px !important;
}

body.km-product .p-detail-inner .variant-list a,
body.km-product .p-detail-inner .p-variants a,
body.km-product .p-detail-inner .variants a{
  border: 1px solid var(--km-border) !important;
  background: #fff !important;
  padding: 10px 12px !important;
}

body.km-product .p-detail-inner .variant-list a.active,
body.km-product .p-detail-inner .p-variants a.active,
body.km-product .p-detail-inner .variants a.active{
  border-color: var(--km-navy) !important;
  box-shadow: 0 10px 22px rgba(10, 54, 86, .12) !important;
}

/* CTA: do košíku (konverzní barva) */
body.km-product .p-detail-inner .add-to-cart-button,
body.km-product .p-detail-inner .btn.btn-cart,
body.km-product .p-detail-inner button[type="submit"].btn{
  background: var(--km-accent) !important;
  border-color: var(--km-accent) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

body.km-product .p-detail-inner .add-to-cart-button:hover,
body.km-product .p-detail-inner .btn.btn-cart:hover,
body.km-product .p-detail-inner button[type="submit"].btn:hover{
  filter: brightness(.96);
}

/* sekundární tlačítka (hlídací pes apod.) */
body.km-product .p-detail-inner .btn:not(.btn-cart):not(.add-to-cart-button){
  border-radius: 14px !important;
  border: 1px solid var(--km-navy) !important;
  color: var(--km-navy) !important;
  background: rgba(10, 54, 86, .04) !important;
}

/* ----------------------------------------------------------
   4) Dlouhý popis = “landing sekce” / accordion v kartách
   ---------------------------------------------------------- */
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper{
  margin-top: 18px !important;
  padding-top: 0 !important;
}

/* celý accordion jako sekce */
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper .shp-accordion{
  display: grid !important;
  gap: 12px !important;
}

/* každá položka jako KM card */
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper .shp-accordion-item{
  background: var(--km-card) !important;
  border-radius: var(--km-radius) !important;
  border: 1px solid rgba(10, 54, 86, .10) !important;
  box-shadow: 0 10px 26px rgba(10, 54, 86, .08) !important;
  overflow: hidden !important;
}

/* hlavička accordionu */
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper .shp-accordion-header{
  padding: 14px 16px !important;
  font-weight: 900 !important;
  color: var(--km-navy) !important;
  background: rgba(250, 222, 233, .55) !important;
}

/* obsah accordionu */
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper .shp-accordion-content{
  padding: 14px 16px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--km-text) !important;
}

/* odstavce a seznamy v popisu ať jsou čitelné */
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper .shp-accordion-content p{
  margin: 0 0 12px !important;
}
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper .shp-accordion-content ul,
body.km-product .shp-accordion-wrapper.p-detail-tabs-wrapper .shp-accordion-content ol{
  margin: 0 0 12px 18px !important;
}

/* ----------------------------------------------------------
   5) Related / doplňky – sjednotit do “karet”
   (pokud se liší selektory, klidně nech – neublíží)
   ---------------------------------------------------------- */
body.km-product .products-related,
body.km-product .related-products{
  margin-top: 22px !important;
}

body.km-product .products-related .product,
body.km-product .related-products .product{
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(10, 54, 86, .10) !important;
  box-shadow: 0 10px 22px rgba(10, 54, 86, .08) !important;
}

/* ----------------------------------------------------------
   6) Jemné detaily – aby to působilo “čistě”
   ---------------------------------------------------------- */
body.km-product a{
  text-underline-offset: 3px;
}

body.km-product .p-detail-inner .p-code,
body.km-product .p-detail-inner .star-rating,
body.km-product .p-detail-inner .p-detail-info .rating{
  opacity: .92;
}