/* =========================================================
   LUXURIOSA
   RESPONSIVE.CSS
   Responsividade para celular, tablet e telas menores
   ========================================================= */


/* =========================================================
   TABLETS / NOTEBOOKS PEQUENOS
   Até 900px
   ========================================================= */

@media (max-width: 900px) {

  /* -------------------------------------------------------
     CONTAINER
     ------------------------------------------------------- */

  .container {
    width: min(94%, 760px);
  }


  /* -------------------------------------------------------
     HEADER / NAVEGAÇÃO
     ------------------------------------------------------- */

  .nav {
    position: relative;
  }

  .burger {
    display: inline-flex;

    align-items: center;

    justify-content: center;
  }

  .navlinks {
    display: none;

    position: absolute;

    top: 76px;

    left: 0;

    right: 0;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    background:
      rgba(11, 11, 11, 0.98);

    border-bottom: 1px solid var(--line);

    padding: 10px 4% 18px;

    z-index: 90;

    box-shadow:
      0 18px 35px rgba(0, 0, 0, 0.35);
  }

  .navlinks.open {
    display: flex;
  }

  .navlinks a {
    display: block;

    padding: 14px 4px;

    border-bottom:
      1px solid rgba(212, 175, 124, 0.08);
  }

  .navlinks a:last-child {
    border-bottom: 0;
  }


  /* -------------------------------------------------------
     HERO
     ------------------------------------------------------- */

  .hero {
    padding: 56px 0 64px;
  }

  .hero-grid {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .hero h1 {
    max-width: 700px;
  }

  .hero-card {
    min-height: 320px;

    max-width: 560px;

    margin: 0 auto;

    width: 100%;
  }


  /* -------------------------------------------------------
     CATEGORIAS
     ------------------------------------------------------- */

  .categories {
    grid-template-columns:
      repeat(2, 1fr);
  }


  /* -------------------------------------------------------
     PRODUTOS
     ------------------------------------------------------- */

  .products {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .product-img {
    aspect-ratio: 1 / 1;
  }


  /* -------------------------------------------------------
     EXPERIÊNCIA
     ------------------------------------------------------- */

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


  /* -------------------------------------------------------
     ETAPAS
     ------------------------------------------------------- */

  .steps {
    grid-template-columns:
      repeat(2, 1fr);
  }


  /* -------------------------------------------------------
     FOOTER
     ------------------------------------------------------- */

  .footer-grid {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }


  /* -------------------------------------------------------
     MODAL DE PRODUTO
     ------------------------------------------------------- */

  .modal {
    grid-template-columns: 1fr;

    width: min(92%, 680px);

    max-height: 90vh;

    overflow-y: auto;
  }

  .modal .m-img {
    min-height: 300px;

    max-height: 420px;
  }

  .modal .m-body {
    padding: 28px;
  }


  /* -------------------------------------------------------
     CARRINHO
     ------------------------------------------------------- */

  .cart {
    width: min(430px, 88vw);
  }

}


/* =========================================================
   CELULARES
   Até 600px
   ========================================================= */

@media (max-width: 600px) {

  /* -------------------------------------------------------
     BASE
     ------------------------------------------------------- */

  html {
    scroll-padding-top: 70px;
  }

  .container {
    width: 92%;
  }


  /* -------------------------------------------------------
     TIPOGRAFIA
     ------------------------------------------------------- */

  h1 {
    font-size:
      clamp(36px, 11vw, 52px);

    line-height: 1.02;
  }

  .section h2 {
    font-size: 32px;
  }

  .section-head p {
    font-size: 14px;
  }


  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .nav {
    height: 66px;

    gap: 8px;
  }

  .logo {
    font-size: 23px;

    min-width: 0;
  }

  .logo svg {
    width: 27px;

    height: 27px;
  }

  .navlinks {
    top: 66px;
  }

  .nav-right {
    gap: 7px;
  }

  .nav-right .btn {
    display: none;
  }


  /* Carrinho compacto */

  .cart-trigger {
    min-height: 40px;

    padding:
      8px 10px;

    gap: 5px;

    font-size: 10px;

    letter-spacing: 0.08em;
  }

  .cart-icon {
    font-size: 14px;
  }

  .cart-label {
    display: none;
  }

  .cart-count {
    min-width: 19px;

    height: 19px;

    font-size: 9px;
  }


  .burger {
    width: 40px;

    height: 40px;
  }


  /* -------------------------------------------------------
     HERO
     ------------------------------------------------------- */

  .hero {
    padding: 44px 0 52px;
  }

  .hero-grid {
    gap: 34px;
  }

  .hero p {
    font-size: 15px;

    line-height: 1.7;
  }

  .pills {
    gap: 7px;
  }

  .pills li {
    font-size: 11px;

    padding: 7px 10px;
  }

  .buttons {
    flex-direction: column;

    align-items: stretch;
  }

  .buttons .btn {
    width: 100%;
  }

  .hero-card {
    min-height: 270px;

    padding: 28px;
  }

  .hero-card .wordmark {
    font-size: 40px;
  }

  .hero-card .slogan {
    font-size: 12px;
  }

  .crest {
    width: 66px;

    height: 66px;
  }


  /* -------------------------------------------------------
     SEÇÕES
     ------------------------------------------------------- */

  .section {
    padding: 52px 0;
  }

  .section-head {
    margin-bottom: 26px;
  }


  /* -------------------------------------------------------
     CATEGORIAS
     ------------------------------------------------------- */

  .categories {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 10px;
  }

  .cat {
    min-height: 130px;

    padding: 18px 14px;
  }

  .cat b {
    font-size: 20px;
  }

  .cat span {
    font-size: 11px;
  }


  /* -------------------------------------------------------
     FILTROS
     ------------------------------------------------------- */

  .chips {
    gap: 7px;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 5px;

    scrollbar-width: none;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: 0 0 auto;

    white-space: nowrap;

    font-size: 11px;

    padding: 8px 12px;
  }


  /* -------------------------------------------------------
     PRODUTOS
     ------------------------------------------------------- */

  .products {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .product {
    min-width: 0;
  }

  .product-img {
    aspect-ratio: 1 / 1.08;
  }

  .product-body {
    padding: 12px;
  }

  .product h3 {
    font-size: 15px;

    line-height: 1.3;
  }

  .product .tag {
    font-size: 9px;
  }

  .price {
    font-size: 15px;
  }

  .product .btn {
    width: 100%;

    font-size: 10px;

    padding: 9px 10px;
  }

  .badges {
    top: 8px;

    left: 8px;

    right: 8px;
  }

  .badge {
    font-size: 9px;

    padding: 5px 7px;
  }


  /* -------------------------------------------------------
     BANNER
     ------------------------------------------------------- */

  .banner {
    padding: 24px;
  }

  .banner h3 {
    font-size: 23px;
  }

  .banner p {
    font-size: 13px;
  }


  /* -------------------------------------------------------
     CARDS DE EXPERIÊNCIA
     ------------------------------------------------------- */

  .cols3 {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .card {
    padding: 22px;
  }


  /* -------------------------------------------------------
     ENTREGA
     ------------------------------------------------------- */

  .steps {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .step {
    padding: 22px;
  }


  /* -------------------------------------------------------
     SOBRE
     ------------------------------------------------------- */

  .about {
    padding: 0;
  }

  .about p {
    font-size: 14px;
  }


  /* -------------------------------------------------------
     FOOTER
     ------------------------------------------------------- */

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .footer-links {
    text-align: left;

    gap: 8px;
  }

  .footer-links a,
  .footer-links button {
    font-size: 13px;
  }


  /* -------------------------------------------------------
     WHATSAPP FLUTUANTE
     ------------------------------------------------------- */

  .whatsapp {
    width: 52px;

    height: 52px;

    right: 16px;

    bottom: 16px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0;
  }

  .whatsapp::before {
    content: "↗";

    font-size: 20px;

    line-height: 1;
  }


  /* -------------------------------------------------------
     MODAL
     ------------------------------------------------------- */

  .modal {
    width: 94%;

    max-height: 92vh;

    border-radius: 16px;
  }

  .modal .m-img {
    min-height: 230px;

    max-height: 300px;
  }

  .modal .m-body {
    padding: 22px;
  }

  .modal h3 {
    font-size: 28px;
  }

  .modal .m-desc {
    font-size: 13px;
  }

  .modal #mBtn {
    width: 100%;
  }

  .close {
    width: 38px;

    height: 38px;

    top: 10px;

    right: 10px;
  }


  /* -------------------------------------------------------
     CARRINHO
     ------------------------------------------------------- */

  .cart {
    width: 100vw;

    max-width: none;

    border-left: 0;

    box-shadow:
      0 -20px 70px rgba(0, 0, 0, 0.5);
  }

  .cart-header {
    min-height: 82px;

    padding:
      18px 18px 16px;
  }

  .cart-header h2 {
    font-size: 25px;
  }

  .cart-items {
    padding:
      4px 18px 18px;
  }

  .cart-item {
    grid-template-columns:
      68px 1fr;

    gap: 12px;

    padding: 14px 0;
  }

  .cart-item-img {
    width: 68px;

    height: 68px;

    border-radius: 12px;
  }

  .cart-item-name {
    font-size: 17px;
  }

  .cart-item-controls {
    margin-top: 7px;
  }

  .cart-footer {
    padding:
      16px 18px 18px;
  }

  .cart-total-row strong {
    font-size: 23px;
  }

  .cart-checkout {
    padding:
      14px 18px;
  }

  .cart-note {
    font-size: 9px;
  }


  /* -------------------------------------------------------
     AGE GATE
     ------------------------------------------------------- */

  .gate {
    width: 92%;

    padding:
      28px 22px;
  }

  .gate h3 {
    font-size: 26px;
  }

  .gate p {
    font-size: 13px;
  }

  .gate .buttons {
    flex-direction: column;
  }

  .gate .buttons .btn {
    width: 100%;
  }

}


/* =========================================================
   CELULARES MUITO PEQUENOS
   Até 380px
   ========================================================= */

@media (max-width: 380px) {

  .container {
    width: 94%;
  }


  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .logo {
    font-size: 20px;
  }

  .logo svg {
    width: 23px;

    height: 23px;
  }

  .cart-trigger {
    padding:
      7px 8px;
  }

  .burger {
    width: 38px;

    height: 38px;
  }


  /* -------------------------------------------------------
     HERO
     ------------------------------------------------------- */

  .hero h1 {
    font-size: 34px;
  }

  .hero-card {
    min-height: 240px;

    padding: 22px;
  }

  .hero-card .wordmark {
    font-size: 34px;
  }


  /* -------------------------------------------------------
     CATEGORIAS
     ------------------------------------------------------- */

  .categories {
    gap: 8px;
  }

  .cat {
    min-height: 115px;

    padding: 14px 10px;
  }

  .cat b {
    font-size: 17px;
  }


  /* -------------------------------------------------------
     PRODUTOS
     ------------------------------------------------------- */

  .products {
    gap: 8px;
  }

  .product-body {
    padding: 10px;
  }

  .product h3 {
    font-size: 14px;
  }

  .price {
    font-size: 14px;
  }

  .product .btn {
    font-size: 9px;

    padding: 8px;
  }


  /* -------------------------------------------------------
     SEÇÕES
     ------------------------------------------------------- */

  .section {
    padding: 44px 0;
  }

  .section h2 {
    font-size: 29px;
  }


  /* -------------------------------------------------------
     MODAL
     ------------------------------------------------------- */

  .modal {
    width: 96%;
  }

  .modal .m-body {
    padding: 18px;
  }

  .modal h3 {
    font-size: 24px;
  }


  /* -------------------------------------------------------
     CARRINHO
     ------------------------------------------------------- */

  .cart-header {
    padding-left: 15px;

    padding-right: 15px;
  }

  .cart-items {
    padding-left: 15px;

    padding-right: 15px;
  }

  .cart-footer {
    padding-left: 15px;

    padding-right: 15px;
  }

  .cart-item {
    grid-template-columns:
      62px 1fr;
  }

  .cart-item-img {
    width: 62px;

    height: 62px;
  }

  .cart-item-name {
    font-size: 16px;
  }

  .cart-remove {
    font-size: 9px;
  }

}


/* =========================================================
   TELAS GRANDES COM ALTURA PEQUENA
   Ex.: notebook 1366x600
   ========================================================= */

@media (min-width: 901px) and (max-height: 700px) {

  .hero {
    padding-top: 54px;

    padding-bottom: 54px;
  }

  .hero-grid {
    gap: 50px;
  }

}


/* =========================================================
   TOUCH DEVICES
   Evita efeitos hover exagerados em celular
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .product:hover {
    transform: none;
  }

  .cat:hover {
    transform: none;
  }

  .btn.primary:hover,
  .btn.ghost:hover {
    transform: none;
  }

  .cart-trigger:hover {
    transform: none;
  }

  .cart-close:hover {
    transform: none;
  }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }

}

/* CUPONS */

@media (max-width: 860px) {
  .coupon-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .coupon {
    flex-direction: column;
  }

  .coupon-value {
    flex: none;

    flex-direction: row;

    gap: 10px;

    border-right: 0;

    border-bottom: 1px dashed var(--gold);
  }

  .coupon-value small {
    margin-top: 0;
  }
}