/* ================================================================
   TE CONTO CASOS · Loja Styles
   Depende de tcc.css (tokens + base)
   ================================================================ */

/* ── Store Hero ───────────────────────────────────────────────── */
.loja-hero {
    position:   relative;
    height:     52vh;
    min-height: 380px;
    display:    flex;
    align-items: center;
    overflow:   hidden;
    padding-top: 64px; /* navbar height */
}

.loja-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 75% 50%, rgba(50, 30, 5, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(30, 10, 35, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #140c02 55%, #0d0d0d 100%);
}

.loja-hero-bg::after {
    content:  '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(201,168,76,0.015) 0, rgba(201,168,76,0.015) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(90deg, rgba(201,168,76,0.015) 0, rgba(201,168,76,0.015) 1px, transparent 1px, transparent 60px);
    pointer-events: none;
}

.loja-hero-ov {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.40) 60%, rgba(8,8,8,0.10) 100%);
}

.loja-hero-content {
    position:  relative; z-index: 1;
    padding:   0 6rem;
    max-width: 680px;
}

.loja-hero-eyebrow {
    display:        inline-flex; align-items: center; gap: 0.5rem;
    font-size:      0.62rem; font-weight: 700; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--gold);
    margin-bottom:  1rem;
}

.loja-hero-title {
    font-family:   var(--font-display);
    font-size:     clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight:   700; line-height: 1.05; letter-spacing: 0.04em;
    margin-bottom: 1rem;
    text-shadow:   0 2px 24px rgba(0,0,0,0.8);
}

.loja-hero-desc {
    font-size:    0.88rem; color: var(--text-secondary);
    line-height:  1.75; margin-bottom: 1.5rem; max-width: 500px;
}

.loja-hero-badges {
    display:    flex; gap: 1.5rem; flex-wrap: wrap;
}
.loja-hero-badges span {
    display:     flex; align-items: center; gap: 0.4rem;
    font-size:   0.72rem; color: var(--text-muted);
}
.loja-hero-badges i { color: var(--gold); font-size: 0.75rem; }

/* ── Filter Bar ───────────────────────────────────────────────── */
.filter-bar {
    position:       sticky; top: 64px; z-index: 90;
    display:        flex; align-items: center;
    justify-content: space-between; gap: 1rem;
    padding:        0.875rem 4rem;
    background:     rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom:  1px solid var(--border);
    flex-wrap:      wrap;
}

.filter-cats {
    display:  flex; align-items: center;
    gap:      0.375rem; flex-wrap: wrap;
}

.filter-pill {
    display:        inline-flex; align-items: center; gap: 0.35rem;
    padding:        0.4rem 0.875rem;
    font-size:      0.72rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted);
    border:         1px solid var(--border); border-radius: 99px;
    background:     transparent;
    transition:     color var(--ease), border-color var(--ease), background var(--ease);
}
.filter-pill i { font-size: 0.65rem; }
.filter-pill:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.18); }
.filter-pill.active {
    color:          var(--bg-abyss);
    background:     var(--gold);
    border-color:   var(--gold);
    box-shadow:     0 0 14px var(--gold-glow);
}
.filter-pill.active i { color: var(--bg-abyss); }

.sort-select {
    background:     var(--bg-elevated);
    color:          var(--text-secondary);
    border:         1px solid var(--border);
    border-radius:  var(--r-md);
    padding:        0.4rem 0.875rem;
    font-size:      0.72rem; font-family: var(--font-body);
    cursor:         pointer; outline: none;
    transition:     border-color var(--ease);
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A4A48'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right:  2rem;
}
.sort-select:focus { border-color: var(--border-gold); }
.sort-select option { background: var(--bg-elevated); }

/* ── Featured Product ─────────────────────────────────────────── */
.loja-featured-wrap { padding: 2.5rem 4rem 0; }

.loja-featured {
    position:      relative;
    border-radius: var(--r-2xl);
    min-height:    280px;
    display:       flex; align-items: center;
    border:        1px solid var(--border-gold);
    overflow:      hidden;
    box-shadow:    0 0 80px rgba(201,168,76,0.07);
}

.lf-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #1e1408 0%, #0d0d0d 55%);
}
.lf-bg::after {
    content:  '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(201,168,76,0.06) 0%, transparent 55%),
        linear-gradient(to right, rgba(8,8,8,0.98) 0%, rgba(8,8,8,0.80) 50%, rgba(8,8,8,0.20) 100%);
}

.lf-deco {
    position:    absolute; right: 3rem; top: 50%; transform: translateY(-50%);
    font-size:   14rem; color: var(--gold); opacity: 0.03;
    user-select: none; pointer-events: none; font-family: var(--font-display);
    line-height: 1;
}

