:root {
    --main-color: #195092;
    --brighter-color: #fff;
    --bright-color: #faf8f2;
    --dark-color: #113969;
    --darkter-color: #363636;
     --font-family: 'Poppins', sans-serif;
--footer-backcolor:  #000;
 --logo-filter:none;
--header-background-color: #000;
--top-background-color:#000;
  --bg: hsl(0 0% 0%);
--angle: 0;
--gradient: conic-gradient(from calc(180deg + var(--angle)) at 50% 70%,hsla(0,0%,98%,1) 0deg,#eec32d 72.0000010728836deg,#ec4b4b 144.0000021457672deg,#709ab9 216.00000858306885deg,#4dffbf 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);
}
#top {
  background: radial-gradient(
    ellipse 80% 60% at 50% 30%,
    #60a5fa 0%,
    #3b82f6 25%,
    #1e40af 50%,
    #0f172a 100%
  );
}
#top .header-button.menu-button.transparent-button.compact svg {
fill:#fff;
}
#menu .dropdown-menu.full-width-menu {
border-left: none!Important;
}
.product-container video {
    max-height: 500px!Important;
}
.menu-button-container svg {
fill: #fff;
}
.menu-mobile-header {
background-color: #000;
}

#top .btn-group button {
color: #fff;
}
#top .btn-group svg {
fill: #fff;
}

#top .btn-group ul.dropdown-menu button {
color: #000;
}



.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #a7a7a7!Important;
    border-color: #878787!Important;
}



/* PRELOADER */
.preloader img {
    display:none;
}
.preloader-custom {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid var(--main-color);
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: preloader-rotation 1s linear infinite;
}
.preloader-custom::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-left: 4px solid var(--footer-backcolor);
  border-bottom: 4px solid transparent;
  animation: preloader-rotation 0.5s linear infinite reverse;
}
@keyframes preloader-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 



/* 1. Define a property */

@ property --angle {
  syntax: '<angle>'; /* ???? type angle*/
  inherits: true;
  initial-value: 0deg;

}

/* 2. Animate the value */

.gradient-border {
  animation: rotate 2s infinite linear paused;
}
@ keyframes rotate { to { --angle: 360deg; } }

/* 3. Use the value in your conic-gradient background. */

.gradient-border { 
  --gradient: conic-gradient(from var(--angle), ...);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,     
    var(--gradient) border-box;
  border: 4px solid transparent;
}

/* 4. Change the play state to running on :hover, etc. */

.gradient-border:is(:hover, :focus-within) {
  animation-play-state: running;
}

@keyframes rotate-gradient {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.menu-mobile-header button svg path {
    fill: white;
}

#collapse-payment-method .panel-body p:first-of-type::after {
    content: " Por favor, no realice ningún pago hasta que le confirmemos el pedido.";
    font-weight: bold;
    display: block;
    margin-top: 10px;
    color: #f91414;
    font-size: 1.5rem;
}

option_group_selector .bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder {
    color: red;
&:hover {
   color: red;
}
}

body:has(.quick-order-content), .container:has(.quick-order-content) {
background-color: #ededed ! important;
}



   #categories_1.owl-carousel {
        margin: 30px 0 0 0;
        padding: 0;    
        .item {
            padding: 30px;
        }
        .prev-slide{
            left: 0px;
            font-size: 2em; 
        }
        .next-slide{
            right: 0px;
            font-size: 2em; 
        }        
    }
/*
    .b-game-card__text {
        padding: 12px 20px 7px 20px;
    }
*/


    #categories_2.owl-carousel {
        margin: 30px 0 0 0;
        padding: 0;    
        .item {
            padding: 30px;
        }
        .prev-slide{
            left: 0px;
            font-size: 2em; 
        }
        .next-slide{
            right: 0px;
            font-size: 2em; 
        }        
    }

/* header-logo-min-size: keep the header logo readable on narrow screens.
   common.js sets an inline max-height, so the cap needs !important. */
@media (max-width: 991px) {
    #top #logo {
        flex: 0 0 auto;
        width: auto;
        margin: 4px 8px;
    }
    #top #logo > a {
        display: flex;
        align-items: center;
        min-width: 0;
    }
    #top div:not(.menu-mobile-header) > #logo > a > img {
        width: auto;
        height: auto;
        min-width: var(--logo-min-width, 64px);
        min-height: var(--logo-min-height, 40px);
        max-width: min(var(--logo-max-width), 40vw);
        max-height: min(var(--logo-max-height), var(--header-buttons-size, 46px)) !important;
        object-fit: contain;
    }
}
@media (max-width: 768px) {
    #top ul.list-inline {
        gap: 6px;
    }
    #top #top-links {
        margin-left: 4px;
    }
    #top #top-links a + a {
        margin-left: 0;
    }
}
@media (max-width: 991px) {
    #top > .container-fluid {
        justify-content: flex-start;
    }
}

