/* =========================================================================
   ROGUE PC — visual skin
   -------------------------------------------------------------------------
   Per-client design layer loaded AFTER the structural style.css. The skeleton
   ships with zero aesthetics; everything that gives Rogue PC its look — colour,
   typography, glow, clipped corners — lives here. Structural sizing still comes
   from the tokens in style.css; this file only adds the visual tokens + skin.

   Vibe: dark gaming-PC store. Near-black base, neon mint primary accent,
   violet secondary, sharp tech typography, subtle glow + angular cuts.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Visual design tokens (the one place to retune the Rogue PC look).
   ---------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --bg:            #0A0B0F;   /* page background — near black */
    --bg-2:          #0E1016;   /* alternating band background */
    --surface:       #14161F;   /* cards / panels */
    --surface-2:     #1B1E2A;   /* raised / hover panels */
    --line:          #262A38;   /* hairline borders */

    /* Brand accents */
    --accent:        #00E5A0;   /* neon mint — primary CTA, prices, highlights */
    --accent-ink:    #00261B;   /* readable text ON the mint accent */
    --accent-2:      #7B5BFF;   /* violet — secondary / gradient partner */
    --danger:        #FF4D6D;   /* sale badges, discounts */

    /* Text */
    --text:          #E8EAF0;   /* primary text */
    --muted:         #8A90A6;   /* secondary / meta text */
    --heading:       #FFFFFF;   /* headings */

    /* Effects */
    --glow:          0 0 0.75rem rgba(0, 229, 160, 0.45);
    --glow-soft:     0 0 1.5rem rgba(0, 229, 160, 0.18);
    --grad:          linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    --radius:        4px;       /* base corner radius */
    --cut:           14px;      /* angular clip size for "tech" corners */
    --speed:         .18s;

    /* Typography */
    --font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-head:     "Rajdhani", "Inter", system-ui, sans-serif;   /* condensed tech headings */
    --font-display:  "Orbitron", var(--font-head);                  /* logo / hero display */
}

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--heading);
    line-height: 1.15;
    letter-spacing: .01em;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; }

a { color: var(--text); text-decoration: none; transition: color var(--speed) ease; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--accent-ink); }

/* Thin neon scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

/* Section-title accent: a short mint underline under home/section headings */
.home-featured__title,
.trust__title,
.faq__title,
.about-team__title {
    position: relative;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: .5rem;
}
.home-featured__title::after,
.trust__title::after,
.faq__title::after,
.about-team__title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 64px; height: 3px;
    background: var(--grad);
    border-radius: 99px;
}
.trust__title::after,
.faq__title::after,
.about-team__title::after { left: 50%; transform: translateX(-50%); }

/* -------------------------------------------------------------------------
   2. Header
   ---------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 11, 15, .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

/* Promo strip — gradient bar */
.site-header-promo {
    background: var(--grad);
    color: var(--accent-ink);
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .82rem;
}
.site-header-promo a { color: var(--accent-ink); text-decoration: underline; }

/* Logo wordmark (works whether logo is text or the placeholder SVG) */
.site-branding .site-title,
.site-branding a.site-logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--heading);
}
.site-branding .site-title:hover,
.site-branding a.site-logo:hover { color: var(--accent); }

/* Primary nav */
.main-navigation .menu a {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .35em 0;
    position: relative;
    color: var(--text);
}
.main-navigation .menu a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width var(--speed) ease;
}
.main-navigation .menu a:hover,
.main-navigation .current-menu-item > a { color: var(--accent); }
.main-navigation .menu a:hover::after,
.main-navigation .current-menu-item > a::after { width: 100%; }

/* Cart button */
.header-cart-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .5em 1.1em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color var(--speed), box-shadow var(--speed), color var(--speed);
}
.header-cart-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: var(--glow);
}
.header-cart-count { color: var(--accent); }

/* -------------------------------------------------------------------------
   3. Buttons (theme + WooCommerce share this look)
   ---------------------------------------------------------------------- */