.lf-content { position: relative; z-index: 1; padding: 3rem 3.5rem; max-width: 560px; flex: 1; }

.lf-badge {
    display:        inline-flex; align-items: center; gap: 0.45rem;
    font-size:      0.6rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--gold);
    border:         1px solid var(--border-gold);
    padding:        4px 12px; border-radius: var(--r-xs);
    background:     var(--gold-glow-sm); margin-bottom: 1.25rem;
}

.lf-title {
    font-family:    var(--font-display);
    font-size:      clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight:    700; letter-spacing: 0.04em; margin-bottom: 0.75rem;
}

.lf-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.5rem; }

.lf-price-block { margin-bottom: 1.75rem; }
.lf-price {
    font-family:  var(--font-display);
    font-size:    2rem; font-weight: 700; color: var(--gold); line-height: 1;
}
.lf-parcelas { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }

.lf-acts { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }

.lf-estoque { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; }

/* 3-D box art */
.lf-visual {
    position:        relative; z-index: 1;
    flex:            0 0 220px;
    margin-right:    4rem;
    display:         flex; align-items: center; justify-content: center;
}

.lf-box-art {
    position:  relative;
    width:     120px; height: 120px;
    transform: rotateX(20deg) rotateY(-30deg);
    transform-style: preserve-3d;
    animation: box-spin 8s linear infinite;
}
@keyframes box-spin {
    0%   { transform: rotateX(20deg) rotateY(-30deg); }
    50%  { transform: rotateX(20deg) rotateY(30deg); }
    100% { transform: rotateX(20deg) rotateY(-30deg); }
}

