/*
Theme Name: Bandeja
Theme URI: https://www.bandeja-paddle.com
Description: Court-blue glassmorphism child theme for Storefront. Padel equipment & apparel. RTL-first (Hebrew), with English, French and Russian support.
Author: Bandeja
Version: 1.9.2
Template: storefront
License: GNU General Public License v2 or later
Text Domain: bandeja
Tags: e-commerce, rtl-language-support, translation-ready, custom-colors
*/

/* ============================================================
   Storefront overrides — makes Woo's own pages match the design.
   The full design system lives in assets/css/bandeja.css
   ============================================================ */

/* --- the deep-court canvas ---
   Dark navy base with a cool light-pool top-right, a cyan lift bottom-left,
   and a whisper of optic-yellow in the middle so the accent colour feels
   like it belongs. Declared here (loads after bandeja.css) so it beats
   Storefront's white body.                                              */
html { background: #050D18; }

body,
body.woocommerce-page,
body.woocommerce,
body.bandeja {
  background:
    /* top-right cool light pool */
    radial-gradient(1200px 780px at 84% -14%, rgba(58,132,214,.34), transparent 60%),
    /* bottom-left cyan lift */
    radial-gradient(1000px 680px at 4% 106%, rgba(30,96,168,.30), transparent 62%),
    /* faint optic-yellow warmth through the middle */
    radial-gradient(820px 560px at 48% 46%, rgba(233,255,84,.05), transparent 68%),
    /* deep vertical base */
    linear-gradient(175deg,
      #0B1A2E 0%,
      #0D2340 34%,
      #0A1B31 68%,
      #060F1C 100%) !important;
  background-attachment: fixed !important;
  color: var(--chalk, #F4F8FC);
  min-height: 100vh;
}

/* vignette — darkens the outer edges so content floats forward */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 42%, rgba(3,8,16,.62) 100%);
}

/* faint court-line motif over the gradient */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.9) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 200px 200px;
}

/* --- kill Storefront's default chrome (but NOT the body background) --- */
.site-header,
.storefront-breadcrumb,
.site-footer,
.site-content {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Storefront paints several inner wrappers white — clear them too */
.site,
#page,
.col-full,
.content-area,
#primary,
#secondary,
.woocommerce-products-header {
  background: transparent !important;
}

/* --- header as a glass bar ---
   NOTE: deliberately NOT sticky. A sticky header sits on top of the
   document flow, so it covered the breadcrumb and page titles no matter
   how much padding was added below it. Static keeps it in flow. */
.site-header {
  position: relative;
  z-index: 500;
  padding: 14px 0 !important;
  background: rgba(255,255,255,.10) !important;
  border-bottom: 1px solid var(--glass-edge) !important;
  backdrop-filter: blur(30px) saturate(185%);
  -webkit-backdrop-filter: blur(30px) saturate(185%);
}
.site-header .site-title a,
.site-header .site-branding a {
  color: var(--chalk) !important;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-header .site-description { color: var(--mist) !important; }

/* nav links */
.main-navigation ul li a,
.secondary-navigation ul li a,
.site-header-cart .cart-contents {
  color: var(--chalk) !important;
  font-weight: 600;
}
.main-navigation ul li a:hover,
.site-header-cart .cart-contents:hover { color: var(--ball) !important; }

/* nav dropdowns as glass */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  overflow: hidden;
}

/* cart bubble in the header */
.site-header-cart .cart-contents .count,
.bandeja-cart-count {
  background: var(--ball);
  color: var(--night);
  font-weight: 800;
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 12px;
}

/* ============================================================
   STOREFRONT LAYOUT INTEGRATION
   Storefront wraps content in .col-full (a max-width container).
   The hero needs to break out of it and run full-bleed.
   ============================================================ */

#content.site-content { padding-top: 0; }
#content .col-full { max-width: 100%; padding-left: 0; padding-right: 0; }

.bandeja-home-wrap { width: 100%; }

/* The hero is already full-bleed because #content .col-full is 100% wide
   above. The old 100vw / -50vw trick caused horizontal overflow, which
   forced overflow-x:hidden on body, which broke position:sticky. */
.bandeja-home-wrap .hero {
  width: 100%;
  max-width: 100%;
  position: relative;
}
/* No overflow rules on the hero's ancestors: any scroll container in
   that chain disables position:sticky. Nothing here is wider than the
   viewport, so none is needed. */

/* inner sections keep a readable max width */
.bandeja-home-wrap .wrap { max-width: 1240px; margin-inline: auto; padding-inline: 22px; }
.bandeja-home-wrap .sect { padding: clamp(60px, 9vw, 110px) 0; }

/* Woo shortcode grids sit inside .wrap already, just clear stray margins */
.bandeja-home-wrap .woocommerce { margin: 0; }
.bandeja-home-wrap .woocommerce ul.products { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bandeja-home-wrap .woocommerce ul.products::before,
.bandeja-home-wrap .woocommerce ul.products::after { display: none; }
.bandeja-home-wrap .woocommerce ul.products li.product { width: 100%; margin: 0; float: none; clear: none; }

@media (max-width: 1020px) {
  .bandeja-home-wrap .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bandeja-home-wrap .woocommerce ul.products { grid-template-columns: 1fr; }
}


/* search box in the header */
.site-search .widget_product_search input[type="search"] {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 99px !important;
  color: var(--chalk) !important;
  padding: 11px 18px !important;
}

/* footer */
.site-footer {
  background: rgba(255,255,255,.07) !important;
  border-top: 1px solid var(--glass-edge) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--mist) !important;
  margin-top: 60px;
}
.site-footer a:not(.button) { color: var(--chalk) !important; }
.site-footer a:not(.button):hover { color: var(--ball) !important; }

/* handheld footer bar (mobile bottom bar) — fully dark, no white flash */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul,
.storefront-handheld-footer-bar ul li,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li > a span {
  background-color: #0A1729 !important;
  background-image: none !important;
}
.storefront-handheld-footer-bar {
  border-top: 1px solid var(--glass-edge) !important;
  box-shadow: 0 -8px 30px rgba(2,8,18,.5) !important;
}
.storefront-handheld-footer-bar ul li { border-color: var(--glass-edge) !important; }
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li > a::before {
  color: var(--chalk) !important;
}
.storefront-handheld-footer-bar ul li.cart .count {
  background-color: var(--ball) !important;
  color: var(--night) !important;
  border-color: var(--ball) !important;
}
/* the search dropdown the bar opens */
.storefront-handheld-footer-bar .search-content,
.storefront-handheld-footer-bar .widget_product_search {
  background: #0A1729 !important;
}

/* menu toggle (mobile) */
button.menu-toggle,
button.menu-toggle:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--glass-edge) !important;
  color: var(--chalk) !important;
}
button.menu-toggle:before,
button.menu-toggle:after,
button.menu-toggle span:before { background-color: var(--chalk) !important; }

