/*** CONTENTS ***


01. CURSOR INTERACTIONS 
02. TEXT LINKS 
03. FOOTER NAVIGATION 
04. NAVIGATION 
05. GRID CLASSES 
06. FLEX CLASSES 
07. SPACING CLASSES
08. FONT SIZES
09. ICONS
10. BLUR OVERLAY
11. FONT COLOURS
12. RESPONSIVE

****/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

/** LENIS **/
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: visible;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--swatch--off-white);
  color: var(--swatch--black);
  font-family: var(--font-family--body);
  font-size: 1.0582vw;
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  /* cursor: none; */

  &.overflow {
    overflow: hidden;
  }

  @media all and (max-width: 768px) {
    font-size: 1rem;
    cursor: auto;
  }
}

.transition_wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
}

.transition_inner {
  position: absolute;
  inset: 0;
  background: var(--swatch--cream);
  opacity: 1;
  pointer-events: none;
}

/*** FONT RESET ***/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
/*** FONT SIZES ****/
h1,
.h1 {
  font-family: var(--font-family--main);
  font-size: var(--font-size--96);
  font-weight: 500;
  line-height: 0.85;
  text-transform: uppercase;

  @media all and (max-width: 768px) {
    font-size: 48px;
  }
}

h2,
.h2 {
  font-family: var(--font-family--main);
  font-size: var(--font-size--40);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
h3,
.h3 {
  font-size: var(--font-size--24);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;

  @media all and (max-width: 768px) {
    font-size: var(--font-size--20);
  }
}
h4,
.h4 {
  font-family: var(--font-family--body);
  font-size: var(--font-size--32);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.1;

  @media all and (max-width: 768px) {
    font-size: var(--font-size--20);
  }
}
h5,
.h5 {
  font-family: var(--font-family--main);
  font-size: var(--font-size--18);
  letter-spacing: -0.01em;
  font-weight: 400;
}

p {
  margin: 0 0 1em;
  font-size: var(--font-size--20);
}

.p-sml {
  font-size: var(--font-size--16);
}

.uppercase {
  text-transform: uppercase;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}

svg {
  width: 100%;
  height: auto;
}

a {
  color: currentColor;
  text-decoration: none;
}

input {
  -webkit-appearance: none;
  border-radius: 0;
}

.img-absolute,
.img-absolute img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.relative {
  position: relative;
}

/** GRID CLASSES **/
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  grid-template-rows: auto;
  width: 100%;
}
.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container {
  padding-left: var(--padding--side);
  padding-right: var(--padding--side);
}

/*** NAVIGATION **/

.single-whats-on,
.single-locations {
  .header {
    &.clear {
      color: var(--swatch--black);
    }
    &.solid {
      color: var(--swatch--white);
    }
  }
}

.header {
  &.clear {
    color: var(--swatch--white);
  }

  &.slideup {
    transform: translateY(-100%);
  }

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    inset: 0;
    background: var(--swatch--red);
    opacity: 1;
    z-index: -1;
    pointer-events: none;
    transition: 0.6s all var(--transition--ease);
    transform: translateY(-101%);
  }

  @media all and (min-width: 769px) {
    &:hover {
      color: var(--swatch--white) !important;
    }
  }

  &:hover::before {
    transform: translateY(0%);
    @media all and (max-width: 768px) {
      transform: translateY(-100%);
    }
  }

  &.solid {
    color: var(--swatch--white);
    /* padding: 1.5em var(--padding--side); */

    &::before {
      transform: translateY(0%);
    }
  }

  &.is-active {
    color: var(--swatch--white) !important;

    &::before {
      transform: translateY(-100%);
    }
  }

  @media all and (max-width: 768px) {
  }
}

.dopa-logo {
  width: 16em;
  display: flex;
  @media all and (max-width: 768px) {
    width: 180px;
  }
}
.hero-nav {
  display: flex;
  align-items: center;
  grid-gap: 1.5em;

  .btn {
    color: inherit;
    transition:
      color 0s ease,
      background-color 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease;
  }

  @media all and (max-width: 768px) {
    display: none;
    visibility: hidden;
  }
}

.btn-wrapper {
  display: flex;
  align-items: center;
  grid-gap: 1.5em;
  list-style: none;
  padding: 0;
}
.btn {
  font-size: var(--font-size--16);
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
  padding: 0.7em 1.2em 0.6em;
  line-height: 1;
  position: relative;
  color: var(--swatch--black);
  background-color: var(--swatch--white);
  transition:
    0.3s all ease,
    0s ease font-size;

  &.shadow {
    box-shadow: -2px -2px;
  }

  &.rounded {
    border-radius: 5em;
    background: var(--swatch--white);
    color: var(--swatch--black);
    box-shadow: 0 0 var(--swatch--red);
  }

  &.ghost {
    background-color: transparent;
  }
  &.large {
    font-size: var(--font-size--24);
    padding: 0.6em 0.9em 0.4em;
    box-shadow: 0 0 var(--swatch--red);

    &.red {
      color: var(--swatch--white);
      background-color: var(--swatch--red);
      box-shadow: 0 0 var(--swatch--white);
    }

    @media all and (max-width: 768px) {
      font-size: var(--font-size--16);
      padding: 0.7em 1.2em 0.6em;
    }
  }

  &:hover {
    &.shadow {
      background-color: var(--swatch--red);
      box-shadow: 0px 0px;
    }
    &.large {
      box-shadow: -3px -3px var(--swatch--red);
      transform: translate(3px, 3px);

      &.red {
        box-shadow: -3px -3px var(--swatch--white);
      }
    }

    &.rounded {
      box-shadow: 3px 3px var(--swatch--red);
      transform: translate(-3px, -3px);
    }
  }
}

.social-wrapper {
  display: flex;
  align-items: center;
  grid-gap: 0.75em;
}
.social-icon {
  width: 1.5em;
  display: flex;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.6;
  }
}

.hamburger_wrap {
  --thickness: 2px;
  --gap: 2px;
  --rotate: 45;
  --width: 26px;
  position: relative;
  width: 26px;
  height: 24px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--gap);
  transition: all 0.5s ease;
  display: none;

  @media all and (max-width: 768px) {
    display: flex;
  }
}