/* header-search-min-width: keep the always-visible field wide enough for its placeholder. */
#top .header-search:has(.search-always-visible) {
    min-width: min(calc(var(--header-search-min-width, 220px) + var(--header-buttons-size, 46px)), 100%);
}
#top .search-container.search-always-visible .search-input {
    min-width: min(var(--header-search-min-width, 220px), 100%);
}

/* header-search-second-row: search is the second row whenever the header wraps. */
@media (max-width: 1199px) {
    #top > .container-fluid:not(.mobile-search-row) > .header-search {
        order: 1;
        display: flex;
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 4px 8px 6px;
        justify-content: stretch;
    }
    #top > .container-fluid:not(.mobile-search-row) > .header-search .search-container {
        width: 100%;
        max-width: none;
    }
    #top > .container-fluid:not(.mobile-search-row) > .header-search .search-input {
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        max-width: none;
    }
    #top > .container-fluid:not(.mobile-search-row):has(> .header-search) ~ .container-fluid.mobile-search-row {
        display: none;
    }
}
@media (max-width: 540px) {
    #top > .container-fluid:not(.mobile-search-row):has(> .header-search) > #top-links {
        order: 2;
    }
}

/* header-search-top-reset: cancel the marquee inline top so the in-flow field does not cover the buttons. */
@media (max-width: 1199px) {
    #top > .container-fluid:not(.mobile-search-row) > .header-search .search-input {
        top: auto !important;
    }
}


/* header-search-last-row: search is the last header row at every width.
   Later than the 540px order:2 rule, so buttons stay above the field. */
#top > .container-fluid:not(.mobile-search-row) > .header-search {
    order: 1;
    display: flex;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 4px 8px 6px;
    justify-content: stretch;
}
#top > .container-fluid:not(.mobile-search-row) > .header-search .search-container {
    width: 100%;
    max-width: none;
}
#top > .container-fluid:not(.mobile-search-row) > .header-search .search-input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    max-width: none;
    top: auto !important;
}
#top > .container-fluid:not(.mobile-search-row):has(> .header-search) ~ .container-fluid.mobile-search-row {
    display: none;
}
#top > .container-fluid:not(.mobile-search-row):has(> .header-search) > #top-links {
    order: 0;
}


/* header-search-one-line: smaller search floor. From 1200px the logo, search and buttons share one row. */
#top {
    --header-search-min-width: 160px;
}
@media (min-width: 1200px) {
    #top > .container-fluid:not(.mobile-search-row) > .header-search {
        order: 0;
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: min(calc(var(--header-search-min-width, 160px) + var(--header-buttons-size, 46px)), 100%);
        margin: 5px 0;
        justify-content: center;
    }
    #top > .container-fluid:not(.mobile-search-row) > .header-search .search-container {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
    }
    #top > .container-fluid:not(.mobile-search-row) > .header-search .search-input {
        flex: 1 1 auto;
        width: 1%;
        min-width: min(var(--header-search-min-width, 160px), 100%);
        max-width: var(--header-search-width, 450px);
        top: auto !important;
    }
}


/* Same breakpoints as owlCarousel() in the store custom JS.
   .owl-pending is the first paint, before Owl writes pixel widths.
   Inline stage/item widths from a desktop save would beat these rules. */
#categories_1.owl-pending,
#categories_2.owl-pending {
    --owl-items: 1;
}
@media (min-width: 600px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 2;
    }
}
@media (min-width: 900px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 3;
    }
}
@media (min-width: 1200px) {
    #categories_1.owl-pending,
    #categories_2.owl-pending {
        --owl-items: 4;
    }
}
@media (min-width: 1440px) {
    #categories_1.owl-pending {
        --owl-items: 5;
    }
}
#categories_1.owl-pending .owl-stage,
#categories_2.owl-pending .owl-stage {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transform: none;
}
#categories_1.owl-pending .owl-item,
#categories_2.owl-pending .owl-item {
    flex: 0 0 calc(100% / var(--owl-items));
    width: calc(100% / var(--owl-items));
    min-width: 0;
    float: none;
}
@media (max-width: 499px) {
    .owl-carousel:not(.owl-loaded) {
        display: block;
        overflow: hidden;
    }
    .owl-carousel:not(.owl-loaded) > .item ~ .item {
        display: none;
    }
}