/* generic links */
a { color: var(--ball); }
a:hover { color: var(--ball-deep); }

/* --- typography --- */
body,
button, input, select, textarea,
.site-title, h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
}
h1, h2, h3 { color: var(--chalk); font-weight: 800; letter-spacing: -.02em; }
p, li, td, th, label { color: var(--mist); }

/* --- Woo product loop as glass cards --- */
ul.products li.product {
  background: linear-gradient(150deg, rgba(255,255,255,.20), rgba(255,255,255,.07) 46%, rgba(255,255,255,.12));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  backdrop-filter: blur(38px) saturate(190%);
  -webkit-backdrop-filter: blur(38px) saturate(190%);
  box-shadow: var(--glass-shadow);
  padding: 0 0 20px;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: rgba(233,255,84,.35);
}
/* Product image sits in a fixed square "well", centred, never stretched.
   object-fit: contain keeps the whole product visible whatever its
   aspect ratio; the light panel behind it gives shop photos on white
   backgrounds a clean edge. */
ul.products li.product a img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center;
  margin: 0 0 16px;
  padding: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border-bottom: 1px solid var(--glass-edge);
  border-radius: 0;
  box-sizing: border-box;
}

/* centre the text block under the image too */
ul.products li.product {
  text-align: center;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px !important;
  font-weight: 700;
  color: var(--chalk);
  padding: 0 20px;
}
ul.products li.product .price {
  display: block;
  padding: 0 20px;
  color: var(--ball) !important;
  font-weight: 800;
  font-size: 20px;
}
ul.products li.product .price del { color: var(--mist) !important; font-weight: 500; font-size: 15px; }
ul.products li.product .price ins { text-decoration: none; }

/* sale flash */
span.onsale {
  background: var(--ball) !important;
  color: var(--night) !important;
  font-weight: 800;
  border-radius: 99px;
  padding: 5px 14px;
  min-height: 0;
  min-width: 0;
  line-height: 1.6;
  top: 14px;
  inset-inline-start: 14px;
  inset-inline-end: auto;
}

/* --- buttons --- */
.button,
button.button,
input.button,
a.button,
.woocommerce-message .button,
button[type="submit"] {
  background: var(--ball) !important;
  color: var(--night) !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
  padding: 13px 26px !important;
  border: 0 !important;
  box-shadow: 0 8px 30px rgba(233,255,84,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.button:hover,
button.button:hover,
a.button:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(233,255,84,.4);
}
.button.alt { background: var(--ball) !important; }

/* --- single product --- */
.single-product div.product .product_title { font-size: 38px; }
.single-product div.product .price { color: var(--ball); font-weight: 800; }
.single-product div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs .panel {
  background: var(--glass) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: var(--r-md) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.woocommerce-tabs ul.tabs li a { color: var(--mist) !important; font-weight: 700; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ball) !important; }

/* --- cart / checkout / account: glass panels --- */
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-order,
#customer_details,
#order_review {
  background: linear-gradient(150deg, rgba(255,255,255,.18), rgba(255,255,255,.06) 46%, rgba(255,255,255,.11));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  backdrop-filter: blur(34px) saturate(185%);
  -webkit-backdrop-filter: blur(34px) saturate(185%);
  box-shadow: var(--glass-shadow);
  padding: 26px 28px;
  margin-bottom: 26px;
}

table.shop_table,
table.shop_table td,
table.shop_table th,
table.cart td,
table.cart th {
  background: transparent !important;
  border-color: var(--glass-edge) !important;
  color: var(--chalk);
}
table.shop_table th { color: var(--mist); font-weight: 700; }