.home-banner__btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.contact-col--form input[type="submit"],
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .75em 1.6em;
    border: 0;
    border-radius: var(--radius);
    background: var(--grad);
    color: var(--accent-ink) !important;
    cursor: pointer;
    transition: transform var(--speed) ease, box-shadow var(--speed) ease, filter var(--speed) ease;
    /* angular cut on two corners for the "tech" feel */
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.home-banner__btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.contact-col--form input[type="submit"]:hover,
.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow);
    filter: brightness(1.05);
    color: var(--accent-ink) !important;
}

/* After an AJAX add-to-cart, hide the "Add to cart" button and let the
   "View cart" link take its place (instead of showing both). */
.woocommerce ul.products li.product a.add_to_cart_button.added {
    display: none !important;
}

/* Secondary / ghost button: "View cart" (shown after an AJAX add-to-cart) and
   grouped "Read more". These links DON'T carry the .button class, so without a
   full box they render as a bare bordered link — cramped text, wrong height.
   Give them the same button box (ghost style) so they read as a real button. */
.woocommerce a.added_to_cart,
.woocommerce a.button.wp-element-button.product_type_grouped {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .75em 1.4em;
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent) !important;
    border: 1px solid var(--accent);
    clip-path: none;
    vertical-align: middle;
    transition: background var(--speed) ease, box-shadow var(--speed) ease, color var(--speed) ease;
}
.woocommerce a.added_to_cart:hover,
.woocommerce a.button.wp-element-button.product_type_grouped:hover {
    background: rgba(0, 229, 160, .08);
    box-shadow: var(--glow-soft);
    color: var(--accent) !important;
}

/* -------------------------------------------------------------------------
   4. WooCommerce product cards (catalog grid)
   ---------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px !important;
    position: relative;
    overflow: hidden;
    transition: transform var(--speed) ease, border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.woocommerce ul.products li.product::before {
    /* top hairline that lights up on hover */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--grad);
    opacity: 0;
    transition: opacity var(--speed) ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--glow-soft);
}
.woocommerce ul.products li.product:hover::before { opacity: 1; }

.woocommerce ul.products li.product a img {
    border-radius: var(--radius);
    background: var(--bg-2);
    margin-bottom: 12px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.12rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--heading);
    padding: .25em 0 .4em;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--accent);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
}
.woocommerce .price del { color: var(--muted); font-weight: 400; opacity: .8; margin-right: .4em; }
.woocommerce .price ins { text-decoration: none; }

/* Sale badge */
.woocommerce span.onsale {
    background: var(--danger);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: var(--radius);
    padding: .35em .7em;
    min-height: 0;
    min-width: 0;
    line-height: 1;
    box-shadow: 0 0 0.75rem rgba(255, 77, 109, .4);
}
/* The card has overflow:hidden (for rounded corners + the top hairline), and
   WooCommerce pulls the SALE badge OUTSIDE the corner with a negative margin,
   which clipped it. Pin it just inside the top-left corner instead so it stays
   fully visible within the card. */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    position: absolute;
    top: 16px;
    left: 16px;
    right: auto;
    margin: 0;
    z-index: 2;
}

/* Star rating */
.woocommerce .star-rating span { color: var(--accent); }

/* -------------------------------------------------------------------------
   5. Single product page
   ---------------------------------------------------------------------- */
.woocommerce div.product .product_title {
    text-transform: uppercase;
    letter-spacing: .02em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--surface-2);
    border-bottom-color: var(--accent);
}
/* Tab headings: inactive + hover = white, active = accent (mint).
   Explicit + specific so the WC default grey and the global a:hover don't win. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
    color: var(--heading);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:focus {
    color: var(--accent);
}

/* Variable products: the attribute picker table (label | select rows). */
.woocommerce div.product form.cart table.variations {
    border-collapse: separate;
    border-spacing: 0 12px;        /* breathing room between attribute rows */
    margin: 0 0 4px;
}
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
    border: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 1.3;
}
.woocommerce div.product form.cart table.variations th.label {
    padding-right: 16px;
    text-align: left;
    white-space: nowrap;
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}
.woocommerce div.product form.cart table.variations select {
    width: 100%;
    max-width: 360px;
    margin: 0;
}
/* "Clear options" reset link: forced onto its own line 16px below the select
   (inline by default, it glues itself right next to the select). */
