/*
==========================================================================
1. HEADER
==========================================================================
*/
header.main-header {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: linear-gradient(0deg, rgba(17,17,17,0.7), rgba(17,17,17,0.2));
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border-bottom: 1px solid var(--main-color);
    backdrop-filter: blur(10px);
    align-items: center;
}
.header-container {
    width: 100%;
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}
#site-logo {
    order: 1;
    height: 60px;
    max-width: 200px;
}
#site-logo img {
    height: 100%;
    filter: drop-shadow(0 0 2px var(--main-color));
}
.search-form {
    order: 3;
    flex: 1;
}
.search-form input {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: transparent;
  transition: box-shadow 0.3s ease;
}
.search-form input::placeholder { color: rgba(255,255,255,0.5); }
.top {
    order: 2;
    display: flex;
}
#main-menu {
    order: 4;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 769px) {
  .search-form{
    order: 3;
  }
  .top{
    order: 4;
  }
  #main-menu{
    order: 2;
    width: auto;
  }
}
/**/

/* ==== TOP - BOTONES DE USUARIO ==== */
.user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(255,255,255,0.08);
  color: var(--text-color);
  backdrop-filter: blur(3px);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.user-btn svg {
  width: 18px;
  height: 18px;
}

/* Hover general */
.user-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(255,255,255,0.15);
}

/* Variantes */
.user-btn--login {
  background: linear-gradient(180deg, rgba(77,204,0,0.3), rgba(30,100,0,0.1));
  box-shadow: 0 0 8px rgba(77,204,0,0.2);
}
.user-btn--login:hover {
  box-shadow: 0 0 18px rgba(77,204,0,0.4);
}

