:root {
  /* BRAND COLORS */
  --brand-red: #f80715;
  --brand-red-01: #e00613;
  --brand-red-02: #ae050f;
  --brand-red-03: #95040d;
  --brand-red-04: #7c030b;

  /* PRIMARY COLORS */
  --primary-dark: #fafafa;
  --secondary-dark: #e5e5e5;
  --tertirary-dark: #cccccc;
  --quertanary-dark: #b3b3b3;

  --primary: var(--neutral-19);
  --secondary: var(--neutral-17);
  --tertirary: var(--neutral-15);
  --quertanary: var(--neutral-13);
  --grey-333: #333333;

  --accent-primary-hovered: var(--brand-red-02);
  --text-accent: var(--brand-red-02);

  --border-beige: var(--beige-05);
  --border-primary: var(--neutral-18);
  --border-secondary: var(--neutral-16);
  --border-tertirary: var(--neutral-14);

  /* BEIGE COLORS */
  --beige-01: #f9f8f6;
  --beige-02: #f0eee9;
  --beige-03: #eae8e1;
  --beige-04: #dfdcd2;
  --beige-05: #d5d1c3;
  --beige-06: #cac5b4;
  --beige-07: #c0baa5;
  --beige-08: #b5ae96;

  /* NEUTRAL COLORS */
  --white: #ffffff;
  --neutral-01: #fafafa;
  --neutral-02: #f2f2f2;
  --neutral-03: #e5e5e5;
  --neutral-04: #d9d9d9;
  --neutral-05: #cccccc;
  --neutral-06: #bfbfbf;
  --neutral-07: #b3b3b3;
  --neutral-08: #a5a5a5;
  --neutral-09: #999999;
  --neutral-10: #8d8d8d;
  --neutral-11: #808080;
  --neutral-12: #737373;
  --neutral-13: #666666;
  --neutral-14: #595959;
  --neutral-15: #4d4d4d;
  --neutral-16: #404040;
  --neutral-17: #343434;
  --neutral-18: #272727;
  --neutral-19: #1a1a1a;
  --neutral-20: #0d0d0d;
  --black: #000000;

  /* TRANSPARENT COLORS */
  --alpha-01: rgba(13, 13, 13, 0.8);
  --alpha-dark-02: rgba(13, 13, 13, 0.7);
  --alpha-dark-03: rgba(13, 13, 13, 0.5);
  --alpha-dark-04: rgba(13, 13, 13, 0.3);
  --alpha-dark-05: rgba(77, 77, 77, 0.25);
  --light-alpha-01: rgba(255, 255, 255, 0.75);

  /* SEMANTIC COLORS */
  --red-01: #df3a3f;
  --red-02: #b92c31;
  --red-03: #951d21;
  --red-04: #6b1518;

  --yellow-01: #e5b800;
  --yellow-02: #b28f00;
  --yellow-03: #806600;
  --yellow-04: #665100;

  --green-01: #2eb875;
  --green-02: #29a368;
  --green-03: #248f5b;
  --green-04: #1a6641;

  --icons-success: #248f5b;
  --text-success: #1a6641;
  --icons-warning: #806600;
  --text-warning: #665100;
  --icons-error: #951d21;
  --text-error: #6b1518;

  /* FONT WEIGHT */
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semiBold: 600;
  --bold: 700;
  --extraBold: 800;

  /* FILTERS */
  --neutral-01-filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
    saturate(1%) hue-rotate(231deg) brightness(107%) contrast(96%);
  --icons-primary-filter: brightness(0) saturate(100%) invert(12%) sepia(14%)
    saturate(11%) hue-rotate(314deg) brightness(101%) contrast(91%);
  --brand-red-02-filter: brightness(0) saturate(100%) invert(11%) sepia(100%)
    saturate(6024%) hue-rotate(353deg) brightness(69%) contrast(101%);
  --tertirary-filter: brightness(0) saturate(100%) invert(28%) sepia(15%)
    saturate(0%) hue-rotate(203deg) brightness(92%) contrast(84%);
  --icons-error-filter: brightness(0) saturate(100%) invert(17%) sepia(38%)
    saturate(6107%) hue-rotate(345deg) brightness(78%) contrast(93%);
}

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

/*-----------------------------------*\
  #TYPOGRAPHY
\*-----------------------------------*/

.Roboto-Slab {
  font-family: "Roboto Slab", serif;
  font-style: normal;
}

