/* Product detail "long description" redesign — matches coffeeinshop.ro's
   product page layout (origin card / flavor wheel / specs grid / roast
   story / roaster quote). Pasted into each product's Popis (long
   description) source-code editor in Shoptet admin — scoped under
   .pd-page so it can't leak into the rest of the page. */

.pd-page { max-width: 1160px; margin: 0 auto; }
.pd-mt-40 { margin-top: 40px; }
.pd-mt-80 { margin-top: 80px; }

/* ── Blog banner ── recovered from an inline <style> block that used to
   live inside Elite's OLD long description content and got deleted along
   with the rest of it when the new template replaced that section. Kept
   here now so it's centrally maintained instead of re-pasted per product. */
.Blog-banner {
  display: flex;
  align-items: stretch;
  gap: 24px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #3f2212;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.Blog-banner:hover {
  transform: scale(1.01);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.Blog-banner__image { flex: 0 0 40%; max-width: 768px; }
.Blog-banner__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.Blog-banner__content { flex: 1; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; }
.Blog-banner__content h3 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.4; }
.Blog-banner__content p { margin: 0 0 16px; font-size: 1rem; line-height: 1.6; }
.Blog-banner__cta { font-weight: 600; font-size: 0.95rem; opacity: 0.85; }
@media (max-width: 768px) {
  .Blog-banner { flex-direction: column; }
  .Blog-banner__image { flex: none; height: 200px; }
}

/* ── Master 3-col grid ── */
.pd-detail-grid {
  display: grid;
  grid-template-columns: 280px 280px 1fr;
  gap: 16px;
  align-items: stretch;
  min-height: 460px;
}