/* form fields as inset glass */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 14px !important;
  color: var(--chalk) !important;
  padding: 13px 16px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none !important;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ball) !important;
  background: rgba(255,255,255,.15) !important;
  outline: none;
}
::placeholder { color: rgba(244,248,252,.45); }
.woocommerce form .form-row label { color: var(--mist); font-weight: 600; }

/* payment box (Tranzila / Bit radio list) */
#payment,
.woocommerce-checkout #payment {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
#payment div.payment_box {
  background: rgba(255,255,255,.10) !important;
  border-radius: 14px;
  color: var(--mist);
}
#payment div.payment_box::before { border-bottom-color: rgba(255,255,255,.10) !important; }
#payment ul.payment_methods li { border-color: var(--glass-edge) !important; }
#payment ul.payment_methods label { color: var(--chalk); font-weight: 700; }

/* notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: rgba(255,255,255,.12) !important;
  border-top: 3px solid var(--ball) !important;
  border-radius: var(--r-sm);
  color: var(--chalk) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.woocommerce-error { border-top-color: #FF6B6B !important; }

/* quantity stepper */
.quantity .qty {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 10px !important;
  color: var(--chalk) !important;
}

/* pagination + sorting */
.woocommerce-ordering select,
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
  background: var(--glass) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 99px !important;
  color: var(--chalk) !important;
}
.woocommerce-pagination .page-numbers li .current {
  background: var(--ball) !important;
  color: var(--night) !important;
  font-weight: 800;
}

/* --- RTL polish (Hebrew default) --- */
body.rtl ul.products li.product .woocommerce-loop-product__title,
body.rtl ul.products li.product .price { text-align: right; }
body.rtl .woocommerce-breadcrumb { text-align: right; }

/* --- responsive --- */
@media (max-width: 860px) {
  .woocommerce-cart-form,
  .cart_totals,
  #customer_details,
  #order_review,
  .woocommerce-MyAccount-content { padding: 20px 18px; }
  .single-product div.product .product_title { font-size: 28px; }
}

/* ============================================================
   FAILSAFE — content must be visible even if JS never runs.
   .rv starts at opacity:0 in bandeja.css and waits for JS to add .in.
   If the script is blocked, cached badly, or errors, the page looks
   empty. So: only hide .rv when JS has marked the document ready.
   ============================================================ */
.rv { opacity: 1 !important; transform: none !important; }
html.bandeja-js-ready .rv { opacity: 0 !important; transform: translateY(26px) !important; }
html.bandeja-js-ready .rv.in { opacity: 1 !important; transform: none !important; }

/* The hero must have height even before Three.js initialises.
   Its exact height is set in the HERO block further down. */
#hero3d { display: block; width: 100%; height: 100%; }

/* Hero copy is above the canvas and always visible. */
.bandeja-home-wrap .hero-copy { opacity: 1 !important; }


/* ============================================================
   COLLISION GUARDS
   bandeja.css came from a standalone prototype whose class names
   overlap with WordPress/Storefront. Re-assert sane values for the
   ones that matter outside our homepage wrapper.
   ============================================================ */

/* WordPress adds .page to <body> on every static page. The prototype used
   .page for JS-toggled screens with display:none — make sure nothing on a
   real WP page is hidden by a stray rule. */
/* Guard against the prototype's old `.page{display:none}` rule.
   NOTE: .col-full must NOT be forced to display:block here — its
   specificity (0,2,1) outranks .site-header > .col-full (0,2,0) and
   silently collapsed the header into a vertical stack. */
body.page #page,
body.page .site-content { display: block !important; }

/* Storefront uses .price inside product loops; let its own sizing apply
   outside our homepage. */
.woocommerce ul.products li.product .price { font-size: 20px; }

/* Storefront's .col-full is a layout container, not the prototype's .wrap */
.col-full { max-width: 1240px; margin-inline: auto; }


/* ============================================================
   HERO LAYERING + HEADER POLISH
   ============================================================ */

/* canvas sits behind, copy in front */
#hero3d { position: absolute; inset: 0; z-index: 0; }
.bandeja-home-wrap .hero-copy { position: relative; z-index: 3; }
.bandeja-home-wrap .hero-hint  { z-index: 3; }