.Roboto-Mono {
  font-family: "Roboto Mono", monospace;
  font-style: normal;
}

.Pacifico {
  font-family: "Pacifico", cursive;
  font-style: normal;
}

.Headline-01 {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 56px;
  line-height: 64px;
  letter-spacing: 1px;
}

.Headline-02 {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 1px;
}

.Headline-03 {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 1px;
}

.Headline-04 {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 1px;
}

.Headline-05 {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 1px;
}

.Headline-05-CAPSLOCK {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.Headline-06 {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 1px;
}

.Headline-07 {
  font-family: "Roboto Slab", serif;
  font-weight: var(--semiBold);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 1px;
}

.Body-XL-Bold {
  font-weight: var(--bold);
  font-size: 20px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-XL-SemiBold {
  font-weight: var(--semiBold);
  font-size: 20px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-XL-Medium {
  font-weight: var(--medium);
  font-size: 20px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-XL-Regular {
  font-weight: var(--regular);
  font-size: 20px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-L-Bold {
  font-weight: var(--bold);
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-L-SemiBold {
  font-weight: var(--semiBold);
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-L-Medium {
  font-weight: var(--medium);
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-L-Regular {
  font-weight: var(--regular);
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-M-Bold {
  font-weight: var(--bold);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-M-SemiBold {
  font-weight: var(--semiBold);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-M-Medium {
  font-weight: var(--medium);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-M-Regular {
  font-weight: var(--regular);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-S-Bold {
  font-weight: var(--bold);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 22px;
}

.Body-S-SemiBold {
  font-weight: var(--semiBold);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 22px;
}

.Body-S-Medium {
  font-weight: var(--medium);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 22px;
}

.Body-S-Regular {
  font-weight: var(--regular);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 22px;
}

.Body-XS-Bold {
  font-weight: var(--bold);
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 16px;
}

.Body-XS-SemiBold {
  font-weight: var(--semiBold);
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 16px;
}

.Body-XS-Medium {
  font-weight: var(--medium);
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 16px;
}

.Body-XS-Regular {
  font-weight: var(--regular);
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 16px;
}

.Nav-M-SemiBold {
  font-family: "Roboto Mono", monospace;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Nav-S-SemiBold {
  font-family: "Roboto Mono", monospace;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 20px;
}

.Body-V2-XL-SemiBold {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 20px;
  letter-spacing: 0px;
  line-height: 28px;
}

.Body-V2-L-SemiBold {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 26px;
}

.Body-V2-M-SemiBold {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
}

.Body-V2-S-SemiBold {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 20px;
}

.Body-CAPSLOCK-M-SemiBold {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 24px;
  text-transform: uppercase;
}

.Body-CAPSLOCK-S-SemiBold {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 20px;
  text-transform: uppercase;
}

.Body-CAPSLOCK-XS-SemiBold {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 16px;
  text-transform: uppercase;
}

.Handwritten-01 {
  font-family: "Pacifico", cursive;
  font-style: normal;
  font-weight: var(--regular);
  font-size: 32px;
  letter-spacing: 0.5px;
  line-height: 32px;
}

.Handwritten-02 {
  font-family: "Pacifico", cursive;
  font-style: normal;
  font-weight: var(--regular);
  font-size: 20px;
  letter-spacing: 0.5px;
  line-height: 20px;
}

/*-----------------------------------*\
  #DESIGN
\*-----------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--primary);
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--medium);
  font-style: normal;
  font-size: 14px;
}

body {
  background-color: var(--beige-01);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

.icon12 {
  width: 12px;
  height: 12px;
}

.icon16 {
  width: 16px;
  height: 16px;
}

.icon18 {
  width: 18px;
  height: 18px;
}

.icon20 {
  width: 20px;
  height: 20px;
}

.icon24 {
  width: 24px;
  height: 24px;
}

.icon28 {
  width: 28px;
  height: 28px;
}

.icon32 {
  width: 32px;
  height: 32px;
}

.icon40 {
  width: 40px;
  height: 40px;
}

.main-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: none;
  background-color: transparent;
}

.main-button.red-texture {
  background-image: url("../images/Textures/texture-red-small.jpg");
}

.main-button.black-texture {
  background-image: url("../images/Textures/texture-darkgrey-small.jpg");
}

.btn-text {
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 1px;
  font-weight: var(--semiBold);
  color: var(--neutral-02);
}

.main-btn-icon {
  filter: var(--neutral-01-filter);
}

.main-button:is(:hover, :focus-visible, :focus-within) {
  cursor: pointer;
  scale: calc(1.02);
}

/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/

.back-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--neutral-01);
  font-size: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);

  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  border: solid 1px var(--neutral-05);
  margin-right: 24px;
  text-decoration: none;
  rotate: 270deg;
}

.back-top-arrow {
  rotate: 0deg;
  filter: var(--icons-primary-filter);
  width: 20px;
  height: 20px;
  /* filter: var(--black-filter); */
}

.back-top-btn:is(:hover, :focus-visible) {
  background-color: var(--beige-03);
  color: black;
  border: none;
}

.back-top-btn:is(:hover, :focus-visible) .back-top-arrow {
  filter: var(--icons-primary-filter);
}

.back-top-btn.active {
  opacity: 1;
  visibility: visible;
}

/*-----------------------------------*\
  #NAVBAR – slide-away & full collapse
\*-----------------------------------*/

/* 1) Wrapper: always sticky; “active” adds shadow + collapses gap & bottom padding */
.navbar-section {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* space between topbar & meat-nav */
  background-color: var(--beige-02);

  transition:
    gap 0.4s ease,
    padding-bottom 0.4s ease;
  transform: translateZ(0);
}

.navbar-section.active {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  /* collapse the space under the topbar */
  gap: 12px;
  padding-bottom: 12px;
}

/* 2) Meat-navigation row — slides up AND collapses to zero height */
.meat-navigation {
  flex: 0 0 72px;
  /* reserve 72px before collapse */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 16px 0;
  border-top: 2px solid var(--border-primary);
  border-bottom: 2px solid var(--border-primary);
  /* animate slide, fade, height, padding & borders */
  transition:
    transform 0.4s ease,
    opacity 0.4s ease,
    flex-basis 0.4s ease,
    padding 0.4s ease,
    border 0.4s ease;
  will-change: transform, flex-basis;
  overflow: hidden;
  backface-visibility: hidden;
}

.navbar-section.active .meat-navigation {
  transform: translateY(-100%);
  /* slide it up */
  opacity: 0;
  /* fade it out */
  pointer-events: none;
  /* no clicks while hidden */
  /* fully collapse all its space */
  flex: 0 0 0;
  padding: 0;
  border: none;
}

/*-----------------------------------*\
  #NAVBAR – links & states
\*-----------------------------------*/

.meat-navigation-box {
  padding: 12px;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--tertirary);
}

.meat-navigation-box.promo {
  color: var(--text-accent);
}

.meat-navigation-box.active {
  background-image: url("../images/Textures/dark-grey-texture.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--neutral-02);
}

.meat-navigation-box.promo.active {
  background-image: url("../images/Textures/red-texture.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--neutral-01);
}

.meat-navigation-box:is(:hover, :focus-visible, :focus-within) {
  color: var(--primary);
}

.meat-navigation-box.promo:is(:hover, :focus-visible, :focus-within) {
  color: var(--brand-red);
}

.meat-navigation-box.active:is(:hover, :focus-visible, :focus-within) {
  color: var(--white);
}

/*-----------------------------------*\
  Topbar (unchanged)
\*-----------------------------------*/

.topbar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  min-height: 72px;
}

.topbar-main-container {
  height: 72px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-links,
.topbar-right-container {
  flex: 1;
  display: flex;
  align-items: center;
}

.topbar-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.topbar-logo-img {
  height: 80px;
  width: auto;
}

.topbar-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
}

.topbar-link {
  text-decoration: none;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.recipe-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: var(--text-accent);
  color: var(--beige-02);
  font-size: 10px;
}

.topbar-link.active {
  color: var(--text-accent);
  position: relative;
}

.topbar-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  /* underline sits 2 px below text */
  width: 100%;
  height: 2px;
  background-color: var(--text-accent);
}

.topbar-link:is(:hover, :focus-visible, :focus-within) {
  color: var(--text-accent);
}

.topbar-right-container {
  justify-content: flex-end;
  gap: 16px;
}

.topbar-right-separator-line {
  width: 2px;
  height: 24px;
  background-color: var(--neutral-18);
}

/* cart / user / search sub-components – unchanged */

.cart-empty-container {
  display: flex;
  text-decoration: none;
}

.cart-full-container {
  display: none;
  text-decoration: none;
  justify-content: flex-start;
  align-items: center;
}

.items-in-cart-counter {
  align-self: flex-start;
  letter-spacing: 0;
  color: var(--text-accent);
}

.shopping-price {
  margin-left: 8px;
  letter-spacing: 0;
  line-height: 22px;
  color: var(--primary);
}

.topbar-cart-container.active .cart-empty-container {
  display: none;
}

.topbar-cart-container.active .cart-full-container {
  display: flex;
}

.user-popup {
  position: absolute;
  top: 48px;
  right: -18px;
  background-color: var(--beige-02);
  padding: 32px;
  border: 2px solid #272727;
  z-index: 1000;
  width: 304px;
  height: 264px;
  display: none;
  flex-direction: column;
  gap: 16px;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.5);
}

.user-popup.active {
  display: flex;
}

.user-icon-container {
  position: relative;
}

.popup-register-title {
  margin-top: 8px;
}

.popup-button-link {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--brand-red-02);
  color: var(--neutral-01);
  text-decoration: none;
}

.popup-button-link.register {
  background-color: transparent;
  border: 2px solid var(--border-primary);
  color: var(--primary);
}

.register-popup-arrow {
  filter: var(--icons-primary-filter);
}

/*-----------------------------------*\
  Search bar (unchanged)
\*-----------------------------------*/

.topbar-search-container {
  height: 72px;
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.topbar-search-container.active {
  display: flex;
}

.search-input-container {
  width: 640px;
  height: 48px;
  background-color: var(--beige-01);
  border: 2px solid var(--border-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  transition: border-color 0.3s ease;
}

.search-input {
  width: 590px;
  height: 22px;
  border: none;
  background-color: var(--beige-01);
  outline: none;
}

.search-input-container:is(:focus, :focus-visible, :focus-within) {
  border-color: var(--brand-red-03);
}

.search-input-popup-window {
  width: 640px;
  background-color: var(--beige-01);
  position: absolute;
  top: 184px;
  z-index: 100;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.5);
  display: none;
}

.search-input-popup-window.mobile {
  top: 66px;
}

.search-input-popup-window.active {
  display: block;
}

.seacrh-popup-product-container {
  width: 100%;
  height: 72px;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}

.search-product-left-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-product-main-image {
  width: 48px;
  height: 48px;
}

.search-product-right-container {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex-direction: column;
}

.search-product-price-per-kg {
  color: var(--tertirary);
}

.search-popup-separator-line {
  height: 1px;
  width: 100%;
  background-color: var(--border-primary);
}

/*-----------------------------------*\
  #NEWSLETTER SECTION
\*-----------------------------------*/
.newsletter-section {
  width: 100%;
  height: auto;
  padding: 64px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsletter-main-container {
  width: 1280px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.newsletter-image {
  width: 600px;
  height: 500px;
}

.newsletter-content-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 48px;
  min-height: 500px;
}

.newsletter-title-container {
  padding: 16px 0px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  flex-direction: column;
  border-top: solid 3px var(--grey-333);
  border-bottom: solid 3px var(--grey-333);
}

.newsletter-form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
}

.newsletter-form.footer {
  margin-top: 4px;
}

.newsletter-input {
  padding: 12px 20px;
  border: solid 2px var(--border-primary);
  height: 48px;
  width: 100%;
  max-width: 480px;
  background-color: var(--beige-01);
  outline: none;
}

.newsletter-input:is(:focus) {
  border: solid 2px var(--brand-red-04);
}

.newsletter-description {
  max-width: 480px;
  color: var(--tertirary);
}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer-section {
  padding: 80px 0px;
  background-color: var(--beige-03);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-main-container {
  width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 48px;
}

.footer-top-bar {
  width: 100%;
  height: auto;
  padding-bottom: 40px;
  border-bottom: solid 2px var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-logo {
  height: auto;
  width: 220px;
}

.footer-top-single-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  width: 288px;
}

.payment-methods-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.payment-option {
  width: 78px;
  height: 48px;
  border: solid 1px var(--border-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.payment-logo {
  height: 18px;
}

.social-media-icons-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.social-media-container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-decoration: none;
  background-image: url("../images/Textures/texture-darkgrey-small.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-media-container:is(:hover, :focus-visible, :focus-within) {
  background-image: url("../images/Textures/texture-red-small.jpg");
}

.footer-bottom-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-newsletter-container {
  height: auto;
  width: 220px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
}

.footer-info-container {
  width: 288px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  flex-direction: column;
}

.footer-contacts-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  flex-direction: column;
}

.footer-contact-link {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.footer-contact-link:is(:hover, :focus-visible, :focus-within) {
  color: var(--brand-red-02);
}

.footer-contact-link:is(:hover, :focus-visible, :focus-within)
  .footer-contact-icon {
  filter: var(--brand-red-02-filter);
}

.footer-contact-icon {
  filter: var(--icons-primary-filter);
}

.working-time-footer {
  margin-left: 36px;
  color: var(--tertirary);
}

.footer-container-links {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  flex-direction: column;
}

.footer-single-link {
  text-decoration: none;
  color: var(--tertirary);
}

.footer-single-link:is(:hover, :focus-visible, :focus-within) {
  color: var(--brand-red-02);
}

.created-by-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.codemode-logo {
  width: 86px;
  filter: var(--tertirary-filter);
}

.codemode-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*-----------------------------------*\
  #CART
\*-----------------------------------*/

/* Overlay background */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9998;
}

/* Cart panel */
.cart-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background-color: var(--beige-01);
  z-index: 9999;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease-in-out;
  padding: 24px 0px;
}

/* When visible */
.cart-overlay.active {
  display: block;
}

.cart-panel.active {
  right: 0;
}

.close-cart-btn {
  background: none;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.cart-main-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}

.cart-empty-container {
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
}

.cart-empty-container.active {
  display: flex;
}

.empty-cart-icon-container {
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-image: url("../images/Textures/texture-darkgrey-small.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.empty-cart-icon {
  filter: var(--neutral-01-filter);
}

.empty-cart-text {
  text-align: center;
}

.cart-is-full-container {
  width: 100%;
  height: 100%;
  display: none;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding-bottom: 24px;
  flex-grow: 1;
}

.cart-is-full-container.active {
  display: flex;
}

.cart-full-top-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
}

.price-untill-free-line,
.price-untill-minimum-line {
  width: 100%;
  height: 4px;
  background-color: var(--neutral-04);
  border-radius: 8px;
}

.price-free-container {
  width: 100%;
  padding: 16px 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex-direction: column;
  border: solid 1px var(--border-beige);
}

.cart-price-free-red,
.cart-price-minimum-red {
  color: var(--text-accent);
}

.product-added-to-cart-container {
  width: 100%;
  height: 52px;
  background-color: rgba(46, 184, 117, 0.15);
  padding: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--text-success);
}

.check-green-icon-container {
  background-color: var(--icons-success);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.check-icon-white {
  filter: var(--neutral-01-filter);
}

.cart-full-bottom-container {
  padding: 20px 20px 0px 20px;
  border-top: solid 1px var(--border-beige);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}

.promocode-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo-button {
  width: 56px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  border-top: solid 2px var(--border-tertirary);
  border-bottom: solid 2px var(--border-tertirary);
  border-right: solid 2px var(--border-tertirary);
  background-image: url("../images/Textures/texture-red-small.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.promo-input {
  width: 100%;
  height: 48px;
  padding: 12px 8px;
  border: solid 2px var(--border-tertirary);
  background-color: var(--white);
}

.promo-input:is(:focus) {
  border: solid 2px var(--brand-red-04);
}

.cart-sum-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.cart-sum-small-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-sum-small-container.total {
  margin-top: 2px;
}

.cart-total-sum-value {
  color: var(--text-accent);
}

.main-button.cart {
  width: 100%;
}

.main-button.cart[disabled],
.main-button.cart.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.products-in-cart-main-container {
  width: 100%;
  height: 100%;
  padding: 24px 20px;
  flex-grow: 1;
  overflow-y: auto;
}

.products-in-cart-container {
  width: 100%;
  height: auto;
  overflow-y: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
}

.product-cart-separator {
  width: 100%;
  height: 2px;
  background-color: var(--border-tertirary);
}

.product-in-cart {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  height: auto;
}

.product-in-cart-image {
  width: 80px;
  height: 80px;
}

.product-in-cart-details-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
}

.item-cart-counter-container {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px var(--border-secondary);
  height: 40px;
}

.adjust-icon-cart-container {
  width: 36px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.item-cart-counter-adjust-text {
  padding: 10px 8px;
  min-width: 78px;
  border-left: solid 2px var(--border-secondary);
  border-right: solid 2px var(--border-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.adjust-item-in-cart-icon {
  filter: var(--icons-primary-filter);
}

.remove-item-from-cart-btn {
  margin-left: auto;
  width: 48px;
  height: 48px;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--beige-02);
}

.trash-icon {
  filter: var(--brand-red-02-filter);
}

@media (width < 1320px) {
  /*-----------------------------------*\
  #NAVBAR 
\*-----------------------------------*/

  .navbar-section {
    width: 100%;
    padding: 20px 48px;
  }

  .meat-navigation {
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }

  .meat-navigation-box {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 40px;
    height: auto;
  }

  .meat-navigation::-webkit-scrollbar {
    display: none;
  }

  .meat-navigation {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /*-----------------------------------*\
  #NEWSLETTER SECTION
\*-----------------------------------*/
  .newsletter-section {
    width: 100%;
    height: auto;
    padding: 64px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .newsletter-main-container {
    width: 1000px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  .newsletter-image {
    width: 540px;
    height: 460px;
  }

  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

  .footer-main-container {
    width: 1000px;
  }

  .footer-top-bar {
    width: 100%;
  }

  .footer-logo {
    width: 200px;
  }

  .footer-top-single-container {
    width: 220px;
  }

  .payment-methods-container {
    height: auto;
    flex-wrap: wrap;
  }

  .footer-newsletter-container {
    width: 200px;
  }

  .footer-info-container {
    width: 220px;
  }
}

@media (width < 1200px) {
  /*-----------------------------------*\
  #NAVBAR 
\*-----------------------------------*/
  .navbar-section {
    width: 100%;
    padding: 20px 20px;
  }

  .topbar-logo-img {
    height: 60px;
    width: auto;
  }
}

@media (width < 1100px) {
  /*-----------------------------------*\
  #NAVBAR 
\*-----------------------------------*/
  .navbar-section {
    display: none;
  }

  /*-----------------------------------*\
  #NEWSLETTER SECTION
\*-----------------------------------*/
  .newsletter-section {
    padding: 64px 48px;
  }

  .newsletter-main-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  .newsletter-image {
    width: 540px;
    height: 460px;
  }

  .newsletter-title {
    font-size: 32px;
    line-height: 40px;
  }

  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

  .footer-section {
    padding: 80px 48px;
  }

  .footer-main-container {
    width: 100%;
  }
}

@media (width < 1000px) {
  /*-----------------------------------*\
  #NEWSLETTER SECTION
\*-----------------------------------*/

  .newsletter-image {
    width: 480px;
    height: 400px;
  }

  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

  .footer-top-bar {
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }

  .footer-logo {
    width: 220px;
  }

  .footer-top-single-container {
    width: 288px;
  }

  .payment-logo {
    height: 18px;
  }

  .footer-bottom-container {
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }

  .footer-newsletter-container {
    width: 220px;
  }

  .footer-info-container {
    width: 288px;
  }
}

@media (width < 900px) {
  /*-----------------------------------*\
  #NEWSLETTER SECTION
\*-----------------------------------*/
  .newsletter-section {
    padding: 64px 32px;
  }

  .newsletter-main-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 32px;
  }

  .newsletter-image {
    width: 100%;
    height: auto;
  }

  .newsletter-title {
    font-size: 40px;
    line-height: 48px;
  }

  /*-----------------------------------*\
      #FOOTER
  \*-----------------------------------*/

  .footer-section {
    padding: 80px 32px;
  }
}

@media (width < 700px) {
  .main-button {
    font-size: 14px;
    line-height: 22px;
  }

  /*-----------------------------------*\
    #NEWSLETTER SECTION
  \*-----------------------------------*/
  .newsletter-section {
    padding: 64px 20px;
  }

  /*-----------------------------------*\
      #FOOTER
  \*-----------------------------------*/

  .footer-section {
    padding: 80px 20px;
  }

  .footer-top-bar {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-bottom-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 48px 24px;
  }

  .footer-logo-link {
    align-self: center;
  }

  .back-top-btn {
    bottom: 12px;
    right: -16px;

    width: 42px;
    height: 42px;
  }

  .back-top-arrow {
    rotate: 0deg;
    filter: var(--icons-primary-filter);
    width: 20px;
    height: 20px;
    /* filter: var(--black-filter); */
  }
}

@media (width < 600px) {
  /*-----------------------------------*\
  #CART
\*-----------------------------------*/

  /* Cart panel */
  .cart-panel {
    right: -600px;
    width: 100%;
  }
}

@media (width < 550px) {
  /*-----------------------------------*\
  #NEWSLETTER SECTION
\*-----------------------------------*/

  .newsletter-title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (width < 350px) {
  .created-by-container {
    flex-direction: column;
    gap: 4px;
  }
}