/* ── Col 1: Dark origin card ── */
.pd-origin-dark {
  background: #2A2D32;
  border-radius: 16px;
  padding: 36px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  position: relative;
}
.pd-origin-content { padding-bottom: 140px; display:flex; flex-direction:column; gap:16px; flex:1; }
.pd-origin-dark h2 { font-size:22px; font-weight:700; color:#fff; line-height:1.2; margin:0; }
.pd-origin-dark p  { font-size:14px; color:rgba(255,255,255,.85); line-height:1.7; flex:1; margin:0; }
.pd-origin-dark a  { color:#F9A05A; text-decoration:underline; font-size:13px; }
.pd-origin-mascot  { position:absolute; bottom:0; left:0; right:0; line-height:0; pointer-events:none; }
.pd-origin-mascot img { width:60%; max-height:140px; object-fit:contain; object-position:bottom center; display:block; margin:0 auto; }

/* ── Col 2: Flavor wheel card ── */
.pd-wheel-col {
  background: #F9F9F9;
  border-radius: 16px;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pd-wheel-col h3 { font-size:20px; font-weight:700; color:#000; text-align:center; align-self:stretch; margin:0; }
.pd-wheel-svg { width:220px; height:220px; max-width:100%; }

/* ── Col 3: Specs grid ── */
.pd-specs-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-sg-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  flex: 1;
}
.pd-sg-cell {
  background: #F9F9F9;
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.pd-sg-lbl {
  font-size: 13px; font-weight: 700; color: #000;
  line-height: 1.2; text-align: center; width: 100%;
}
.pd-sg-val {
  font-size: 13px; color: #4E5155;
  line-height: 1.3; text-align: center; width: 100%;
  word-break: break-word;
}
.pd-sg-val.or  { color: #eb4e1b; text-decoration: underline; }
.pd-sg-val.or:hover { text-decoration: none; }
.pd-sg-val.or a { color: inherit; text-decoration: inherit; }
.pd-sg-val a.or { color: #eb4e1b; text-decoration: underline; }
.pd-sg-val a.or:hover { text-decoration: none; }
.pd-sg-val.empty { color: #C4C5C7; }
/* Rating dots use real ● text characters (colored via inline style, same
   technique the site's own native "Charakteristika kávy" text already
   uses) instead of empty background-colored divs — Shoptet's WYSIWYG
   editor strips empty decorative divs like that on save since they have
   no text content, which silently deleted the bars in the pasted result. */
.pd-sg-bars { font-size: 22px; line-height: 1; letter-spacing: 1px; }

/* ── "Chuť kávy" card — gets cloned under the product photo gallery by
   Move_Dlhy_Popis_under_photos.js (matches on .coffee-section), same as
   the old Charakteristika kávy block used to. Styles here apply to both
   the original (then hidden in place) and the injected clone. ── */
.pd-chut-row { display:flex; gap:0; border-radius:24px; overflow:hidden; height:220px; }
.pd-chut-img { width:45%; flex-shrink:0; background:#C4BFB7; overflow:hidden; }
.pd-chut-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-chut-txt { flex:1; padding:28px 32px; background:#F9F9F9; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.pd-chut-txt h2 { font-size:20px; font-weight:700; color:#1A1B1F; margin:0; }
.pd-chut-txt p { font-size:13px; color:#4E5155; line-height:1.7; margin:0; }
@media(max-width:700px){
  .pd-chut-row { display:block; height:auto; }
  .pd-chut-img { display:block; width:100%; background:#F9F9F9; }
  .pd-chut-img img { height:auto; }
  .pd-chut-txt { display:block; }
}

/* ── About / roast-story section ── */
.pd-about-row { display:flex; gap:0; border-radius:24px; overflow:hidden; height:370px; }
.pd-about-img { width:45%; flex-shrink:0; background:#C4BFB7; overflow:hidden; }
.pd-about-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-about-txt { flex:1; padding:56px 64px; background:#F9F9F9; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.pd-about-txt h2 { font-size:28px; font-weight:700; color:#1A1B1F; margin:0; }
.pd-about-txt p  { font-size:15px; color:#4E5155; line-height:1.7; margin:0; }
.pd-about-link { display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:12px 24px; background:#1A1B1F; color:#fff; border-radius:200px; font-size:14px; font-weight:700; text-decoration:none; width:fit-content; transition:.15s; }
.pd-about-link:hover { background:#eb4e1b; }

/* ── Roaster quote section ── */
.pd-quote { height:370px; border-radius:24px; overflow:hidden; position:relative; display:flex; align-items:stretch; }
.pd-quote-img { position:absolute; inset:0; }
.pd-quote-img img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.pd-quote-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.80) 100%); }
.pd-quote-txt { position:relative; z-index:1; margin-left:auto; width:55%; padding:56px 64px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.pd-quote-txt h2 { font-size:28px; font-weight:700; color:#fff; margin:0; }
.pd-quote-txt blockquote { font-size:15px; font-style:italic; font-weight:500; color:rgba(255,255,255,.9); line-height:1.75; border:none; padding:0; margin:0; }
.pd-quote-link { display:inline-flex; align-items:center; gap:8px; margin-top:4px; padding:12px 24px; background:#eb4e1b; color:#fff; border-radius:200px; font-size:14px; font-weight:700; text-decoration:none; width:fit-content; transition:.15s; }
.pd-quote-link:hover { background:#fff; color:#eb4e1b; }

/* Brew recipe cards — matches coffeeinshop.ro's product.php .pd-brew-* component */
.pd-brew-row { display:flex; gap:20px; flex-wrap:wrap; }
.pd-brew-card { flex:1; min-width:280px; padding:48px; background:#F9F9F9; border-radius:24px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; }
.pd-brew-card.full { flex:1 1 100%; }
.pd-brew-card h2 { font-size:28px; font-weight:700; color:#1A1B1F; margin:0; }
.pd-brew-card p { font-size:15px; color:#4E5155; line-height:1.7; margin:0; }
.pd-brew-card ul { padding-left:18px; display:flex; flex-direction:column; gap:6px; margin:0; }
.pd-brew-card ul li { font-size:14px; color:#4E5155; line-height:1.5; }

@media(max-width:1400px){
  .pd-detail-grid { grid-template-columns: 240px 240px 1fr; }
  .pd-wheel-svg { width:180px; height:180px; }
}
@media(max-width:1100px){
  .pd-detail-grid { grid-template-columns: 1fr 1fr; gap:12px; }
  .pd-origin-dark { grid-column:1/3; flex-direction:row; min-height:auto; }
  .pd-origin-mascot { margin-left:auto; margin-top:0; }
  .pd-specs-col { grid-column:1/3; }
}
@media(max-width:700px){
  .pd-detail-grid { grid-template-columns:1fr; }
  .pd-origin-dark { grid-column:1; flex-direction:column; }
  .pd-specs-col { grid-column:1; }
  .pd-sg-row { grid-template-columns:1fr 1fr; gap:8px; }
  .pd-about-row { display:block; height:auto; }
  .pd-about-img { display:block; width:100%; background:#F9F9F9; }
  .pd-about-img img { height:auto; }
  .pd-about-txt { display:block; padding:32px; }
  .pd-quote { display:block; height:auto; position:static; }
  .pd-quote-img { display:block; position:static; width:100%; }
  .pd-quote-img img { width:100%; height:auto; object-fit:initial; object-position:initial; }
  .pd-quote-img::after { display:none; }
  .pd-quote-txt { position:static; z-index:auto; width:100%; padding:32px 28px; margin-left:0; background:#020101; }
}