/* readability over the 3D model */
.bandeja-home-wrap .hero-title {
  text-shadow: 0 6px 40px rgba(2,8,18,.9), 0 2px 12px rgba(2,8,18,.7);
}
.bandeja-home-wrap .hero-sub {
  text-shadow: 0 2px 18px rgba(2,8,18,.85);
  background: rgba(6,16,30,.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 10px 18px;
  display: inline-block;
}
.bandeja-home-wrap .hero-eyebrow {
  background: rgba(6,16,30,.62) !important;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

/* ---- header: real glass, not solid blue ---- */
.site-header {
  background: rgba(8,20,38,.62) !important;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

/* ---- search field ---- */
.site-search .widget_product_search form { position: relative; }
.site-search .widget_product_search input[type="search"],
.woocommerce-product-search .search-field {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 99px !important;
  color: #F4F8FC !important;
  padding: 12px 20px !important;
  width: 100%;
}
.site-search .widget_product_search input[type="search"]::placeholder {
  color: rgba(244,248,252,.6);
}
/* Storefront draws a magnifier via :before — remove it, it overlaps the text */
.widget_product_search form:before,
.widget_search form:before { display: none !important; }
/* hide the duplicate submit button Storefront renders */
.site-search .widget_product_search button[type="submit"] {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* cart total in header */
.site-header-cart .cart-contents .woocommerce-Price-amount { color: #F4F8FC; font-weight: 700; }
.site-header-cart .cart-contents .count {
  background: var(--ball);
  color: var(--night);
  font-weight: 800;
  border-radius: 99px;
  padding: 3px 10px;
  margin-inline-start: 8px;
}

/* ---- footer: give it presence even when empty ---- */
.site-footer {
  background: rgba(255,255,255,.06) !important;
  border-top: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding-top: 40px !important;
  padding-bottom: 30px !important;
}
.site-footer .widget-title,
.site-footer h3 { color: #F4F8FC !important; font-weight: 800; }
.site-footer,
.site-footer p,
.site-footer li { color: rgba(244,248,252,.74) !important; }

/* footer fallback columns */
.bandeja-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 0 clamp(20px, 5vw, 40px) 30px;
  max-width: 1240px;
  margin: 0 auto;
}
.bandeja-footer-col h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: #E9FF54 !important;
}
.bandeja-footer-col ul { list-style: none; margin: 0; padding: 0; }
.bandeja-footer-col li { margin-bottom: 9px; font-size: 14.5px; }
.bandeja-footer-col a { color: rgba(244,248,252,.8) !important; text-decoration: none; }
.bandeja-footer-col a:hover { color: #E9FF54 !important; }
.bandeja-footer-col p { font-size: 14.5px; line-height: 1.7; }

@media (max-width: 860px) {
  .bandeja-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .bandeja-footer-cols {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 0 22px 26px;
    text-align: left;
  }
  .bandeja-footer-col { padding: 0; }
}

/* ============================================================
   BREADCRUMB SPACING
   The sticky header overlaps the breadcrumb on inner pages
   (Cart, Shop, Checkout...). Push the content area clear of it.
   ============================================================ */


.storefront-breadcrumb {
  margin-top: 0;
  margin-bottom: 26px;
  padding: 16px 0 0;
  font-size: 14.5px;
}
.woocommerce-breadcrumb,
.storefront-breadcrumb .woocommerce-breadcrumb {
  color: rgba(244,248,252,.62) !important;
  line-height: 1.8;
}
.woocommerce-breadcrumb a {
  color: rgba(244,248,252,.85) !important;
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover { color: #E9FF54 !important; }

/* page titles on inner pages */
.woocommerce-products-header,
.entry-header { padding-top: 6px; }
.woocommerce-products-header__title,
.entry-title {
  color: #F4F8FC !important;
  font-weight: 900;
  letter-spacing: -.01em;
}

/* modest breathing room under the header on inner pages */
body:not(.bandeja-home) #content.site-content { padding-top: 26px; }

/* ============================================================
   PRODUCT CARD LAYOUT
   Equal-height cards with the button pinned to the bottom, so
   rows line up even when titles wrap to different lengths.
   ============================================================ */

.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { display: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
}

/* push the add-to-cart button to the card's bottom edge */
ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin-top: auto;
  align-self: center;
  margin-inline: 20px;
}

ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.6em;      /* keeps 1- and 2-line titles aligned */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

ul.products li.product .price { margin-bottom: 16px; }

/* star ratings, if enabled */
ul.products li.product .star-rating {
  margin: 0 auto 10px;
  float: none;
}

/* responsive columns */
@media (max-width: 1200px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); }
  ul.products li.product a img { height: 210px; }
}
@media (max-width: 520px) {
  .woocommerce ul.products, ul.products { grid-template-columns: 1fr; }
  ul.products li.product a img { height: 240px; }
}

/* ============================================================
   SHOP TOOLBAR (sorting select + result count)
   ============================================================ */

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering { margin-bottom: 26px; }

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255,255,255,.12) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23F4F8FC' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 99px !important;
  color: #F4F8FC !important;
  padding: 11px 42px 11px 18px !important;
  font-weight: 600;
  cursor: pointer;
}
body.rtl .woocommerce .woocommerce-ordering select {
  background-position: left 16px center;
  padding: 11px 18px 11px 42px !important;
}
/* dropdown list items render with the OS palette; force readable colours */
.woocommerce .woocommerce-ordering select option {
  background: #0B1A2E;
  color: #F4F8FC;
}

.woocommerce-result-count {
  color: rgba(244,248,252,.72) !important;
  padding-top: 12px;
}

/* ============================================================
   HEADER ROW — branding (left) · language pill (centre) · search (right)
   A three-column grid with explicit column assignments. Verified in
   Chrome: pill centres on the viewport, search aligns to the right
   edge, all three share one row.
   ============================================================ */

body .site-header > .col-full {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body .site-header .site-branding {
  float: none !important; width: auto !important; margin: 0 !important;
}
body .site-header .site-search {
  float: none !important; clear: none !important; margin: 0 !important;
  width: 240px !important; max-width: 40vw;
}
.site-header .storefront-primary-navigation { flex: 1 0 100%; }

/* skip-links are screen-reader anchors; keep them out of the flex row so
   they don't affect logo/search spacing */
.site-header .col-full > .skip-link { position: absolute; }

.site-header .site-title,
.site-header .site-branding h1 {
  font-size: clamp(19px, 2.1vw, 26px) !important;
  margin: 0 !important;
  line-height: 1.1;
  white-space: nowrap;
}

/* ============================================================
   HERO — dark stage treatment

   IMPORTANT: the hero is exactly ONE viewport tall and uses normal
   flow — no position:sticky and no scroll runway.

   Sticky was tried twice and failed on the live site: any ancestor
   that is a scroll container disables it, and Storefront's own CSS
   is outside our control. When sticky silently fails, the leftover
   runway shows up as a large empty band under the hero. Removing the
   runway makes that impossible by construction.
   ============================================================ */

.bandeja-home-wrap .hero {
  position: relative;
  height: 100vh;
  height: 100svh;          /* avoids mobile address-bar jump where supported */
  min-height: 480px;
  max-height: 1100px;
  overflow: hidden;
  isolation: isolate;
}
.bandeja-home-wrap .hero-sticky {
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bandeja-home-wrap .hero-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 44%, rgba(74,155,232,.20), transparent 70%),
    radial-gradient(38% 30% at 50% 78%, rgba(233,255,84,.09), transparent 72%);
}

/* vignette in front of the canvas but behind the copy */
.bandeja-home-wrap .hero-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 92% at 50% 46%, transparent 40%, rgba(3,8,16,.78) 100%);
}