.woocommerce div.product form.cart .reset_variations {
    display: block;
    width: fit-content;
    margin-top: 16px;
    font-size: .85rem;
    color: var(--muted);
    text-decoration: underline dotted;
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--danger); }
/* Gap between the quantity field and the Add to cart button. */
.woocommerce div.product form.cart .single_add_to_cart_button { margin-left: 16px; }
/* Selected-variation block (price / availability) before the add-to-cart row. */
.woocommerce div.product form.cart .woocommerce-variation.single_variation {
    margin-bottom: 14px;
}
.woocommerce div.product form.cart .woocommerce-variation-availability { color: var(--muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--line); }

/* Spec-style attribute table (the "key/value" specs gamers expect) */
.woocommerce table.shop_attributes,
.woocommerce-product-attributes {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.woocommerce table.shop_attributes th {
    background: var(--surface-2);
    color: var(--muted);
    text-transform: uppercase;
    font-family: var(--font-head);
    letter-spacing: .03em;
    font-size: .9rem;
}
.woocommerce table.shop_attributes td { background: var(--surface); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { border-color: var(--line); padding: .7em 1em; }

.woocommerce .quantity .qty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    padding: .6em;
}

/* -------------------------------------------------------------------------
   6. WooCommerce notices, cart, forms
   ---------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--surface);
    border-top: 3px solid var(--accent);
    color: var(--text);
    border-radius: var(--radius);
}
.woocommerce-error { border-top-color: var(--danger); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--accent); }

.woocommerce table.cart,
.woocommerce #content table.cart,
.woocommerce-checkout #payment,
.woocommerce .cart-collaterals .cart_totals {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.woocommerce table.shop_table th { color: var(--muted); text-transform: uppercase; font-family: var(--font-head); }
.woocommerce table.shop_table td { border-color: var(--line); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"] {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    padding: .7em .8em;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--glow);
    outline: none;
}

/* Native <select> chrome: shop "sort by" + single-product variation pickers.
   Scoped to these two ONLY — a blanket `.woocommerce select` rule would add a
   second arrow on top of the block checkout's own combobox/select arrows. */
.woocommerce-ordering select.orderby,
.woocommerce div.product table.variations select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-family: var(--font-head);
    letter-spacing: .01em;
    padding: .6em 2.4em .6em .9em;   /* room on the right for the chevron */
    cursor: pointer;
    line-height: 1.2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300E5A0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85em center;
    background-size: 14px 14px;
    transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.woocommerce-ordering select.orderby:hover,
.woocommerce div.product table.variations select:hover {
    border-color: var(--accent);
}
.woocommerce-ordering select.orderby:focus,
.woocommerce div.product table.variations select:focus {
    border-color: var(--accent);
    box-shadow: var(--glow);
    outline: none;
}
/* Open dropdown list colours (honoured by Chromium/Firefox on most platforms). */
.woocommerce-ordering select.orderby option,
.woocommerce div.product table.variations select option {
    background: var(--surface);
    color: var(--text);
}

/* -------------------------------------------------------------------------
   7. Home hero banner
   ---------------------------------------------------------------------- */
/* Overlay background removed — kept transparent so neither the structural
   style.css gradient nor any parent style shows through. */
.home-banner__overlay {
    background: transparent;
}
.home-banner__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-shadow: 0 0 24px rgba(0, 229, 160, .35);
}
.home-banner__text { color: #C9CEDC; font-size: 1.1rem; }

/* No-image fallback: give it a gradient surface so it still looks intentional */
.home-banner--no-media {
    background: radial-gradient(120% 140% at 100% 0%, rgba(123, 91, 255, .18), transparent 55%), var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: calc(var(--gap) * 2) !important;
    color: var(--text);
}
.home-banner--no-media .home-banner__content { color: var(--text); }

/* -------------------------------------------------------------------------
   8. Trust cards ("We are trusted")
   ---------------------------------------------------------------------- */
.trust-card {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    transition: transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
}
.trust-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow-soft); }
.trust-card__overlay {
    background: linear-gradient(to top, rgba(10, 11, 15, .85), rgba(10, 11, 15, .35));
}
.trust-card__title {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* -------------------------------------------------------------------------
   9. FAQ accordion
   ---------------------------------------------------------------------- */
/* Stretch the FAQ list to the full content width (style.css caps it at 820px). */
.faq__list { background: transparent; max-width: none; }
.faq__item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 10px;
    padding-inline: var(--gap);
    transition: border-color var(--speed) ease;
}
.faq__item[open] { border-color: var(--accent); }
.faq__question { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .02em; }
.faq__question::after { color: var(--accent); font-size: 1.4em; }
.faq__answer { color: var(--muted); }