.hamburger_line {
  flex: 0 0 auto;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease;
  background-color: currentcolor;
  height: var(--thickness);
  width: var(--width);

  &:nth-child(2) {
    opacity: 0;
  }
}

.is-active .hamburger_line {
  transform: scaleX(0);
  width: 80%;
}
.is-active .hamburger_line:first-child {
  transform: translateY(calc(var(--thickness) + var(--gap)))
    rotate(calc(var(--rotate) * 3 * 1deg));
}
.is-active .hamburger_line:last-child {
  transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1))
    rotate(calc(var(--rotate) * 1deg));
}

/**** MOBILE MENU ****/

.mobile-nav {
  background: var(--swatch--red);
  border: 1px solid var(--color-dark);
  border-radius: var(--border-radius);
  color: var(--swatch--white);
  position: fixed;
  inset: 5px;
  z-index: 0;
  display: none;
  visibility: hidden;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @media all and (max-width: 768px) {
    display: flex;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 1.25em;
  }

  .btn-wrapper {
    position: absolute;
    bottom: 2em;
    flex-direction: row;

    li {
    }

    .btn {
      color: var(--swatch--white);
    }
  }
}

.is-active .mobile-nav {
  pointer-events: all;
}

/**** MEGA MENU ****/

:root {
  --nav-bg-height: calc(25em + calc(2em + 3em + 2.5em + 3em));
  --cubic-default: cubic-bezier(0.525, 0, 0, 1);
  --duration-fast: 0.4s;
  --duration-normal: 0.6s;
  --color-dark: #2b1d15;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--color-dark);
}

.nav {
  position: fixed;
  z-index: 18;
  top: 0;
  left: 0;
  right: 0;
  transition:
    color var(--duration-fast) var(--transition--ease),
    transform 0.6s var(--transition--ease);
}

.nav-inner {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  display: flex;
  position: relative;
}

.nav-container {
  z-index: 1;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding--side);
  padding-right: var(--padding--side);
  position: relative;
}

.nav-center__list {
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.nav-link {
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  justify-content: center;
  align-items: center;
  padding: 0 0.75em;
  display: flex;
  border: 0;
  background-color: transparent;
}

.nav-link__label {
  font-size: var(--font-size--16);
  font-weight: 500;
  padding: 0;
  text-transform: uppercase;
  position: relative;

  a {
    position: relative;
  }

  @media all and (max-width: 768px) {
    font-size: var(--font-size--24);
  }
}

.nav-dropdown {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  width: 100%;
  padding-top: 4.5em;
  padding-bottom: 3em;
  position: fixed;
  left: 0;
  right: 0;
  transition:
    all var(--duration-fast) ease,
    transform var(--duration-normal) var(--transition--ease);
  transition-delay: 0s;
}

.nav-dropdown.visible {
  opacity: 100;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0.2s;
}

.nav-bg {
  background-color: var(--swatch--red);
  width: 100%;
  height: 0;
  position: absolute;
  inset: 0% 0% auto;
  transition: height var(--duration-normal) var(--transition--ease);
}

/* ———— SHOW DROPDOWN ———— */
.nav-dropdown {
  transition:
    all var(--duration-fast) ease,
    transform var(--duration-normal) var(--transition--ease);
}

[data-dropdown-toggle]:hover + .nav-dropdown,
[data-dropdown-toggle]:focus-visible + .nav-dropdown,
.nav-dropdown:hover,
.nav-dropdown:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ———— STYLING WHEN DROPDOWN IS OPEN ———— */
:is(
  body:has([data-dropdown-toggle]:hover),
  body:has([data-dropdown-toggle]:focus-visible),
  body:has([data-dropdown-toggle]:focus-within),
  body:has(.nav-dropdown:hover),
  body:has(.nav-dropdown:focus-within)
) {
  .nav-bg {
    height: var(--nav-bg-height);
  }
  .nav {
  }
}

/* ———— DROPDOWN TOGGLE ———— */
/* [data-dropdown-toggle] {
  transition: background-color var(--duration-fast) var(--transition--ease);
} */

/* ———— DESKTOP HOVER AND FOCUS ———— */

.nav-dropdown__content-li {
  transition: all var(--duration-normal) var(--transition--ease);
  /* transition-delay: 0.2s; */
  opacity: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 4em;
  align-items: flex-start;
  justify-items: flex-start;

  .grid-2 {
    grid-gap: 1em;
    width: 100%;
  }
  .nav-store {
    display: flex;
    flex-direction: column;
    grid-gap: 1em;
    text-align: center;
    justify-content: center;
    align-items: center;
    .img {
      border-radius: var(--border-radius);
      overflow: hidden;
      position: relative;
      height: 20em;
      width: 100%;
      border: 1px solid var(--swatch--black);

      img {
        filter: grayscale(0.6);
        transform: scale(1.05);
        transition: all 0.4s ease;
      }
    }

    &:hover {
      img {
        filter: grayscale(0);
        transform: scale(1);
      }
    }
  }

  .store-wrapper {
    display: flex;
    grid-gap: 5em;

    h4 {
      font-family: var(--font-family--main);
      font-size: var(--font-size--20);
      font-weight: 500;
      line-height: 1.1;
      text-transform: uppercase;
      margin-bottom: 0.75em;
    }
  }

  .store-list {
    padding: 0;
    margin: 0;
    list-style: none;
    li {
      margin-bottom: 0.75em;
    }
    a {
      position: relative;
    }
  }
}

body:has([data-dropdown-toggle]:hover)
  [data-dropdown-toggle]:hover
  + .nav-dropdown
  .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:focus-visible) .nav-dropdown__content-li,
body:has([data-dropdown-toggle]:focus-within) .nav-dropdown__content-li,
body:has(.nav-dropdown:hover) .nav-dropdown__content-li,
body:has(.nav-dropdown:focus-within) .nav-dropdown__content-li {
  opacity: 1;
}

/* ————  DROPDOWN LINKS + IMAGES ———— */
.nav-dropdown__link:hover .nav-dropdown__img-overlay,
.nav-dropdown__link:focus-visible .nav-dropdown__img-overlay {
  opacity: 0;
}

.nav-dropdown__link:hover .nav-dropdown__img,
.nav-dropdown__link:focus-visible .nav-dropdown__img {
  transform: scale(1.1);
}

