/* Product page, layout "A": photo + about + specs on the left, buy box + goes-well-with on the right, related products below.
   Loaded last on product.php. "html body" in front so these win over the older product rules; every font size carries !important
   because gaming-theme.css forces "* { font-size: 15px !important }". */

html body { background: #000 !important; }
html body .prod-container { max-width: 1360px; padding: 24px 56px 72px; }
html body .prod-crumbs { margin-bottom: 22px; font-size: 13px !important; color: #a8a8a8; }
html body .prod-crumbs a { color: #a8a8a8; font-size: 13px !important; }
html body .prod-crumbs a:hover { color: #fff; }
html body .prod-crumbs .sep { color: #5a5a5a; font-size: 13px !important; }
html body .prod-crumbs .current { color: #fff; font-size: 13px !important; }

@media (min-width: 969px) {
    html body .product-grid { grid-template-columns: minmax(0, 1fr) 520px; gap: 48px; align-items: start; }
    html body .gallery-container { position: static; top: auto; }
    html body .product-info { position: sticky; top: 72px; }
}

/* photo */
html body .main-image-card { display: flex; align-items: center; justify-content: center; height: 540px; padding: 0; background: #000; border: 1px solid #1f1f1f; border-radius: 18px; }
html body .main-image-card img { max-width: 78%; max-height: 78%; height: auto; filter: none; }
html body .thumbnail-gallery { margin-top: 14px; }
html body .thumbnail-card { width: 72px; height: 72px; background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 12px; }
html body .thumbnail-card:hover { background: #0d0d0d; border-color: #3a3a3a; transform: none; }
html body .thumbnail-card.active { background: #0d0d0d; border-color: #d10000; box-shadow: none; }

/* title, price */
html body .category-badge-btn { display: none; }
html body .pa-kicker { display: inline-block; margin: 0; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.22em; text-transform: uppercase; color: #ff5252; text-decoration: none; }
html body .pa-kicker:hover { color: #fff; }
html body .prod-title { margin: 12px 0 0; font-size: 36px !important; line-height: 1.12; font-weight: 700 !important; letter-spacing: -0.02em; background: none; -webkit-text-fill-color: #fff; color: #fff; }
html body .price-hero { margin: 22px 0 0; }
html body .price-val { font-size: 44px !important; line-height: 1 !important; font-weight: 700 !important; color: #fff !important; }
html body .price-val .price-cur { font-size: 18px !important; font-weight: 500 !important; color: #a8a8a8 !important; margin-right: 8px; vertical-align: baseline; }

/* buy box: black quantity box, red button */
html body .add-to-build-box { margin-top: 26px; }
html body #qty-dd { background: #000 !important; border: 1px solid #3a3a3a; border-radius: 12px !important; }
html body #qty-dd-btn { width: 84px !important; min-height: 54px !important; border-radius: 12px !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; }
html body #qty-dd-list { background: #0d0d0d !important; border: 1px solid #2a2a2a !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important; }
html body #qty-dd-list li { background: transparent !important; color: #fff !important; font-size: 15px !important; font-weight: 500 !important; }
html body #qty-dd-list li:hover { background: #1a1a1a !important; }
html body .add-to-build-box .add-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 20px; background: #d10000 !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: none !important; transform: none !important; }
html body .add-to-build-box .add-btn:hover { background: #e60000 !important; }
html body .add-to-build-box .add-btn i { font-size: 17px !important; }
html body .pa-build-btn { display: flex; align-items: center; justify-content: center; height: 50px; margin-top: 10px; border: 1px solid #3a3a3a; border-radius: 12px; color: #fff; font-size: 15px !important; font-weight: 500 !important; text-decoration: none; }
html body .pa-build-btn:hover { border-color: #fff; color: #fff; }

/* warranty / delivery / payment lines */
html body .pa-trust { margin-top: 26px; border-top: 1px solid #1f1f1f; }
html body .pa-trust-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #1f1f1f; }
html body .pa-trust-row i { flex: 0 0 22px; text-align: center; font-size: 17px !important; color: #ff5252; }
html body .pa-trust-title { font-size: 15px !important; font-weight: 500 !important; color: #fff; }
html body .pa-trust-sub { font-size: 13px !important; font-weight: 400 !important; color: #a8a8a8; }

/* goes well with (right column) */
html body .pa-goes { margin-top: 34px; }
html body .pa-goes-head { display: flex; align-items: baseline; justify-content: space-between; }
html body .pa-eyebrow { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.22em; text-transform: uppercase; color: #ff5252; }
html body .pa-goes-title { margin: 8px 0 0; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #fff; }
html body .pa-goes-link { font-size: 13px !important; font-weight: 400 !important; color: #c9c9c9; text-decoration: underline; }
html body .pa-goes-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
html body .pa-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px; background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 14px; }
html body .pa-row:hover { border-color: #3a3a3a; }
html body .pa-row-img { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; height: 64px; background: #161616; border-radius: 10px; }
html body .pa-row-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
html body .pa-row-info { flex: 1; min-width: 0; }
html body .pa-row-cat { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #ff5252; }
html body .pa-row-name { margin-top: 2px; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .pa-row-price { font-size: 15px !important; font-weight: 700 !important; color: #fff; white-space: nowrap; }
html body .pa-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
html body .pa-cart { position: relative; z-index: 2; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px !important; cursor: pointer; background: #d10000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.2'/%3E%3Ccircle cx='19' cy='21' r='1.2'/%3E%3Cpath d='M1 2h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color 0.15s; }
html body .pa-cart:hover { background-color: #e60000; }
html body .pa-cart.is-added { background-color: #1f9d55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E"); }

/* about + specifications (left column, under the photo) */
html body .pa-below { margin-top: 36px; }
html body .pa-h2 { margin: 0; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.01em; text-transform: none; color: #fff; }
html body .pa-about { margin-bottom: 36px; }
html body .pa-about-body { position: relative; margin-top: 14px; max-height: 12.5em; overflow: hidden; }
html body .pa-about-body.is-open { max-height: none; }
html body .pa-about-body:not(.is-open).is-long::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); pointer-events: none; }
html body .pa-about-body, html body .pa-about-body * { font-size: 15px !important; line-height: 1.7 !important; font-weight: 400 !important; color: #c9c9c9 !important; background: transparent !important; font-family: 'Outfit', sans-serif !important; max-width: 100% !important; }
html body .pa-about-body img { height: auto !important; border-radius: 10px; }
html body .pa-about-body table { display: block; overflow-x: auto; border-collapse: collapse; }
html body .pa-about-body td, html body .pa-about-body th { padding: 8px 10px; border-bottom: 1px solid #1f1f1f; }
html body .pa-more { display: none; margin-top: 12px; padding: 0; background: none; border: 0; color: #ff5252; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; }
html body .pa-more.is-visible { display: inline-block; }
html body .pa-specs { margin-top: 14px; border-top: 1px solid #1f1f1f; }
html body .pa-spec { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 50px; padding: 8px 0; border-bottom: 1px solid #1f1f1f; }
html body .pa-spec-k { font-size: 15px !important; font-weight: 400 !important; color: #a8a8a8; }
html body .pa-spec-v { font-size: 15px !important; font-weight: 500 !important; color: #fff; text-align: right; overflow-wrap: anywhere; }

/* related products */
html body .pa-related { margin-top: 64px; }
html body .pa-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
html body .pa-related-title { margin: 10px 0 0; font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #fff; }
html body .pa-all { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid #3a3a3a; border-radius: 10px; color: #fff; font-size: 14px !important; font-weight: 500 !important; text-decoration: none; }
html body .pa-all:hover { border-color: #fff; color: #fff; }
html body .pa-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
html body .pa-card { position: relative; display: flex; flex-direction: column; background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 14px; overflow: hidden; transition: border-color 0.2s; }
html body .pa-card:hover { border-color: #3a3a3a; }
html body .pa-card-img { display: flex; align-items: center; justify-content: center; height: 190px; background: #161616; }
html body .pa-card-img img { max-width: 78%; max-height: 78%; object-fit: contain; }
html body .pa-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
html body .pa-card-name { height: 38px; overflow: hidden; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35; color: #fff; }
html body .pa-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
html body .pa-card-price { font-size: 18px !important; font-weight: 700 !important; color: #fff; }
html body .pa-card .pa-cart { width: 38px; height: 38px; }
html body .pa-see-all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; box-sizing: border-box; border: 1px dashed #3a3a3a; border-radius: 14px; color: #fff; font-size: 16px !important; font-weight: 500 !important; text-decoration: none; }
html body .pa-see-all span { font-size: 30px !important; line-height: 1; color: #ff5252; }
html body .pa-see-all:hover { border-color: #fff; color: #fff; }

/* phone: photo, then the buy box, then about + specs */
@media (max-width: 968px) {
    html body .prod-container { padding: 16px 16px 56px; }
    html body .product-grid { display: flex; flex-direction: column; gap: 0; }
    html body .gallery-container { display: contents; }
    html body .main-image-card { order: 1; height: 300px; min-height: 0; width: 100%; box-sizing: border-box; align-self: stretch; }
    html body .thumbnail-gallery { order: 2; align-self: stretch; }
    html body .product-info { order: 3; position: static; margin-top: 20px; width: 100%; box-sizing: border-box; }
    html body .pa-below { order: 4; margin-top: 30px; width: 100%; box-sizing: border-box; }
    html body .prod-title { font-size: 26px !important; }
    html body .price-val { font-size: 34px !important; }
    html body .pa-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html body .pa-card-img { height: 130px; }
    html body .pa-card-body { padding: 10px; }
    html body .pa-related-title { font-size: 26px !important; }
    html body .pa-see-all { min-height: 180px; }
}

/* related card: cart button sits bottom-right, on top of the card link */
html body .pa-card .pa-cart-card { position: absolute; right: 16px; bottom: 16px; }
html body .add-to-build-box .add-btn.pa-oos { background: #1a1a1a !important; color: #ff6b6b !important; cursor: not-allowed; }

/* phone buy bar */
html body .pa-buybar { display: none; }
@media (max-width: 968px) {
    html body .pa-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 14px; box-sizing: border-box; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: #0a0a0a; border-top: 1px solid #1c1c1c; }
    html body .pa-buybar-price { flex: 0 0 auto; font-size: 20px !important; line-height: 1.1; font-weight: 700 !important; color: #fff; }
    html body .pa-buybar-price small { display: block; font-size: 11px !important; font-weight: 400 !important; color: #a8a8a8; }
    html body .pa-buybar-btn { flex: 1; height: 48px; border: 0; border-radius: 12px !important; background: #d10000 !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer; }
    html body .prod-container { padding-bottom: 150px; }
}

/* buy box: no coloured panel */
html body .add-to-build-box { background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; text-align: left; }
html body .warranty-addon-section { margin-top: 24px; background: #0d0d0d !important; border: 1px solid #1f1f1f !important; border-radius: 14px; padding: 16px; }
html body .warranty-addon-title { color: #fff !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.04em; }
html body .warranty-addon-title i { color: #ff5252; font-size: 14px !important; }
html body .warranty-option-card { background: #000 !important; border: 1px solid #2a2a2a !important; border-radius: 12px; }
html body .warranty-option-card:hover { border-color: #5a5a5a !important; }
html body .warranty-option-card.selected { border-color: #d10000 !important; background: #1a0000 !important; box-shadow: none !important; }
html body .warranty-option-name { color: #fff; font-size: 13px !important; font-weight: 500 !important; }
html body .warranty-option-price { color: #ff5252 !important; font-size: 15px !important; font-weight: 700 !important; }
html body .warranty-addon-total { color: #c9c9c9; font-size: 14px !important; }

@media (max-width: 968px) {
    /* the buy bar takes the place of the floating bottom menu on product pages */
    html body:has(.pa-buybar) .mobile-bottom-nav { display: none !important; }
}