.user-btn--account {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.user-btn--logout {
  background: rgba(255,0,0,0.1);
  border: 1px solid rgba(255,0,0,0.2);
  color: #ff6b6b;
}
.user-btn--logout:hover {
  background: rgba(255,0,0,0.15);
  box-shadow: 0 0 15px rgba(255,0,0,0.25);
}

.menu-toggle { order: 3; background:none; border:none; color:var(--text-color); font-size:1.6rem; cursor:pointer; display:block; }

/* ======== SHRINK ======== */
header.main-header.shrink .logo img { height: 40px; }

/* ======== DESKTOP ======== */
@media (min-width: 769px) {
  .header-container {
      display: flex;
      flex-direction: row;
      gap: 10px;
  }
  .menu-toggle { display: none; }
}

/* AUTENTICACION DE USUARIO */
.authentication-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* BOTON DE CARRITO */
.blockcart a {
    display: flex;
    align-items: center;
    position: relative;
}
.blockcart:hover .products-count {
  transform: scale(1.2);
}
.products-count {
    display: flex;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    padding: 3px;
    background-color: red;
    border: 2px solid #3e0000;
    border-radius: 50%;
    position: absolute;
    top: -11px;
    right: -13px;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
    justify-content: center;
    align-items: center;
}
.cart-bump {
  animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* Efecto adicional al animarse con bounce de Animate.css */
.products-count.animate__animated.animate__rubberBand {
  transform: scale(1.3);
}

/* Notificación de agregado al carrito */
.add-to-cart-notification {
  position: absolute;
  top: -35px;
  left: 50%;
  background: #00b894;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/* Clase para mostrar notificación */
.add-to-cart-notification.visible {
  opacity: 1;
}

/* Botón deshabilitado */
.add-to-cart-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}




/*
==========================================================================
MINIATURAS DE PRODUCTO
==========================================================================
*/
/* TOYS TO LIFE */
article.disney-infinity-product    { --category-color: dodgerblue; }
article.amiibo-product             { --category-color: #e60012; }
article.skylanders-product         { --category-color: fuchsia; }
article.lego-dimensions-product    { --category-color: #fdd835; }

/* NINTENDO SOBREMESA */
article.nintendo-product,
article.nintendo-nes-product,
article.nintendo-switch-product    { --category-color: #89000b; }
article.super-nintendo-product     { --category-color: #824ca0; }
article.nintendo-64-product        { --category-color: teal; }
article.nintendo-gamecube-product  { --category-color: #6a5acd; }
article.nintendo-wii-product,
article.nintendo-wii-u-product     { --category-color: rgb(172, 194, 204); }

/* NINTENDO PORTÁTIL */
article.game-boy-product           { --category-color: #8b9506; }
article.game-boy-color-product     { --category-color: #c71585; }
article.game-boy-advance-product   { --category-color: #602990; }
article.nintendo-ds-product        { --category-color: #9c9c9c; }
article.nintendo-3ds-product       { --category-color: rgb(113, 0, 0); }

/* PLAYSTATION */
article.playstation-product, 
article.playstation-1-product      { --category-color: royalblue; }
article.playstation-2-product      { --category-color: #003087; }
article.playstation-3-product      { --category-color: mediumblue; }
article.playstation-4-product      { --category-color: #0070d1; }
article.playstation-5-product      { --category-color: #0060a9; }
article.playstation-portable-product { --category-color: gray; }
article.playstation-vita-product   { --category-color: #02008b; }

/* XBOX */
article.xbox-product               { --category-color: #026902; }
article.xbox-classic-product       { --category-color: rgb(0, 90, 0); }
article.xbox-360-product           { --category-color: green; }
article.xbox-one-product           { --category-color: rgb(23, 104, 23); }
article.xbox-series-product        { --category-color: #0e7a0d; }

/* SEGA & ATARI */
article.sega-product               { --category-color: #0089cf; }
article.master-system-product      { --category-color: brown; }
article.sega-genesis-product       { --category-color: #0089cf; }
article.sega-saturn-product        { --category-color: #222222; }
article.sega-dreamcast-product     { --category-color: #ff4500; }
article.game-gear-product          { --category-color: #3a3a3a; }
article.atari-product              { --category-color: #ac010c; }

/* OUT OF STOCK */
article.out-of-stock-product {
    --category-color: rgb(50,50,50);
    filter: grayscale(1);
}

.rst-product-miniature {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    background-color: rgb(30,30,30);
    background-image: radial-gradient(circle 140px at top, var(--category-color), transparent),radial-gradient(circle at top, transparent 83%, var(--category-color) 110%);
    border-radius: 15px;
    border: 3px solid black;
    box-shadow: black 3px 3px;
    transition: all 0.3s ease;
}
.rst-product-miniature:hover {
    box-shadow: black 3px 3px, 0 0 25px var(--category-color);
    transform: translateY(-8px);
}
.rst-brand-slot-container {
    display: flex;
    position: relative;
    height: 33px;
    padding: 2px 3px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    border-top: 1px solid var(--category-color, #444);
    align-items: center;
    justify-content: center;
}
.rst-category-logo {
    max-width: 100px;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px black);
}

.rst-miniature-wrapper {
    display: flex;
    padding: 0 10px 10px 10px;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.rst-miniature-thumbnail {
    position: relative;
    aspect-ratio: 1/1;
}
.rst-miniature-thumbnail a {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}
.rst-miniature-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    border: 3px solid black;
}













.rst-product-miniature.xbox-360 {
    border-bottom: 1px solid var(--category-color);
    background: radial-gradient(circle at top, rgba(35,35,35,1) 15%,var(--category-color) 35%, rgba(35,35,35,1) 70%);
}

.rst-miniature-brand {
    height: 25px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    font-family: 'Atma', sans-serif;
    flex-direction: column;
    align-items: center;
}
.rst-miniature-brand span {
    font-weight: 500;
    text-shadow: 0 10px 5px black;
}
/**/


.out-of-stock-image {
    filter: grayscale(1) opacity(0.5);
}
.out-of-stock-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.out-of-stock-label {
    font-size: 1.15rem;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    border: 2px solid;
    border-radius: 6px;
    padding: 0 5px;
    margin: 10px 0;
    font-family: 'Atma', sans-serif;
    transform: rotate(-3deg);
}
.rst-fade-img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    will-change: opacity;
}
.rst-fade-img.is-loaded {
    opacity: 1;
}
.out-of-stock-image {
    filter: grayscale(100%) opacity(0.6) !important;
}
.out-of-stock-image.is-loaded {
    opacity: 0.6 !important;
}
.purchase-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
span.purchase-label {
    color: darkgray;
    font-size: .9rem;
    text-align: center;
}
.purchase-actions {
    display: flex;
    gap: 5px;
}
.action-add-to-cart {
    flex: 1;
}
.action-whatsapp {
    flex: 1;
}


/* PAGINA DE PRODUCTO */
#product-page-layout{
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr;
    grid-template-areas: "title"
        "gallery"
        "sidebar"
        "overview";
    padding: 1rem;
}
@media (min-width: 1025px){
    #product-page-layout {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:    "gallery gallery title title title sidebar"
                                "gallery gallery overview overview overview sidebar"
                                "gallery gallery desc desc desc sidebar";
        row-gap: 5px;
        column-gap: 20px;
        align-items: start;
        grid-template-rows: 57px auto 1fr auto auto;
    }
}
#product-page-gallery-wrapper {
    display: flex;
    grid-area: gallery;
    width: 100%;
    height: auto;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    gap: 10px;
}
.rst-product-trust-note {
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.9rem;
    color: #838383;
    justify-content: center;
}
.rst-product-trust-note p {
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

#product-page-title-wrapper {
    grid-area: title;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: .3rem;
    width: 100%;
}
.product-page-title-content {
    display: flex;
    gap: .5em;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.product-page-header-wrapper h1 {
    display: flex;
    font-size: clamp(1.2rem, 5vw, 2rem);
    line-height: clamp(1.4rem, 5.5vw, 2rem);
    align-items: center;
    gap: 10px;
    font-weight: 500;
}
.product-page-header-wrapper label {
    display: flex;
    color: var(--main-color);
    text-transform: uppercase;
    font-size: .7em;
    font-weight: 600;
    background: black;
    padding: .2em .5em;
    align-items: center;
    border-radius: 1em;
}
#product-page-overview {
    display: flex;
    grid-area: overview;
    width: 100%;
    gap: 10px;
    flex-direction: column;
}
#product-page-overview * p {
    line-height: 1.4em;
    margin: 0;
}
/* BLOQUES DE TEXTOS */
.product-texts-blocks {
    display: flex;
    gap: 5px;
    text-shadow: 0 3px 4px black;
    font-size: .9rem;
    flex-direction: column;
}
.product-texts-blocks :is(h1, h2, h3, h4, h5, h6) {
    color: var(--main-color);
    line-height: 1.2;
}
.product-texts-blocks h1 { font-size: 1.75rem; }
.product-texts-blocks h2 { font-size: 1.5rem; }
.product-texts-blocks h3 { font-size: 1.25rem; }
.product-texts-blocks h4 { font-size: 1.1rem; }
.product-texts-blocks h5 { font-size: 1rem; }
.product-texts-blocks h6 { font-size: 0.9rem; }

.product-texts-blocks :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: 15px;
}

/* LISTADOS DENTRO DE BLOQUES DE TEXTO */
.product-texts-blocks ul, .product-texts-blocks ol {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 5px;
    flex-direction: column;
}
.product-texts-blocks ul li, .product-texts-blocks ol li {
    padding: 5px;
    padding-left: 10px;
    border: 1px solid rgba(0,255,0,.2);
    border-left: 4px solid var(--main-color);
    border-left-color: var(--main-color);
    border-radius: var(--border-radius);
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(4px);
}
.product-texts-blocks .rst-layout {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.product-texts-blocks .rst-vertical-layout{
    flex-direction: column;
}
.product-texts-blocks .rst-horizontal-layout{
    flex-direction: row;
}
.product-texts-blocks .rst-layout div {
    display: flex;
    background: rgba(0,0,0,.3);
    padding: 10px;
    border: 2px solid black;
    border-radius: var(--border-radius);
    gap: 5px;
    flex-direction: column;
    flex: 1 1 auto;
}


#product-page-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 2px solid black;
    background: rgba(0,0,0,.3);
    border-radius: var(--border-radius);
}

/* SECCION DE PRECIO */
.product-page-availability {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 55px;
    align-items: center;
    padding: 7px;
    border-radius: var(--border-radius);
    width: 100%;
    flex-direction: row;
}
span.last-unit {
    font-family: 'Atma', sans-serif;
    font-size: 1.1rem;
    transform: skewY(-2deg);
    color: yellow;
    line-height: 1.5rem;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    animation: pulse-low-stock 1.5s infinite ease-in-out;
}
.product-price-wrapper {
    flex: 1 1 100px;
}
@keyframes pulse-low-stock {
    0% { transform: skewY(-2deg) scale(1); }
    50% { transform: skewY(-2deg) scale(1.05); text-shadow: 0 0 10px rgba(255, 255, 0, 0.5); }
    100% { transform: skewY(-2deg) scale(1); }
}


.product-price-container {
    display: flex;
    gap: 10px;
    font-family: 'Atma', sans-serif;
    flex-direction: column;
}
.product-price {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.price-before-wrapper {
    display: flex;
    gap: 5px;
    color: darkgray;
    line-height: 1.3rem;
    align-items: center;
}
.price-now-wrapper {
    display: flex;
    gap: 5px;
    align-items: center;
}
.in-offer {
    position: relative;
    overflow: hidden;
    background: red;
    padding: 2px 5px;
    font-weight: 500;
    border-radius: var(--border-radius);
    filter: drop-shadow(0 0 5px red);
}
.in-offer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: rotate(30deg);
    animation: sheen 5s infinite;
}
@keyframes sheen {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}
.price-now-wrapper.in-offer .price-now {
    color: yellow;
}
span.price-now {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--main-color);
    line-height: .9rem;
}




.product-page-actions-wrapper {
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.product-page-actions-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/* SECCION MI CUENTA */
.account-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.account-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}
.account-column-header {
    display: flex;
    align-items: center;
    gap: 5px;
}
nav.account-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    flex-wrap: nowrap;
}



/* REALCES TIPOGRAFICOS */
span.special-edition {
    color: gold;
    white-space: nowrap;
    font-style: normal;
}
span.special-edition::after, span.special-edition::before {
    content: '☆';
    margin: 0 5px;
}






.feature-name-header {
    color: #efefef;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: block;
}

/* Lista de valores interna */
.feature-values-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.individual-value-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.val-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.product-feature-value {
    color: #4CAF50; /* Verde neón similar a tu imagen */
    font-size: 0.9rem;
    line-height: 1;
}



#search-widget form{display:grid;grid-template-columns:3fr 40px;align-items:center;}
#search-widget form input[type=text] {
    text-transform: uppercase;
    transition: .5s;
    min-width: 130px;
    flex: 1;
}
#search-widget form input[type=text]:focus{filter:drop-shadow(0px 20px 7px rgba(0,0,0,0.3));}
#search-widget form input::placeholder{opacity:0.5;}
#search-widget form button[type=submit]{display:flex;background:none;position:relative;flex-direction:column;align-items:center;}
#search-widget form button[type=submit]>img{height:40px;transition:1s;z-index:2;}
#search-widget form button[type=submit]:hover>img{transform:scale(1.1);cursor:pointer;}
#search-widget form button[type=submit] .power-up-coin{position:absolute;top:5px;width:28px;height:32px;background:url("https://www.resetvg.com/img/coin-sprites.png");z-index:1;}
#search-widget form button[type=submit]:focus .power-up-coin{animation:coin-rotate .7s steps(4) infinite,coin-bounce .7s;}
.power-up-coin{animation:coin-rotate .7s steps(4) infinite}

/* REALCES EN ENLACES */
.hotlink {
    font-family: 'Maven Pro', sans-serif;
    text-decoration: none;
    font-weight: 600;
    padding: 0.1em 0;
    transition: all 0.25s ease;
    cursor: pointer;
    text-transform: uppercase;
    font-size: .75rem;
}
.hotlink-main {
  color: var(--main-color);
}
.hotlink-main:hover {
  color: #3aa000;
  text-decoration: underline;
}





/* COUNTDOWN CON JS */
.rst-js-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 10px;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.05);
    font-weight: 500;
}

.rst-countdown-icon {
    display: flex;
    align-items: center;
    opacity: 0.8;
}

.rst-countdown-label {
    font-size: 0.9rem;
    color: #ccc;
}

.rst-countdown-display {
    font-family: 'Atma', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Estados de urgencia */
.rst-js-countdown.rst-urgent { color: #ff9800; border: 1px solid #ff9800; }
.rst-js-countdown.rst-critical {
    color: red;
    background: black;
    border: 1px solid red;
    animation: rst-pulse 0.8s infinite alternate;
}

@keyframes rst-pulse {
    from { opacity: 1; }
    to { opacity: 0.7; transform: scale(1.02); }
}



/* ICONOS SVG */
svg.top-icons {
    color: currentColor;
    transition: scale .5s, color .5s;
}





@media screen and (min-width: 768px) {
    .rst-auth-content {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .rst-image-overflow-box {
        top: -20px;
    }
    .rst-overflow-image {
        transform: scale(2) translate(-20px, 10px);
        transform-origin: top left;
    }
    .rst-auth-aside {
        flex-direction: column;
        height: auto;
        width: 250px;
    }
    .rst-image-overflow-box {
        width: 100%;
    }
    .rst-aside-slogan {
        width: 100%;
        text-align: right;
    }
    .rst-auth-form-section {
        padding: 20px;
    }

    #cart-wrapper {
        grid-template-columns: 3fr 1fr;
    }
}
@media screen and (min-width: 1024px) {

}