/* ———— DROPDOWN LINKS ———— */
.nav-dropdown__link.is--static:hover,
.nav-dropdown__link.is--static:focus-visible {
  background: #d7d1cd;
}

/* ———— NAV LINKS ———— */
a.nav-link .nav-link__label::after,
.store-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-normal) var(--cubic-default);
  transform: scale(0, 1);
  transform-origin: right center;
  border: 0;
}

a.nav-link:hover .nav-link__label::after,
a.nav-link:focus-visible .nav-link__label::after,
.store-list a:hover::after {
  transform: scale(1, 1);
  transform-origin: left center;
}

/*** FOOTER ***/

footer {
  padding: 5em var(--padding--side) 3em;
  overflow: hidden;
  background-color: var(--swatch--red);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  grid-gap: 4em;
  color: var(--swatch--white);

  .dopa-logo {
    width: 21em;

    @media all and (max-width: 768px) {
      width: 180px;
    }
  }

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
    padding: 2em var(--padding--side) 2em;

    h2 {
      font-size: var(--font-size--24);
    }
  }
}
.foot-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-gap: 1em;

  .underline::before,
  .underline::after {
    bottom: 0.1em;
  }

  .grid-3 {
    display: flex;
    grid-gap: 3em;
    justify-content: flex-end;

    @media all and (max-width: 768px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
    }
  }
  ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    grid-gap: 0.2em;

    @media all and (max-width: 768px) {
      &:last-child {
        flex-direction: row;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-gap: 20px;
        align-items: center;
        justify-content: space-between;
        margin-top: 40px;

        .fineprint {
          display: none;
        }
        .fineprint.right {
          display: block;
        }
      }
    }
  }
  ul li {
  }
  ul li a {
    transition: ease opacity 0.3s;

    &:hover {
      opacity: 0.6;
    }
  }
  .social-wrapper {
    margin-top: 0.4em;
    @media all and (max-width: 768px) {
      flex-direction: column;
      align-items: flex-start;
      flex-direction: row;
      margin: 0;
    }
  }
  .social-icon {
  }

  .app-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 1em;

    .item {
      height: 2.6em;
      width: auto;

      img {
        width: auto;
        height: 100%;
      }
    }

    @media all and (max-width: 768px) {
      .item {
        height: 12vw;
      }
    }
  }

  @media all and (max-width: 768px) {
    justify-content: flex-start;
    grid-gap: 1em;

    .subscribe {
      margin-top: 1em;
    }
  }
}
.fineprint {
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--font-size--15);
  margin: 0;

  &.light {
    font-weight: 400;
  }

  &.right {
    position: absolute;
    right: var(--padding--side);
    bottom: 3em;

    @media all and (max-width: 768px) {
      position: relative;
      right: auto;
      bottom: auto;
      margin: 0;
      justify-self: flex-end;
      display: block;
    }
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.subscribe-form {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: 0.65em;
}

.subscribe-form input[type="email"] {
  flex: 1;
  padding: 0.5em 0.75em 0.4em;
  line-height: 1;
  border: 1px solid var(--swatch--white);
  border-right: 0;
  font-weight: 500;
  font-size: var(--font-size--24);
  background: var(--swatch--red);
  color: var(--swatch--off-white);

  @media all and (max-width: 768px) {
    font-size: var(--font-size--20);
  }
}

.subscribe-form input[type="email"]::placeholder {
  color: var(--swatch--off-white);
}

.subscribe-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--swatch--red);
  color: var(--swatch--off-white);
  border: 1px solid var(--swatch--off-white);
  border-left: 0;
  padding: 0 0.75em;
  cursor: pointer;
}

.subscribe-form button img.submit-arrow {
  width: 2em; /* adjust size as needed */
  height: auto;
}

/*** LINKS ****/

.underline {
  position: relative;
}

