/* =========================================================
   OUTFITARNA — PDP FASHION v6
   Safe product-detail-only overlay for confirmed STABLE 10G.

   Scope: body.type-detail only.
   Goal: closer to Erika Fashion / TallGuys top-fold density,
   while preserving Shoptet's native product logic and gallery behavior.
   ========================================================= */

body.type-detail{
  background:var(--of-bg)!important;
}

body.type-detail #content-wrapper.content-wrapper{
  background:var(--of-bg)!important;
  box-sizing:border-box!important;
  max-width:none!important;
  padding-left:28px!important;
  padding-right:28px!important;
}

body.type-detail .content-wrapper-in{
  display:block!important;
  margin:0 auto!important;
  max-width:1320px!important;
  padding:14px 0 58px!important;
  width:100%!important;
}

body.type-detail .sidebar{
  display:none!important;
}

body.type-detail #content.content,
body.type-detail #content.content.narrow{
  float:none!important;
  margin:0!important;
  max-width:none!important;
  padding:0!important;
  width:100%!important;
}

body.type-detail .p-detail{
  margin:0 auto!important;
  max-width:1280px!important;
  width:100%!important;
}

/* ---------- TOP FOLD ---------- */

@media (min-width:1100px){
  body.type-detail .p-detail-inner{
    align-items:start!important;
    display:grid!important;
    gap:52px!important;
    grid-template-columns:minmax(0,680px) minmax(380px,470px)!important;
    justify-content:center!important;
    width:100%!important;
  }

  body.type-detail .p-image-wrapper{
    float:none!important;
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    max-width:680px!important;
    padding:0!important;
    width:100%!important;
  }

  body.type-detail .p-data-wrapper,
  body.type-detail .p-detail-info{
    background:transparent!important;
    border-left:0!important;
    float:none!important;
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    max-width:470px!important;
    padding:0!important;
    position:sticky!important;
    top:22px!important;
    width:100%!important;
  }
}

@media (min-width:768px) and (max-width:1099px){
  body.type-detail .p-detail-inner{
    align-items:start!important;
    display:grid!important;
    gap:34px!important;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.82fr)!important;
  }

  body.type-detail .p-image-wrapper{
    max-width:620px!important;
  }

  body.type-detail .p-data-wrapper,
  body.type-detail .p-detail-info{
    border-left:0!important;
    padding-left:0!important;
    position:sticky!important;
    top:18px!important;
  }
}

/* ---------- GALLERY ---------- */

body.type-detail .p-image{
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
  display:block!important;
  margin:0!important;
  overflow:hidden!important;
  padding:0!important;
  width:100%!important;
}

body.type-detail .p-main-image,
body.type-detail .p-image > a{
  background:#fff!important;
  display:block!important;
  width:100%!important;
}

body.type-detail .p-image img{
  display:block!important;
  height:auto!important;
  margin:0 auto!important;
  max-height:none!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
  width:100%!important;
}

/* Make the thumbnail area feel like a fashion gallery rather than tiny controls. */
@media (min-width:768px){
  body.type-detail .p-image-wrapper .row{
    margin:14px 0 0!important;
  }

  body.type-detail .p-thumbnails,
  body.type-detail .p-thumbnails > div,
  body.type-detail .p-thumbnails > div > div{
    display:grid!important;
    gap:10px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    height:auto!important;
    max-height:none!important;
    width:100%!important;
  }

  body.type-detail .p-thumbnails a{
    aspect-ratio:2/3!important;
    background:#fff!important;
    border:1px solid var(--of-line)!important;
    border-radius:0!important;
    display:block!important;
    height:auto!important;
    margin:0!important;
    overflow:hidden!important;
    padding:0!important;
    width:100%!important;
  }

  body.type-detail .p-thumbnails a img{
    display:block!important;
    height:100%!important;
    margin:0!important;
    max-height:none!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center top!important;
    width:100%!important;
  }
}

/* Replace Shoptet's oversized green badge with the same calmer fashion language as PLP. */
body.type-detail .flags{
  left:12px!important;
  top:12px!important;
  z-index:4!important;
}

body.type-detail .flag,
body.type-detail .flag.flag-new{
  background:rgba(248,245,239,.94)!important;
  border:1px solid rgba(23,20,17,.12)!important;
  border-radius:0!important;
  color:var(--of-ink)!important;
  font-family:var(--of-sans)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  line-height:1!important;
  min-width:0!important;
  padding:8px 10px!important;
  text-transform:uppercase!important;
  width:auto!important;
}