/* -------------------------------------------------------------------------
   10. Footer
   ---------------------------------------------------------------------- */
.site-footer {
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    margin-top: calc(var(--gap) * 3);
}
.footer-col__title {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--heading);
    font-size: 1.05rem;
}
.footer-menu a, .footer-contact a { color: var(--muted); }
.footer-menu a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-social a { color: var(--muted); transition: color var(--speed), transform var(--speed); }
.footer-social a:hover { color: var(--accent); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom .site-info { color: var(--muted); font-size: .9rem; }

/* Payment logos: faint translucent backing on the smaller card row only, so
   the darker brand logos lift off the near-black footer. The full-width Stripe
   badge stays bare (no backing). Fixed height + equal grid cells give every
   card chip an identical size regardless of each logo's aspect ratio. */
.footer-payments__row .payment-icon {
    background: rgb(161 156 255);
    border: 1px solid rgb(99 91 255);
    border-radius: var(--radius);
    padding: 6px 8px;
    height: 40px;            /* uniform chip height for all card logos */
}
.footer-payments__primary {  /* Stripe: no backing */
    background: transparent;
    border: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------
   11. Contact + About
   ---------------------------------------------------------------------- */
.contact-col--form input[type="text"],
.contact-col--form input[type="email"],
.contact-col--form textarea {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
}
.contact-col--form input:focus,
.contact-col--form textarea:focus { border-color: var(--accent); box-shadow: var(--glow); outline: none; }
.contact-info__label { color: var(--accent); }
.about-intro__media img,
.about-team__media img { border-radius: var(--radius); border: 1px solid var(--line); }

/* -------------------------------------------------------------------------
   12. Alternating section bands on the home page for rhythm
   ---------------------------------------------------------------------- */
.home-featured,
.faq { position: relative; }

/* -------------------------------------------------------------------------
   13. Third-party plugins themed to match Rogue PC
   -------------------------------------------------------------------------
   These plugins ship their own light styling (and set some colours inline /
   via generated CSS), so brand overrides here use scoped selectors + targeted
   !important to win the cascade without touching the plugin files.
   ---------------------------------------------------------------------- */

/* ---- 13a. Woo Lucky Wheel (spin-to-win popup) --------------------------- */
/* Darker backdrop behind the popup. */
.wlwl-overlay { background: rgba(7, 8, 12, .85) !important; }

/* NOTE: the popup background colour, the (removed) blob image, the wheel segment
   colours, hub, ring, dots and pointer are all set in the plugin's own settings
   (WP-Admin → Lucky Wheel) to the Rogue PC palette, so they stay editable there
   — intentionally NOT overridden in CSS. This skin only styles the surrounding
   form chrome the plugin has no colour options for. */

/* Keep the wrapper at the plugin's full width/height — it's the positioning
   context for the wheel canvas (negative margins / absolute pointer), so any
   max-width / height:auto here breaks the wheel layout. The dark surface comes
   from .wlwl_lucky_wheel_content above; the wrapper itself stays transparent. */
.wlwl_lucky_wheel_content .wheel-content-wrapper {
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Right-hand content / form text. */
.wlwl_lucky_wheel_content .wheel_content_right,
.wlwl_lucky_wheel_content .wheel_description,
.wlwl_lucky_wheel_content .wheel_description :where(p, li, span, h1, h2, h3, h4, h5, h6) {
    color: var(--heading) !important;   /* brighter than before (was muted/grey) */
}
.wlwl_lucky_wheel_content .wheel_description {
    font-size: 1.18rem !important;      /* larger, more legible */
    line-height: 1.6 !important;
}
.wlwl_lucky_wheel_content .wheel_description :where(p, li) { margin: .35em 0 !important; }
.wlwl_lucky_wheel_content .wheel_description :where(h1, h2, h3, h4) {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--heading) !important;
}

/* Email / name fields → dark theme inputs. */
.wlwl_lucky_wheel_content .wlwl_field_input {
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
}
.wlwl_lucky_wheel_content .wlwl_field_input::placeholder { color: var(--muted) !important; }
.wlwl_lucky_wheel_content .wlwl_field_input:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--glow) !important;
}
.wlwl_lucky_wheel_content .wlwl_error_field { color: var(--danger) !important; }