.underline::before,
.underline::after {
  content: "";
  position: absolute;
  bottom: 0em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

.underline::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

.underline:hover::before {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

.underline::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

.underline:hover::after {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

/*** CURSOR INTERACTIONS ***/

.cursor {
  z-index: 21;
  grid-column-gap: 0.3em;
  grid-row-gap: 0.3em;
  background-color: var(--swatch--blue);
  border: 1px solid var(--swatch--black);
  pointer-events: none;
  border-radius: 2.5em;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  will-change: width, height;
  transition:
    padding-top 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    padding-right 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    padding-left 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    padding-bottom 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    opacity 0.2s,
    border-radius 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    height 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    width 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    font-size;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: 0%;
  overflow: hidden;

  @media all and (max-width: 768px) {
    display: none;
  }
}

body:has(.btn:hover) .cursor {
  width: 0.7em !important;
  height: 0.7em !important;
}

/***** ACCORDION *****/
.accordion {
  .accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 1em 0;
  }

  .accordion-body {
    grid-template-rows: 0fr;
    transition: ease all 0.8s;
    opacity: 0;
    display: grid;

    & > div {
      overflow: hidden;
    }
  }

  &.open .accordion-body {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

.grain-texture {
  background-image: url("https://dopa.com.au/wp-content/uploads/2025/09/texture-2.jpg");
  background-position: top center;
  background-repeat: repeat-x;
  background-size: 44em;
  background-color: var(--swatch--cream);
  position: relative;
  z-index: 1;

  &::before {
    content: "";
    background-color: var(--swatch--cream);
    position: absolute;
    inset: 0;
    opacity: 0.6;
  }

  & > * {
    position: relative;
  }

  &.red {
    background-image: url("https://dopa.com.au/wp-content/uploads/2025/09/red-texture.jpg");
    background-color: var(--swatch--red);
    background-size: cover;
    color: var(--swatch--white);

    &::before {
      display: none;
    }
  }
}

.grain-texture-red {
  background-image: url("https://dopa.com.au/wp-content/uploads/2025/09/red-texture.jpg");
  background-color: var(--swatch--red);
  background-size: cover;
  color: var(--swatch--white);
  background-position: top center;
  background-repeat: repeat-x;
  position: relative;
  z-index: 1;

  & > * {
    position: relative;
  }
}

.pattern-bg {
  background-image: url("https://dopa.com.au/wp-content/uploads/2025/09/pattern-bg.jpg");
  background-repeat: repeat;
  background-size: 40em;
  position: relative;
  z-index: 1;
  color: var(--swatch--white);

  &.form-wrapper .btn {
    color: var(--swatch--white);
  }
}

/***** TEXT SECTION *****/
.text-section {
  padding: 7em var(--padding--side);
  text-align: center;
  max-width: 65em;
  margin: auto;

  .h4 {
    margin: auto;
  }

  @media all and (max-width: 768px) {
    padding: 4em var(--padding--side) 2em;
  }
}

/***** SWIPER COMMON *****/

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}
.swiper-button-prev,
.swiper-button-next {
  display: grid;
  place-items: center;
  margin-top: 0;
  z-index: 2;
  transform: translateY(-100%);
  width: auto;
  height: auto;
  width: 3.1em;
  height: auto;
  aspect-ratio: 1;

  .swiper-btn {
    border: 1px solid var(--swatch--black);
    color: var(--swatch--black);
    border-radius: 50%;
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    width: 3.1em;
    height: auto;
    aspect-ratio: 1;
    transition: width 0.3s ease;

    @media all and (max-width: 768px) {
      width: 55px;
    }
  }
  svg {
    width: 1.5em;
    position: absolute;
    @media all and (max-width: 768px) {
      width: 20px;
    }
  }

  &:hover {
    .swiper-btn {
      width: 3.7em;

      @media all and (max-width: 768px) {
        width: 55px;
      }
    }
  }
  @media all and (max-width: 768px) {
    width: 55px;
    transform: translateY(0%);
    bottom: 40px;
    top: auto;
  }
}

.swiper-button-prev {
  left: var(--padding--side);
  @media all and (max-width: 768px) {
    left: 30vw;
  }
}
.swiper-button-next {
  right: var(--padding--side);
  @media all and (max-width: 768px) {
    right: 30vw;
  }
}

.swiper-button-lock {
  display: none !important;
}

/***** DISH SWIPER *****/
.dish-section {
  text-align: center;
  padding: 4em 10em;
  position: relative;

  @media all and (max-width: 768px) {
    padding: 4em var(--padding--side) 6em;
    overflow: hidden;
  }
}

.dish-swiper-wrapper {
  position: relative;
}
.dish-swiper {
  padding: 3em 0;
  margin: 0 -2em;

  .dish-slide {
    width: 33.33%;
    padding: 0 2em;

    &:hover {
      .dish-img {
        box-shadow: 0em 0em;
      }
      .first {
        transform: scale(1);
      }
      .overlay {
        opacity: 1;
        transform: scale(1.01);
      }
    }

    @media all and (max-width: 768px) {
      width: 100%;
      padding: 0 1em;
    }
  }
  .dish-img {
    position: relative;
    height: 30vw;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--swatch--black);
    margin-bottom: 1.5em;
    box-shadow: -0.4em -0.4em;
    transition: 0.6s box-shadow var(--transition--ease);

    .first {
      transition: 0.6s all var(--transition--ease);
      transform: scale(1.05);
    }
    .overlay {
      opacity: 0;
      transition: 0.6s all var(--transition--ease);
      transform: scale(1.05);
    }
    .gogo-star {
      width: 7.25em;
      transform: rotate(0deg);
      top: 0.75em;
      right: 0.75em;

      h3 {
        font-size: var(--font-size--20);
        font-weight: 500;
      }
    }

    @media all and (max-width: 768px) {
      height: 93vw;
    }
  }
  .dish-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 0.5em;
    h5 {
    }
    p {
    }
  }

  @media all and (max-width: 768px) {
    padding: 2em 3em;
  }
}

.gogo-star {
  position: absolute;
  right: 5em;
  top: 5em;
  z-index: 2;
  width: 10em;
  height: auto;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--swatch--black);
  text-align: center;
  transform: rotate(15deg);
  svg {
    position: absolute;
    inset: 0;
    animation: gogo-spin 12s linear infinite;
  }
  h3 {
    position: relative;
    top: 0.1em;
  }

  @media all and (max-width: 768px) {
    width: 90px;
    top: 20px;
    right: 20px;
  }
}

.whats-on-wrapper {
  text-align: center;
  padding: 6em 10em;
  position: relative;
  overflow: hidden;

  .swiper-btn {
    background-color: var(--swatch--white);
  }

  @media all and (max-width: 768px) {
    padding: 6em 0;
  }
}

@keyframes gogo-spin {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.location-list-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 4em;
  padding: 5em var(--padding--side);

  .location-list {
    margin: 0;

    @media all and (max-width: 768px) {
      /* justify-content: flex-start; */
      grid-gap: 0.5em;
    }
  }

  @media all and (max-width: 768px) {
    flex-wrap: wrap;
    /* justify-content: flex-start; */
    grid-gap: 1em;
    padding: 2em var(--padding--side);
  }
}

.location-list {
  display: flex;
  grid-gap: 1em;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5em;
  margin-top: 3em;
  flex-wrap: wrap;

  .btn {
    padding-top: 0.8em;
    padding-bottom: 0.5em;

    @media all and (max-width: 768px) {
      font-size: 13px;
    }
  }

  @media all and (max-width: 768px) {
    margin-top: 1.5em;
    padding: 0 var(--padding--side);
  }
}

.whatson-swiper {
  margin: var(--padding--side) 0 0;
  padding-top: 1.3em;
  @media all and (max-width: 768px) {
    padding: 2em 1em;

    .whatson-img-wrapper {
      padding: 0 1em;
    }
  }
}
.whatson-slide {
  width: 100%;
}
.whatson-img-wrapper {
  position: relative;
  padding: 0 1em;
  margin-bottom: 3em;

  @media all and (max-width: 768px) {
    margin-bottom: 2em;
    padding: 0;
  }
}
.whatson-img {
  position: relative;
  height: 32em;
  border: 1px solid var(--swatch--black);
  border-radius: var(--border-radius);
  overflow: hidden;
  z-index: 1;

  @media all and (max-width: 768px) {
    height: 112vw;
  }
}
.whatson-shadow {
  position: absolute;
  width: calc(100% - 2em);
  height: 32em;
  border: 1px solid var(--swatch--black);
  background: var(--swatch--red);
  right: 0;
  bottom: -1em;
  border-radius: var(--border-radius);
  z-index: 0;

  @media all and (max-width: 768px) {
    height: 112vw;
    bottom: -8px;
    width: calc(100% - 30px);
    right: 7px;
  }
}

