/* =========================================================
   PRIME VAPE — RESPONSIVIDADE COMPLETA
========================================================= */

/* =========================================================
   DESKTOP MÉDIO
========================================================= */
@media (max-width: 1240px) {
    :root {
        --cart-panel-width: 288px;
        --content-right-gutter: 28px;
    }

    .cart-panel {
        width: var(--cart-panel-width);
    }

    .main-content {
        padding-right: calc(var(--cart-panel-width) + var(--content-right-gutter));
    }

    .products-grid {
        gap: 12px;
    }

    .products-grid[data-layout-columns="5"] {
        gap: 9px;
    }

    .checkout-review-layout {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.7fr);
    }
}

/* =========================================================
   TABLET HORIZONTAL
========================================================= */
@media (max-width: 1080px) {
    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding: 84px calc(var(--cart-panel-width) + var(--content-right-gutter)) 32px 18px;
    }

    .products-grid {
        grid-template-columns: repeat(var(--products-per-row-tablet, 3), minmax(0, 1fr));
    }

    .products-grid[data-layout-columns="4"],
    .products-grid[data-layout-columns="5"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .modal-product-layout {
        grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
    }

    .hero-banner-card {
        min-height: 235px;
    }
}

/* =========================================================
   TABLET VERTICAL
========================================================= */
@media (max-width: 900px) {
    :root {
        --content-right-gutter: 0px;
    }

    body {
        overflow-x: hidden;
    }

    .header {
        height: 64px;
        min-height: 64px;
        padding: 9px 14px;
    }

    .header-actions {
        gap: 7px;
    }

    .login-status {
        min-width: 160px;
    }

    .main-content {
        margin-left: 0;
        padding: 84px 16px 30px;
    }

    /* Carrinho em bloco fluido */
    .cart-panel {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        margin: 0 16px 28px;
        border-radius: var(--radius-md);
    }

    .cart-panel.is-collapsed {
        width: auto;
    }

    #cart-items {
        max-height: 320px;
    }

    /* Grades */
    .products-grid {
        grid-template-columns: repeat(var(--products-per-row-mobile, 2), minmax(0, 1fr));
    }

    .products-grid[data-layout-columns="4"],
    .products-grid[data-layout-columns="5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-product-layout,
    .overview-grid,
    .checkout-review-layout,
    .checkout-summary-grid,
    .payment-layout,
    .customer-stats-grid,
    .catalog-filters-grid {
        grid-template-columns: 1fr;
    }

    .checkout-right-stack {
        order: -1;
    }

    /* Busca */
    #search-modal {
        align-items: flex-start;
        justify-content: center;
        padding: 72px 12px 12px;
    }

    .search-modal-card {
        width: min(620px, 100%);
        max-height: calc(100vh - 84px);
    }

    .search-filters-panel {
        grid-template-columns: 1fr;
    }

    /* Banners */
    .hero-banners-stage,
    .hero-banner-card {
        min-height: 230px;
    }

    .hero-banner-card {
        padding: 24px;
    }

    .hero-banner-content {
        max-width: 460px;
    }

    .hero-banner-content h2 {
        font-size: clamp(1.7rem, 5vw, 2.5rem);
    }

    /* Aviso */
    .age-banner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .age-banner-cta {
        grid-column: 1 / -1;
        justify-self: start;
    }

    /* Pedidos */
    .orders-grid {
        grid-template-columns: 1fr;
    }

    .region-choice-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   CELULAR
