/* DIZAJNLAND PRODUCT PAGE · V8.1 · 2026-10-17
   FIX: viewport-width product story even when Apollo/Shoptet gives description a narrow parent.
   Scope: long HTML product descriptions with .dlx5--long only.
   DEPLOY after V7.1 CSS and optional V7.4 CSS. No change to native gallery, cart,
   product identities, structured data, global layout or product HTML.
   Do not use "width:100%" as breakout; 100% follows the narrow Shoptet parent.
*/

/* Full screen breakout. Percentage in margin-left resolves against the actual
   Shoptet containing block; 50% - 50vw centers the new viewport-width panel.
   Keep finite edge padding to avoid horizontal scrollbars and safe-area overlap. */
.dlx5--long[data-dlx-component="product-description"] {
  --dl-v81-edge: clamp(12px, 1.65vw, 30px);
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  width: calc(100vw - var(--dl-v81-edge) - var(--dl-v81-edge)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: calc(50% - 50vw + var(--dl-v81-edge) + var(--dl-v81-nudge, 0px)) !important;
  margin-right: 0 !important;
  padding: clamp(12px, 1.6vw, 25px) 0 30px !important;
  background: linear-gradient(180deg,#fffaf5 0%,#fff7ee 48%,#fffdf9 100%);
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: left;
}

/* Only ancestors that ACTUALLY contain a DIZAJNLAND long description can be
   unclipped. Do not resize / restyle global Shoptet sections or the buy box. */
@supports selector(:has(.dlx5--long)) {
  .p-detail-tabs-wrapper:has(.dlx5--long),
  .p-detail-tabs:has(.dlx5--long),
  .p-detail .tab-content:has(.dlx5--long),
  .p-detail .tab-pane:has(.dlx5--long),
  .p-detail .extended-description:has(.dlx5--long),
  .p-detail .description-inner:has(.dlx5--long),
  .p-detail .p-detail-inner:has(.dlx5--long) {
    overflow: visible !important;
  }
}

.dlx5--long[data-dlx-component="product-description"] > .dlx5-container {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: clamp(10px, 1.7vw, 28px) !important;
}

/* Grid contents actually use the freed-up width. */
.dlx5--long .dlx5-hero,
.dlx5--long .dlx5-section,
.dlx5--long .dlx5-research,
.dlx5--long .dlx5-duo,
.dlx5--long .dlx5-v7-related,
.dlx5--long .dlx5-v7-research,
.dlx5--long .dlx5-related,
.dlx5--long .dlx5-cards,
.dlx5--long .dlx5-v73-flow {
  box-sizing: border-box !important;
  min-width: 0;
  max-width: none !important;
}
.dlx5--long .dlx5-section > h2,
.dlx5--long .dlx5-hero h2 {
  max-width: none !important;
}
.dlx5--long .dlx5-hero {
  width: 100% !important;
  padding: clamp(20px, 3vw, 42px) !important;
  border-radius: 18px;
  gap: clamp(18px, 3vw, 48px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
.dlx5--long .dlx5-hero:after { display: none !important; }
.dlx5--long .dlx5-cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(12px, 2.3vw, 30px);
}
.dlx5--long .dlx5-card,
.dlx5--long .dlx5-deep-article,
.dlx5--long .dlx5-deep-faq,
.dlx5--long .dlx5-research,
.dlx5--long .dlx5-v7-related,
.dlx5--long .dlx5-v7-research {
  min-width: 0 !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.dlx5--long .dlx5-card,
.dlx5--long .dlx5-deep-article,
.dlx5--long .dlx5-deep-faq { padding: 0 !important; }
.dlx5--long .dlx5-card::before { display: none !important; }
.dlx5--long .dlx5-card:hover { transform: none !important; }
.dlx5--long .dlx5-card-ornament { display:none !important; }

/* The actual clickable gallery, not a white card inside another white card. */
.dlx5--long .dlx5-section[aria-label="Fotografie produktu"] .dlx5-cards {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  align-items: start;
}
.dlx5--long .dlx5-photo-wrap {
  box-sizing: border-box !important;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dlx5--long .dlx5-photo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100% !important;
  max-height: min(65vh,680px);
  object-fit: contain;
}
.dlx5--long .dlx5-section[aria-label="Fotografie produktu"] .dlx5-card > p {
  padding: 4px 0 0 !important;
  margin: 6px 0 14px !important;
  max-width: none !important;
}
.dlx5--long .dlx5-section[aria-label="Fotografie produktu"] .dlx5-eyebrow {
  margin-bottom: 5px;
}

/* Use space, but keep prose readable on very wide desktop screens. */
.dlx5--long .dlx5-research > p,
.dlx5--long .dlx5-v7-research > p,
.dlx5--long .dlx5-v73-flow > p,
.dlx5--long .dlx5-deep-article > p {
  max-width: 92ch;
}
.dlx5--long .dlx5-section,
.dlx5--long .dlx5-research,
.dlx5--long .dlx5-v7-research {
  margin-top: clamp(22px,3vw,42px);
}

/* Native Apollo back-to-top control appears on the right in the user's screenshot.
   Move our optional tree to the left, retaining separate click targets. */
@media (max-width: 850px) {
  .dlx5--long .dlx5-hero { grid-template-columns:minmax(0,1fr) !important; }
  .dlx5--long .dlx5-duo { grid-template-columns:minmax(0,1fr) !important; }
  .dlx5--long .dlx5-cards { grid-template-columns:minmax(0,1fr) !important; }
  .dlx5--long .dlx5-scrolltree {
    left: max(10px,env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(82px,calc(env(safe-area-inset-bottom) + 68px)) !important;
  }
}

@media (max-width: 600px) {
  .dlx5--long[data-dlx-component="product-description"] {
    --dl-v81-edge: max(8px,env(safe-area-inset-left),env(safe-area-inset-right));
    padding: 8px 0 18px !important;
  }
  .dlx5--long[data-dlx-component="product-description"] > .dlx5-container {
    padding-inline: 5px !important;
  }
  .dlx5--long .dlx5-hero { padding: 20px 16px !important; border-radius: 12px !important; }
  .dlx5--long .dlx5-section[aria-label="Fotografie produktu"] .dlx5-cards {
    display: grid;
    grid-template-columns:minmax(0,1fr) !important;
    gap: 10px !important;
  }
  .dlx5--long .dlx5-photo-wrap { border-radius: 6px !important; }
  .dlx5--long .dlx5-photo-wrap img { max-height: min(66svh,620px) !important; }
  .dlx5--long .dlx5-section[aria-label="Fotografie produktu"] .dlx5-card > p {
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
  .dlx5--long .dlx5-scrolltree { width:58px !important; height:82px !important; }
  .dlx5--long .dlx5-tree-caption { font-size:7px !important; }
}

/* Fine-point: break long imported words/URLs but do not shrink entire page. */
.dlx5--long :is(h2,h3,p,li,dd,dt) { overflow-wrap: anywhere; }
.dlx5--long :is(img,iframe,video,svg) { max-width:100%; }
@media (prefers-reduced-motion:reduce) {
  .dlx5--long :is(.dlx5-card,.dlx5-photo-wrap img) { transition:none !important; }
}