/**** SPLIT SECTION ****/

.textimg-section {
  /* background-color: var(--swatch--off-white); */
  padding: 10em var(--padding--side);
  position: relative;
  overflow: hidden;
  @media all and (max-width: 768px) {
    padding: 4em var(--padding--side);
  }
}
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;

  &.shadow {
    box-shadow: -0.5em -0.5em;
    border-radius: var(--border-radius);
  }

  .split-text {
    aspect-ratio: 1 / 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 2em;
    padding: var(--padding--side) 8em;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border: 1px solid var(--swatch--black);
    border-right: 0;

    @media all and (max-width: 768px) {
      padding: var(--padding--side) 2em;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      /* border-right: 1px solid; */
      border-bottom: 0px;
      grid-gap: 1em;
    }
  }
  .split-img {
    border: 1px solid var(--swatch--black);
    aspect-ratio: 1 / 1.2;
    position: relative;
    overflow: hidden;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;

    @media all and (max-width: 768px) {
      border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
  }

  .gogo-star {
    z-index: 1;
    right: auto;
    left: 10em;
    top: 4em;
    padding: 1em;

    @media all and (max-width: 768px) {
      display: none;
    }
  }
  .dopa-boy {
    top: auto;
    bottom: 2em;
    right: 3em;
  }

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.tall {
  .split-text,
  .split-img {
    aspect-ratio: 1 / 1.2;
  }
}

.square {
  .split-text {
    aspect-ratio: auto;
  }

  .split-img {
    aspect-ratio: 1;
  }

  @media all and (max-width: 768px) {
    aspect-ratio: auto;
    min-height: 50vh;
  }
}

.cream-bg {
  background-color: var(--swatch--cream);
}

.white-bg {
  background-color: var(--swatch--white);
}
.red-bg {
  background-color: var(--swatch--red);
  color: var(--swatch--white);

  .btn {
    &:hover {
      &.large {
        box-shadow: -3px -3px var(--swatch--black);
      }
    }
  }
}

.icon-cta-section {
  z-index: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  grid-gap: 6em;
  padding: 6em 10em;
  h2 {
    margin-bottom: 0.5em;
  }

  @media all and (max-width: 768px) {
    padding: 4em var(--padding--side);
    grid-template-columns: 1fr;
    grid-gap: 2em;
  }
}

.icon-cta img {
  height: auto;
  @media all and (max-width: 768px) {
    width: 80%;
  }
}

.dopa-values {
  position: relative;
  margin: 2em var(--padding--side);
  border: 1px solid var(--swatch--black);
  border-radius: var(--border-radius);
  color: var(--swatch--white);
  overflow: hidden;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: center;
  grid-gap: 2em;
  padding: 12em 8em;

  .value {
    position: relative;
    display: grid;
    grid-gap: 1em;

    .h2 {
      margin-bottom: 0.5em;
      @media all and (max-width: 768px) {
        margin-bottom: 0em;
      }
    }
  }

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
    padding: 3em 1em;

    p {
      font-size: var(--font-size--16);
    }
  }
}

.t-center {
  text-align: center;
}

/***** FORMS *****/

.pattern-bg {
  .form-wrapper {
    & .form-embed {
      &
        div.wpforms-container-full
        .wpforms-form
        .wpforms-field.wpforms-field-select-style-classic
        select[multiple]
        > option {
        &:hover {
          background-color: var(--swatch--blue);
          color: var(--swatch--white);
        }
      }
    }
  }
}