.lf-box-face {
    position:      absolute;
    border:        1px solid rgba(201,168,76,0.3);
}
.lf-front {
    width: 120px; height: 120px;
    background: linear-gradient(135deg, #1e1408, #2d1e08);
    transform: translateZ(60px);
    display:   flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 0.75rem;
    font-weight: 700; letter-spacing: 0.15em; color: var(--gold);
    text-transform: uppercase; gap: 0.25rem;
}
.lf-top {
    width: 120px; height: 120px;
    background: linear-gradient(135deg, #2d1e08, #3c2a0c);
    transform: rotateX(90deg) translateZ(60px);
}
.lf-side {
    width: 120px; height: 120px;
    background: linear-gradient(135deg, #160f03, #1e1408);
    transform: rotateY(90deg) translateZ(60px);
}

/* ── Product Grid ─────────────────────────────────────────────── */
.loja-grid-section { padding: 2.5rem 4rem; }

.loja-grid-header {
    display:       flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
}

.product-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
}

/* ── Product Card ─────────────────────────────────────────────── */
.product-card {
    border-radius: var(--r-xl);
    overflow:      hidden;
    background:    var(--bg-card);
    border:        1px solid var(--border);
    transition:    transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.product-card:hover {
    transform:    translateY(-4px);
    border-color: var(--border-gold);
    box-shadow:   0 8px 32px rgba(0,0,0,0.5), 0 0 20px var(--gold-glow-sm);
}

.pcard-thumb {
    position:  relative;
    aspect-ratio: 1;
    display:   flex; align-items: center; justify-content: center;
    overflow:  hidden; cursor: pointer;
}

.pcard-visual {
    font-size:    3rem; color: rgba(255,255,255,0.06);
    transition:   transform var(--ease-slow), color var(--ease);
    user-select:  none; pointer-events: none;
}
.product-card:hover .pcard-visual { color: rgba(255,255,255,0.10); transform: scale(1.08); }

.pcard-tag {
    position:       absolute; top: 0.625rem; left: 0.625rem;
    font-size:      0.58rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 2px 10px; border-radius: var(--r-xs);
}
.tag-sold { background: #27ae60; color: #fff; }
.tag-new  { background: var(--gold); color: #060606; }
.tag-excl { background: var(--cat-sup); color: #fff; }
.tag-ltd  { background: var(--cat-crime); color: #fff; }
.tag-digi { background: var(--cat-legend); color: #fff; }

.pcard-stock {
    position:    absolute; bottom: 0.625rem; left: 0.625rem;
    font-size:   0.58rem; font-weight: 600; letter-spacing: 0.06em;
    color:       #e67e22; display: flex; align-items: center; gap: 0.3rem;
    background:  rgba(8,8,8,0.85); padding: 2px 8px; border-radius: var(--r-xs);
}

.pcard-hover-actions {
    position: absolute; inset: 0;
    display:  flex; align-items: flex-end; justify-content: center;
    padding-bottom: 1rem;
    background:   linear-gradient(to top, rgba(8,8,8,0.85) 0%, transparent 50%);
    opacity:      0; transition: opacity var(--ease);
}
.product-card:hover .pcard-hover-actions { opacity: 1; }

.pcard-quick-add {
    display:        inline-flex; align-items: center; gap: 0.4rem;
    padding:        0.5rem 1.25rem;
    background:     var(--gold); color: #060606;
    font-size:      0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    border:         none; border-radius: var(--r-sm); cursor: pointer;
    transition:     background var(--ease), transform var(--ease);
    transform:      translateY(8px);
}
.product-card:hover .pcard-quick-add { transform: translateY(0); }
.pcard-quick-add:hover { background: var(--gold-light); }

.pcard-body { padding: 1rem; }

.pcard-cat {
    font-size:      0.6rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem;
}

.pcard-name {
    display:     block; font-family: var(--font-display);
    font-size:   0.82rem; font-weight: 600; letter-spacing: 0.03em;
    line-height: 1.4; color: var(--text-primary);
    margin-bottom: 0.35rem;
    display:       -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition:    color var(--ease);
}
.pcard-name:hover { color: var(--gold); }

.pcard-rating {
    display: flex; align-items: center; gap: 0.15rem; margin-bottom: 0.625rem;
}
.pcard-rating span { font-size: 0.62rem; color: var(--text-muted); margin-left: 0.25rem; }

.pcard-price-row {
    display:     flex; align-items: flex-end;
    justify-content: space-between; gap: 0.5rem;
}

.pcard-price {
    font-family:  var(--font-display);
    font-size:    1.05rem; font-weight: 700;
    color:        var(--gold); line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pcard-parcelas {
    font-size:  0.62rem; color: var(--text-muted);
    margin-top: 0.2rem;
}

.pcard-add-btn {
    width:  36px; height: 36px; flex-shrink: 0;
    display:         flex; align-items: center; justify-content: center;
    background:      var(--bg-elevated);
    color:           var(--text-secondary);
    border:          1px solid var(--border);
    border-radius:   var(--r-md); font-size: 0.85rem; cursor: pointer;
    transition:      background var(--ease), color var(--ease), border-color var(--ease);
}
.pcard-add-btn:hover { background: var(--gold); color: #060606; border-color: var(--gold); }

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 5rem 2rem;
    color:      var(--text-muted);
}
.empty-state i    { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; display: block; }
.empty-state p    { font-size: 0.9rem; margin-bottom: 1.5rem; }

/* ── Shipping Banner ──────────────────────────────────────────── */
.shipping-banner {
    display:       flex; align-items: center;
    justify-content: center; gap: 0;
    padding:       2rem 4rem;
    background:    var(--bg-surface);
    border-top:    1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-wrap:     wrap;
}

.sb-item {
    display:     flex; align-items: center; gap: 0.75rem;
    padding:     0.75rem 2.5rem;
    flex:        1; min-width: 180px;
}
.sb-item i { font-size: 1.4rem; color: var(--text-muted); flex-shrink: 0; }
.sb-item div { display: flex; flex-direction: column; }
.sb-item strong { font-size: 0.8rem; color: var(--text-primary); }
.sb-item span   { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }

.sb-sep {
    width: 1px; height: 40px;
    background: var(--border); flex-shrink: 0;
}

/* ── Cart Drawer ──────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

.cart-backdrop {
    position:   fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    opacity:    0; pointer-events: none;
    transition: opacity var(--ease-slow);
}
.cart-backdrop.open { opacity: 1; pointer-events: all; }

.cart-drawer {
    position:   fixed; top: 0; right: 0; bottom: 0; z-index: 200;
    width:      360px; max-width: 100vw;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    display:    flex; flex-direction: column;
    transform:  translateX(100%);
    transition: transform var(--ease-slow);
    box-shadow: -8px 0 40px rgba(0,0,0,0.6);
}
.cart-drawer.open { transform: translateX(0); }

.cd-head {
    display:     flex; align-items: center; justify-content: space-between;
    padding:     1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cd-title {
    display:     flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.cd-title i { color: var(--gold); font-size: 0.85rem; }

.cd-count {
    background:     var(--gold); color: #060606;
    font-size:      0.6rem; font-weight: 700;
    padding:        2px 7px; border-radius: 99px;
    font-family:    var(--font-body);
}

.cd-close {
    width:  32px; height: 32px;
    display:         flex; align-items: center; justify-content: center;
    background:      transparent; color: var(--text-muted);
    border:          1px solid var(--border); border-radius: var(--r-md);
    font-size:       0.85rem; cursor: pointer;
    transition:      color var(--ease), border-color var(--ease);
}
.cd-close:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.15); }

.cd-items {
    flex:       1; overflow-y: auto;
    padding:    1rem 1.5rem;
    display:    flex; flex-direction: column; gap: 0.75rem;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

.cd-item {
    padding:       0.875rem 1rem;
    background:    var(--bg-card); border-radius: var(--r-lg);
    border:        1px solid var(--border);
    display:       flex; align-items: center; gap: 0.75rem;
    flex-wrap:     wrap;
}
.cd-item-info { flex: 1; min-width: 0; }
.cd-item-name {
    font-size:  0.82rem; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}
.cd-item-price { font-size: 0.75rem; color: var(--gold); font-family: var(--font-display); font-weight: 700; }

.cd-item-qty { display: flex; align-items: center; gap: 0.35rem; }

.qty-btn {
    width:  26px; height: 26px;
    display:         flex; align-items: center; justify-content: center;
    background:      var(--bg-elevated); color: var(--text-primary);
    border:          1px solid var(--border); border-radius: var(--r-sm);
    font-size:       0.9rem; cursor: pointer; line-height: 1;
    transition:      background var(--ease), border-color var(--ease);
}
.qty-btn:hover { background: var(--bg-glass); border-color: rgba(255,255,255,0.14); }

.qty-remove {
    width:  26px; height: 26px;
    display:         flex; align-items: center; justify-content: center;
    background:      transparent; color: var(--text-muted);
    border:          1px solid transparent; border-radius: var(--r-sm);
    font-size:       0.7rem; cursor: pointer;
    transition:      color var(--ease);
    margin-left:     0.25rem;
}
.qty-remove:hover { color: var(--cat-crime); }

.cd-empty {
    flex:       1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap:        1rem; color: var(--text-muted); text-align: center; padding: 2rem;
}
.cd-empty i   { font-size: 2.5rem; opacity: 0.3; }
.cd-empty p   { font-size: 0.85rem; }

.cd-foot {
    padding:       1.25rem 1.5rem;
    border-top:    1px solid var(--border); flex-shrink: 0;
    display:       flex; flex-direction: column; gap: 0.75rem;
}
.cd-subtotal {
    display:     flex; justify-content: space-between; align-items: center;
    font-size:   0.85rem;
}
.cd-pix-hint {
    display:     flex; align-items: center; gap: 0.4rem;
    font-size:   0.72rem; color: var(--text-muted);
    padding:     0.5rem 0.75rem;
    background:  rgba(50,188,173,0.06);
    border:      1px solid rgba(50,188,173,0.15);
    border-radius: var(--r-md);
}

/* ── Cart FAB ─────────────────────────────────────────────────── */
.cart-fab {
    position:    fixed; bottom: 2rem; right: 2rem; z-index: 90;
    width:       54px; height: 54px;
    background:  var(--gold); color: #060606;
    border:      none; border-radius: 50%;
    display:     flex; align-items: center; justify-content: center;
    font-size:   1.1rem; cursor: pointer;
    box-shadow:  0 4px 20px rgba(201,168,76,0.4);
    transition:  transform var(--ease), box-shadow var(--ease);
}
.cart-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(201,168,76,0.55); }

.fab-count {
    position:   absolute; top: -4px; right: -4px;
    background: var(--cat-crime); color: #fff;
    font-size:  0.58rem; font-weight: 700;
    padding:    2px 6px; border-radius: 99px;
    border:     1.5px solid var(--bg-abyss);
    font-family: var(--font-body);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .product-grid          { grid-template-columns: repeat(3, 1fr); }
    .loja-hero-content,
    .loja-featured-wrap,
    .loja-grid-section,
    .shipping-banner       { padding-left: 2.5rem; padding-right: 2.5rem; }
    .filter-bar            { padding-left: 2.5rem; padding-right: 2.5rem; }
}

@media (max-width: 900px) {
    .product-grid    { grid-template-columns: repeat(2, 1fr); }
    .lf-visual       { display: none; }
    .loja-featured-wrap,
    .loja-grid-section,
    .loja-hero-content,
    .shipping-banner { padding-left: 1.5rem; padding-right: 1.5rem; }
    .filter-bar      { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sb-sep          { display: none; }
    .sb-item         { min-width: 140px; padding: 0.5rem 1rem; }
}

@media (max-width: 600px) {
    .loja-hero         { height: 45vh; min-height: 300px; }
    .loja-hero-content,
    .loja-featured-wrap,
    .loja-grid-section,
    .shipping-banner   { padding-left: 1.25rem; padding-right: 1.25rem; }
    .filter-bar        { padding: 0.75rem 1.25rem; top: 64px; }
    .product-grid      { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .lf-content        { padding: 2rem 1.75rem; }
    .loja-hero-badges  { gap: 0.75rem; }
    .cart-drawer       { width: 100vw; }
    .cart-fab          { bottom: 1.25rem; right: 1.25rem; }
}