/*
Theme Name:  Urbyonlabs
Description: Tema personalizado para urbyonlabs. Tema hijo de astra.
Author:      Alejandro Fernández - Camposemantico
Author URL:  https://camposemantico.es
Template:    astra
Version:     1.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

@font-face {
  font-family: "Grotesk";
  src: url("assets/fonts/monument-grotesk-regular.woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* Merriweather Sans se encola en functions/functions-theme.php (el @import aquí era ignorado) */

:root {
  background: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  --bg: #fbf9f7;
  --primary: #3a4a5a;
  --secondary: #63c1c1;
  --tertiary: #a7b5c1;

  --ast-global-color-0: var(--secondary);
  --ast-global-color-1: var(--secondary);
  --ast-global-color-2: var(--primary);

  --grid-gap: 1.5rem;
  --grid-padding: 2rem;

  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;

  --grid-width: calc(
    (100dvw / 16) - (15 * var(--grid-gap) / 16) -
      (2 * var(--grid-padding) / 16) - 1px
  );
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--primary);
  font-family: "Merriweather Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/** GRID OVERLAY**/
.row.showgrid {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  padding: var(--grid-padding);
  /* background: rgba(255, 0, 0, 0.0025); */
}

.row.showgrid .col {
  width: 100%;
  height: 100dvh;
  overflow: hidden;

  &::after {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: calc(100%);
    height: 100dvh;
    border-left: dashed 1px rgba(255, 0, 0, 0.25);
    border-right: dashed 1px rgba(255, 0, 0, 0.25);
  }

  @media only screen and (min-width: 1024px) {
    width: var(--grid-width);
  }
}

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.row .col {
  width: 100%;

  @media only screen and (min-width: 1024px) {
    width: var(--grid-width);
  }
}

.ast-container,
.ast-woo-shop-archive .site-content > .ast-container,
.entry-content[data-ast-blocks-layout] > * {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.ast-container {
  padding: 0 var(--grid-padding);
}

.ast-plain-container {
  background: var(--bg);
}

.cart-sidebar .woocommerce-js .woocommerce table.shop_table,
.cart-sidebar .woocommerce-js .woocommerce table.shop_table * {
  max-width: 100%;
  display: flex !important;
  flex-wrap: wrap;
}

.ast-plain-container.ast-no-sidebar #primary {
  padding: 0;

  @media only screen and (min-width: 1024px) {
    /* padding: 0 calc(1 * var(--grid-width) + 1 * var(--grid-gap)); */
  }

  @media only screen and (min-width: 1200px) {
    padding: 0 calc(2 * var(--grid-width) + 2 * var(--grid-gap));
  }
}

.ast-builder-grid-row {
  width: 100%;
}

.woocommerce-js ul.products,
.woocommerce-js ul.products li.product {
  margin: 0;
  padding: 0;
}

.woocommerce-js ul.products {
  gap: var(--grid-gap);
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  background: #fff;
}

.ast-site-identity .ast-logo-svg-icon svg {
  min-width: 150px;
}

.menu-container {
  display: flex;
  align-items: flex-start;
  gap: var(--grid-gap);
  padding: var(--grid-gap) 0;
  background: #fff;
  border-top: 1px solid var(--tertiary);
  padding: var(--grid-padding);

  @media only screen and (min-width: 1200px) {
    padding: var(--grid-gap) calc(2 * var(--grid-width) + 2 * var(--grid-gap));
  }
}

.menu-container div {
  width: 100%;

  @media only screen and (min-width: 768px) {
    flex: 1;
  }
}

.menu-container .menu {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] {
  border: none;
}

.ast-footer-copyright {
  font-size: 0.8rem;
}