.form-wrapper {
  padding: 8em 10em;

  div.wpforms-container-full button[type="submit"] {
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid currentColor !important;
    line-height: 1;
    position: relative;
    color: var(--swatch--black) !important;
    background: var(--swatch--white) !important;
    transition:
      0.3s all ease,
      0s ease font-size;
    border-radius: 0;
    font-size: var(--font-size--24);
    padding: 0.6em 0.9em 0.4em;
    box-shadow: 0 0 var(--swatch--red);
    height: auto;

    &:hover {
      box-shadow: -3px -3px var(--swatch--red);
      transform: translate(3px, 3px);
      background: var(--swatch--white) !important;
    }
  }

  .grid-2 {
    margin-top: 6em;
    grid-gap: 5em;
  }

  div.wpforms-container-full h3 {
    font-size: var(--font-size--24);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 0;
  }

  .form-text {
    h1,
    h2,
    h3 {
      margin-bottom: 0.3em;
    }

    p {
      max-width: 80%;

      @media all and (max-width: 768px) {
        max-width: 100%;
      }
    }
  }

  .form-embed {
    div.wpforms-container-full:not(:empty) {
      margin: 0;
    }

    .wpforms-container .wpforms-field {
      padding: 0 0 2em;
    }

    .wpforms-container input[type="text"],
    .wpforms-container input[type="email"],
    div.wpforms-container-full textarea {
      font-family: var(--font-family--body);
      color: currentColor;
      border: 0;
      border-bottom: 1px solid currentColor;
      background-color: transparent;
      font-size: var(--font-size--18);
      width: 100%;
      font-weight: 500;
      border-radius: 0;
      padding-left: 0;

      &::placeholder {
        color: currentColor !important;
      }

      &:focus {
        border-width: 2px;
        border-style: solid;
        border-color: currentColor;
        border: 0;
        border-bottom: 2px solid currentColor;
        box-shadow: none;
        outline: none;
        color: currentColor;
      }
    }

    div.wpforms-container-full
      .wpforms-form
      .wpforms-field.wpforms-field-select-style-classic
      select[multiple] {
      background: transparent;
      box-shadow: none;
      color: currentColor;
      border: 1px solid;
      border-radius: 0;
      font-size: 1em;
    }

    div.wpforms-container-full
      .wpforms-form
      .wpforms-field.wpforms-field-select-style-classic
      select[multiple]
      > option {
      padding: 0.3em 0.6em;
      box-shadow: none;
      font-family: var(--font-family--body);
      color: currentColor;
      border: 0;
      border-bottom: 1px solid currentColor;
      background-color: transparent;
      font-size: var(--font-size--18);
      width: 100%;
      font-weight: 500;

      &:hover {
        background-color: currentColor;
        color: var(--swatch--blue);
      }
    }

    div.wpforms-container-full
      select[multiple]
      > option:not(.placeholder):checked,
    .wp-core-ui
      div.wpforms-container-full
      select[multiple]
      > option:not(.placeholder):checked {
      background: currentColor !important;
      color: var(--swatch--blue) !important;
    }

    /* Sub-labels (e.g. First / Last under Name) */
    div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
      text-transform: none;
      font-size: 90% !important;
      margin-top: 0.5em;
      opacity: 0.6;
    }

    /* Single select dropdown: match the underline inputs */
    div.wpforms-container-full .wpforms-form select:not([multiple]) {
      appearance: none;
      -webkit-appearance: none;
      font-family: var(--font-family--body);
      font-size: var(--font-size--18);
      font-weight: 500;
      color: currentColor;
      height: 43px;
      max-width: 100%;
      padding: 0 2em 0 0;
      border: 0;
      border-bottom: 1px solid currentColor;
      border-radius: 0;
      box-shadow: none;
      cursor: pointer;
      background-color: transparent;
      /* Chevron arrow */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.25em center;
      background-size: 0.75em auto;

      &:focus {
        border: 0;
        border-bottom: 2px solid currentColor;
        box-shadow: none;
        outline: none;
      }
    }
  }
  form {
    fieldset {
      border: 0;
      margin: 0;
      padding: 0;
      display: grid;
      grid-gap: 2em;
    }
    legend {
      pointer-events: none;
      color: currentColor !important;
      font-size: var(--font-size--20) !important;
      text-transform: uppercase;
    }
    input,
    textarea,
    select {
      font-family: var(--font-family--body);
      color: currentColor;
      border: 0;
      border-bottom: 1px solid currentColor;
      background-color: transparent;
      font-size: var(--font-size--18);
      width: 100%;
      font-weight: 500;
      border-radius: 0;

      &::placeholder {
        color: currentColor !important;
        opacity: 1 !important;
      }

      @media all and (max-width: 768px) {
        font-size: var(--font-size--20);
      }
    }

    input[type="file"] {
      border: 0;
      width: auto;
      font-size: var(--font-size--20);
      @media all and (max-width: 768px) {
        width: 100%;
      }
    }
    textarea {
    }
    select {
    }
    label {
      color: currentColor !important;
      font-size: var(--font-size--20) !important;
      text-transform: uppercase;
    }
  }

  @media all and (max-width: 768px) {
    padding: 4em var(--padding--side);

    .grid-2 {
      grid-template-columns: 1fr;
      margin-top: 3em;
      grid-gap: 1em;
    }
  }
}

.page-template-produce-map {
  .source-wrapper {
    padding-top: 10em;
    h1 {
      text-align: center;
      margin-bottom: 0.4em;
    }
  }
}

/***** SINGLE LOCATION ****/

.page-template-single-location,
.page-template-single,
.page-template-food-story,
.page-template-storefinder,
.page-template-produce-map,
.page-template-default,
/* Page Builder: dark header when the first section has a light background */
body:has(.section.cream-bg:first-of-type),
body:has(.section.white-bg:first-of-type) {
  .header.clear {
    color: var(--swatch--black);
  }

  .header.solid {
    color: var(--swatch--white);
  }
}
.single-location {
  padding: 7.5em var(--padding--side) 4em;
  .hero-section {
    border-radius: var(--border-radius);
    overflow: hidden;
    height: calc(100svh - 18em);
    border: 1px solid var(--swatch--black);

    .hero-slide {
      height: calc(100svh - 18em);
    }
  }

  @media all and (max-width: 768px) {
    padding: 6em var(--padding--side) 4em;
  }
}

.single-venue-info {
  padding: 3em 0;
  .info-grid {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1.2fr 1fr 2fr;
    grid-gap: 5em;
    .col {
      display: flex;
      flex-direction: column;
      grid-gap: 1em;
      &.align-right {
        align-items: flex-end;
        @media all and (max-width: 768px) {
          align-items: flex-start;
        }
      }

      .btn {
        min-width: 8em;
        text-align: center;
        @media all and (max-width: 768px) {
          min-width: 10em;
          margin-bottom: 1em;
        }
      }
      @media all and (max-width: 768px) {
        grid-gap: 0em;
      }
    }
  }

  @media all and (max-width: 768px) {
    padding: 1em 0;

    .info-grid {
      margin-top: 1em;
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 2em;

      p {
        margin-bottom: 0.5em;
      }
    }
  }
}

/**** STOREROCKET ****/

