/* ===================================================================
   LUMEA STORE
   PRINT.CSS
   PARTE 1

   01. Página
   02. Impressão
   03. Hero
   04. Containers
   05. Quebras

===================================================================*/

/* ==========================================================
   A4
========================================================== */

@page {
  size: A4 portrait;

  margin: 12mm;
}

/* ==========================================================
   PRINT
========================================================== */

@media print {
  html {
    background: #fff;
  }

  body {
    background: #fff !important;

    color: #000;

    width: 100%;

    margin: 0;

    padding: 0;

    -webkit-print-color-adjust: exact;

    print-color-adjust: exact;
  }

  /* ==========================================================
   OCULTAR
========================================================== */

  .navbar,
  .whatsapp-float,
  .back-to-top {
    display: none !important;
  }

  /* ==========================================================
   MAIN
========================================================== */

  main {
    display: block;
  }

  /* ==========================================================
   HERO
========================================================== */

  .hero {
    height: 260mm;

    page-break-after: always;

    break-after: page;

    overflow: hidden;
  }

  .hero img {
    width: 100%;

    height: 100%;

    object-fit: cover;
  }

  .hero-overlay {
    background: rgba(0, 0, 0, 0.28);
  }

  /* ==========================================================
   CONTAINERS
========================================================== */

  .container {
    width: 100%;

    max-width: none;
  }

  /* ==========================================================
   SECTIONS
========================================================== */

  section {
    page-break-inside: avoid;

    break-inside: avoid;
  }

  /* ==========================================================
   PRODUCT FEATURE
========================================================== */

  .product-feature {
    page-break-inside: avoid;

    break-inside: avoid;
  }

  /* ==========================================================
   LOOK CARD
========================================================== */

  .look-card {
    page-break-inside: avoid;

    break-inside: avoid;
  }

  /* ==========================================================
   PRODUCT CARD
========================================================== */

  .product-card {
    page-break-inside: avoid;

    break-inside: avoid;
  }

  /* ==========================================================
   IMAGENS
========================================================== */

  img {
    page-break-inside: avoid;

    break-inside: avoid;
  }

  /* ==========================================================
   FIGURES
========================================================== */

  figure {
    page-break-inside: avoid;
  }

  /* ==========================================================
   LINKS
========================================================== */

  a {
    color: inherit;

    text-decoration: none;
  }

  /* ==========================================================
   FOOTER
========================================================== */

  .footer {
    page-break-before: always;

    break-before: page;
  }
}
/* ===================================================================
   LUMEA STORE
   PRINT.CSS
   PARTE 2

   06. Tipografia
   07. Grids
   08. Espaçamentos
   09. Imagens
   10. Cores
   11. Finalização

===================================================================*/

@media print {
  /* ==========================================================
   TIPOGRAFIA
========================================================== */

  body {
    font-size: 11pt;

    line-height: 1.6;
  }

  h1 {
    font-size: 34pt;
  }

  h2 {
    font-size: 26pt;
  }

  h3 {
    font-size: 18pt;
  }

  p {
    font-size: 11pt;
  }

  /* ==========================================================
   HERO
========================================================== */

  .hero-content {
    max-width: 80%;
  }

  .hero-content h1 {
    margin-bottom: 18px;
  }

  .hero-content p {
    max-width: 480px;
  }

  /* ==========================================================
   EDITORIAL
========================================================== */

  .editorial-section {
    padding: 30mm 0;
  }

  .editorial-section .container {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18mm;

    align-items: center;
  }

  /* ==========================================================
   FEATURE
========================================================== */

  .product-feature {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 18mm;

    align-items: center;
  }

  /* ==========================================================
   COLLECTION
========================================================== */

  .collection-section {
    padding: 24mm 0;
  }

  /* ==========================================================
   GRID
========================================================== */

  .editorial-grid {
    display: flex;

    flex-direction: column;

    gap: 18mm;
  }

  .products-grid {
    display: grid;

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

    gap: 12mm;
  }

  /* ==========================================================
   CARDS
========================================================== */

  .product-card {
    box-shadow: none;

    border: 1px solid #ddd;
  }

  .look-card {
    gap: 18mm;
  }

  /* ==========================================================
   IMAGENS
========================================================== */

  .look-image img {
    height: 180mm;

    object-fit: cover;
  }

  .product-image img {
    height: 120mm;

    object-fit: cover;
  }

  /* ==========================================================
   BADGE
========================================================== */

  .badge {
    border: 1px solid #d8d8d8;

    box-shadow: none;
  }

  /* ==========================================================
   BOTÕES
========================================================== */

  .hero-button,
  .product-button,
  .nav-button {
    display: none !important;
  }

  /* ==========================================================
   RODAPÉ
========================================================== */

  .footer {
    border-top: 1px solid #d5d5d5;

    padding-top: 18mm;
  }

  .footer-content {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 20mm;
  }

  .copyright {
    margin-top: 12mm;
  }

  /* ==========================================================
   CORES
========================================================== */

  * {
    -webkit-print-color-adjust: exact;

    print-color-adjust: exact;
  }

  /* ==========================================================
   MARGENS
========================================================== */

  .section-header {
    margin-bottom: 14mm;
  }

  .section-header::after {
    margin-top: 5mm;
  }

  /* ==========================================================
   QUEBRA DE PÁGINA
========================================================== */

  .hero {
    page-break-after: always;
  }

  .editorial-section {
    page-break-after: always;
  }

  .highlight-section {
    page-break-after: always;
  }

  .collection-section {
    page-break-inside: avoid;
  }

  .cta {
    page-break-before: always;
  }

  /* ==========================================================
   OCULTAR ELEMENTOS WEB
========================================================== */

  .hero-button,
  .product-button,
  .nav-button,
  .back-to-top,
  .whatsapp-float {
    visibility: hidden;
  }

  /* ==========================================================
   EVITAR CORTES
========================================================== */

  img,
  figure,
  .product-card,
  .look-card,
  .product-feature {
    break-inside: avoid;

    page-break-inside: avoid;
  }

  /* ==========================================================
   FIM
========================================================== */
}