/*
Theme Name: TagQuest
Theme URI: https://tagquest.co.za
Description: TagQuest storefront – LaserWar distributor look, always dark (red accents, Montserrat). Child theme of Storefront.
Author: TagQuest
Template: storefront
Version: 1.1.0
Text Domain: tagquest
*/

:root {
    color-scheme: dark;
    --tq-red: #f5222d;
    --tq-red-dark: #cf1322;
    --tq-bg: #111317;          /* page */
    --tq-header: #0b0c0f;      /* top bar, header, footer */
    --tq-surface: #1a1d24;     /* cards, panels */
    --tq-surface-2: #232731;   /* inputs, soft fills, hover */
    --tq-line: #2d323d;
    --tq-text: #c9ced8;
    --tq-heading: #ffffff;
    --tq-muted: #8d95a3;
    --tq-plate: #eef0f3;       /* behind product photos (white-background images) */
    --tq-radius: 8px;
    --tq-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html, body { background: var(--tq-bg) !important; }
body, button, input, select, textarea, .button { font-family: var(--tq-font); }
body { color: var(--tq-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .entry-title, .woocommerce-products-header__title { font-family: var(--tq-font); font-weight: 800; color: var(--tq-heading) !important; letter-spacing: -.01em; }
strong, b, dt, th, label { color: var(--tq-heading); }
a { color: var(--tq-red); }
a:hover, a:focus { color: #ff4d55; }
hr { background: var(--tq-line); }
::selection { background: var(--tq-red); color: #fff; }

/* ---------- top bar */
.tq-topbar { background: #070809; color: var(--tq-muted); font-size: .8rem; border-bottom: 1px solid var(--tq-line); }
.tq-topbar .col-full { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-top: .45em; padding-bottom: .45em; flex-wrap: wrap; }
.tq-topbar a { color: #fff; text-decoration: none; }
.tq-topbar__links { display: flex; gap: 1.25em; }
.tq-topbar__badge { display: inline-flex; align-items: center; gap: .4em; }
.tq-topbar__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tq-red); box-shadow: 0 0 0 3px rgba(245,34,45,.25); }

/* ---------- header */
.site-header { background: var(--tq-header) !important; border-bottom: 3px solid var(--tq-red); padding-top: 1.25em; margin-bottom: 0 !important; }
.site-header .site-branding { margin-bottom: 1em; }
.tq-logo { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; color: #fff; }
.tq-logo:hover { color: #fff; }
.tq-logo svg { width: 42px; height: 42px; flex: 0 0 42px; }
.tq-logo__text { font-weight: 900; font-size: 1.6rem; letter-spacing: .06em; line-height: 1; }
.tq-logo__text b { color: var(--tq-red); font-weight: 900; }
.tq-logo__tag { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .14em; color: var(--tq-muted); text-transform: uppercase; margin-top: .35em; }
.site-header .site-search .widget_product_search form input[type=search] { background: var(--tq-surface-2); color: #fff; border: 1px solid var(--tq-line); border-radius: 999px; }
.site-header .site-search input::placeholder { color: var(--tq-muted); }
.main-navigation ul li a, .site-title a, ul.menu li a { font-weight: 600; color: #e6e8ec; }
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { padding: 1.1em .55em; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; white-space: nowrap; }
.main-navigation ul.menu > li.current-menu-item > a, .main-navigation ul.menu > li > a:hover { color: #fff; box-shadow: inset 0 -3px 0 var(--tq-red); }
.main-navigation ul.menu ul, .main-navigation ul.nav-menu ul { background: var(--tq-surface) !important; border: 1px solid var(--tq-line); }
.main-navigation ul.menu ul li a { color: var(--tq-text); text-transform: none; }
.main-navigation ul.menu ul li a:hover { background: var(--tq-surface-2); color: #fff; }
.site-header-cart .cart-contents, .site-header-cart .cart-contents .amount { color: #fff; }
.site-header-cart .cart-contents .count { display: none; }
.site-header-cart .widget_shopping_cart { background: var(--tq-surface) !important; border: 1px solid var(--tq-line); }
.site-header-cart .widget_shopping_cart a { color: var(--tq-text); }
.menu-toggle { color: #fff !important; border-color: var(--tq-line) !important; background: var(--tq-surface) !important; }
.handheld-navigation { background: var(--tq-surface); }
.tq-cta-book { display: none; }
@media (min-width: 768px) {
    .site-header > .col-full { display: flex; align-items: center; justify-content: space-between; }
    .site-header .site-branding { float: none; width: auto; margin-bottom: 1em; }
    .site-header .site-search { float: none; width: 30%; margin: 0 0 1em; }
    .storefront-primary-navigation .col-full { display: flex; align-items: center; gap: 1em; }
    .storefront-primary-navigation .col-full::before, .storefront-primary-navigation .col-full::after { display: none; }
    .site-header .main-navigation { float: none; width: auto; flex: 1; margin: 0; }
    .site-header .site-header-cart { float: none; width: auto; margin: 0; }
    .site-header-cart, .site-header-cart li { width: auto !important; flex: 0 0 auto; }
    .site-header-cart .cart-contents { padding: 1em 2.2em 1em 0; }
    .tq-cta-book { display: inline-block; padding: .6em 1.2em; background: var(--tq-red); color: #fff !important; border-radius: 4px; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; white-space: nowrap; }
    .tq-cta-book:hover { background: var(--tq-red-dark); }
}

/* ---------- layout: no sidebar, LaserWar is full width */
.storefront-breadcrumb { margin: 0 0 1.5em; padding: .9em 0; background: var(--tq-surface); border-bottom: 1px solid var(--tq-line); }
.storefront-breadcrumb .woocommerce-breadcrumb { font-size: .8rem; color: var(--tq-muted); }
.storefront-breadcrumb a { color: var(--tq-text); }
.site-content { padding-top: 0; }
.content-area { margin-bottom: 3em; }
.page-template-default .entry-header .entry-title, .woocommerce-products-header__title { font-size: 2.2rem; }
.tq-lead { font-size: 1.15rem; color: var(--tq-text); max-width: 52em; }

/* ---------- forms (Storefront defaults are light) */
input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=tel], input[type=number], input[type=date], input[type=time],
textarea, select, .select2-container .select2-selection, .input-text {
    background: var(--tq-surface-2) !important; color: #fff !important; border: 1px solid var(--tq-line) !important; box-shadow: none !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--tq-red) !important; outline: none; }
::placeholder { color: var(--tq-muted) !important; opacity: 1; }
.select2-dropdown { background: var(--tq-surface) !important; border-color: var(--tq-line) !important; color: var(--tq-text); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--tq-red) !important; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
.quantity .qty { background: var(--tq-surface-2) !important; color: #fff !important; }
fieldset, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-form-coupon { border-color: var(--tq-line) !important; }

/* ---------- tables */
table { color: var(--tq-text); }
table th, table td, table thead th { border-color: var(--tq-line) !important; }
table thead th, table th { background: var(--tq-surface) !important; color: var(--tq-heading); }
table tbody td, table tbody tr:nth-child(2n) td, table tbody tr:nth-child(2n+1) td,
.shop_table tbody td, table.cart td.actions, .cart-collaterals .cart_totals table td, .woocommerce-checkout-review-order-table td {
    background: transparent !important;
}
table tbody tr:nth-child(2n) td { background: rgba(255,255,255,.02) !important; }

/* ---------- buttons */
.button, button, input[type=button], input[type=reset], input[type=submit], .wp-block-button__link {
    border-radius: 4px; font-weight: 700; letter-spacing: .02em; transition: background .15s;
}
.button, button, input[type=button], input[type=reset], input[type=submit] { background: var(--tq-surface-2); border-color: var(--tq-line); color: #fff; }
.button:hover, button:hover, input[type=submit]:hover { background: #2f3441; color: #fff; }
.button.alt, button.alt, .single_add_to_cart_button, .checkout-button, #place_order, .wp-block-button__link { background: var(--tq-red) !important; border-color: var(--tq-red) !important; color: #fff !important; }
.button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, .wp-block-button__link:hover { background: var(--tq-red-dark) !important; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--tq-red) !important; border: 2px solid var(--tq-red) !important; }

/* ---------- product cards */
ul.products li.product {
    background: var(--tq-surface); border: 1px solid var(--tq-line); border-radius: var(--tq-radius); padding: 0 0 1.25em; overflow: hidden;
    display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s; text-align: left;
}
ul.products li.product:hover { border-color: #3a404d; box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: translateY(-2px); }
ul.products li.product img { margin: 0 0 1em; aspect-ratio: 16/9; object-fit: contain; background: var(--tq-plate); padding: .5em; }
ul.products li.product .woocommerce-loop-product__title { font-size: .92rem; font-weight: 600; color: var(--tq-heading); padding: 0 1em; line-height: 1.35; min-height: 2.7em; }
ul.products li.product .price { padding: 0 1em; color: var(--tq-heading); font-weight: 800; font-size: 1.1rem; margin-top: auto; }
ul.products li.product .button { margin: .8em 1em 0; align-self: flex-start; }
ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; }
.price del, .price del .amount { color: var(--tq-muted) !important; }
.price ins { background: transparent; color: var(--tq-heading); }
.onsale { background: var(--tq-red); color: #fff; border: 0; }
.woocommerce-result-count, .woocommerce-ordering { font-size: .85rem; color: var(--tq-muted); }
.woocommerce-pagination .page-numbers li .page-numbers { background: var(--tq-surface); color: var(--tq-text); border: 1px solid var(--tq-line); }
.woocommerce-pagination .page-numbers li .page-numbers.current, .woocommerce-pagination .page-numbers li a:hover { background: var(--tq-red); color: #fff; border-color: var(--tq-red); }

/* ---------- single product */
.single-product div.product .product_title { font-size: 1.8rem; line-height: 1.2; }
.single-product div.product p.price { color: var(--tq-heading); font-size: 1.6rem; font-weight: 800; }
.single-product div.product .woocommerce-product-gallery { background: var(--tq-surface); border: 1px solid var(--tq-line); border-radius: var(--tq-radius); padding: 1em; }
.single-product div.product .woocommerce-product-gallery img { background: var(--tq-plate); border-radius: 4px; }
.single-product div.product .woocommerce-product-details__short-description { color: var(--tq-muted); }
.woocommerce-product-gallery__trigger { background: var(--tq-surface-2) !important; }
.woocommerce-tabs ul.tabs { border-color: var(--tq-line) !important; }
.woocommerce-tabs ul.tabs li { border-color: var(--tq-line) !important; }
.woocommerce-tabs ul.tabs li a { font-weight: 700; color: var(--tq-text); }
.woocommerce-tabs ul.tabs li.active a { color: var(--tq-red); }
.single-product .product_meta { font-size: .8rem; color: var(--tq-muted); border-color: var(--tq-line); }
.storefront-product-pagination a { background: var(--tq-surface); color: var(--tq-text); }
@media (min-width: 768px) {
    .single-product div.product .woocommerce-product-gallery { width: 52%; }
    .single-product div.product .summary { width: 44%; }
}

/* ---------- cart, checkout, account */
.woocommerce-cart-form, .cart-collaterals .cart_totals, #order_review, #customer_details, .woocommerce-order { color: var(--tq-text); }
.cart-collaterals .cart_totals, #payment, .woocommerce-checkout-payment { background: var(--tq-surface) !important; border-radius: var(--tq-radius); }
#payment .payment_methods > li, #payment .payment_methods li .payment_box, #payment .place-order { background: var(--tq-surface-2) !important; color: var(--tq-text); }
#payment .payment_methods li .payment_box::before { border-bottom-color: var(--tq-surface-2) !important; }
.woocommerce-checkout #payment .payment_methods > .wc_payment_method > label::before { color: var(--tq-muted); }
.woocommerce-MyAccount-navigation ul { border-color: var(--tq-line) !important; }
.woocommerce-MyAccount-navigation ul li { border-color: var(--tq-line) !important; }
.woocommerce-MyAccount-navigation ul li a { color: var(--tq-text); }
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--tq-red); }
.woocommerce-order-overview, .woocommerce-thankyou-order-details { background: var(--tq-surface); border-color: var(--tq-line) !important; }
.woocommerce-order-overview li { border-color: var(--tq-line) !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
    background: var(--tq-surface) !important; color: var(--tq-text) !important; border-left: 4px solid var(--tq-red);
}
.woocommerce-message a, .woocommerce-info a { color: #fff !important; }
.woocommerce-error { border-left-color: #ff4d4f; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--tq-red); }
.blockUI.blockOverlay { background: rgba(17,19,23,.7) !important; }
.wc-block-components-notice-banner { background: var(--tq-surface); color: var(--tq-text); }

/* ---------- home */
.tq-home section { margin: 0 0 4em; }
.tq-hero {
    position: relative; margin: 0 0 3em !important; padding: 6em 0 5em; color: #fff; overflow: hidden;
    background: radial-gradient(1200px 500px at 80% 40%, rgba(245,34,45,.22), transparent 60%), linear-gradient(135deg, #07080a, #171a21);
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw;
    border-bottom: 1px solid var(--tq-line);
}
/* Product photos have white backgrounds: invert to a light silhouette and screen-blend so the white drops out. */
.tq-hero__img { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: 60%; max-width: 900px; filter: invert(1) grayscale(1) contrast(1.15); mix-blend-mode: screen; opacity: .5; pointer-events: none; }
.tq-hero__inner { position: relative; max-width: 66.4989378333em; margin: 0 auto; padding: 0 2.617924em; }
.tq-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; max-width: 12em; margin-bottom: .4em; }
.tq-hero h1 em { font-style: normal; color: var(--tq-red); }
.tq-hero p { font-size: 1.15rem; color: #d3d6dc; max-width: 32em; }
.tq-hero__ctas { display: flex; gap: .75em; flex-wrap: wrap; margin-top: 2em; }
.tq-hero__ctas .button { padding: 1em 1.8em; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.tq-btn-ghost { background: transparent !important; border: 2px solid rgba(255,255,255,.6) !important; color: #fff !important; }
.tq-btn-ghost:hover { border-color: #fff !important; }
.tq-hero__stats { display: flex; gap: 2.5em; margin-top: 3em; flex-wrap: wrap; }
.tq-hero__stats strong { display: block; font-size: 1.8rem; font-weight: 900; color: #fff; }
.tq-hero__stats span { font-size: .8rem; color: var(--tq-muted); text-transform: uppercase; letter-spacing: .08em; }

.tq-section-head { display: flex; justify-content: space-between; align-items: end; gap: 1em; margin-bottom: 1.25em; flex-wrap: wrap; }
.tq-section-head h2 { margin: 0; font-size: 1.8rem; }
.tq-section-head a { font-weight: 700; text-decoration: none; }
.tq-kicker { display: block; color: var(--tq-red); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4em; }

.tq-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1em; }
.tq-pillar { display: flex; flex-direction: column; padding: 1.75em 1.5em; border: 1px solid var(--tq-line); border-radius: var(--tq-radius); text-decoration: none; color: var(--tq-text); transition: border-color .15s, box-shadow .15s; background: var(--tq-surface); }
.tq-pillar:hover { border-color: var(--tq-red); box-shadow: 0 10px 30px rgba(0,0,0,.4); color: var(--tq-text); }
.tq-pillar svg { width: 36px; height: 36px; color: var(--tq-red); margin-bottom: 1em; }
.tq-pillar h3 { font-size: 1.15rem; margin: 0 0 .4em; }
.tq-pillar p { font-size: .9rem; margin: 0 0 1em; color: var(--tq-muted); }
.tq-pillar span { margin-top: auto; font-weight: 700; color: var(--tq-red); font-size: .9rem; }

.tq-banner {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 2em; align-items: center; padding: 3em; border-radius: 12px; color: #fff;
    background: radial-gradient(600px 300px at 90% 20%, rgba(245,34,45,.18), transparent 60%), linear-gradient(120deg, #1d212a, #0d0f13);
    border: 1px solid var(--tq-line);
}
.tq-banner h2 { color: #fff; font-size: 2rem; margin-bottom: .3em; }
.tq-banner p { color: #d3d6dc; }
.tq-banner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.tq-banner li { padding-left: 1.6em; position: relative; }
.tq-banner li::before { content: "✓"; position: absolute; left: 0; color: var(--tq-red); font-weight: 900; }
@media (max-width: 767px) { .tq-banner { grid-template-columns: 1fr; padding: 2em 1.5em; } .tq-hero__img { opacity: .2; width: 120%; } }

/* ---------- footer */
.site-footer { padding-top: 3em; background: var(--tq-header) !important; border-top: 1px solid var(--tq-line); color: var(--tq-muted) !important; }
.tq-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2em; padding-bottom: 2em; border-bottom: 1px solid var(--tq-line); }
.tq-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1em; }
.tq-footer ul { list-style: none; margin: 0; padding: 0; }
.tq-footer li { margin-bottom: .5em; }
.tq-footer a { color: var(--tq-text); text-decoration: none; font-size: .9rem; }
.tq-footer a:hover { color: #fff; }
.tq-footer p { font-size: .9rem; }
.tq-pay { display: flex; gap: .5em; flex-wrap: wrap; margin-top: 1em; }
.tq-pay span { padding: .3em .6em; border: 1px solid var(--tq-line); border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: var(--tq-text); }
.site-info { font-size: .8rem; padding: 1.5em 0; color: var(--tq-muted); }
@media (max-width: 767px) { .tq-footer { grid-template-columns: 1fr 1fr; } }

/* ---------- misc */
.tq-account-table small { color: var(--tq-muted); }
.storefront-handheld-footer-bar { display: none; }
.tq-whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.tq-whatsapp svg { width: 30px; height: 30px; fill: #fff; }
.pagination .page-numbers li .page-numbers, .wp-block-table td, .wp-block-table th { border-color: var(--tq-line); }