#hero3d { position: absolute; inset: 0; z-index: 0; cursor: grab; touch-action: pan-y; }
#hero3d:active { cursor: grabbing; }

.bandeja-home-wrap .hero-copy { position: relative; z-index: 3; text-align: center; }
.bandeja-home-wrap .hero-hint { z-index: 3; }

/* headline */
.bandeja-home-wrap .hero-title {
  font-size: clamp(46px, 9vw, 120px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.035em;
  color: #F4F8FC;
  text-shadow: 0 10px 60px rgba(2,8,18,.92), 0 2px 16px rgba(2,8,18,.8);
}
.bandeja-home-wrap .hero-title .glow {
  color: #E9FF54;
  text-shadow: 0 0 46px rgba(233,255,84,.55), 0 0 14px rgba(233,255,84,.4), 0 8px 40px rgba(2,8,18,.8);
}

.bandeja-home-wrap .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(244,248,252,.9);
  padding: 9px 20px;
  border-radius: 99px;
  margin-bottom: 26px;
  background: rgba(6,16,30,.6) !important;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}
.bandeja-home-wrap .hero-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E9FF54;
  box-shadow: 0 0 12px #E9FF54;
  display: inline-block;
}

.bandeja-home-wrap .hero-sub {
  margin-top: 24px;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.65;
  max-width: 590px;
  margin-inline: auto;
  color: rgba(244,248,252,.84);
  text-shadow: 0 2px 20px rgba(2,8,18,.9);
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 18px;
  display: block;
}

.bandeja-home-wrap .hero-cta {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  pointer-events: auto;
}

/* scroll hint */
.bandeja-home-wrap .hero-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.bandeja-home-wrap .drag-pill {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,248,252,.72);
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(6,16,30,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  white-space: nowrap;
}
.bandeja-home-wrap .wheel {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 99px;
  position: relative;
  display: inline-block;
}
.bandeja-home-wrap .wheel::after {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 3px; height: 7px;
  border-radius: 2px;
  background: #E9FF54;
  transform: translateX(-50%);
  animation: bandejaWheel 1.7s var(--ease) infinite;
}
@keyframes bandejaWheel {
  0%   { opacity: 0; transform: translate(-50%, -4px); }
  40%  { opacity: 1; transform: translate(-50%, 3px); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .bandeja-home-wrap .wheel::after { animation: none; }
}

@media (max-width: 768px) {
  .bandeja-home-wrap .drag-pill { display: none; }
}

/* ============================================================
   LEGAL PAGES (Terms & Conditions, Privacy Policy)
   ============================================================ */

.bandeja-legal { padding: 20px 0 90px; }
.bandeja-legal .wrap { max-width: 900px; margin-inline: auto; padding-inline: 22px; }

.bandeja-legal .legal-head { text-align: center; margin-bottom: 34px; }
.bandeja-legal .legal-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #E9FF54;
  background: rgba(233,255,84,.10);
  border: 1px solid rgba(233,255,84,.28);
  padding: 6px 16px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.bandeja-legal h1 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: -.025em;
  color: #F4F8FC;
  line-height: 1.05;
}
.bandeja-legal .legal-meta {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(244,248,252,.6);
}