.locations {
  min-height: 90svh;
  padding: 11em var(--padding--side) 6em;

  .h2 {
    margin-bottom: 1em;
  }

  #storerocket-map-container,
  #storerocket-panel {
    height: 80svh;
  }

  .storerocket-result-list-content {
    padding: 0px 40px 0 0;
  }

  #storerocket-map-container {
    border: 1px solid var(--swatch--black);
    border-radius: var(--border-radius);
  }

  #storerocket-widget {
    background: var(--swatch--cream);
    border: 0;
  }
  #storerocket-search {
    height: 80px;
    background: var(--swatch--cream);
    border: 0;
    padding: 14px 0;
  }
  .storerocket-radius {
    display: none;
  }
  #storerocket-widget .storerocket-filters.storerocket-filters-row {
    background: var(--swatch--cream);
  }

  .storerocket-result-list {
    @media all and (max-width: 768px) {
      height: auto !important;
    }
  }

  #storerocket-widget
    .storerocket-filters.storerocket-filters-row
    .storerocket-filters-row-item {
    background: var(--swatch--cream);
    box-shadow: none;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 20px;

    img {
      transition: ease all 0.2s;
    }

    &:hover {
      img {
        transform: translateY(-20%);
      }
    }
  }

  .storerocket-filters-row-item-name {
    position: relative;
  }

  .storerocket-filters-row-item-name::before,
  .storerocket-filters-row-item-name::after {
    content: "";
    position: absolute;
    bottom: 0.4em;
    left: 0;
    width: 100%;
    height: 0.0625em;
    background-color: currentColor;
    transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
  }

  .storerocket-filters-row-item-name::before {
    transform-origin: left;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0.3s;
  }

  .is-active .storerocket-filters-row-item-name::before {
    transform: scaleX(1) rotate(0.001deg);
  }

  .storerocket-filters-row-item-name:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  .storerocket-filters-row-item-name::after {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  .storerocket-filters-row-item-name:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }

  #storerocket-widget .storerocket-query .storerocket-search-field {
    background: var(--swatch--cream);
    border: 1px solid var(--swatch--black);
    border-radius: 0;
    box-shadow: none !important;
    font-size: 16px;
    height: 50px;
  }
  .storerocket-query {
    height: 50px;
  }
  .storerocket-query .storerocket-search-icon {
    top: 19px;
  }
  .storerocket-filters-row-item-icon {
    height: 22px !important;
  }

  #storerocket-widget
    .storerocket-filters.storerocket-filters-row
    .storerocket-filters-row-item.is-active {
    background: inherit;
    color: inherit;
    font-weight: 600;
  }

  #storerocket-widget
    .storerocket-filters.storerocket-filters-row
    .storerocket-filters-row-inner {
    padding: 0;
    margin: 0;
  }

  #storerocket-panel {
    background: var(--swatch--cream);
    box-shadow: none;

    @media all and (max-width: 768px) {
      height: auto !important;
      /* padding-top: 400px !important; */
    }
  }

  /* #storerocket-map-container {
    @media all and (max-width: 768px) {
      padding-top: 400px !important;
    }
  } */

  .storerocket-result {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    flex-direction: column;
    padding: 30px 0;
    grid-gap: 20px;
    border-bottom: 1px solid var(--color-dark);
  }

  .storerocket-result:before {
    display: none;
  }
  .storerocket-result-image {
    margin-right: 0;
    aspect-ratio: 1 / 0.6;
    position: relative;

    @media all and (max-width: 768px) {
      display: none;
    }
  }
  .storerocket-result-image-img {
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
  }

  .storerocket-result-name {
    font-size: 30px;
    font-weight: 500;
    color: var(--swatch--black);
    font-family: var(--font-family--main);
    text-transform: uppercase;
  }

  .storerocket-result-filters-item {
    color: black;
    font-weight: 600;
    background-color: transparent;
    padding: 0;
    margin: 8px 0 0;
  }

  .storerocket-result-is-open,
  .storerocket-result-distance,
  .storerocket-result-caret {
    display: none !important;
  }

  .storerocket-result-address,
  .storerocket-result-phone,
  .storerocket-result-today-hours {
    margin-top: 10px;
    font-size: 16px;
    line-height: 23px;
    font-weight: 300;
    color: black;
  }
}

.default-template {
  margin: 10em 0;
  min-height: 56svh;

  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--padding--side);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  p {
    margin-bottom: 0.6em;
  }
}

.order-now {
  background: var(--swatch--red);
  color: var(--swatch--off-white);
  min-height: 80vh;
  padding: 12em;
  display: flex;
  justify-content: space-between;
  grid-gap: 2em;
  grid-gap: 2em;

  .store-wrapper {
    display: flex;
    grid-gap: 8em;

    h4 {
      font-family: var(--font-family--main);
      font-size: var(--font-size--24);
      font-weight: 500;
      line-height: 1.1;
      text-transform: uppercase;
      margin-bottom: 0.75em;
    }
  }

  .store-list {
    padding: 0;
    margin: 0;
    list-style: none;
    li {
      margin-bottom: 0.75em;
    }
    .underline {
      &:before {
        transform: scaleX(0) rotate(0.001deg);
      }
      &:hover {
        &:before {
          transform: scaleX(1) rotate(0.001deg);
        }
      }
    }
    a {
      position: relative;
    }
  }

  @media all and (max-width: 768px) {
    padding: 7em var(--padding--side);
    flex-direction: column;
    grid-gap: 2em;
    justify-content: flex-start;

    .store-wrapper {
      flex-direction: column;
      grid-gap: 2em;
    }
  }
}

.icon-cta-section + .video-section {
  margin: 0em var(--padding--side) 3em;
}
.dopa-values + .video-section {
  margin: 4em var(--padding--side) 0em;
}

.video-section {
  margin: 6em var(--padding--side);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-gap: 2em;

  .grid-2 {
    grid-gap: var(--padding--md);

    .vimeo-player {
      aspect-ratio: 16 / 11;
    }
  }

  .p-lrg {
    font-size: var(--font-size--24);
    text-align: center;
  }

  @media all and (max-width: 768px) {
    .grid-2 {
      grid-template-columns: 1fr;
    }
    .p-lrg {
      font-size: var(--font-size--20);
    }
  }
}

.video-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-gap: 2em;
}

.vimeo-player {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
  aspect-ratio: 16 / 9;
}

