/*
 * Tienda global v2.
 * Este archivo se carga al final para aislar la tienda pública de las reglas
 * históricas de sobres. La vitrina de una creadora conserva sus estilos.
 */

#packs-section.packs-store-v2:not(.is-creator-pack-view),
#packs-section.packs-store-v2:not(.is-creator-pack-view) * {
    box-sizing: border-box;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    padding: max(10px, env(safe-area-inset-top)) 0 calc(110px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background:
        radial-gradient(circle at 90% 4%, rgba(255, 171, 217, .28), transparent 25%),
        radial-gradient(circle at 8% 18%, rgba(211, 177, 255, .2), transparent 28%),
        var(--app-shell-background, #fff5fb);
}

/* Encabezado abierto */
#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-header {
    position: relative;
    z-index: 10;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px;
    width: min(calc(100% - 28px), 620px) !important;
    min-height: 62px !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-back {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff76b5, #f44b9b);
    color: #fff;
    box-shadow: 0 9px 20px rgba(231, 69, 145, .18);
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-back svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-brand {
    display: block !important;
    min-width: 0;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-brand > img {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-brand h1,
#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-brand p {
    margin: 0;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-brand h1 {
    color: #4f2b45;
    font-size: clamp(25px, 6.6vw, 34px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.045em;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-brand p {
    margin-top: 6px;
    color: #9d708b;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-wallet {
    display: flex;
    align-items: center;
    gap: 7px;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-balance-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 187, 217, .52);
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: #57374b;
    box-shadow: 0 8px 18px rgba(137, 81, 111, .08);
    font: inherit;
    font-size: 13px;
    font-weight: 950;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-balance-btn .coin-mini {
    width: 21px;
    height: 21px;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-recharge-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0 0 3px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff72b1, #ee3f91);
    color: #fff;
    box-shadow: 0 9px 20px rgba(230, 66, 142, .2);
    font-family: inherit;
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
}

/* Destacado: contenido a la izquierda y un único sobre a la derecha. */
#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-hero {
    position: relative;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: minmax(0, .94fr) minmax(145px, 1.06fr) !important;
    align-items: center;
    width: min(calc(100% - 28px), 620px) !important;
    min-height: 246px !important;
    margin: 0 auto 14px !important;
    padding: 22px 10px 18px 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 142, 199, .35) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 83% 20%, rgba(255,255,255,.72) 0 3px, transparent 4px),
        radial-gradient(circle at 91% 66%, rgba(255,255,255,.62) 0 2px, transparent 3px),
        linear-gradient(145deg, #ffc9e3 0%, #f680bb 51%, #ce8eea 100%) !important;
    box-shadow: 0 22px 44px rgba(211, 73, 145, .15) !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -65px;
    bottom: -92px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(255,255,255,.07);
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-hero::after {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-featured-copy {
    position: relative;
    z-index: 4;
    align-self: stretch;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-featured-logo {
    display: block;
    width: clamp(105px, 28vw, 172px);
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 5px 8px rgba(144, 37, 99, .16));
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-featured-kicker {
    display: block;
    margin-top: 5px;
    color: rgba(111, 45, 85, .72);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .2em;
    text-transform: uppercase;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-featured-copy h2 {
    margin: 13px 0 15px;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(21px, 5.5vw, 30px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.03;
    text-shadow: 0 3px 12px rgba(130, 38, 88, .18);
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .featured-packs-footer {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .featured-packs-label {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .featured-open-pack-btn {
    width: auto !important;
    min-width: 132px;
    height: 40px;
    margin: 0 !important;
    padding: 0 19px !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    color: #eb3f90 !important;
    box-shadow: 0 11px 24px rgba(137, 38, 90, .15) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .dashboard-pack-carousel {
    position: relative !important;
    z-index: 3;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .dashboard-pack-carousel .circle-control,
#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-card-left,
#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-card-right {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-stage {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-stage::before {
    content: '';
    position: absolute;
    inset: 17% 4% 3% 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.75), transparent 68%);
    filter: blur(8px);
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-stage::after {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-card-active {
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    display: block !important;
    width: min(100%, 175px) !important;
    height: 216px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) rotate(7deg) !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-card-active::before,
#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-card-active::after {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-card-active img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: drop-shadow(0 20px 20px rgba(125, 46, 91, .2)) !important;
}

/* Filtros libres, sin panel exterior. */
#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-grid {
    display: grid !important;
    align-content: start;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-filter-bar {
    display: block !important;
    width: min(calc(100% - 28px), 620px) !important;
    margin: 0 auto 2px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-filter-bar::before,
#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-filter-bar::after {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-sort-row {
    display: flex !important;
    gap: 7px;
    width: 100%;
    padding: 2px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-sort-row::-webkit-scrollbar {
    display: none;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-filter-bar button {
    flex: 0 0 auto;
    min-height: 34px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid rgba(246, 154, 195, .28);
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    color: #93617d;
    box-shadow: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-filter-bar button.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #ff68aa, #ed3d90);
    color: #fff;
    box-shadow: 0 7px 16px rgba(229, 61, 139, .16);
}

/* Catálogo: exactamente cuatro sobres por fila. */
#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-section {
    display: block !important;
    width: min(calc(100% - 28px), 620px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: clamp(7px, 2vw, 13px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-row .pack-list-card {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 1px 5px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-row .pack-list-card::before,
#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-row .pack-list-card::after {
    display: none !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-row .pack-list-card > img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 108px !important;
    max-height: none !important;
    aspect-ratio: 78 / 110 !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    filter: drop-shadow(0 9px 9px rgba(116, 68, 94, .12)) !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-row .pack-price {
    position: absolute !important;
    z-index: 3;
    right: 4px !important;
    bottom: 7px !important;
    left: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    border: 1px solid rgba(255, 207, 226, .48);
    border-radius: 999px;
    background: rgba(255,255,255,.84) !important;
    color: #614055;
    box-shadow: 0 3px 8px rgba(114, 68, 93, .07);
    font-size: 8px !important;
    font-weight: 850 !important;
    line-height: 1;
    transform: none !important;
    backdrop-filter: blur(5px);
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-catalog-row .pack-price .coin-mini {
    width: 11px !important;
    height: 11px !important;
    margin-right: 2px !important;
}

#packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-load-more-btn {
    width: min(calc(100% - 28px), 620px);
    min-height: 42px;
    margin: 8px auto 0;
    border: 1px solid rgba(244, 118, 176, .45);
    border-radius: 999px;
    background: rgba(255,255,255,.76);
    color: #e84291;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 390px) {
    #packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-header {
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        gap: 7px;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-back,
    #packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-recharge-btn {
        width: 38px;
        height: 38px;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-balance-btn {
        min-height: 38px;
        padding-inline: 8px;
        font-size: 12px;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-store-hero {
        grid-template-columns: minmax(0, .92fr) minmax(132px, 1.08fr) !important;
        min-height: 222px !important;
        padding: 18px 7px 15px 16px !important;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-featured-logo {
        width: 104px;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .packs-featured-copy h2 {
        margin: 10px 0 13px;
        font-size: 21px;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .dashboard-pack-carousel {
        height: 198px !important;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .pack-card-active {
        width: min(100%, 148px) !important;
        height: 190px !important;
    }

    #packs-section.packs-store-v2:not(.is-creator-pack-view) .featured-open-pack-btn {
        min-width: 118px;
        height: 38px;
        padding-inline: 15px !important;
    }
}