/* Spin button → brand gradient CTA. */
.wlwl_lucky_wheel_content .wlwl_spin_button,
.wheel_content_right > .wlwl_user_lucky > .wlwl_spin_button {
    background: var(--grad) !important;
    color: var(--accent-ink) !important;
    font-family: var(--font-head);
    font-weight: 700 !important;
    letter-spacing: .04em;
    border: 0 !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    transition: transform var(--speed) ease, box-shadow var(--speed) ease, filter var(--speed) ease;
}
.wlwl_lucky_wheel_content .wlwl_spin_button:hover,
.wheel_content_right > .wlwl_user_lucky > .wlwl_spin_button:hover {
    opacity: 1 !important;
    filter: brightness(1.05);
    box-shadow: var(--glow) !important;
}

/* GDPR consent label. */
.wlwl_lucky_wheel_content .wlwl-gdpr-checkbox-wrap label { color: var(--muted) !important; }
.wlwl_lucky_wheel_content .wlwl-gdpr-checkbox-wrap a { color: var(--accent) !important; }

/* Show-again options: bigger, brighter, evenly spaced so the three labels
   ("Never / Remind later / No thanks") don't cramp or wrap mid-phrase. */
.wlwl_lucky_wheel_content .wlwl-show-again-option {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px !important;
    margin-top: 16px !important;
    color: var(--text) !important;
    font-size: 1.05rem !important;
}
.wlwl_lucky_wheel_content .wlwl-show-again-option :where(div, span) {
    white-space: nowrap;               /* keep each label on one line */
    color: var(--text) !important;
    transition: color var(--speed) ease;
    cursor: pointer;
}
.wlwl_lucky_wheel_content .wlwl-show-again-option :where(div, span):hover { color: var(--accent) !important; }

/* Close (X) buttons. */
.wlwl_lucky_wheel_content .wlwl-close-wheel .wlwl-cancel,
.wlwl_lucky_wheel_content .wlwl-hide-after-spin .wlwl-cancel { color: var(--text) !important; opacity: .7; }
.wlwl_lucky_wheel_content .wlwl-close-wheel:hover .wlwl-cancel { opacity: 1; color: var(--accent) !important; }

/* ---- 13b. Complianz cookie banner -------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: calc(var(--radius) * 2) !important;
    box-shadow: var(--glow-soft), 0 16px 48px rgba(0, 0, 0, .55) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title {
    color: var(--heading) !important;
    font-family: var(--font-head) !important;
    text-transform: uppercase;
    letter-spacing: .02em;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description { color: var(--text) !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents a { color: var(--accent) !important; }

/* Category panels + dividers. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category {
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider { border-color: var(--line) !important; }

/* Buttons: accept = primary gradient; deny / preferences = ghost. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: var(--radius) !important;
    transition: transform var(--speed) ease, box-shadow var(--speed) ease, filter var(--speed) ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
    background: var(--grad) !important;
    color: var(--accent-ink) !important;
    border: 0 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
    filter: brightness(1.05);
    box-shadow: var(--glow) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover {
    background: rgba(0, 229, 160, .08) !important;
    box-shadow: var(--glow-soft) !important;
}

/* Close icon. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close { color: var(--text) !important; }

/* Manage Consent block — scale all consent-UI fonts to 1.5x of the configured
   size (Complianz stores sizes in CSS vars, so calc(var * 1.5) keeps it
   proportional whatever the admin set). */