========================================================= */
@media (max-width: 640px) {
    :root {
        --radius-sm: 7px;
        --radius-md: 12px;
        --radius-lg: 16px;
    }

    .header {
        height: 64px;
        min-height: 64px;
        padding: 8px 10px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    /* Logo */
    .logo-area {
        flex: 1 1 auto;
        gap: 7px;
        min-width: 0;
    }

    .logo-image {
        width: 36px;
        height: 36px;
    }

    .logo-text {
        display: grid;
        align-items: center;
        gap: 2px;
        min-width: 0;
    }

    .logo-text h1 {
        max-width: 115px;
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logo-text span {
        width: max-content;
        min-height: 17px;
        padding: 0 5px;
        font-size: 0.55rem;
    }

    /* Ações do cabeçalho */
    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        gap: 5px;
        width: auto;
    }

    .header-actions .login-status,
    .header-actions .search-trigger-button {
        display: none;
    }

    .header-actions > .button-primary,
    .header-actions > .button-secondary {
        min-height: 35px;
        padding: 0 9px;
        font-size: 0.69rem;
        white-space: nowrap;
    }

    /* Abas móveis */
    .mobile-store-tabs {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        z-index: 999;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        padding: 6px 8px;
        border-bottom: 1px solid var(--border);
        background: rgba(5, 5, 4, 0.96);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-store-tabs button {
        min-width: 0;
        min-height: 35px;
        padding: 0 4px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface);
        color: var(--text-muted);
        font-size: 0.63rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-store-tabs button:hover,
    .mobile-store-tabs button:active,
    .mobile-store-tabs button.is-active {
        border-color: rgba(var(--accent-rgb), 0.42);
        background: var(--accent-soft);
        color: var(--accent-light);
    }

    /* Conteúdo */
    .main-content {
        margin-left: 0;
        padding: 118px 10px 24px;
        gap: 16px;
    }

    #category-list,
    #products-title,
    #cart-panel {
        scroll-margin-top: 118px;
    }

    /* Cabeçalho dos produtos */
    .products-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .products-header h2 {
        font-size: 1.45rem;
        line-height: 1.05;
    }

    .header-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .summary-pill {
        min-width: 0;
        min-height: 58px;
    }

    /* Produtos */
    .products-grid,
    .showcase-grid,
    .products-grid[data-layout-columns="4"],
    .products-grid[data-layout-columns="5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .product-card {
        border-radius: 12px;
    }

    .product-image-wrap,
    .products-grid[data-layout-columns="4"] .product-image-wrap,
    .products-grid[data-layout-columns="5"] .product-image-wrap {
        padding: 7px;
    }

    .product-image,
    .products-grid[data-layout-columns="4"] .product-image,
    .products-grid[data-layout-columns="5"] .product-image {
        height: 145px;
    }

    .product-caption-shell,
    .products-grid[data-layout-columns="4"] .product-caption-shell,
    .products-grid[data-layout-columns="5"] .product-caption-shell {
        gap: 6px;
        padding: 8px;
    }

    .product-caption,
    .products-grid[data-layout-columns="4"] .product-caption,
    .products-grid[data-layout-columns="5"] .product-caption {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .product-body h3,
    .products-grid[data-layout-columns="4"] .product-body h3,
    .products-grid[data-layout-columns="5"] .product-body h3 {
        min-height: 2.45em;
        max-height: 2.45em;
        font-size: 0.77rem;
        line-height: 1.22;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .product-description,
    .product-spec-preview,
    .product-highlight-row {
        display: none;
    }

    .product-prices {
        justify-items: start;
        width: 100%;
    }

    .product-prices strong,
    .products-grid[data-layout-columns="4"] .product-prices strong,
    .products-grid[data-layout-columns="5"] .product-prices strong {
        font-size: 0.85rem;
        text-align: left;
    }

    .product-details-button,
    .products-grid[data-layout-columns="4"] .product-details-button,
    .products-grid[data-layout-columns="5"] .product-details-button {
        width: 100%;
        min-width: 0;
        min-height: 33px;
        padding: 0 7px;
        font-size: 0.68rem;
    }

    .product-stock-pill,
    .product-gallery-counter {
        top: 5px;
        min-height: 20px;
        padding: 0 5px;
        font-size: 0.52rem;
    }

    .product-stock-pill {
        left: 5px;
    }

    .product-gallery-counter {
        right: 5px;
    }

    /* Vitrine */
    .products-showcase,
    .storefront-notices-section,
    .hero-banners-section,
    .orders-section {
        gap: 12px;
    }

    .showcase-card {
        padding: 11px;
    }

    .showcase-products-track {
        gap: 9px;
    }

    .showcase-card .product-card.is-compact,
    .showcase-card .product-card.is-marquee {
        width: 160px;
        min-width: 160px;
    }

    .showcase-card .product-card.is-compact .product-image {
        height: 120px;
    }

    /* Banners */
    .hero-banners-stage,
    .hero-banner-card {
        min-height: 215px;
    }

    .hero-banner-card {
        padding: 19px 16px;
        border-radius: var(--radius-md);
    }

    .hero-banner-content {
        gap: 9px;
    }

    .hero-banner-content h2 {
        font-size: 1.55rem;
    }

    .hero-banner-content p {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .hero-banner-cta {
        min-height: 36px;
        font-size: 0.72rem;
    }

    /* Aviso de idade */
    .age-banner {
        grid-template-columns: 43px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }

    .age-banner-badge {
        width: 43px;
        height: 43px;
    }

    .age-banner-content {
        gap: 3px;
    }

    .age-banner h1 {
        font-size: 0.9rem;
    }

    .age-banner p:last-child {
        font-size: 0.72rem;
    }

    .age-banner-cta {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* Região */
    .region-choice-list {
        grid-template-columns: 1fr;
    }

    .region-chooser,
    .catalog-tools,
    .showcase-card {
        padding: 12px;
    }

    /* Carrinho */
    .cart-panel {
        width: auto;
        margin: 0 10px 22px;
        padding: 9px;
        border-radius: 12px;
    }

    .cart-head {
        padding: 9px;
    }

    .cart-head-copy {
        padding-right: 68px;
    }

    .cart-title-button {
        font-size: 0.9rem;
    }

    .cart-head-actions {
        top: 8px;
        right: 8px;
    }

    #cart-items {
        max-height: 300px;
    }

    .cart-item {
        padding: 8px;
    }

    .cart-item-top,
    .cart-item-bottom,
    .cart-total-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-item-price {
        text-align: left;
    }

    .cart-coupon-row {
        grid-template-columns: 1fr;
    }

    .cart-coupon-row .button-secondary,
    .cart-coupon-row .button-primary {
        width: 100%;
    }

    /* Modal */
    .modal {
        padding: 8px;
    }

    .modal-card {
        max-height: calc(100vh - 16px);
        padding: 15px;
        border-radius: var(--radius-md);
    }

    .modal-product-card {
        padding-top: 56px;
    }

    .modal-product-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .modal-gallery {
        gap: 8px;
    }

    #modal-image {
        max-height: 320px;
    }

    .modal-thumbnails {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .modal-product-content h2,
    .auth-modal-content h2 {
        font-size: 1.35rem;
    }

    /* Busca */
    #search-modal {
        align-items: stretch;
        justify-content: center;
        padding: 68px 6px 6px;
    }

    .search-modal-card {
        width: 100%;
        max-height: calc(100vh - 74px);
        border-radius: var(--search-radius-md);
    }

    .search-mini-bar {
        grid-template-columns: 18px minmax(0, 1fr) auto;
        min-height: 54px;
        padding: 7px 42px 7px 11px;
    }

    .search-mini-bar input {
        font-size: 0.8rem;
    }

    .search-mini-button {
        min-height: 32px;
        padding: 0 9px;
        font-size: 0.64rem;
    }

    .search-filters-panel {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .search-palette-field {
        grid-column: auto;
    }

    .search-best-sellers-section {
        padding: 10px;
    }

    .search-best-sellers-grid {
        grid-template-columns: 1fr;
    }

    .search-best-sellers-grid .product-card {
        grid-template-columns: 80px minmax(0, 1fr);
        min-height: 96px;
    }

    .search-best-sellers-grid .product-image-wrap {
        min-height: 96px;
    }

    .search-best-sellers-grid .product-image {
        height: 82px;
    }

    /* Checkout */
    .checkout-modal-card {
        width: min(100%, 720px);
    }

    .checkout-review-layout,
    .checkout-summary-grid,
    .payment-layout,
    .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-form-grid-full {
        grid-column: auto;
    }

    .choice-grid {
        grid-template-columns: 1fr;
    }

    .checkout-item-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .checkout-items-list {
        max-height: 240px;
    }

    .checkout-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .checkout-form-actions .button-primary,
    .checkout-form-actions .button-secondary {
        width: 100%;
        flex: none;
    }

    /* Pedidos */
    .order-card-summary,
    .order-card-head,
    .order-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .order-card-summary::after {
        align-self: flex-end;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================================
   CELULAR PEQUENO
========================================================= */
@media (max-width: 430px) {
    .header {
        padding-inline: 8px;
    }

    .logo-text h1 {
        max-width: 90px;
        font-size: 0.82rem;
    }

    .logo-text span {
        display: none;
    }

    .header-actions > .button-primary,
    .header-actions > .button-secondary {
        min-height: 34px;
        padding: 0 7px;
        font-size: 0.65rem;
    }

    .mobile-store-tabs {
        padding-inline: 5px;
    }

    .mobile-store-tabs button {
        min-height: 33px;
        font-size: 0.58rem;
    }

    .main-content {
        padding: 114px 7px 20px;
    }

    .products-grid,
    .showcase-grid,
    .products-grid[data-layout-columns="4"],
    .products-grid[data-layout-columns="5"] {
        gap: 7px;
    }

    .product-image,
    .products-grid[data-layout-columns="4"] .product-image,
    .products-grid[data-layout-columns="5"] .product-image {
        height: 125px;
    }

    .product-caption-shell,
    .products-grid[data-layout-columns="4"] .product-caption-shell,
    .products-grid[data-layout-columns="5"] .product-caption-shell {
        padding: 7px;
    }

    .product-body h3,
    .products-grid[data-layout-columns="4"] .product-body h3,
    .products-grid[data-layout-columns="5"] .product-body h3 {
        font-size: 0.7rem;
    }

    .product-prices strong,
    .products-grid[data-layout-columns="4"] .product-prices strong,
    .products-grid[data-layout-columns="5"] .product-prices strong {
        font-size: 0.78rem;
    }

    .product-details-button,
    .products-grid[data-layout-columns="4"] .product-details-button,
    .products-grid[data-layout-columns="5"] .product-details-button {
        min-height: 31px;
        font-size: 0.62rem;
    }

    .hero-banner-content h2 {
        font-size: 1.35rem;
    }

    .modal-thumbnails {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quantity-controls {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
    }

    .quantity-controls .button-secondary {
        width: 40px;
        min-width: 40px;
    }

    .search-mini-bar {
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .search-mini-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .search-palette-button {
        width: 25px;
        height: 25px;
    }
}

/* =========================================================
   CELULARES MUITO ESTREITOS
========================================================= */
@media (max-width: 360px) {
    .products-grid,
    .showcase-grid,
    .products-grid[data-layout-columns="4"],
    .products-grid[data-layout-columns="5"] {
        grid-template-columns: 1fr;
    }

    .product-image,
    .products-grid[data-layout-columns="4"] .product-image,
    .products-grid[data-layout-columns="5"] .product-image {
        height: 190px;
    }

    .product-body h3,
    .products-grid[data-layout-columns="4"] .product-body h3,
    .products-grid[data-layout-columns="5"] .product-body h3 {
        font-size: 0.82rem;
    }

    .header-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   IMPRESSÃO
========================================================= */
@media print {
    .header,
    .sidebar,
    .mobile-store-tabs,
    .cart-panel,
    .search-trigger-button {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
}