/*-----------------------------------*\
  #style.css
\*-----------------------------------*/





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --spanish-gray: hsl(0, 0%, 60%);
  --sonic-silver: hsl(0, 0%, 47%);
  --eerie-black: hsl(0, 0%, 13%);
  --salmon-pink: #e96718;
  --sandy-brown: hsl(29, 90%, 65%);
  --bittersweet: #e96718;
  --ocean-green: hsl(152, 51%, 52%);
  --davys-gray: hsl(0, 0%, 33%);
  --cultured: hsl(0, 0%, 93%);
  --white: hsl(0, 100%, 100%);
  --onyx: hsl(0, 0%, 27%);

  /**
   * typography
   */

  --fs-1: 1.563rem;
  --fs-2: 1.375rem;
  --fs-3: 1.25rem;
  --fs-4: 1.125rem;
  --fs-5: 1rem;
  --fs-6: 0.938rem;
  --fs-7: 0.875rem;
  --fs-8: 0.813rem;
  --fs-9: 0.75rem;
  --fs-10: 0.688rem;
  --fs-11: 0.625rem;

  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;

  /**
   * border-radius
   */

  --border-radius-md: 10px;
  --border-radius-sm: 5px;

  /**
   * transition 
   */

  --transition-timing: 0.2s ease;

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

button {
  background: none;
  font: inherit;
  border: none;
  cursor: pointer;
}

img,
ion-icon,
button,
a {
  display: block;
}

span {
  display: inline-block;
}

html {
  font-family: "Poppins", sans-serif;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

input {
  display: block;
  width: 100%;
  font: inherit;
}

input::-webkit-input-placeholder {
  font: inherit;
}

input::-moz-placeholder {
  font: inherit;
}

input:-ms-input-placeholder {
  font: inherit;
}

input::-ms-input-placeholder {
  font: inherit;
}

input::placeholder {
  font: inherit;
}

body {
  background: var(--white);
}

/**
 * scrollbar style
 */

body::-webkit-scrollbar {
  width: 15px;
}

body::-webkit-scrollbar-track {
  background: var(--white);
  border-left: 1px solid var(--cultured);
}

body::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 80%);
  border: 3px solid var(--white);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 0%, 70%);
}

/*-----------------------------------*\
  #SOBRE
\*-----------------------------------*/

.w3-content {
  font-family: "Poppins", sans-serif;
  width: 700px;
  margin-left: auto;
  margin-right: auto;

}

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container {
  padding: 0 25px;
}

.has-scrollbar {
  padding-bottom: 5px;
}

.has-scrollbar::-webkit-scrollbar {
  width: 12px;
  /* for vertical scroll */
  height: 12px;
  /* for horizontal scroll */
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid var(--white);
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

.has-scrollbar:hover::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 90%);
}

.has-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 0%, 80%);
}

.title {
  color: var(--eerie-black);
  font-size: var(--fs-5);
  font-weight: var(--weight-600);
  letter-spacing: 0.4px;
  text-transform: capitalize;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cultured);
  margin-bottom: 30px;
}

/*-----------------------------------*\
  #PRODUCT GRID
\*-----------------------------------*/

.bloco-main {
  margin-bottom: 30px;
}

.imagem-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 25px;
}

.imagem-grid .showimagem {
  border: 1px solid var(--cultured);
  -webkit-border-radius: 25px;
  border-radius: 25px;
  overflow: hidden;
  -webkit-transition: var(--transition-timing);
  -o-transition: var(--transition-timing);
  transition: var(--transition-timing);
}

.imagem-grid .showimagem:hover {
  -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
}

.imagem-grid .showimagem-banner {
  position: relative;
}

.imagem-grid .imagem-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: var(--transition-timing);
  -o-transition: var(--transition-timing);
  transition: var(--transition-timing);
}

.imagem-grid .imagem-img.default {
  position: relative;
  z-index: 1;
}

.imagem-grid .imagem-img.hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}

.imagem-grid .showimagem:hover .imagem-img.hover {
  opacity: 1;
}

.imagem-grid .showimagem:hover .imagem-img.default {
  opacity: 0;
}

.imagem-grid .showimagem:hover .imagem-img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.imagem-grid .showimagem-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--ocean-green);
  font-size: var(--fs-8);
  font-weight: var(--weight-500);
  color: var(--white);
  padding: 0 8px;
  -webkit-border-radius: var(--border-radius-sm);
  border-radius: var(--border-radius-sm);
  z-index: 3;
}


.imagem-grid .showimagem-content {
  padding: 15px 20px 0;
}

/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/


/**
 * responsive larger than 480px screen
 */

@media (min-width: 480px) {

  /**
   * #CUSTOM PROPERTY
   */

  :root {

    /**
     * typography 
     */

    --fs-1: 1.875rem;

  }




  /**
   * #PRODUCT 
   */

  .imagem-grid {
    -ms-grid-columns: 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

}


/**
 * responsive larger than 570px screen
 */

@media (min-width: 570px) {

  /**
   * #PRODUCT
   */

  .product-minimal .showimagem-container {
    min-width: 50%;
  }

  .product-featured .showimagem-img {
    max-width: 450px;
    margin: auto;
  }

  .product-featured .countdown {
    gap: 20px;
  }

  
}

/**
 * responsive larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * #CUSTOM PROPERTY
   */

  :root {

    /**
     * typography 
     */

    --fs-1: 2.375rem;

  }

  .container {
    max-width: 750px;
    margin: auto;
  }



  /**
   * #PRODUCT 
   */
  .product-minimal .product-showimagem {
    min-width: -webkit-calc(50% - 10px);
    min-width: calc(50% - 10px);
    width: -webkit-calc(50% - 10px);
    width: calc(50% - 10px);
  }

  .product-minimal .showimagem-container {
    min-width: 100%;
  }

  .product-featured .showimagem {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
  }

  .product-featured .showimagem-img {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .product-featured .showimagem-content {
    margin-top: 0;
    min-width: -webkit-calc(100% - 345px);
    min-width: calc(100% - 345px);
  }
}

/**
 * responsive larger than 1024px screen
 */

@media (min-width: 1024px) {

  /**
   * #CUSTOM PROPERTY
   */

  :root {

    /**
     * typography 
     */

    --fs-1: 2.625rem;
    --fs-2: 1.125rem;

  }



  /**
   * #REUSED STYLE 
   */

  .container {
    max-width: 980px;
  }

  /**
   * #PRODUCT 
   */

  .product-container .container {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 30px;
  }

  .product-minimal .product-showimagem {
    min-width: -webkit-calc(33.33% - 14px);
    min-width: calc(33.33% - 14px);
    width: -webkit-calc(33.33% - 14px);
    width: calc(33.33% - 14px);
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }

  .product-minimal .showimagem-wrapper {
    gap: 10px;
  }

  .product-minimal .showimagem-container {
    padding: 2px;
  }

  .product-featured .countdown-content {
    padding: 5px 10px;
  }

  .imagem-grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

/**
 * responsive larger than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * #REUSED STYLE 
   */

  .container {
    max-width: 1200px;
  }

  /**
   * #PRODUCT
   */

  .product-featured .showimagem>div {
    min-width: -webkit-calc(50% - 10px);
    min-width: calc(50% - 10px);
  }

  .product-featured .display-number {
    --fs-5: 1.125rem;
  }

  .imagem-grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(3, 1fr);
  }
}

/**
 * responsive larger than 1400px screen
 */

@media (min-width: 1400px) {


  /**
   * #REUSED STYLE 
   */

  .container {
    max-width: 1350px;
  }

}