/* Extracted from templates/portal/product.html on 2026-08-05.
 * Rules from the `scripts` block — rendered after base.html:606.
 * Two files, not one: base.html renders a <style> of its own BETWEEN the `content` and
 * `scripts` blocks (base.html:606, with {% block scripts %} at 651). Merging these
 * would move the tail rules ahead of it and silently change which declarations win.
 */
/* ─── Features Cards ─── */
.pd-features-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.pd-feat-card{display:flex;align-items:flex-start;gap:10px;padding:12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;transition:box-shadow .2s}
.pd-feat-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pd-feat-card-icon{font-size:24px;flex-shrink:0;line-height:1}
.pd-feat-card-text{display:flex;flex-direction:column;gap:2px}
.pd-feat-card-text strong{font-size:13px;color:#1a1a2e}
.pd-feat-card-text span{font-size:12px;color:#666;line-height:1.3}

/* ─── Compare Button ─── */
.pd-compare-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:none;border:1.5px solid #d1d5db;border-radius:8px;font-size:13px;color:#555;cursor:pointer;transition:all .2s}
.pd-compare-btn:hover{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);background:#f0f4ff}
.pd-compare-btn.active{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);background:#eff6ff}

/* ─── Delivery Block ─── */
.pd-delivery-block{margin:20px 0;padding:12px 16px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px}
.pd-delivery-row{display:flex;gap:6px;justify-content:space-between}
.pd-delivery-item{display:flex;align-items:center;gap:6px;flex:1;padding:6px 8px;background:#fff;border-radius:8px;border:1px solid #f0f0f0}
.pd-delivery-icon{font-size:16px;flex-shrink:0}
.pd-delivery-item div{display:flex;flex-direction:column}
.pd-delivery-item strong{font-size:12px;color:#333}
.pd-delivery-item span{font-size:11px;color:#888}
.pd-delivery-free{margin-top:8px;padding:6px 10px;background:#dcfce7;border-radius:8px;font-size:12px;color:#166534;font-weight:600;text-align:center}

/* ─── Share Buttons ─── */
.pd-share-block{display:flex;align-items:center;gap:8px;margin:16px 0;flex-wrap:wrap}
.pd-share-label{font-size:13px;color:#888}
.pd-share-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #e5e7eb;background:#fff;cursor:pointer;transition:all .2s;color:#666;text-decoration:none}
.pd-share-btn:hover{transform:scale(1.1)}
.pd-share-fb:hover{background:#1877f2;color:#fff;border-color:#1877f2}
.pd-share-tg:hover{background:#0088cc;color:#fff;border-color:#0088cc}
.pd-share-viber:hover{background:#7360f2;color:#fff;border-color:#7360f2}
.pd-share-copy:hover{background:#333;color:#fff;border-color:#333}

/* ─── Brand Link ─── */
.pd-brand-link{color:var(--accent,#2563eb);text-decoration:none;font-weight:500}
.pd-brand-link:hover{text-decoration:underline}

/* ─── Bought Together ─── */
/* bought together - inline styles */

/* ─── Forum Section ─── */
.pd-forum-section{padding:40px 0}
.pd-forum-list{display:flex;flex-direction:column;gap:12px}
.pd-forum-item{display:block;padding:16px 20px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;text-decoration:none;color:inherit;transition:all .2s}
.pd-forum-item:hover{border-color:var(--accent,#2563eb);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pd-forum-title{font-size:15px;font-weight:600;color:#1a1a2e;margin-bottom:6px}
.pd-forum-meta{display:flex;gap:16px;font-size:12px;color:#888}

/* ─── Q&A Section ─── */
.pd-qa-section{padding:0 0 40px 0;background:#fafbfc}
.pd-qa-list{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.pd-qa-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.pd-qa-question{display:flex;gap:12px;padding:16px}
.pd-qa-answer{display:flex;gap:12px;padding:12px 16px;background:#f0f9ff;border-top:1px solid #e5e7eb}
.pd-qa-badge{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent,#2563eb);color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.pd-qa-badge-a{background:#22c55e}
.pd-qa-author{font-size:12px;color:#888;margin-bottom:4px}
.pd-qa-date{margin-left:8px}
.pd-qa-empty{text-align:center;padding:30px;color:#999;font-size:14px}
.pd-qa-form-wrap{text-align:center}
.pd-qa-ask-btn{padding:10px 28px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.pd-qa-ask-btn:hover{background:#1d4ed8}
.pd-qa-form{max-width:500px;margin:16px auto 0;display:none;flex-direction:column;gap:10px}
.pd-qa-form.open{display:flex}
.pd-qa-input,.pd-qa-textarea{padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit}
.pd-qa-input:focus,.pd-qa-textarea:focus{outline:none;border-color:var(--accent,#2563eb)}
.pd-qa-submit{padding:10px 24px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;align-self:flex-end}

/* ─── Recently Viewed ─── */
.pd-recently-viewed-section{padding:40px 0}

/* ─── Responsive ─── */
@media(max-width:768px){
  .pd-features-cards{grid-template-columns:1fr}
  .pd-bt-grid{flex-direction:column}
  .pd-bt-card{width:140px}
  .pd-bt-plus{transform:rotate(90deg)}
  .pd-forum-meta{flex-wrap:wrap;gap:8px}
}
/* Sticky tabs on mobile */
.pd-tabs-nav-sticky {
  position: fixed !important;
  left: 0;
  right: 0;
  z-index: 95;
  background: #fff;
  border-bottom: 2px solid #e8edf5;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  display: flex;
  gap: 0;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.pd-tabs-nav-sticky::-webkit-scrollbar { display: none; }
.pd-tabs-nav-placeholder { display: none; }
.pd-tabs-nav-placeholder.active { display: block; }
@media(min-width:769px) {
  .pd-tabs-nav-sticky { position: relative !important; top: auto !important; box-shadow: none; }
}
@media(max-width:768px) {
  .pd-tabs-nav-sticky { position: relative !important; top: auto !important; }
}
/* Mobile card-style layout like Rozetka */
@media(max-width:768px) {
  .pd-section { background: #f5f5f5 !important; padding: 0 !important; }
  .pd-section .container { padding: 0 !important; }
  .pd-grid { gap: 0 !important; }

  .pd-gallery-wrap {
    background: #fff;
    margin-bottom: 8px;
    padding: 0 !important;
  }

  .pd-info {
    background: #fff;
    margin-bottom: 8px;
    padding: 16px !important;
    border-radius: 0;
  }

  .pd-tabs-section {
    background: #f5f5f5 !important;
    padding: 0 !important;
  }
  .pd-tabs-section .container { padding: 0 !important; }
  .pd-tabs-section .pd-tabs-nav {
    background: #fff;
    margin-bottom: 8px;
    padding: 0 16px;
  }
  .pd-tab-content {
    background: #fff;
    margin-bottom: 8px;
    padding: 16px !important;
  }

  #also-buy-section {
    background: #f5f5f5 !important;
    padding: 0 !important;
    border-top: none !important;
  }
  #also-buy-section > .container,
  #also-buy-section > div {
    background: #fff;
    margin-bottom: 8px;
    padding: 16px !important;
  }

  /* Also liked section */
  .pd-also-section,
  section[style*="background:#fff"] {
    background: #fff !important;
    margin-bottom: 8px !important;
    padding: 16px !important;
  }

  /* Breadcrumbs card */
  .pd-section .pd-breadcrumbs,
  .breadcrumb-portal {
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 16px !important;
  }
  .breadcrumbs .bc-current {
    display: none;
  }

  /* Reduce section padding on mobile */
  section[style*="padding:40px 0"] { padding: 16px 0 !important; }
  #also-buy-section { padding: 16px 0 !important; }
  .pd-recently-viewed-section { padding: 16px 0 !important; }
}