/* vk-pdp-faq
   Split out of the monolithic product-page stylesheet so this section
   owns exactly one file. Do not merge these back together. */

.vpk-faq { display: flex; flex-direction: column; gap: 10px; }

.vpk-faq__item {
 background: #080808;
 border: 1px solid #181818;
 border-radius: 12px;
 overflow: hidden;
 transition: all 0.35s ease;
 }

.vpk-faq__item[open] {
 border-color: rgba(170,255,0,0.15);
 box-shadow: 0 4px 24px rgba(170,255,0,0.03);
 }

.vpk-faq__item summary {
 display: flex;
 align-items: center;
 padding: 20px 24px;
 font-size: 13.5px;
 font-weight: 600;
 color: #bbb;
 cursor: pointer;
 list-style: none;
 transition: color 0.25s ease;
 user-select: none;
 gap: 14px;
 }

.vpk-faq__item summary::-webkit-details-marker { display: none; }

.vpk-faq__item summary::marker { display: none; content: ''; }

.vpk-faq__item summary:hover { color: #fff; }

.vpk-faq__item[open] summary {
 color: #fff;
 border-bottom: 1px solid #151515;
 }

.vpk-faq__num {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: 8px;
 background: rgba(170,255,0,0.05);
 border: 1px solid rgba(170,255,0,0.08);
 color: #AAFF00;
 font-size: 12px;
 font-weight: 800;
 flex-shrink: 0;
 transition: all 0.3s ease;
 font-family: 'Inter', sans-serif;
 }

.vpk-faq__item[open].vpk-faq__num {
 background: rgba(170,255,0,0.10);
 border-color: rgba(170,255,0,0.20);
 box-shadow: 0 0 12px rgba(170,255,0,0.08);
 }

.vpk-faq__q { flex: 1; }

.vpk-faq__icon {
 flex-shrink: 0;
 width: 28px;
 height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 font-weight: 300;
 color: #444;
 border-radius: 50%;
 background: rgba(255,255,255,0.03);
 border: 1px solid rgba(255,255,255,0.05);
 transition: all 0.35s ease;
 }

.vpk-faq__item[open].vpk-faq__icon {
 transform: rotate(45deg);
 color: #AAFF00;
 background: rgba(170,255,0,0.06);
 border-color: rgba(170,255,0,0.15);
 box-shadow: 0 0 10px rgba(170,255,0,0.08);
 }

.vpk-faq__answer {
 padding: 0 24px 22px 66px;
 font-size: 13.5px;
 line-height: 1.8;
 color: #777;
 }

.vpk-ship-list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 background: #080808;
 border: 1px solid #161616;
 border-radius: 12px;
 overflow: hidden;
 }

.vpk-ship-list li {
 position: relative;
 padding: 14px 20px 14px 42px;
 font-size: 13px;
 color: #888;
 line-height: 1.65;
 border-bottom: 1px solid #111;
 transition: all 0.25s ease;
 }

.vpk-ship-list li:last-child { border-bottom: none; }

.vpk-ship-list li:hover {
 background: rgba(170,255,0,0.015);
 color: #aaa;
 }

.vpk-ship-list li::before {
 content: '';
 position: absolute;
 left: 20px;
 top: 50%;
 transform: translateY(-50%);
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #AAFF00;
 opacity: 0.4;
 transition: all 0.25s ease;
 }

.vpk-ship-list li:hover::before {
 opacity: 0.8;
 box-shadow: 0 0 6px rgba(170,255,0,0.3);
 }

.vpk-comply {
 display: flex;
 align-items: flex-start;
 gap: 18px;
 }

.vpk-comply__icon {
 flex-shrink: 0;
 width: 50px;
 height: 50px;
 border-radius: 14px;
 background: radial-gradient(circle at 30% 30%, rgba(170,255,0,0.08), rgba(170,255,0,0.015));
 border: 1px solid rgba(170,255,0,0.07);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.35s ease;
 }

.vpk-comply__icon svg {
 width: 22px;
 height: 22px;
 stroke: #AAFF00;
 fill: none;
 stroke-width: 1.5;
 stroke-linecap: round;
 stroke-linejoin: round;
 filter: drop-shadow(0 0 4px rgba(170,255,0,0.15));
 }

.vpk-comply__title {
 font-family: 'Bebas Neue', sans-serif;
 font-size: 15px;
 letter-spacing: 0.05em;
 color: #fff;
 text-transform: uppercase;
 margin-bottom: 6px;
 }

.vpk-comply__text {
 font-size: 12.5px;
 color: #666;
 line-height: 1.65;
 }

@media (max-width: 768px) {
  .vpk-faq__answer { padding-left: 24px; }
}

@media (max-width: 480px) {
  .vpk-comply__icon { width: 44px; height: 44px; border-radius: 10px; }
  .vpk-faq__num { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
  .vpk-faq__item summary { padding: 16px 16px; gap: 10px; font-size: 12.5px; }
  .vpk-faq__answer { padding: 0 16px 18px 50px; font-size: 12.5px; }
}