/* Cover */
.vimeo-player[data-vimeo-update-size="cover"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.vimeo-player__iframe {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

.vimeo-player__before {
  padding-top: 62.5%;
}

/* Placeholder */
.vimeo-player__placeholder,
.vimeo-player__placeholder img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  display: block;
  position: absolute;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__placeholder {
  opacity: 0;
}

/* Dark (Overlay) */
.vimeo-player__dark {
  opacity: 0.5;
  pointer-events: none;
  background-color: #131313;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  position: absolute;
}

.vimeo-player[data-vimeo-playing="false"] .vimeo-player__dark {
  opacity: 0.33;
}

.vimeo-player[data-vimeo-activated="false"][data-vimeo-playing="false"]
  .vimeo-player__dark {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__dark {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .vimeo-player[data-vimeo-hover="true"]:hover .vimeo-player__dark {
    opacity: 0.33 !important;
  }
}

/* Play/Pause */
.vimeo-player__play,
.vimeo-player__pause {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-player__btn {
  background-color: var(--swatch--red);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  transition:
    opacity 0.3s linear,
    transform 0.3s ease;
  display: flex;
  position: relative;
}

.vimeo-player:hover .vimeo-player__btn {
  transform: scale(1.1);
}

.vimeo-player__btn-play-svg {
  width: 40%;
}

.vimeo-player__btn-pause-svg {
  width: 50%;
}

/* Pause */
.vimeo-player .vimeo-player__pause {
  display: none;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__pause {
  display: flex;
}

.vimeo-player .vimeo-player__pause .vimeo-player__btn {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="false"]
  .vimeo-player__pause
  .vimeo-player__btn,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover
  .vimeo-player__pause
  .vimeo-player__btn {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"]
    .vimeo-player__pause
    .vimeo-player__btn {
    opacity: 0 !important;
  }
}

/* Play */
.vimeo-player[data-vimeo-playing="true"] .vimeo-player__play {
  opacity: 0;
}

/* Loading */

.vimeo-player__loading-svg {
  width: 6em;
  height: 6em;
  aspect-ratio: 1;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.vimeo-player__loading {
  pointer-events: none;
  color: var(--swatch--red);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  display: flex;
  position: absolute;
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__loading {
  opacity: 1;
}

.vimeo-player[data-vimeo-playing="true"][data-vimeo-loaded="true"]
  .vimeo-player__loading {
  opacity: 0;
}

/* Interface */
.vimeo-player .vimeo-player__interface {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="false"][data-vimeo-playing="false"]
  .vimeo-player__interface {
  opacity: 1;
}

.vimeo-player .vimeo-player__interface * {
  pointer-events: all; /* Make children of div clickable by user */
}
.vimeo-player[data-vimeo-activated="false"][data-vimeo-playing="false"]
  .vimeo-player__interface {
  opacity: 0;
}
.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="false"]
  .vimeo-player__interface {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover
  .vimeo-player__interface {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"]
    .vimeo-player__interface {
    opacity: 0 !important;
  }
}

/* Interface - Variables */
.vimeo-player {
  --timeline-rounded-corners: 1.5em;
  --timeline-dot-height: 0.75em;
  --timeline-dot-color: var(--swatch--red);
  --progress-bg: rgba(239, 238, 236, 0.2);
  --progress-fill-bg: var(--swatch--red);
  --progress-height: 0.2em;
}

.vimeo-player__interface {
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: min(2em, 4vw);
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  display: flex;
  position: absolute;
}

.vimeo-player__interface-bottom {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

/* Interface - Timeline */

.vimeo-player__timeline {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-player__timeline-input {
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: #0000;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.vimeo-player__timeline-progress {
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  height: var(--progress-height);
  border-radius: var(--timeline-rounded-corners);
  color: var(--progress-fill-bg);
  background-color: #0000;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.vimeo-player progress::-webkit-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--progress-bg);
  box-shadow: 0;
}

.vimeo-player progress::-webkit-progress-value {
  background: var(--progress-fill-bg);
}

.vimeo-player progress::-moz-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background: var(--progress-fill-bg);
  box-shadow: 0;
}

.vimeo-player progress::-ms-fill {
  border-radius: var(--timeline-rounded-corners);
}

/* Interface - Range */
.vimeo-player [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.vimeo-player [type="range"]:focus {
  outline: none;
}

.vimeo-player [type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background-color: var(--progress-bg);
  border-radius: var(--timeline-rounded-corners);
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-webkit-slider-thumb {
  box-shadow: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--timeline-dot-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: calc(
    (var(--progress-height) / 2) - (var(--timeline-dot-height) / 2)
  );
}

.vimeo-player [type="range"]::-webkit-slider-runnable-track,
.vimeo-player [type="range"]:focus::-webkit-slider-runnable-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-moz-range-track {
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background: var(--progress-bg);
  border-radius: 0;
  border: 0;
  border-radius: var(--timeline-rounded-corners);
  overflow: hidden;
  opacity: 1 !important;
}

.vimeo-player [type="range"]::-moz-range-thumb {
  box-shadow: 0;
  border: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background: var(--timeline-dot-color);
  cursor: pointer;
  box-shadow: 0;
}

/* Interface - Mute */

.vimeo-player__mute {
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-player__volume-up-svg,
.vimeo-player__volume-mute-svg {
  width: 100%;
  position: absolute;
}

.vimeo-player .vimeo-player__mute svg:nth-child(2),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__mute svg:nth-child(1),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(2) {
  display: block;
}

/* Interface - Fullscreen */
.vimeo-player__fullscreen {
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
  cursor: pointer;
}

.vimeo-player__fullscreen-scale-svg,
.vimeo-player__fullscreen-shrink-svg {
  width: 100%;
  position: absolute;
}

.vimeo-player .vimeo-player__fullscreen svg:nth-child(2),
.vimeo-player[data-vimeo-fullscreen="true"]
  .vimeo-player__fullscreen
  svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__fullscreen svg:nth-child(1),
.vimeo-player[data-vimeo-fullscreen="true"]
  .vimeo-player__fullscreen
  svg:nth-child(2) {
  display: block;
}

/* Interface - Duration */
.vimeo-player__duration {
  flex-shrink: 0;
  width: 2.25em;
}

.vimeo-player__duration-span {
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  display: block;
}

.heading {
  text-align: center;
  padding: 7em 5em 0;
  display: grid;
  grid-gap: 1.5em;
}

.testimonials {
  position: relative;
  margin: 8em auto 5em;

  .h1 {
    text-align: center;
  }

  .testimonial-swiper {
    padding: 6em var(--padding--side);
  }

  .testimonial-slide {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 5em;
    place-items: center;
    padding: 0 7em;
  }

  .media {
    position: relative;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1.2;
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--swatch--black);
    margin-bottom: 1.5em;
    box-shadow: -0.4em -0.4em;
    transition: 0.6s box-shadow var(--transition--ease);
  }

  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 3em;
  }

  .quote {
    font-size: var(--font-size--32);
  }
  .author {
    font-size: var(--font);
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-size: var(--font-size--20);
  }
  .position {
    font-size: var(--font-size--20);
  }

  @media all and (max-width: 768px) {
    .testimonial-slide {
      grid-template-columns: 1fr;
      grid-gap: 1em;
      padding: 0 1em;
    }

    .content {
      text-align: center;
      padding-right: 0;
      padding-bottom: 3em;
    }

    .quote {
      font-size: 22px;
    }
  }
}

.swiper-pagination {
  bottom: 0 !important;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  aspect-ratio: 1;
  display: inline-block;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  border: 1px solid;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: black;
}