/*
Theme Name: Bluering (Hello Elementor Child)
Template: hello-elementor
Author: Bluering Creations
Description: Child theme carrying only the handful of effects Elementor's native controls cannot produce (documented per the elementor-native-conversion-architect fallback rule): the wordmark's per-frame RGB-split glitch, the infinite ticker marquee, and the fixed scanline overlay. Page layout, content, colors and typography all live in Elementor itself (Global Colors/Fonts on the site Kit) and are fully editable there. Every rule below is scoped to a documented br-* class attached via each element's native "CSS Classes" advanced control -- nothing here overrides Elementor's own output.
Version: 1.0.0
*/

/* ============================================================================
   GLOBAL BASE -- the artboard's html/body block. Everything else in this file
   assumed these were already set; three of them were not.
   ============================================================================ */
/* The artboard sets overflow-x:clip on html,body. Do NOT copy that here: on the
   real document the root element propagates overflow to the viewport, which
   stopped the page scrolling altogether. The site has no horizontal overflow to
   suppress anyway. */
body.br-body{background:#060608;color:#fff;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.br-body a:hover{color:#FF2ED3}
select,input,textarea{font-family:inherit}
::selection{background:#FF2ED3;color:#000}

/* The magenta hover is for prose and nav links. Controls that own their colour
   restate it here, since this rule is a class deeper than their base rules and
   would otherwise repaint them -- black-on-white cart text especially. */
body.br-body .br-cart-toggle:hover{color:#000}
body.br-body .br-search-toggle:hover{color:#fff}
body.br-body .br-filter:hover,
body.br-body .br-card:hover,
body.br-body .br-card:hover .br-card-name,
body.br-body .br-logo:hover{color:#fff}
body.br-body .br-nav-item>a:hover,
body.br-body .br-mega a:hover,
body.br-body .br-footer-links a:hover{color:#22F0FF}

/* ---- Wordmark glitch (logo + hover only -- "Accent" level, per design chats) ---- */
.br-wordmark{position:relative;display:inline-block;animation:br-glitch-base 7s infinite}
.br-wordmark .br-ghost{position:absolute;left:0;top:0;mix-blend-mode:screen;pointer-events:none}
.br-wordmark .br-ghost-r{color:#FF2ED3;animation:br-glitch-r 7s infinite}
.br-wordmark .br-ghost-b{color:#22F0FF;animation:br-glitch-b 7s infinite}
.br-wordmark .br-base{position:relative}

@keyframes br-glitch-base{
  0%,89%,100%{transform:translate(0,0) skewX(0)}
  90.5%{transform:translate(-2px,0) skewX(-4deg)}
  92.5%{transform:translate(2px,0) skewX(2deg)}
  94.5%{transform:translate(-1px,0)}
}
@keyframes br-glitch-r{
  0%,88%,100%{transform:translate(2px,0);opacity:.85}
  90%{transform:translate(7px,-1px);opacity:1}
  92%{transform:translate(-4px,1px)}
  94%{transform:translate(5px,0)}
  96%{transform:translate(2px,0)}
}
@keyframes br-glitch-b{
  0%,88%,100%{transform:translate(-2px,0);opacity:.85}
  90%{transform:translate(-7px,1px);opacity:1}
  92%{transform:translate(4px,-1px)}
  94%{transform:translate(-5px,0)}
  96%{transform:translate(-2px,0)}
}

/* ---- Ticker marquee (two content-sized halves, continuous translate loop) ---- */
.br-ticker-track{display:flex;width:max-content;animation:br-marquee 26s linear infinite}
@keyframes br-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Fixed scanline overlay (one instance per page) ---- */
.br-scanline{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0px,rgba(255,255,255,.045) 1px,transparent 1px,transparent 3px);
  animation:br-scan 1.4s steps(4) infinite;
}
@keyframes br-scan{from{transform:translateY(0)}to{transform:translateY(4px)}}

/* ---- Sticky header (Elementor's native sticky control is a Pro-only feature) ---- */
.br-sticky-header{position:sticky;top:0;z-index:50}

/* ---- Mega menu (hover dropdown; free Elementor's Nav widget has no submenu, so this is
   plain CSS :hover reveal on a documented wrapper class -- no JS needed) ---- */
.br-nav-item{position:relative}
.br-mega{
  position:absolute;top:100%;left:0;margin-top:14px;background:#0a0a0e;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 48px rgba(0,0,0,.55);
  padding:22px 26px;display:flex;gap:36px;z-index:60;min-width:420px;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease;
}
.br-nav-item:hover .br-mega,.br-nav-item:focus-within .br-mega{opacity:1;pointer-events:auto;transform:translateY(0)}
.br-mega-col{display:flex;flex-direction:column;gap:2px;min-width:150px}

/* ---- Mobile navigation (under 1000px). The hamburger button and the .br-nav-list
   class are injected by br-nav.js so one rule set covers both header copies (theme
   header.php and the Elementor-baked headers). Mega menus flatten to an always-open
   scrollable list because :hover is unreliable on touch. !important is needed to beat
   Elementor's --display / --flex-direction custom-property styling on its containers. ---- */
.br-nav-toggle{display:none}

@media (max-width:1000px){
  .br-nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;flex:none;border:1px solid rgba(255,255,255,.16);
    background:transparent;cursor:pointer;padding:0;
  }
  .br-nav-toggle span{display:block;width:18px;height:2px;background:#fff;margin:0 auto}
  .br-nav-toggle[aria-expanded="true"]{border-color:#22F0FF}

  .br-nav-list{
    display:none!important;width:100%;order:99;flex-direction:column!important;
    gap:0!important;max-height:calc(100vh - 110px);overflow-y:auto;
    border-top:1px solid rgba(255,255,255,.1);margin-top:12px;
  }
  body.br-nav-open .br-nav-list{display:flex!important}

  .br-nav-list .br-nav-item{
    width:100%;border-bottom:1px solid rgba(255,255,255,.08);padding:14px 0 10px;
  }
  .br-nav-list .br-nav-item > a{font-size:16px;color:#fff!important}

  .br-nav-list .br-mega{
    position:static!important;opacity:1!important;pointer-events:auto!important;
    transform:none!important;background:transparent!important;border:none!important;
    box-shadow:none!important;min-width:0!important;margin-top:6px!important;
    padding:0 0 0 14px!important;flex-direction:column!important;gap:0!important;
  }
  .br-nav-list .br-mega-col{min-width:0!important}
  .br-nav-list .br-mega a{padding:8px 0!important;font-size:14px!important}
}

/* ---- Cart drawer (slide-out panel; needs a tiny click-toggle, so it's the one place
   this build uses a few lines of vanilla JS -- see br-cart.js) ---- */
.br-cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#0a0a0f;
  border-left:1px solid rgba(255,255,255,.14);z-index:100;transform:translateX(100%);
  transition:transform .28s ease;overflow-y:auto;padding:26px;
}
body.br-cart-open .br-cart-drawer{transform:translateX(0)}
.br-cart-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
body.br-cart-open .br-cart-overlay{opacity:1;pointer-events:auto}
.br-cart-close{cursor:pointer}

/* Free-shipping progress in the cart drawer (artboard). The gradient fill is the
   one place the design allows a gradient on anything but the category tiles. */
.br-ship-meter{margin:0 -26px 20px;padding:20px 26px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.br-ship-row{display:flex;justify-content:space-between;gap:12px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;margin-bottom:10px}
.br-ship-thresh{color:rgba(255,255,255,.4)}
.br-ship-track{height:6px;background:rgba(255,255,255,.1);overflow:hidden}
.br-ship-fill{height:6px;background:linear-gradient(90deg,#22F0FF,#FF2ED3);transition:width .35s ease}

/* ---- Search overlay (full-screen; needs the same click-toggle pattern as the cart
   drawer, driven by br-search.js). Results come from a real AJAX product search. ---- */
.br-search-overlay{
  position:fixed;inset:0;background:rgba(6,6,8,.97);z-index:110;opacity:0;pointer-events:none;
  transition:opacity .18s ease;overflow-y:auto;
}
body.br-search-open .br-search-overlay{opacity:1;pointer-events:auto}
.br-search-panel{max-width:900px;margin:0 auto;padding:clamp(60px,10vh,120px) 24px 60px}
.br-search-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.br-search-chip{
  display:inline-block;padding:9px 14px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);
  text-decoration:none;font-size:13px;font-weight:600;
}
.br-search-chip:hover{border-color:#22F0FF;color:#22F0FF}

/* ---- Selection color glitch text-shadow on hero headline (accent rule from MASTER.md) ---- */
.br-glitch-shadow{text-shadow:2px 0 #FF2ED3,-2px 0 #22F0FF}

/* ---- Checkout: restyle the REAL WooCommerce Checkout block (page "Checkout", ID 9) ----
   This is the live, functional WooCommerce Blocks checkout (express payment + fields +
   order summary) -- restyled with CSS only, never replaced with static markup. A fake
   checkout UI would risk being mistaken for a working payment form; this keeps every
   field, validation rule and payment gateway exactly as WooCommerce renders it, just
   skinned to the design system. Class names are the stable, public @woocommerce/blocks
   selectors. Scoped to the checkout template so nothing else on the site is touched. */
body.woocommerce-checkout{background:#060608;color:#fff}
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wp-block-woocommerce-checkout{background:#060608;color:#fff}
body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-checkout .wc-block-components-panel{
  background:#0A0A0F;border:1px solid rgba(255,255,255,.12);border-radius:0;padding:20px;margin-bottom:20px}
body.woocommerce-checkout .wc-block-components-checkout-step__title{
  font-family:'League Spartan',sans-serif;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.02em}
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input textarea,
body.woocommerce-checkout select,
body.woocommerce-checkout .wc-block-components-combobox input{
  background:#08080c!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:0!important;color:#fff!important}
body.woocommerce-checkout .wc-block-components-text-input label{color:rgba(255,255,255,.5)}
body.woocommerce-checkout .wc-block-components-radio-control__option{
  border:1px solid rgba(255,255,255,.14);border-radius:0;background:#08080c}
body.woocommerce-checkout .wc-block-components-radio-control__option[aria-checked="true"]{
  border-color:#22F0FF;background:rgba(34,240,255,.08)}
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-order-summary{
  background:#0A0A0F;border:1px solid rgba(255,255,255,.12);border-radius:0}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-order-summary__totals .wc-block-components-formatted-money-amount{
  font-family:'JetBrains Mono',monospace;color:#22F0FF}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button{
  background:#22F0FF!important;color:#000!important;border-radius:0!important;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button{color:rgba(255,255,255,.6)!important}
body.woocommerce-checkout .wc-block-components-express-payment{
  background:#0A0A0F;border:1px solid rgba(255,255,255,.12);border-radius:0;padding:16px;margin-bottom:20px}
body.woocommerce-checkout a{color:#22F0FF}

/* ---- Single product page (real WooCommerce output via woocommerce/single-product.php
   override, restyled with CSS -- gallery, variation form, add-to-cart button, pricing
   and related products all stay real/functional; only colors/spacing change). Class
   names confirmed against the site's live rendered product page. ---- */
body.single-product{background:#060608;color:#fff}
body.single-product .br-pdp-price .price,
body.single-product .woocommerce-Price-amount{font-family:'JetBrains Mono',monospace;color:#22F0FF;font-size:24px}
body.single-product .woocommerce-product-gallery img{width:100%;height:auto;display:block}
body.single-product .flex-control-thumbs{display:flex;gap:10px;margin:14px 0 0;padding:0;list-style:none}
body.single-product .flex-control-thumbs li{width:70px}
body.single-product .flex-control-thumbs img{border:1px solid rgba(255,255,255,.12);cursor:pointer}
body.single-product table.variations{width:100%;margin:18px 0}
body.single-product table.variations tr{display:block;margin-bottom:14px}
body.single-product table.variations td.label{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.45);margin-bottom:8px}
body.single-product table.variations td.value select{
  background:#08080c;border:1px solid rgba(255,255,255,.18);border-radius:0;color:#fff;padding:11px 12px;min-height:44px;width:100%;max-width:320px}
body.single-product .woo-variation-swatches,body.single-product [class*="wvs-"]{--wvs-border-radius:0}
body.single-product .reset_variations{color:rgba(255,255,255,.5);font-size:12px}
body.single-product .woocommerce-variation-price .price,
body.single-product .woocommerce-variation-price .woocommerce-Price-amount{color:#22F0FF;font-family:'JetBrains Mono',monospace}
body.single-product .woocommerce-variation-availability{color:rgba(255,255,255,.55);font-size:13px}
body.single-product .quantity input{
  background:#08080c;border:1px solid rgba(255,255,255,.18);border-radius:0;color:#fff;width:70px;min-height:44px;text-align:center;margin-right:10px}
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button{
  background:#22F0FF!important;color:#000!important;border-radius:0!important;border:none;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:16px 30px;min-height:44px;font-size:14px;cursor:pointer}
body.single-product .single_add_to_cart_button.disabled{opacity:.4;cursor:not-allowed}
body.single-product .woocommerce-product-attributes{border:1px solid rgba(255,255,255,.12);border-collapse:collapse;width:100%;margin-top:20px}
body.single-product .woocommerce-product-attributes-item__field,
body.single-product .woocommerce-product-attributes-item__label{padding:10px 14px;border:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.65)}
body.single-product .br-pdp-related h2{font-family:'League Spartan',sans-serif;font-weight:800;color:#fff;border-top:1px solid rgba(255,255,255,.12);padding-top:40px}
body.single-product .br-pdp-related ul.products{display:flex;flex-wrap:wrap;gap:20px;list-style:none;padding:0}
body.single-product .br-pdp-related ul.products li.product{
  flex:1 1 205px;background:#0B0B10;border:1px solid rgba(255,255,255,.1);padding:16px;list-style:none}
body.single-product .br-pdp-related ul.products li.product img{width:100%;height:auto;display:block;margin-bottom:12px}
body.single-product .br-pdp-related ul.products li.product .woocommerce-loop-product__title{color:#fff;font-size:14px}
body.single-product .br-pdp-related ul.products li.product .price{color:#22F0FF;font-family:'JetBrains Mono',monospace;font-size:13px}
body.single-product a{color:#22F0FF}

@media (prefers-reduced-motion: reduce){
  .br-wordmark,.br-wordmark .br-ghost-r,.br-wordmark .br-ghost-b,.br-ticker-track,.br-scanline{animation:none!important}
}

/* ============================================================================
   PDP -- matched to the approved artboard (isCanvas / isCase blocks).
   WooCommerce's real gallery, variation form and add-to-cart stay intact and are
   restyled; nothing here replaces functional markup.
   ============================================================================ */

.br-pdp-wrap{max-width:1360px;margin:0 auto;padding:26px clamp(16px,3vw,32px) clamp(60px,7vw,90px)}
.br-pdp-crumb{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.4);margin-bottom:26px}
.br-pdp-crumb a{color:rgba(255,255,255,.4)}
.br-pdp-crumb a:hover{color:#22F0FF}
.br-pdp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:clamp(30px,4vw,56px);align-items:start}

/* The artboard sets galleryStickyPos to 'sticky' on desktop and 'static' under
   1000px. Without the mobile half, the gallery pins while the options column
   scrolls past it -- and at narrow widths the grid is single-column, so the
   gallery is taller than the viewport and never releases. */
.br-pdp-gallery{position:sticky;top:120px}
@media (max-width:1000px){
  .br-pdp-gallery{position:static;top:auto}
}
.br-pdp-gallery .woocommerce-product-gallery{border:1px solid rgba(255,255,255,.12);background:#0c0c11;margin:0}
.br-pdp-gallery .woocommerce-product-gallery__wrapper{margin:0}
.br-pdp-gallery .woocommerce-product-gallery__image img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.br-pdp-gallery .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 0!important;padding:0;list-style:none}
.br-pdp-gallery .flex-control-thumbs li{width:auto!important;margin:0!important}
.br-pdp-gallery .flex-control-thumbs img{aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(255,255,255,.12);opacity:.75}
.br-pdp-gallery .flex-control-thumbs img.flex-active,
.br-pdp-gallery .flex-control-thumbs img:hover{opacity:1;border-color:#22F0FF}

/* Info column */
.br-pdp-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;margin:0 0 18px}
.br-pdp-title{font-family:'League Spartan',sans-serif;font-weight:800;font-size:clamp(30px,5.6vw,50px);line-height:1;letter-spacing:-.035em;margin:0 0 18px;color:#fff}
.br-pdp-intro{font-size:17px;line-height:1.6;color:rgba(255,255,255,.62);margin:0 0 26px}
body.single-product .br-pdp-price .price,
body.single-product .br-pdp-price .woocommerce-Price-amount{font-family:'League Spartan',sans-serif;font-weight:800;font-size:clamp(29px,4.8vw,40px);letter-spacing:-.02em;color:#fff}
.br-pdp-price{margin-bottom:30px}
.br-pdp-step{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.br-pdp-step-num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.55)}
.br-pdp-step-note{font-size:12px;color:rgba(255,255,255,.4)}
.br-pdp-ship{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.45);margin:16px 0 26px}

/* Spec strip -- artboard 175px track, 1px hairline gaps */
.br-pdp-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);margin-bottom:22px}
.br-pdp-spec{background:#08080c;padding:16px}
.br-pdp-spec-big{font-family:'League Spartan',sans-serif;font-weight:800;font-size:17px;color:#22F0FF;margin:0 0 5px}
.br-pdp-spec-label{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.55);margin:0}

/* Details accordion */
.br-pdp-acc{border-top:1px solid rgba(255,255,255,.12)}
.br-pdp-acc details{border-bottom:1px solid rgba(255,255,255,.12)}
.br-pdp-acc summary{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-weight:600;font-size:16px;cursor:pointer;list-style:none;color:#fff}
.br-pdp-acc summary::-webkit-details-marker{display:none}
.br-pdp-acc summary::after{content:'+';color:#22F0FF;font-family:'JetBrains Mono',monospace}
.br-pdp-acc details[open] summary::after{content:'\2212'}
.br-pdp-acc-body{padding:0 0 22px;color:rgba(255,255,255,.6);font-size:15px;line-height:1.65}
.br-pdp-acc-body table{display:none}

/* Size cards. br-pdp.js enhances the real variation <select> into these; the
   select stays in the DOM and remains the source of truth for WooCommerce. */
/* Hello Elementor's reset.css targets [type="button"] -- an ATTRIBUTE selector,
   so it carries the same specificity as a single class and wins on load order,
   painting our buttons #c36 with a 3px radius. Same cause as the stray pink box
   that was in the header. Scoped one class deeper so ours wins outright. */
.br-pdp-wrap button{border:0;border-radius:0;background:none;color:inherit;font-family:inherit;line-height:inherit}
.br-pdp-wrap .br-size-card,
.br-pdp-wrap .br-orient-btn{border:1px solid rgba(255,255,255,.14);border-radius:0;background:rgba(255,255,255,.02);color:#fff}
.br-pdp-wrap .br-size-card:hover,
.br-pdp-wrap .br-orient-btn:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04)}

.br-size-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:10px;margin-bottom:14px}
.br-size-card{position:relative;padding:16px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);text-align:left;display:flex;flex-direction:column;gap:10px;min-height:130px;justify-content:space-between;cursor:pointer;transition:border-color .15s ease}
.br-size-card:hover{border-color:rgba(255,255,255,.42)}
.br-size-card[aria-pressed="true"]::after{content:'';position:absolute;inset:0;border:1px solid #22F0FF;box-shadow:inset 0 0 0 1px rgba(34,240,255,.35);pointer-events:none}
.br-size-scale{display:flex;align-items:flex-end;height:44px}
.br-size-swatch{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35)}
.br-size-label{font-weight:700;font-size:15px;margin:0 0 4px;color:#fff}
.br-size-cm{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.5);margin:0}
.br-orient-row{display:flex;gap:10px;margin-bottom:26px}
.br-orient-btn{position:relative;flex:1;padding:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);font-weight:600;font-size:14px;letter-spacing:.06em;color:#fff;cursor:pointer}
.br-orient-btn:hover{border-color:rgba(255,255,255,.4)}
.br-orient-btn[aria-pressed="true"]::after{content:'';position:absolute;inset:0;border:1px solid #22F0FF;box-shadow:inset 0 0 0 1px rgba(34,240,255,.4);pointer-events:none}
.br-enhanced{display:none!important}

/* Real variation form, restyled.
   Rows br-pdp.js / br-case.js have replaced carry .br-enhanced and are hidden.
   Everything left (Depth on canvas, Finishes on cases) is a genuine WooCommerce
   control, so it is dressed as an artboard step rather than replaced. */
body.single-product .br-pdp table.variations{width:100%;border:0;margin:0 0 14px}
body.single-product .br-pdp table.variations tbody,
body.single-product .br-pdp table.variations tr{display:block;width:100%}
body.single-product .br-pdp table.variations tr:not(.br-enhanced){border:1px solid rgba(255,255,255,.14);background:#0a0a0f;padding:26px;margin-bottom:14px}
body.single-product .br-pdp table.variations td{display:block;padding:0;border:0}
body.single-product .br-pdp table.variations td.label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-bottom:18px}
body.single-product .br-pdp table.variations td.label label{font-weight:400;color:inherit}
body.single-product .br-pdp table.variations td.value{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.single-product .br-pdp .woo-variation-swatches .variable-items-wrapper{gap:8px;margin:0}
body.single-product .br-pdp .variable-items-wrapper .variable-item{border-radius:0;box-shadow:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);min-height:44px;padding:11px 15px;margin:0;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#fff}
body.single-product .br-pdp .variable-items-wrapper .variable-item:hover{border-color:#22F0FF;color:#22F0FF}
body.single-product .br-pdp .variable-items-wrapper .variable-item.selected{border-color:#22F0FF;background:rgba(34,240,255,.14);box-shadow:none}
body.single-product .br-pdp .reset_variations{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.45)}
body.single-product .br-pdp .single_add_to_cart_button{flex:1;height:60px;letter-spacing:.14em;font-size:15px;padding:0 20px}
body.single-product .br-pdp .quantity input{height:60px;min-height:60px;width:92px;font-family:'JetBrains Mono',monospace;font-size:16px;margin:0}
body.single-product .br-pdp form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-bottom:0}
body.single-product .br-pdp form.cart.variations_form{display:block}
body.single-product .br-pdp .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:stretch}

/* Recommendation rail -- matches the homepage rails */
.br-pdp-rail{margin-top:96px}
.br-pdp-rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.br-pdp-rail-head h2{font-family:'League Spartan',sans-serif;font-weight:800;font-size:clamp(23px,3.8vw,32px);letter-spacing:-.03em;margin:0;color:#fff}
body.single-product .br-pdp-rail ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr));gap:20px;list-style:none;padding:0;margin:0}
body.single-product .br-pdp-rail ul.products li.product{flex:none;background:#0b0b10;border:1px solid rgba(255,255,255,.1);padding:0;margin:0;width:auto}
body.single-product .br-pdp-rail ul.products li.product:hover{border-color:#22F0FF}
body.single-product .br-pdp-rail ul.products li.product img{margin:0 0 12px;aspect-ratio:1/1;object-fit:cover}
body.single-product .br-pdp-rail ul.products li.product .woocommerce-loop-product__title{padding:0 14px;font-size:14px;line-height:1.35;color:#fff}
body.single-product .br-pdp-rail ul.products li.product .price{display:block;padding:6px 14px 16px;font-family:'JetBrains Mono',monospace;font-size:13px}
body.single-product .br-pdp-rail ul.products li.product .button{display:none}

/* ============================================================================
   HEADER -- matched to the approved artboard (Bluering Redesign.dc.html,
   header block). Every value below is lifted from that file, with the design's
   runtime variables resolved at their desktop defaults:
     headGap 26px | logoFs 31px | logoSubFs 11px | searchBasis 210px
     searchMinW 0 | cartPadX 18px | threshLabel $150
   Mobile (<1000px) uses the design's own narrow-viewport values.
   ============================================================================ */

/* Hello Elementor's reset.css is enqueued AFTER this stylesheet and paints raw
   <button> and <a> with #c36 plus a 3px radius. The artboard neutralises this in
   its global CSS; we scope the same reset to the header. */
.br-sticky-header button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;border-radius:0;padding:0;font-size:inherit;line-height:inherit}
/* reset.css also paints button:hover / button:focus solid #c36, which turned the
   burger pink the moment it was tapped. Two classes deep so this wins. */
.br-sticky-header button:hover,
.br-sticky-header button:focus{background:transparent;color:inherit}
.br-sticky-header button:focus-visible{outline:2px solid #22F0FF;outline-offset:2px}
/* Desktop: no burger. The bare .br-nav-toggle{display:none} higher up loses to
   reset.css's button{display:inline-block}, so it was still taking up a slot in
   the header row -- invisible, but occupying space. */
.br-sticky-header .br-nav-toggle{display:none}
.br-sticky-header a{color:inherit;text-decoration:none}

.br-header-row{max-width:1360px;margin:0 auto;padding:0 clamp(14px,3vw,32px);min-height:88px;display:flex;align-items:center;gap:26px}
.br-header-spacer{flex:1}

/* Wordmark lockup */
.br-logo{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:4px 0;flex:none;font-family:'League Spartan',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.02em;line-height:1}
.br-wordmark{position:relative;display:block;font-family:'League Spartan',sans-serif;font-weight:500;font-size:31px;letter-spacing:-.06em;line-height:1;color:#fff}
.br-logo-sub{font-family:Quicksand,sans-serif;font-weight:600;font-size:11px;letter-spacing:.34em;line-height:1;color:rgba(255,255,255,.72);text-transform:lowercase;margin-top:-9px}

/* Nav. The mega panel anchors to the left edge of the whole nav block, as drawn,
   so .br-nav owns the positioning context and .br-nav-item does not. */
.br-nav{position:relative;display:flex}
.br-nav-list{display:flex;gap:22px;flex:none;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.br-nav-item{position:static}
/* Two classes deep: Elementor's kit stylesheet (.elementor-kit-366 a) is enqueued
   after this file and would otherwise win the link colour on equal specificity. */
.br-sticky-header .br-nav-item>a{color:rgba(255,255,255,.72);padding:6px 0;display:inline-block}
.br-sticky-header .br-nav-item>a:hover{color:#22F0FF}
.br-sticky-header .br-mega a{color:rgba(255,255,255,.78)}
.br-sticky-header .br-mega a:hover{color:#22F0FF}
.br-sticky-header .br-logo{color:#fff}
.br-mega{top:calc(100% + 22px);margin-top:0;padding:26px 30px;gap:44px;min-width:520px;text-transform:none;letter-spacing:normal}
.br-mega-col{min-width:160px;gap:2px}
.br-mega-head{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:rgba(255,255,255,.4);margin:0 0 10px;white-space:nowrap;text-transform:uppercase;font-weight:400;min-height:13px}
.br-sticky-header .br-mega a{display:block;padding:9px 0;font-size:14.5px;font-weight:600;white-space:nowrap;text-align:left}

/* Search pill */
.br-sticky-header .br-search-toggle{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);flex:0 1 210px;min-width:0;justify-content:center;overflow:hidden;white-space:nowrap;color:rgba(255,255,255,.4);font-size:13px;font-family:'JetBrains Mono',monospace;min-height:44px}
.br-sticky-header .br-search-toggle:hover{border-color:#22F0FF;color:#fff}
.br-search-glyph{color:#22F0FF;flex:none}
.br-search-hint{overflow:hidden;text-overflow:ellipsis}

/* Cart button */
.br-sticky-header .br-cart-toggle{display:flex;align-items:center;gap:7px;padding:11px 18px;flex:none;min-width:46px;min-height:46px;justify-content:center;white-space:nowrap;background:#fff;color:#000;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.br-sticky-header .br-cart-toggle:hover{background:#22F0FF;color:#000}
.br-cart-count{font-family:'JetBrains Mono',monospace}

/* ============================================================================
   PRODUCT ARCHIVE -- one layout for every collection, matched to the artboard's
   isShopArt / isShopCases blocks. Accent and card track come from the template:
   wall art is magenta on a 215px track, cases are cyan on 205px.
   ============================================================================ */
.br-archive{max-width:1360px;margin:0 auto;padding:26px clamp(16px,3vw,32px) clamp(60px,7vw,96px)}
.br-archive .br-pdp-crumb{margin-bottom:22px}
.br-archive-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
.br-archive-title{font-family:'League Spartan',sans-serif;font-weight:800;font-size:clamp(34px,6.4vw,60px);line-height:.95;letter-spacing:-.035em;margin:0 0 14px;color:#fff}
.br-archive-intro{font-size:17px;line-height:1.55;color:rgba(255,255,255,.6);max-width:560px;margin:0}
.br-archive-count{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.45)}
.br-archive-body{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,44px);margin-top:34px;align-items:flex-start}

/* Filter aside */
.br-filters{position:sticky;top:130px;flex:1 1 226px;min-width:0;display:flex;flex-direction:column;gap:30px}
.br-filter-head{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.45);margin:0 0 14px}
.br-filter-list{display:flex;flex-direction:column;gap:2px}
.br-archive .br-filter{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:11px 12px;border:1px solid transparent;font-size:14px;font-weight:600;color:rgba(255,255,255,.72);min-height:44px;text-decoration:none}
.br-archive .br-filter:hover{color:#fff;border-color:rgba(255,255,255,.16)}
.br-archive .br-filter.is-on{color:#fff;border-color:var(--br-accent,#FF2ED3);background:color-mix(in srgb,var(--br-accent,#FF2ED3) 8%,transparent)}
.br-filter-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.35);flex:none}
.br-filter-note{border:1px solid rgba(255,255,255,.14);background:#0A0A0F;padding:18px}
.br-filter-note-head{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:#22F0FF;margin:0 0 10px}
.br-filter-note-body{font-size:13px;line-height:1.5;color:rgba(255,255,255,.55);margin:0}

/* Grid + cards */
.br-archive-main{flex:999 1 520px;min-width:0}
.br-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--br-min,215px)),1fr));gap:22px}
.br-archive .br-card{border:1px solid rgba(255,255,255,.1);background:#0B0B10;display:block;text-decoration:none;color:inherit}
.br-archive .br-card:hover{border-color:var(--br-accent,#FF2ED3)}
.br-card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#111117}
.br-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.br-card-tag{position:absolute;bottom:12px;left:12px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.2);padding:5px 8px;color:#fff}
.br-card-body{padding:18px}
.br-card-name{font-weight:600;font-size:15px;line-height:1.35;margin:0 0 9px;min-height:40px;color:#fff}
.br-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.br-card-price,.br-card-price .woocommerce-Price-amount{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--br-accent,#FF2ED3)}
.br-card-meta{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.1em;flex:none}
.br-archive-nav{margin-top:44px}
.br-archive-empty{padding:60px 0}
.br-archive-empty-head{font-family:'League Spartan',sans-serif;font-weight:800;font-size:24px;margin:0 0 8px;color:#fff}
.br-archive-empty-body{color:rgba(255,255,255,.55);margin:0}

@media (max-width:1000px){
  .br-filters{position:static;top:auto;flex:1 1 100%}
  .br-archive-main{flex:1 1 100%}
}

/* ---- Homepage category tiles: hover accent.
   Gradient, min-height and title scale are native Elementor settings; only the
   per-tile hover border needs CSS, which the container controls do not expose. */
.br-cat-tile{transition:border-color .15s ease}
.br-cat-cyan:hover{border-color:#22F0FF!important}
.br-cat-magenta:hover{border-color:#FF2ED3!important}

/* ---- Phone case PDP (artboard isCase block) ---- */
.br-pdp--case .br-pdp-gallery .woocommerce-product-gallery{background:radial-gradient(circle at 50% 30%,#15151f,#08080c)}
.br-pdp--case .br-pdp-gallery .woocommerce-product-gallery__image img{aspect-ratio:4/5}
.br-pdp--case .br-pdp-gallery .flex-control-thumbs{grid-template-columns:repeat(3,1fr)!important}

.br-case-step{border:1px solid rgba(255,255,255,.14);background:#0a0a0f;padding:26px;margin-bottom:14px}
.br-case-state{font-family:'JetBrains Mono',monospace;font-size:11px}
.br-brand-row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.br-pdp-wrap .br-brand-btn{position:relative;padding:12px 22px;border:1px solid rgba(255,255,255,.14);border-radius:0;background:transparent;font-weight:600;font-size:14px;color:#fff;cursor:pointer;min-height:44px}
.br-pdp-wrap .br-brand-btn:hover{border-color:rgba(255,255,255,.45)}
.br-pdp-wrap .br-brand-btn[aria-pressed="true"]{background:#fff;color:#000}
.br-model-row{display:flex;flex-wrap:wrap;gap:8px}
.br-pdp-wrap .br-model-chip{position:relative;padding:11px 15px;border:1px solid rgba(255,255,255,.12);border-radius:0;background:rgba(255,255,255,.02);font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.02em;min-height:44px;color:#fff;cursor:pointer}
.br-pdp-wrap .br-model-chip:hover{border-color:#22F0FF;color:#22F0FF}
.br-pdp-wrap .br-model-chip[aria-pressed="true"]{border-color:#22F0FF;background:rgba(34,240,255,.14);color:#fff}
.br-pdp--case .br-pdp-specs{grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr))}

/* Sticky buy bar -- cases only, per the artboard */
.br-buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(6,6,8,.92);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.14);transform:translateY(100%);transition:transform .24s ease;pointer-events:none}
.br-buybar.is-on{transform:translateY(0);pointer-events:auto}
.br-buybar-in{max-width:1360px;margin:0 auto;padding:14px clamp(14px,3vw,32px);display:flex;align-items:center;gap:18px}
.br-buybar-txt{flex:1;min-width:0}
.br-buybar-name{margin:0;font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-buybar-meta{margin:2px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-buybar-price,.br-buybar-price .woocommerce-Price-amount{font-family:'JetBrains Mono',monospace;font-size:15px;color:#22F0FF;flex:none;white-space:nowrap}
.br-pdp-wrap .br-buybar-cta,.br-buybar .br-buybar-cta{flex:none;padding:15px 26px;border:0;border-radius:0;background:#22F0FF;color:#000;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:48px}
.br-buybar .br-buybar-cta:disabled{background:rgba(255,255,255,.18);color:rgba(255,255,255,.55);cursor:not-allowed}
.br-pdp--case{padding-bottom:0}
body.single-product .br-pdp-wrap:has(.br-buybar){padding-bottom:clamp(150px,18vw,180px)}

@media (max-width:700px){
  .br-buybar-txt{display:none}
  .br-buybar-in{gap:12px}
  .br-buybar-cta{flex:1}
}

/* ---- Footer -- artboard 210px track, four columns ---- */
.br-footer{max-width:1360px;margin:0 auto;padding:clamp(44px,6vw,64px) clamp(16px,3vw,32px) 80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(28px,4vw,40px)}
.br-footer .br-wordmark{font-size:38px;font-weight:900;font-family:'League Spartan',sans-serif;letter-spacing:-.06em;line-height:1;color:#fff;position:relative;display:block}
.br-footer-sub{font-family:Quicksand,sans-serif;font-weight:600;font-size:13px;letter-spacing:.34em;color:rgba(255,255,255,.6);text-transform:lowercase;margin-top:-2px}
.br-footer-blurb{color:rgba(255,255,255,.45);font-size:14px;line-height:1.6;max-width:280px;margin:14px 0 0}
.br-footer-head{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.4);margin:0 0 16px}
.br-footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.br-footer .br-footer-links a{font-size:14px;color:rgba(255,255,255,.7);padding:7px 0;display:block}
.br-footer .br-footer-links a:hover{color:#22F0FF}
.br-footer-note{color:rgba(255,255,255,.5);font-size:14px;line-height:1.5;margin:0 0 14px}

/* Newsletter: the real MC4WP form, restyled into the artboard's field + JOIN row */
.br-footer-form form{display:flex;border:1px solid rgba(255,255,255,.18);margin:0}
.br-footer-form p{margin:0;display:contents}
.br-footer-form input[type="email"],
.br-footer-form input[type="text"]{flex:1;min-width:0;padding:13px 14px;font-size:13px;background:transparent;border:0;border-radius:0;color:#fff;font-family:inherit}
.br-footer-form input::placeholder{color:rgba(255,255,255,.35)}
.br-footer-form input[type="submit"],
.br-footer-form button[type="submit"]{padding:13px 16px;background:#fff;color:#000;font-weight:700;font-size:12px;letter-spacing:.1em;border:0;border-radius:0;cursor:pointer;flex:none;text-transform:uppercase}
.br-footer-form input[type="submit"]:hover,
.br-footer-form button[type="submit"]:hover{background:#22F0FF}

/* Ticker strip */
.br-ticker{height:30px;overflow:hidden;border-top:1px solid rgba(255,255,255,.07);background:#0a0a0e}
.br-ticker-half{flex:none;width:auto;display:flex;align-items:center;gap:34px;height:30px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.5);white-space:nowrap;padding-left:32px}
.br-ticker-sep-m{color:#FF2ED3}
.br-ticker-sep-c{color:#22F0FF}

/* Mobile header. Every override here is scoped to .br-sticky-header on purpose.
   The desktop rules above are two classes deep (they have to be, to beat
   Elementor's .elementor-kit-366 a), and the .br-sticky-header button reset is
   .br-sticky-header + button. A bare .br-nav-toggle or .br-search-toggle rule is
   only one class and loses to both, which is what left the burger borderless and
   the search pill stuck at its 210px desktop width. Match the depth and they win. */
@media (max-width:1000px){
  .br-sticky-header .br-header-row{gap:10px;flex-wrap:wrap}
  .br-sticky-header .br-wordmark{font-size:30px}

  /* The panel is absolutely positioned under the header rather than being a
     flex child of the row. As a flex child it changed the header's height on
     open, which shifted the whole bar. Now opening it costs zero layout. */
  .br-sticky-header{position:sticky}
  .br-sticky-header .br-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0a0a0e;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 24px 48px rgba(0,0,0,.55);padding:6px clamp(14px,3vw,32px) 14px;z-index:60}
  body.br-nav-open .br-sticky-header .br-nav{display:block}
  .br-sticky-header .br-nav-list{display:flex!important;flex-direction:column!important;gap:0!important;width:100%;max-height:calc(100vh - 150px);overflow-y:auto;border-top:1px solid rgba(255,255,255,.1);margin-top:12px;text-transform:none;letter-spacing:normal}

  .br-sticky-header .br-nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:46px;height:46px;flex:none;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:0;background:transparent;cursor:pointer}
  .br-sticky-header .br-nav-toggle span{display:block;width:18px;height:2px;background:#fff;margin:0}
  .br-sticky-header .br-nav-toggle[aria-expanded="true"]{border-color:#22F0FF}

  .br-sticky-header .br-search-toggle{flex:0 1 46px;min-width:46px;padding:12px 0}
  .br-sticky-header .br-search-hint{display:none}
  .br-sticky-header .br-cart-toggle{padding:11px 12px}
  .br-sticky-header .br-cart-label{display:none}

  /* Ticker stays put: the panel now overlays it instead of displacing it.
     Hiding it here is what made the header change height and the bar jump. */
  .br-sticky-header .br-nav-list{margin-top:0;border-top:0}
}


/* Homepage 'Join the drop list' band: real MC4WP form, artboard field + cyan JOIN */
.br-prefooter-form{flex:1 1 340px;max-width:420px}
.br-prefooter-form form{border-color:rgba(255,255,255,.24);background:#08080c}
.br-prefooter-form input[type="email"]{padding:17px 16px;font-size:14px}
.br-prefooter-form input[type="submit"],.br-prefooter-form button[type="submit"]{padding:17px 22px;background:#22F0FF;font-size:13px;white-space:nowrap}
.br-prefooter-form input[type="submit"]:hover,.br-prefooter-form button[type="submit"]:hover{background:#fff}


/* PDP long description + FAQ inside the accordion */
.br-pdp-acc-body p{margin:0 0 12px}
.br-pdp-acc .br-pdp-acc-body h3{font-family:'League Spartan',sans-serif;font-size:15px;font-weight:700;letter-spacing:.02em;color:#fff;margin:20px 0 8px}
.br-pdp-acc .br-pdp-acc-body h3:first-child{margin-top:0}
.br-pdp-acc-body ul{margin:0 0 12px;padding-left:18px}
.br-pdp-acc-body li{margin:0 0 6px}
.br-pdp-acc-body a{color:#22F0FF}
.br-pdp-acc .br-pdp-faq h3{font-family:inherit;font-size:15px;font-weight:600}

/* MC4WP label kept for screen readers, hidden visually per the artboard */
.br-footer-form label{display:contents;font-size:0;color:transparent}
.br-footer-form .mc4wp-form-fields{display:flex;flex:1;min-width:0;align-items:stretch}
.br-footer-form .mc4wp-response:empty{display:none}