/* the "draft for review" banner */
.bandeja-legal .legal-note {
  padding: 18px 22px;
  border-radius: var(--r-md);
  border-inline-start: 3px solid #E9FF54;
  margin-bottom: 26px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(244,248,252,.82);
}
.bandeja-legal .legal-note strong { color: #E9FF54; }

/* the document body */
.bandeja-legal .legal-body {
  padding: clamp(26px, 4vw, 52px);
  border-radius: var(--r-lg);
}
.bandeja-legal .legal-body section { margin-bottom: 34px; }
.bandeja-legal .legal-body section:last-child { margin-bottom: 0; }

.bandeja-legal .legal-body h2 {
  font-size: 19px;
  font-weight: 800;
  color: #F4F8FC;
  margin-bottom: 12px;
  letter-spacing: -.01em;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.bandeja-legal .legal-body p,
.bandeja-legal .legal-body li {
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(244,248,252,.78);
}
.bandeja-legal .legal-body p + p { margin-top: 12px; }
.bandeja-legal .legal-body ul {
  margin: 12px 0 0;
  padding-inline-start: 22px;
  list-style: disc;
}
.bandeja-legal .legal-body li { margin-bottom: 9px; }
.bandeja-legal .legal-body li strong { color: rgba(244,248,252,.95); }
.bandeja-legal .legal-body a { color: #E9FF54; }

/* highlighted placeholders still to be filled in */
.bandeja-legal .ph {
  background: rgba(233,255,84,.14);
  border: 1px dashed rgba(233,255,84,.5);
  color: #E9FF54;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: .93em;
  font-weight: 600;
  white-space: nowrap;
}

/* anything typed in the page editor, appended below the boilerplate */
.bandeja-legal .legal-extra {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.14);
}

@media (max-width: 640px) {
  .bandeja-legal .legal-body h2 { font-size: 17px; }
  .bandeja-legal .legal-body p,
  .bandeja-legal .legal-body li { font-size: 15px; }
  .bandeja-legal .ph { white-space: normal; }
}

/* ============================================================
   WISHLIST
   ============================================================ */

/* --- heart button on product cards --- */
.woocommerce ul.products li.product,
ul.products li.product { position: relative; }

.bandeja-wish-btn {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 50% !important;
  background: rgba(8,20,38,.55) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: none !important;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.bandeja-wish-btn svg {
  fill: none;
  stroke: rgba(244,248,252,.8);
  stroke-width: 1.7;
  transition: fill .22s var(--ease), stroke .22s var(--ease);
}
.bandeja-wish-btn:hover {
  transform: scale(1.09) !important;
  background: rgba(8,20,38,.75) !important;
  border-color: rgba(233,255,84,.5) !important;
}
.bandeja-wish-btn.is-on {
  background: rgba(233,255,84,.16) !important;
  border-color: rgba(233,255,84,.6) !important;
}
.bandeja-wish-btn.is-on svg {
  fill: #E9FF54;
  stroke: #E9FF54;
}

/* on the single product page it sits inline under the price */
.single-product .bandeja-wish-btn {
  position: static;
  width: auto;
  height: 42px;
  border-radius: 99px !important;
  padding: 0 20px !important;
  gap: 9px;
  margin-top: 6px;
}

/* --- count badge on the Wishlist nav link --- */
.bandeja-wish-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  margin-inline-start: 7px;
  border-radius: 99px;
  background: #E9FF54;
  color: #0A1729;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

/* --- wishlist page --- */
.bandeja-wishlist-page { padding: 20px 0 90px; }
.bandeja-wishlist-page .wrap { max-width: 1240px; margin-inline: auto; padding-inline: 22px; }

.bandeja-wishlist-page .wish-head { text-align: center; margin-bottom: 40px; }
.bandeja-wishlist-page h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 900;
  letter-spacing: -.025em;
  color: #F4F8FC;
  line-height: 1.06;
}
.bandeja-wishlist-page .wish-sub {
  margin-top: 13px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(244,248,252,.7);
  max-width: 540px;
  margin-inline: auto;
}

.bandeja-wishlist-page .wish-empty {
  text-align: center;
  padding: clamp(38px, 6vw, 70px) 30px;
  border-radius: var(--r-lg);
}
.bandeja-wishlist-page .wish-empty-icon {
  color: rgba(233,255,84,.45);
  margin-bottom: 18px;
}
.bandeja-wishlist-page .wish-empty h3 {
  font-size: 21px;
  font-weight: 800;
  color: #F4F8FC;
  margin-bottom: 10px;
}
.bandeja-wishlist-page .wish-empty p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(244,248,252,.7);
  max-width: 420px;
  margin-inline: auto;
}

.bandeja-wish-loading {
  text-align: center;
  padding: 60px 20px;
  color: rgba(244,248,252,.6);
  font-size: 15px;
}

.bandeja-wishlist-page .wish-note {
  margin-top: 34px;
  text-align: center;
  font-size: 13px;
  color: rgba(244,248,252,.45);
}
.bandeja-wishlist-page .wish-extra {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* --- toasts --- */
.bandeja-toasts {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.bandeja-toast {
  padding: 12px 22px;
  border-radius: 99px;
  background: rgba(8,20,38,.9);
  border: 1px solid rgba(233,255,84,.35);
  color: #F4F8FC;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 14px 40px rgba(2,8,18,.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.bandeja-toast.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   GTRANSLATE FLOATING SELECTOR
   The theme no longer renders a switcher. You enable GTranslate's
   own "floating language selector" and it places itself at a corner
   of the screen. These rules only make it match the site's look —
   they do not position or duplicate it.
   ============================================================ */

.gt_float_switcher {
  font-family: 'Rubik', system-ui, sans-serif !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 40px rgba(2,8,18,.5) !important;
}
.gt_float_switcher .gt-selected {
  background: rgba(8,20,38,.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.gt_float_switcher .gt-selected .gt-current-lang { color: #F4F8FC !important; }
.gt_float_switcher .gt-selected .gt-current-lang span { color: #F4F8FC !important; }
.gt_float_switcher img { border-radius: 3px; }
.gt_float_switcher .gt_options {
  background: rgba(8,20,38,.97) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.gt_float_switcher .gt_options a { color: rgba(244,248,252,.86) !important; }
.gt_float_switcher .gt_options a:hover {
  background: rgba(233,255,84,.15) !important;
  color: #E9FF54 !important;
}

/* ============================================================
   LANGUAGE PILL — centred in Storefront's header
   Storefront's header is float-based; .site-header is position:relative
   (verified from storefront style.css). So we absolutely-position the
   pill at the horizontal centre of the header, on the branding row.
   ============================================================ */

.site-header { position: relative; }

.bandeja-lang-pill {
  position: absolute;
  /* vertical-centre the pill on the header's control row. Storefront pads
     the header ~2.6em top; the search input centre sits ~45px down. We use
     top:50% of the branding row height via a fixed offset that matches the
     search pill, then fine-tune with translateY. */
  top: 1.15em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 99px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 26px rgba(2,8,18,.4);
  white-space: nowrap;
  max-width: 320px;
}
.bandeja-lang-pill:empty { display: none; }

/* --- one switcher only ---
   The JS relocates GTranslate's real switcher into the pill and adds
   .is-filled. Only THEN do we hide stray copies elsewhere, so we never
   hide the switcher before it has been moved (which would leave nothing
   visible if the script is slow). */
.bandeja-lang-pill.is-filled ~ * .gt_float_switcher,
html .bandeja-lang-pill.is-filled ~ * .gtranslate_wrapper { /* scoped below */ }

/* once the pill is filled, hide any GTranslate switcher that is NOT in it */
body:has(.bandeja-lang-pill.is-filled) .gt_float_switcher:not(.bandeja-lang-pill *),
body:has(.bandeja-lang-pill.is-filled) .gtranslate_wrapper:not(.bandeja-lang-pill):not(.bandeja-lang-pill *) {
  display: none !important;
}

/* Fallback for browsers without :has() — hide known stray locations. These
   are safe because the pill's own switcher lives inside .bandeja-lang-pill,
   never directly in these containers. */
.bandeja-home-wrap > .gtranslate_wrapper,
.bandeja-home-wrap > .gt_float_switcher,
#content > .col-full > .gtranslate_wrapper,
#colophon .gtranslate_wrapper,
.widget > .gtranslate_wrapper,
body > .gt_float_switcher {
  display: none !important;
}

/* --- style whatever GTranslate renders INSIDE the pill --- */
.bandeja-lang-pill .gtranslate_wrapper,
.bandeja-lang-pill .gt_switcher,
.bandeja-lang-pill .gt_float_switcher {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: 'Rubik', sans-serif !important;
}
/* flags */
.bandeja-lang-pill a { line-height: 0; text-decoration: none !important; opacity: .82; transition: opacity .2s ease; }
.bandeja-lang-pill a:hover { opacity: 1; }
.bandeja-lang-pill img {
  display: inline-block; vertical-align: middle; margin: 0 !important;
  max-height: 20px; width: auto; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(2,8,18,.5);
}
/* dropdown-style select */
.bandeja-lang-pill select,
.bandeja-lang-pill .gt_selector {
  -webkit-appearance: none; appearance: none;
  background: transparent !important; border: 0 !important;
  color: #F4F8FC !important; font-family: 'Rubik', sans-serif !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  padding: 0 18px 0 0 !important; margin: 0 !important; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='%23E9FF54' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.bandeja-lang-pill select option { background: #0B1A2E; color: #F4F8FC; }
/* nice-dropdown-with-flags: neutralise its white box, restyle its panel */
.bandeja-lang-pill .gt_float_switcher .gt-selected,
.bandeja-lang-pill .gt_float_switcher .gt-selected .gt-current-lang {
  background: transparent !important; color: #F4F8FC !important;
  padding: 0 !important; border: 0 !important;
}
.bandeja-lang-pill .gt_float_switcher .gt-current-lang span,
.bandeja-lang-pill .gt_float_switcher .gt-lang-code { color: #F4F8FC !important; }
.bandeja-lang-pill .gt_float_switcher .gt_options {
  position: absolute !important; top: calc(100% + 10px) !important;
  left: 50% !important; transform: translateX(-50%) !important;
  min-width: 172px !important;
  background: rgba(8,20,38,.97) !important;
  border: 1px solid rgba(255,255,255,.18) !important; border-radius: 14px !important;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 55px rgba(2,8,18,.65) !important; padding: 6px !important;
}
.bandeja-lang-pill .gt_float_switcher .gt_options a {
  color: rgba(244,248,252,.86) !important; padding: 9px 12px !important;
  border-radius: 9px; background: transparent !important;
}
.bandeja-lang-pill .gt_float_switcher .gt_options a:hover {
  background: rgba(233,255,84,.15) !important; color: #E9FF54 !important;
}

/* on the handheld layout the header stacks; the pill sits in normal flow,
   centred on its own line under the site name. */
@media (max-width: 767px) {
  .bandeja-lang-pill {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 12px auto 4px !important;
    display: inline-flex !important;
    width: auto;
  }
  /* centre the pill's row */
  .site-header .site-branding { text-align: center; }
  .site-header .col-full { text-align: center; }
  /* undo the desktop branding width cap so the name isn't squeezed */
  .site-header .site-branding {
    max-width: 100% !important;
  }
  .site-header .site-branding .site-title a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ============================================================
   GTRANSLATE inside the pill — force visibility.
   GTranslate ships .gt_float_switcher / .gt_options at opacity:0 and
   fades them in via JS keyed to their original position. After we move
   the switcher into the pill that fade doesn't fire, so the flag stays
   invisible (confirmed: inline style="opacity:0" on .gt_float_switcher).
   Force the moved switcher and its selected state fully visible.
   ============================================================ */

.bandeja-lang-pill .gt_float_switcher,
.bandeja-lang-pill .gt_float_switcher .gt-selected,
.bandeja-lang-pill .gt_float_switcher .gt-current-lang,
.bandeja-lang-pill .gt_container-gtwidget,
.bandeja-lang-pill [class*="gt_container-"] {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* the selected flag + code, always shown */
.bandeja-lang-pill .gt-current-lang {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: #F4F8FC !important;
  cursor: pointer;
}
.bandeja-lang-pill .gt-current-lang img {
  display: inline-block !important;
  opacity: 1 !important;
  max-height: 20px;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(2,8,18,.5);
}
.bandeja-lang-pill .gt-current-lang .gt-lang-code {
  color: #F4F8FC !important;
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
}
.bandeja-lang-pill .gt_float_switcher-arrow {
  filter: brightness(0) invert(1);
  opacity: .8;
}

/* the dropdown list: only its default (closed) state stays hidden; when
   GTranslate adds .gt-open it shows. Style it to match the site. */
.bandeja-lang-pill .gt_float_switcher .gt_options {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 172px !important;
  background: rgba(8,20,38,.97) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 20px 55px rgba(2,8,18,.65) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  z-index: 1001 !important;
}
.bandeja-lang-pill .gt_float_switcher .gt_options.gt-open {
  opacity: 1 !important;
  transform: translateX(-50%) !important;
}
.bandeja-lang-pill .gt_float_switcher .gt_options a {
  color: rgba(244,248,252,.86) !important;
  padding: 9px 12px !important;
  border-radius: 9px;
  background: transparent !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.bandeja-lang-pill .gt_float_switcher .gt_options a:hover {
  background: rgba(233,255,84,.15) !important;
  color: #E9FF54 !important;
}

/* ============================================================
   GTRANSLATE "Flags" look inside the pill (real markup).
   Confirmed structure from the live DOM:
     .gtranslate_wrapper > a.glink.nturl > img   (the flag links)
     + a hidden #google_translate_element with Google's raw
       .goog-te-combo <select> and "Google Traduction" logo.
   Show the flag links; hide Google's raw combo, logo and gadget.
   ============================================================ */

/* the flag row */
.bandeja-lang-pill .gtranslate_wrapper {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bandeja-lang-pill a.glink {
  display: inline-flex !important;
  align-items: center;
  line-height: 0 !important;
  opacity: .6;
  transition: opacity .18s ease, transform .18s ease;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bandeja-lang-pill a.glink:hover { opacity: 1; transform: translateY(-1px); }
.bandeja-lang-pill a.glink.gt-current-lang { opacity: 1; }              /* active language */
.bandeja-lang-pill a.glink img {
  display: inline-block !important;
  width: 22px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(2,8,18,.5);
  opacity: 1 !important;
}
.bandeja-lang-pill a.glink.gt-current-lang img {
  outline: 2px solid rgba(233,255,84,.7);
  outline-offset: 1px;
}

/* hide Google's raw machinery that GTranslate leaves in the wrapper */
.bandeja-lang-pill #google_translate_element,
.bandeja-lang-pill #google_translate_element2,
.bandeja-lang-pill .goog-te-combo,
.bandeja-lang-pill .goog-te-gadget,
.bandeja-lang-pill .skiptranslate,
.bandeja-lang-pill [class*="goog-te"] {
  display: none !important;
}
/* GTranslate wraps Google's logo/text in a nowrap span at the end — hide it */
.bandeja-lang-pill .gtranslate_wrapper > span,
.bandeja-lang-pill .gtranslate_wrapper > div:last-child:not([class*="gt_"]) {
  display: none !important;
}

/* ============================================================
   HEADER ROOM FOR THE LANGUAGE PILL
   Storefront gives .site-branding ~74% width, so a long site name fills
   the row and leaves no space for the centred pill. Cap the branding and
   search widths so a real gap opens in the middle for the pill.
   (Desktop only — the handheld header stacks and the pill flows normally.)
   ============================================================ */
@media (min-width: 768px) {
  .site-header .site-branding {
    max-width: 38% !important;
    width: auto !important;
  }
  .site-header .site-branding .site-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
  }
  .site-header .site-search {
    width: 240px !important;
    max-width: 26% !important;
  }
}