/* gas.css - Gas canister product page styles */

/* ── Product layout ── */
.product-section { background: var(--clr-white); }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp8); align-items: start; }

.product-gallery { position: sticky; top: 90px; }
.product-main-img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-md); margin-bottom: var(--sp2); background: var(--clr-gray-light); }
.product-thumbs { display: flex; gap: var(--sp1); flex-wrap: wrap; }
.product-thumb { width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; cursor: pointer; border: 2px solid transparent; background: var(--clr-gray-light); transition: border-color .2s; }
.product-thumb.active, .product-thumb:hover { border-color: var(--clr-yellow); }

.product-info h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: var(--sp2); }
.product-price { font-size: 2rem; font-weight: var(--fw-black); color: var(--clr-dark); margin-bottom: var(--sp3); }
.product-price span { font-size: 1rem; font-weight: var(--fw-reg); color: var(--clr-gray); }

.variant-label { font-weight: var(--fw-bold); font-size: .9rem; color: var(--clr-gray); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sp1); display: block; }
.variant-pills { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: var(--sp3); }
.variant-pill { padding: 8px 18px; border: 2px solid var(--clr-border); border-radius: 30px; cursor: pointer; font-weight: var(--fw-semi); font-size: .9rem; color: var(--clr-dark); background: var(--clr-white); transition: border-color .2s, background .2s; }
.variant-pill:hover { border-color: var(--clr-dark); }
.variant-pill.selected { border-color: var(--clr-yellow); background: var(--clr-yellow); color: var(--clr-dark); }

.product-description { color: var(--clr-gray); line-height: 1.8; margin-bottom: var(--sp4); border-top: 1px solid var(--clr-border); padding-top: var(--sp3); }
.product-description ul { list-style: disc; padding-left: 1.4rem; margin-top: var(--sp1); }
.product-description li { margin-bottom: .4rem; }

.order-note { background: var(--clr-yellow); border-radius: var(--r-md); padding: var(--sp3); font-size: .9rem; color: var(--clr-dark2); margin-bottom: var(--sp3); line-height: 1.7; }
.order-note strong { color: var(--clr-dark); }

/* ── Quantity Selector ── */
.product-qty { margin-bottom: var(--sp3); display: flex; align-items: center; gap: 1rem; padding: 10px 0; }
.product-qty label { font-weight: var(--fw-bold); font-size: .9rem; color: var(--clr-gray); text-transform: uppercase; letter-spacing: .05em; }
.qty-controls { display: flex; align-items: center; gap: 12px; background: #f4f4f4; border-radius: 30px; padding: 4px 12px; }
.qty-btn { width: 32px; height: 32px; border: none; background: white; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: var(--fw-bold); box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: background .2s, transform .1s; }
.qty-btn:hover { background: var(--clr-yellow); }
.qty-btn:active { transform: scale(0.95); }
.qty-val { font-weight: var(--fw-black); width: 24px; text-align: center; font-size: 1.1rem; }

/* ── FAQ ── */
.faq-section { background: var(--clr-gray-light); }
.faq-section h2 { color: var(--clr-dark); margin-bottom: var(--sp6); }

.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { background: var(--clr-white); border-radius: var(--r-md); margin-bottom: var(--sp2); box-shadow: var(--sh-sm); overflow: hidden; }
.faq-question { padding: var(--sp3) var(--sp4); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-bold); font-size: 1rem; color: var(--clr-dark); user-select: none; }
.faq-question::after { content: "+"; font-size: 1.4rem; font-weight: var(--fw-black); color: var(--clr-yellow-hover); transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s; padding: 0 var(--sp4); }
.faq-item.open .faq-answer { max-height: 400px; padding: 0 var(--sp4) var(--sp3); }
.faq-answer p { color: var(--clr-gray); font-size: .95rem; line-height: 1.8; }
.faq-answer a { color: var(--clr-yellow-hover); text-decoration: underline; }

@media(max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
}