/* ---------- BUY PANEL ---------- */

body.type-detail .p-detail-inner-header{
  margin:0 0 18px!important;
}

body.type-detail .p-detail-inner-header h1,
body.type-detail .p-detail h1{
  color:var(--of-ink)!important;
  font-family:var(--of-serif)!important;
  font-size:clamp(38px,3.15vw,50px)!important;
  font-weight:500!important;
  letter-spacing:-.032em!important;
  line-height:1.02!important;
  margin:0!important;
  max-width:11em!important;
}

body.type-detail .p-short-description{
  color:var(--of-muted)!important;
  font-family:var(--of-sans)!important;
  font-size:14px!important;
  line-height:1.65!important;
  margin:0 0 22px!important;
  max-width:36em!important;
}

body.type-detail #product-detail-form{
  border-top:1px solid var(--of-line)!important;
  margin-top:22px!important;
  padding-top:22px!important;
}

body.type-detail .variant-list,
body.type-detail .surcharge-list,
body.type-detail .parameter-dependent,
body.type-detail .variant-table,
body.type-detail .variant-default{
  margin:16px 0 20px!important;
}

body.type-detail #product-detail-form label,
body.type-detail .variant-list label,
body.type-detail .variant-default label{
  color:var(--of-ink)!important;
  font-family:var(--of-sans)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}

body.type-detail #product-detail-form select{
  background:#fff!important;
  border:1px solid #bcb7b0!important;
  border-radius:0!important;
  color:var(--of-ink)!important;
  font-family:var(--of-sans)!important;
  font-size:14px!important;
  min-height:48px!important;
  padding:0 14px!important;
  width:100%!important;
}

body.type-detail .p-final-price-wrapper,
body.type-detail .price-final{
  color:var(--of-ink)!important;
  font-family:var(--of-sans)!important;
  font-size:28px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  line-height:1.15!important;
  margin:20px 0 16px!important;
  padding:0!important;
}

body.type-detail .detail-parameters:not(table){
  border-bottom:1px solid var(--of-line)!important;
  border-top:1px solid var(--of-line)!important;
  display:grid!important;
  gap:6px!important;
  margin:0 0 20px!important;
  padding:14px 0!important;
}

body.type-detail .detail-parameter{
  align-items:baseline!important;
  display:flex!important;
  gap:8px!important;
  margin:0!important;
}

body.type-detail .detail-parameter span{
  font-family:var(--of-sans)!important;
  font-size:11px!important;
  line-height:1.45!important;
}

