/*
Theme Name: Betonorigami
Author: Betonorigami
Description: Кастомная тема интернет-магазина Betonorigami.
Version: 0.1.0
Text Domain: betonorigami
*/

@font-face {
  font-family: "Helvetica Neue";
  src: url("assets/fonts/HelveticaNeue-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("assets/fonts/HelveticaNeue-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("assets/fonts/HelveticaNeue-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --font-family-primary: "Helvetica Neue";
  --font-family-brand: "Montserrat";
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-body: 20px;
  --font-size-heading-h2: 72px;
  --font-size-brand: 81px;

  --layout-padding-inline: 80px;
  --layout-page-max-width: 1920px;
  --layout-content-max-width: 1760px;

  --color-black: #000000;
  --color-ink-950: #111111;
  --color-ink-900: #181818;
  --color-ink-800: #191919;
  --color-ink-700: #505050;
  --color-gray-500: #828282;
  --color-gray-300: #d3d3d3;
  --color-gray-100: #f0f0f0;
  --color-white: #ffffff;
  --color-white-40: rgb(255 255 255 / 40%);

  --color-text-primary: var(--color-ink-800);
  --color-text-inverse: var(--color-white);
  --color-text-placeholder: var(--color-gray-300);
  --color-background-primary: var(--color-white);
  --color-background-muted: var(--color-gray-100);
  --color-background-dark: var(--color-ink-900);
  --color-background-darker: var(--color-ink-950);
  --color-surface-translucent: var(--color-white-40);
  --color-border-primary: var(--color-ink-800);
  --color-border-inverse: var(--color-white);
  --color-icon-primary: var(--color-ink-800);
  --color-icon-inverse: var(--color-white);

  --bp-mobile: 759px;
  --bp-tablet: 1365px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100vh;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  height: 100vh;
  margin: 0;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  font-family: var(--font-family-primary), Helvetica, Arial, sans-serif;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-light);
}

a,
button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

.wrapper {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main > :is(
  .general,
  .business,
  .individual,
  .branding,
  .concrete,
  .about,
  .portfolio,
  .catalog,
  .product,
  .cart,
  .account,
  .login,
  .registration,
  .page_content
) {
  width: 100%;
  max-width: var(--layout-page-max-width);
  margin-inline: auto;
}

@media (max-width: 1365px) {
  :root {
    --font-size-heading-h2: 64px;
    --font-size-brand: 64px;
    --layout-padding-inline: 20px;
  }
}

@media (max-width: 759px) {
  :root {
    --font-size-body: 15px;
    --font-size-heading-h2: 36px;
    --font-size-brand: 36px;
  }
}

.page_content {
  flex: 1;
  padding: 80px var(--layout-padding-inline) 0;
}

.page_content_title {
  max-width: 100%;
  margin: 0 0 48px;
  font-family: var(--font-family-brand), Helvetica, Arial, sans-serif;
  font-size: min(var(--font-size-brand), 8vw);
  line-height: 1.05;
}

.page_content_body {
  width: min(100%, 75ch);
}

.page_content_body > :first-child {
  margin-top: 0;
}

.page_content_body > :last-child {
  margin-bottom: 0;
}

.page_content_body img,
.page_content_body iframe,
.page_content_body table {
  max-width: 100%;
}

.page_content_body .woocommerce {
  width: 100%;
}

@media (max-width: 759px) {
  .page_content {
    padding-top: 0;
  }

  .page_content_title {
    margin-bottom: 32px;
    font-size: min(var(--font-size-brand), 7.4vw);
  }
}