/* Unitless line-heights below are relative to each element's own font-size, so
   they scale automatically with the 1.5x bump — fixing the cramped spacing
   that Complianz's fixed px / configured line-heights caused after enlarging. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
    font-size: calc(var(--cmplz_title_font_size, 19px) * 1.5) !important;
    line-height: 1.25 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description {
    font-size: calc(var(--cmplz_text_font_size, 15px) * 1.5) !important;
    line-height: 1.6 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
    font-size: calc(var(--cmplz_button_font_size, 15px) * 1.5) !important;
    line-height: 1.3 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents a {
    font-size: calc(var(--cmplz_link_font_size, 14px) * 1.5) !important;
    line-height: 1.5 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-header {
    font-size: calc(var(--cmplz_category_header_title_font_size, 16px) * 1.5) !important;
    line-height: 1.4 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-description {
    font-size: calc(var(--cmplz_category_body_font_size, 14px) * 1.5) !important;
    line-height: 1.6 !important;
}

/* Floating "Manage consent" revoke tab (inherits font, has no size of its own
   → give it a 1.5x bump and auto height so the larger text isn't clipped). */
#cmplz-manage-consent .cmplz-manage-consent {
    font-size: 1.5em !important;
    line-height: 1.4 !important;
    height: auto !important;
    background-color: var(--surface) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* ---- 13c. Tidio live chat ------------------------------------------------
   Tidio renders inside a CROSS-ORIGIN iframe served from code.tidio.co, so the
   launcher/chat colours, shape, header and text can ONLY be themed from the
   Tidio dashboard (WP-Admin → Tidio Chat → Appearance — set the widget colour
   to #00E5A0). CSS on this page physically cannot reach inside that iframe.
   The one thing we CAN do from the parent page is style the iframe element
   itself: a soft shadow + faint mint glow so the launcher feels integrated.
   Position is intentionally left to Tidio (overriding its inline positioning
   tends to break the open/closed transitions). */
#tidio-chat-iframe {
    filter:
        drop-shadow(0 8px 22px rgba(0, 0, 0, .45))
        drop-shadow(0 0 10px rgba(0, 229, 160, .22)) !important;
}

/* ---- 13d. Bottom-corner widget de-collision ------------------------------
   The wheel launcher, Tidio chat, Complianz "manage consent" tab and the
   reCAPTCHA badge all default to the bottom-right and overlap. The wheel icon
   is moved to the bottom-LEFT in its plugin settings (WP-Admin → Lucky Wheel →
   Notify → position); the two fixes below clear the remaining right-corner
   stack. */
#cmplz-manage-consent { display: none !important; }  /* hide the revoke tab */
.grecaptcha-badge { bottom: 214px !important; }       /* lift ~200px above the chat launcher */

/* "Cookie Settings" revoke button injected into the footer Legal menu (replaces
   the hidden tab as the consent-withdrawal entry point). Make the <button> read
   exactly like the other footer menu links. */
.footer-menu .footer-cookie-settings {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    transition: color var(--speed) ease;
}
.footer-menu .footer-cookie-settings:hover { color: var(--accent); }

/* -------------------------------------------------------------------------
   14. Global form controls — neon dark styling site-wide
   Baseline for every front-end field (search, comment, number, date, etc.).
   The more specific WooCommerce/contact rules above still win where they apply;
   this fills in everything else with the same dark field + mint focus glow.
   ---------------------------------------------------------------------- */
/* :where() gives these ZERO specificity — they style bare inputs (search,
   comment, etc.) but are overridden by ANY framework/component rule, so they
   can never bleed into and break WooCommerce blocks, comboboxes, select2, etc.
   (That bleed was squishing the checkout combobox and doubling its arrow.) */
:where(
    input[type="text"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="url"], input[type="password"],
    input[type="number"], input[type="date"], input[type="datetime-local"],
    input[type="month"], input[type="week"], input[type="time"], textarea
) {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .65em .85em;
    font: inherit;
    transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
:where(input:focus, textarea:focus) {
    border-color: var(--accent);
    box-shadow: var(--glow);
    outline: none;
}
:where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }

/* Checkboxes & radios → neon mint accent (native, no extra markup). */
:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--accent);
    width: 1.05em;
    height: 1.05em;
    vertical-align: text-bottom;
    cursor: pointer;
}

/* Search submit + WP search form to match the field height. */
.search-form,
.wp-block-search__inside-wrapper { display: flex; gap: 8px; }

/* Autofill: keep the dark field instead of the browser's white/yellow box. */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
    caret-color: var(--text);
}

/* -------------------------------------------------------------------------
   14b. WooCommerce Checkout / Cart BLOCKS (wc-block-components)
   The block checkout/cart render their fields client-side and default to light
   inputs. Recolour to the dark theme via the stable block class API. COLOURS
   ONLY — we never touch padding/position/appearance here, so the floating
   labels and the block's own select arrow keep working.
   ---------------------------------------------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-combobox-control input,
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-quantity-selector__input {
    background-color: var(--bg-2) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
/* Floating labels + step descriptions */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-checkout__main label,
.wc-block-components-checkout-step__description {
    color: var(--muted) !important;
}
/* Active / focused field → mint */
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select__select:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--glow) !important;
}
.wc-block-components-text-input.is-active label { color: var(--accent) !important; }

/* Combobox suggestions dropdown */
.wc-block-components-combobox-control .components-form-token-field__suggestions-list,
.components-form-token-field__suggestions-list {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
.components-form-token-field__suggestion.is-selected { background: var(--surface-2) !important; }

/* Headings, totals, step titles */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-name,
.wc-block-components-order-summary-item__total-price {
    color: var(--text) !important;
}
.wc-block-components-panel__button { color: var(--text) !important; }
.wc-block-components-totals-wrapper { border-color: var(--line) !important; }

/* "Place Order" + contained block buttons → brand gradient */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-components-button.contained {
    background: var(--grad) !important;
    color: var(--accent-ink) !important;
    border: 0 !important;
}
/* Block checkbox (order notes, ship-to-different) → mint */
.wc-block-components-checkbox__input { accent-color: var(--accent) !important; }

/* -------------------------------------------------------------------------
   15. My Account navigation — turn the plain list into icon buttons
   Classic WooCommerce account menu (stable --endpoint link classes). Each link
   becomes a card-button with a contextual line icon, tinted via CSS mask +
   background-color (mint by default, red for log out).
   ---------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: .85em 1.1em;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--speed) ease, color var(--speed) ease,
                box-shadow var(--speed) ease, background var(--speed) ease,
                transform var(--speed) ease;
}
.woocommerce-MyAccount-navigation li a:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--glow-soft);
    transform: translateX(3px);
}
.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--glow-soft);
}
/* Contextual icon (mask = shape, background-color = brand tint). */
.woocommerce-MyAccount-navigation li a::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background-color: var(--icon-color, var(--accent));
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.woocommerce-MyAccount-navigation-link--dashboard a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96 12 12.01l8.73-5.05'/%3E%3Cpath d='M12 22.08V12'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--downloads a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
    --icon-color: var(--danger);
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 1.5rem rgba(255, 77, 109, .18);
}

/* -------------------------------------------------------------------------
   16. Currency switcher (header) — segmented EUR | GBP control
   Rendered by the rogue-multicurrency mu-plugin into ss_header_tools.
   ---------------------------------------------------------------------- */
.currency-switcher {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.currency-switcher__opt {
    display: inline-flex;
    align-items: center;
    padding: .5em .85em;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .03em;
    color: var(--muted);
    transition: color var(--speed) ease, background var(--speed) ease;
}
.currency-switcher__opt + .currency-switcher__opt { border-left: 1px solid var(--line); }
.currency-switcher__opt:hover { color: var(--accent); }
.currency-switcher__opt.is-active {
    background: var(--grad);
    color: var(--accent-ink);
}

/* Reduced-motion: drop transforms/glcol animations */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .woocommerce ul.products li.product:hover,
    .trust-card:hover,
    .button:hover { transform: none; }
}