body.type-detail .availability-label{
  font-family:var(--of-sans)!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

body.type-detail .availability-label[style]{
  color:#3f7e22!important;
}

body.type-detail .add-to-cart{
  align-items:stretch!important;
  display:flex!important;
  gap:10px!important;
  margin-top:20px!important;
  max-width:100%!important;
}

body.type-detail .quantity{
  border:1px solid var(--of-line)!important;
  display:flex!important;
  flex:0 0 116px!important;
  height:52px!important;
}

body.type-detail .quantity input.amount{
  border:0!important;
  font-size:14px!important;
  font-weight:800!important;
  height:50px!important;
  text-align:center!important;
  width:48px!important;
}

body.type-detail .quantity .increase,
body.type-detail .quantity .decrease{
  background:transparent!important;
  border:0!important;
  color:var(--of-ink)!important;
  height:50px!important;
  width:34px!important;
}

body.type-detail .add-to-cart-button{
  align-items:center!important;
  background:var(--of-ink)!important;
  border:1px solid var(--of-ink)!important;
  border-radius:0!important;
  color:var(--of-bg)!important;
  display:inline-flex!important;
  flex:1 1 auto!important;
  font-family:var(--of-sans)!important;
  font-size:12px!important;
  font-weight:900!important;
  justify-content:center!important;
  letter-spacing:.12em!important;
  min-height:52px!important;
  padding:0 22px!important;
  text-transform:uppercase!important;
}

body.type-detail .add-to-cart-button:hover,
body.type-detail .add-to-cart-button:focus{
  background:var(--of-accent)!important;
  border-color:var(--of-accent)!important;
  color:#fff!important;
}

body.type-detail .link-icons{
  border-top:1px solid var(--of-line)!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:18px!important;
  margin:24px 0 0!important;
  padding-top:18px!important;
}

body.type-detail .link-icons .link-icon{
  background:transparent!important;
  border:0!important;
  color:var(--of-muted)!important;
  font-family:var(--of-sans)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
  margin:0!important;
  padding:0!important;
  text-transform:uppercase!important;
}

/* ---------- LOWER PRODUCT CONTENT ---------- */

body.type-detail .shp-tabs-wrapper{
  background:transparent!important;
  border-top:1px solid var(--of-line)!important;
  clear:both!important;
  margin:48px auto 0!important;
  max-width:1040px!important;
  padding-top:28px!important;
}

body.type-detail .shp-tabs{
  border:0!important;
  display:flex!important;
  gap:20px!important;
  margin:0 0 24px!important;
  padding:0!important;
}

body.type-detail .shp-tab a{
  border:0!important;
  color:var(--of-muted)!important;
  font-family:var(--of-sans)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  padding:0!important;
  text-transform:uppercase!important;
}

body.type-detail .shp-tab.active a,
body.type-detail .shp-tab a:hover{
  color:var(--of-ink)!important;
}

body.type-detail .description-inner{
  color:var(--of-ink)!important;
  font-family:var(--of-sans)!important;
  font-size:15px!important;
  line-height:1.75!important;
  margin:0 auto!important;
  max-width:820px!important;
}

/* ---------- MOBILE ---------- */

@media (max-width:767px){
  body.type-detail #content-wrapper.content-wrapper{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  body.type-detail .content-wrapper-in{
    padding-top:8px!important;
    padding-bottom:44px!important;
  }

  body.type-detail .p-detail-inner{
    display:flex!important;
    flex-direction:column!important;
    gap:22px!important;
  }

  body.type-detail .p-image-wrapper,
  body.type-detail .p-data-wrapper,
  body.type-detail .p-detail-info{
    max-width:none!important;
    position:static!important;
    width:100%!important;
  }

  body.type-detail .p-detail-inner-header h1,
  body.type-detail .p-detail h1{
    font-size:36px!important;
    line-height:1.04!important;
    max-width:100%!important;
  }

  body.type-detail .p-thumbnails,
  body.type-detail .p-thumbnails > div,
  body.type-detail .p-thumbnails > div > div{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  body.type-detail .p-thumbnails::-webkit-scrollbar{
    display:none!important;
  }

  body.type-detail .p-thumbnails a{
    flex:0 0 74px!important;
    height:92px!important;
    width:74px!important;
  }

  body.type-detail .p-final-price-wrapper,
  body.type-detail .price-final{
    font-size:24px!important;
  }

  body.type-detail .add-to-cart{
    gap:8px!important;
  }

  body.type-detail .quantity{
    flex-basis:104px!important;
    height:48px!important;
  }

  body.type-detail .quantity input.amount{
    height:46px!important;
    width:42px!important;
  }

  body.type-detail .quantity .increase,
  body.type-detail .quantity .decrease{
    height:46px!important;
    width:30px!important;
  }

  body.type-detail .add-to-cart-button{
    min-height:48px!important;
    padding:0 14px!important;
  }

  body.type-detail .shp-tabs-wrapper{
    margin-top:36px!important;
    padding-top:24px!important;
  }

  body.type-detail .shp-tabs{
    gap:14px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
  }
}


/* =========================================================
   V2 — REAL PDP IMAGE WALL
   The native Shoptet gallery stays in DOM as a functional fallback,
   but after JS successfully builds the image wall it is visually hidden.
   ========================================================= */

body.type-detail .p-image-wrapper.of-pdp-gallery-mounted{
  max-width:680px!important;
}

/* Hide ONLY the native visual gallery after the replacement grid exists. */
body.type-detail .p-image-wrapper.of-pdp-gallery-mounted > .p-image,
body.type-detail .p-image-wrapper.of-pdp-gallery-mounted > .row,
body.type-detail .p-image-wrapper.of-pdp-gallery-mounted .p-thumbnails{
  display:none!important;
}

/* Keep the custom image wall compact: no wide white frame around portrait images. */
body.type-detail .of-pdp-gallery-grid{
  display:grid!important;
  gap:10px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  margin:0!important;
  padding:0!important;
  width:100%!important;
}

body.type-detail .of-pdp-gallery-card{
  aspect-ratio:2/3!important;
  background:#f1eee9!important;
  border:0!important;
  cursor:zoom-in!important;
  display:block!important;
  line-height:0!important;
  margin:0!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:0!important;
  position:relative!important;
  width:100%!important;
}

body.type-detail .of-pdp-gallery-card img{
  display:block!important;
  height:100%!important;
  margin:0!important;
  max-height:none!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center top!important;
  width:100%!important;
}

body.type-detail .of-pdp-gallery-card:focus-visible{
  outline:2px solid var(--of-ink)!important;
  outline-offset:2px!important;
}

body.type-detail .of-pdp-gallery-card .flags,
body.type-detail .of-pdp-gallery-card .of-pdp-grid-flags{
  left:12px!important;
  position:absolute!important;
  top:12px!important;
  z-index:4!important;
}

/* If only one product image exists, do not leave a half-width tile. */
body.type-detail .of-pdp-gallery-grid.of-pdp-gallery-grid--single{
  grid-template-columns:minmax(0,1fr)!important;
  max-width:520px!important;
}

/* Desktop top fold: the image wall and buy panel stay visually balanced. */
@media (min-width:1100px){
  body.type-detail .p-detail-inner{
    gap:48px!important;
    grid-template-columns:minmax(0,680px) minmax(390px,460px)!important;
  }

  body.type-detail .p-data-wrapper,
  body.type-detail .p-detail-info{
    max-width:460px!important;
  }
}

/* Tablet: still use the real two-column image grid while the buy panel remains beside it. */
@media (min-width:768px) and (max-width:1099px){
  body.type-detail .of-pdp-gallery-grid{
    gap:8px!important;
  }
}

/* Mobile: one large image per swipe-like vertical flow, no tiny native thumbnails. */
@media (max-width:767px){
  body.type-detail .p-image-wrapper.of-pdp-gallery-mounted > .p-image,
  body.type-detail .p-image-wrapper.of-pdp-gallery-mounted > .row,
  body.type-detail .p-image-wrapper.of-pdp-gallery-mounted .p-thumbnails{
    display:none!important;
  }

  body.type-detail .of-pdp-gallery-grid{
    gap:8px!important;
    grid-template-columns:1fr!important;
  }

  body.type-detail .of-pdp-gallery-card{
    aspect-ratio:2/3!important;
  }

  body.type-detail .of-pdp-gallery-grid.of-pdp-gallery-grid--single{
    max-width:none!important;
  }
}


/* =========================================================
   V4 — PORTRAIT CROP FIX

   Current supplier assets contain a ~2:3 portrait photo inside a wider
   source canvas with white side padding. The gallery cell therefore uses
   a 2:3 aspect ratio. With object-fit:cover this crops the baked-in side
   padding naturally, without stretching the photo and without JS pixel
   analysis.
   ========================================================= */

body.type-detail .of-pdp-gallery-card{
  aspect-ratio:2/3!important;
}

body.type-detail .of-pdp-gallery-card img{
  object-fit:cover!important;
  object-position:center top!important;
  transform:none!important;
}


/* =========================================================
   V5 — ADMIN-DRIVEN PRODUCT INFO PANEL
   Everything stays scoped to body.type-detail.
   ========================================================= */

body.type-detail .of-pdp-extra{
  border-top:1px solid var(--of-line)!important;
  margin-top:26px!important;
  padding-top:20px!important;
}

body.type-detail .of-pdp-benefits{
  display:grid!important;
  gap:8px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  margin:0 0 22px!important;
}

body.type-detail .of-pdp-benefit{
  align-items:flex-start!important;
  background:rgba(255,255,255,.34)!important;
  border:1px solid var(--of-line)!important;
  display:flex!important;
  gap:9px!important;
  min-height:58px!important;
  padding:12px 12px!important;
}

body.type-detail .of-pdp-benefit__icon{
  align-items:center!important;
  border:1px solid var(--of-ink)!important;
  border-radius:999px!important;
  display:inline-flex!important;
  flex:0 0 24px!important;
  height:24px!important;
  justify-content:center!important;
  margin-top:1px!important;
  width:24px!important;
}

body.type-detail .of-pdp-benefit__icon svg{
  height:13px!important;
  width:13px!important;
}

body.type-detail .of-pdp-benefit__text{
  color:var(--of-ink)!important;
  font-family:var(--of-sans)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.35!important;
  margin:2px 0 0!important;
}

body.type-detail .of-pdp-accordions{
  border-top:1px solid var(--of-line)!important;
}

body.type-detail .of-pdp-accordion{
  border-bottom:1px solid var(--of-line)!important;
  margin:0!important;
}

body.type-detail .of-pdp-accordion > summary{
  align-items:center!important;
  color:var(--of-ink)!important;
  cursor:pointer!important;
  display:flex!important;
  font-family:var(--of-sans)!important;
  font-size:11px!important;
  font-weight:900!important;
  justify-content:space-between!important;
  letter-spacing:.11em!important;
  list-style:none!important;
  min-height:48px!important;
  padding:0 2px!important;
  text-transform:uppercase!important;
}

body.type-detail .of-pdp-accordion > summary::-webkit-details-marker{
  display:none!important;
}

body.type-detail .of-pdp-accordion > summary::after{
  content:"+"!important;
  flex:0 0 auto!important;
  font-family:var(--of-sans)!important;
  font-size:20px!important;
  font-weight:500!important;
  line-height:1!important;
  margin-left:16px!important;
}

body.type-detail .of-pdp-accordion[open] > summary::after{
  content:"−"!important;
}

body.type-detail .of-pdp-accordion__content{
  color:var(--of-muted)!important;
  font-family:var(--of-sans)!important;
  font-size:13px!important;
  line-height:1.65!important;
  padding:0 2px 18px!important;
}

body.type-detail .of-pdp-accordion__content > :first-child{
  margin-top:0!important;
}

body.type-detail .of-pdp-accordion__content > :last-child{
  margin-bottom:0!important;
}

body.type-detail .of-pdp-accordion__content p{
  font:inherit!important;
  line-height:inherit!important;
  margin:0 0 10px!important;
}

body.type-detail .of-pdp-accordion__content ul,
body.type-detail .of-pdp-accordion__content ol{
  margin:6px 0 10px!important;
  padding-left:1.25em!important;
}

body.type-detail .of-pdp-accordion__content a{
  color:var(--of-ink)!important;
  font-weight:800!important;
  text-decoration:underline!important;
  text-underline-offset:.16em!important;
}

body.type-detail .of-pdp-info-list{
  display:grid!important;
  gap:8px!important;
  margin:0!important;
}

body.type-detail .of-pdp-info-row{
  display:grid!important;
  gap:8px!important;
  grid-template-columns:minmax(112px,.42fr) minmax(0,1fr)!important;
  margin:0!important;
}

body.type-detail .of-pdp-info-row dt{
  color:var(--of-muted)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  margin:0!important;
  text-transform:uppercase!important;
}

body.type-detail .of-pdp-info-row dd{
  color:var(--of-ink)!important;
  margin:0!important;
}

/* Hide only the original Popis / Parametry tabs after their content was
   successfully mirrored into the right-side accordion panel. Other tabs
   such as ratings remain untouched. */
body.type-detail .shp-tab.of-pdp-source-tab-hidden,
body.type-detail .of-pdp-source-pane-hidden{
  display:none!important;
}

/* If no original product tabs remain after pruning Popis/Parametry,
   remove the empty wrapper so it cannot create a dead vertical gap. */
body.type-detail .shp-tabs-wrapper.of-pdp-tabs-empty{
  display:none!important;
}

/* A little more usable sticky-panel room now that accordions live there. */
@media (min-width:1100px){
  body.type-detail .p-data-wrapper,
  body.type-detail .p-detail-info{
    scrollbar-width:thin;
  }
}

@media (max-width:767px){
  body.type-detail .of-pdp-extra{
    margin-top:22px!important;
    padding-top:18px!important;
  }

  body.type-detail .of-pdp-benefits{
    grid-template-columns:1fr 1fr!important;
    margin-bottom:18px!important;
  }

  body.type-detail .of-pdp-benefit{
    min-height:54px!important;
    padding:10px!important;
  }

  body.type-detail .of-pdp-benefit__text{
    font-size:11px!important;
  }

  body.type-detail .of-pdp-accordion > summary{
    min-height:50px!important;
  }

  body.type-detail .of-pdp-info-row{
    grid-template-columns:1fr!important;
    gap:2px!important;
  }
}


/* =========================================================
   V6 — SOURCE PARAMETER CLEANUP
   The original Shoptet "Parametry" block is hidden only after
   at least one recognized admin parameter was successfully copied
   into the custom right-side panel.
   ========================================================= */

body.type-detail .of-pdp-original-parameter-table-hidden,
body.type-detail .of-pdp-original-parameter-block-hidden,
body.type-detail .of-pdp-original-parameter-heading-hidden{
  display:none!important;
}

body.type-detail .of-pdp-extra + .link-icons{
  margin-top:22px!important;
}