/** Shopify CDN: Minification failed

Line 970:0 Unexpected "}"

**/
@font-face {
    font-family: 'Kure Bold';
    src: url('//kuresuperfoods.com/cdn/shop/t/12/assets/KureBold.woff2?v=80345447699104319031784332768') format('woff2'),
    url('//kuresuperfoods.com/cdn/shop/t/12/assets/KureBold.woff?v=114397149963739460861784332768') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kure Wide';
    src: url('//kuresuperfoods.com/cdn/shop/t/12/assets/KureWide.woff2?v=32103060762403870211784332768') format('woff2'),
    url('//kuresuperfoods.com/cdn/shop/t/12/assets/KureWide.woff?v=61254062625122490331784332768') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-clr: #AECE36;
    --secondary-clr: #4e5f2b;
    --dark-clr: #414042;
    --img-offset: 5%;
}

/* Reset page width limit */
body,
.footer,
.section-header .header.scrolled .bar.fixed {
    max-width: none !important;
}

/* Set max-width on inner elements */
.main .layout .shopify-section .content,
.footer .top {
    max-width: 2000px !important;
    margin-top: 60px !important;
}

@media screen and (min-width: 2060px) {
    body .main .layout .shopify-section.section-cart {
        flex-direction: row !important;
    }
  
    .main .layout .shopify-section .content {
        max-width: 2000px !important;
        margin-top: 90px !important;
    }

    .footer .top {
        max-width: 2060px !important;
    }

    .main .layout .shopify-section .content,
    .footer .top {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (max-width: 620px) {
    .main .layout .shopify-section .content,
    .footer .top {
    margin-top: 30px !important;
}
}

h1,
h2,
h3,
.title,
.btn {
    font-family: 'Kure Bold', sans-serif !important;
    letter-spacing: .05em;
}

input,
textarea {
    background-color: #f6f6f6 !important;
}

textarea.text::placeholder,
input.text::placeholder {
    font-size: .65em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #a5a5a5;
    font-weight: 900;
}

.row,
.row-wrapper .row:last-child {
    margin-bottom: 15px !important;
}

.row.with-top-border, .row.with-bottom-border {
    border: 0 !important;
    padding: 0 !important;
}

.shopify-section-title {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 2rem auto 5rem !important;
    color: var(--primary-clr) !important;
    display: block !important;
}

.content.text-heading .shopify-section-title {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

@media screen and (max-width: 620px) {
    .shopify-section-title {
        font-size: 1.75rem !important;
    }
}

.multi-button-wrapper .btn {
    margin-bottom: .5rem;
}

button:hover {
  cursor: pointer;
}

.btn {
    color: var(--secondary-clr) !important;
    margin-right: 1rem;
}

.btn.border {
    border: 2px solid var(--secondary-clr) !important;
}

.btn.solid {
    text-transform: uppercase;
    background: var(--primary-clr) !important;
    border-color: var(--primary-clr) !important;
    color: var(--secondary-clr) !important;
}

.btn + .btn,
.btn:last-child {
    margin-right: 0 !important;
}

@media screen and (max-width: 620px) {
    .multi-button-wrapper {
        margin: 0 auto;
    }
    
    .btn {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .side-nav .menu ul li button.btn {
        width: auto !important;
    }
}

.accordion {
    border-top: 1px solid var(--primary-clr) !important;
    border-bottom: 1px solid var(--primary-clr) !important;
}

.product .type_collapsible_tab + .type_collapsible_tab .accordion {
    border-top: 0 !important;
}

.section-header .header .main-nav ul li a,
.side-nav .menu ul li a {
    font-family: 'Kure Bold', sans-serif !important;
}

.section-header .header .main-nav ul li a {
    font-size: .75rem !important;
    color: var(--dark-clr) !important;
}

/* Nav Header */
.header .header-cta {
    position: fixed;
    top: 0.675rem;
    right: 10rem;
    z-index: 100;
    font-size: .75rem;
    margin-right: 0;
}

.side-nav .menu ul li a.btn,
.side-nav .menu ul li button.btn {
    font-size: 25px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
}

.side-nav .menu ul li a.btn:hover {
    text-decoration: none !important;
}

.side-cart .side-cart-container .items .item .right .quantity input {
    background-color: transparent !important;
}

.side-cart .side-cart-container .items .item .right a.name {
    text-decoration: none !important;
}

@media screen and (max-width: 760px) {
    .section-header .header .main-nav,
    .header .bar .right .btn {
        display: none !important;
    }
}

/* Interactive Hero */
#hero h1 {
    font-family: 'Kure Wide' !important;
    font-weight: normal;
    font-size: 6vw;
    max-width: 10ch;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    color: #aece36;
}

#hero h2 {
    font-size: 1.5vw;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    margin-top: 0;
    will-change: transform;
    /* Forces a single line always, both at rest and on hover, so there's no
       wrap point left to shift mid-scale (see interactive-hero.js notes --
       a JS-based width lock attempting to preserve a two-line wrap was
       unreliable). */
    white-space: nowrap;
}

.wrapper.left h2 {
    transform-origin: left bottom;
}

.wrapper.right h2 {
    transform-origin: right bottom;
}

#hero {
    position: relative;
    display: flex;
    align-items: center;
    height: 95vh;
    max-height: 90rem;
    min-height: 70rem;
    overflow: hidden;
}

.cafe-color-block,
.snack-color-block {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cafe-category-ingredients-wrapper,
.snack-category-ingredients-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.cafe-category-ingredients-wrapper img,
.snack-category-ingredients-wrapper img {
    position: absolute;
    object-fit: contain;
    /* !important overrides the inline width:100%/height:auto that the
       resp-img snippet writes onto these <img> tags now that the corner
       images are wired to image_picker settings -- without it the images
       would size to their own aspect ratio instead of the fixed corner
       box these absolute-positioned, object-fit:contain images expect. */
    height: 45vw !important;
    width: 45vh !important;
    max-width: 100rem;
    max-height: 100rem;
}

.cafe-category-ingredients-wrapper img.top-left,
.snack-category-ingredients-wrapper img.top-left {
    object-position: top left;
}
.cafe-category-ingredients-wrapper img.bot-left,
.snack-category-ingredients-wrapper img.bot-left {
    object-position: bottom left;
}
.cafe-category-ingredients-wrapper img.top-right,
.snack-category-ingredients-wrapper img.top-right {
    object-position: top right;
}
.cafe-category-ingredients-wrapper img.bot-right,
.snack-category-ingredients-wrapper img.bot-right {
    object-position: bottom right;
}

.top-left {
    top: 0;
    left: 0;
}
.top-left.bg {
    opacity: .5;
}
.bot-right {
    bottom: 0;
    right: 0;
}
.bot-right.bg {
    opacity: .5;
}
.top-right {
    top: 0;
    right: 0;
}
.top-right.bg {
    opacity: .5;
}
.bot-left {
    bottom: 0;
    left: 0;
}
.bot-left.bg {
    opacity: .5;
}

.section-image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    max-width: 2000px;
    height: 30vh !important;
    max-height: 25rem;
    min-height: 20rem;
    object-fit: cover;
    object-position: top;
    margin: 0 auto;
    z-index: -1;
}

.trigger {
    position: absolute;
    width: 35vw;
    height: 60%;
    z-index: 1;
}

.trigger.is--left {
    left: 0;
}

.trigger.is--right {
    right: 0;
}

.wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    max-width: 45ch;
    height: 100%;
    padding: 0 3rem;
    flex-direction: column;
}

.wrapper.left {
    left: 0;
    text-align: left;
    align-items: flex-start;
}

.wrapper.right {
    right: 0;
    text-align: right;
    align-items: flex-end;
}

.main-text-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.main-text-wrapper h1 {
    pointer-events: none;
}

.title-wrapper {
    position: relative;
}

.title-wrapper a {
  text-decoration: none !important;
}

.arrow {
    position: absolute;
    bottom: 0;
    width: 2.5rem;
    height: 1rem;
    transform: translateY(100%);
}

.arrow.left {
    left: 0;
}

.arrow.right {
    right: 0;
}

#hero .copy {
    color: white;
    font-size: 1.25rem;
}

.copy-wrapper {
    font-size: 1.2rem;
    max-width: 40ch;
    overflow: hidden;
}

#hero .btn {
    margin-top: 2rem;
    background-color: white !important;
    color: var(--dark-clr) !important;
}

.category-image-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cafe-image-wrapper,
.snack-image-wrapper {
    position: absolute;
    height: 55rem;
    width: 50vw;
    max-width: 55rem;
    max-height: 70vh;
}

.cafe-image,
.cafe-accent,
.snack-image,
.snack-accent {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.mobile-cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 30px 0 0;
    width: calc(100% - 15px);
    margin: 0 auto;
}

.cafe-cta-wrapper,
.snack-cta-wrapper {
    padding: 7.5px;
}

.cafe-cta-wrapper,
.snack-cta-wrapper {
    flex: 1 1 auto;
    min-width: 175px;
}

.cafe-cta-wrapper .btn,
.snack-cta-wrapper .btn {
    padding: 1rem !important;
}

@media screen and (min-width: 2060px) {
    #hero h1 {
        font-size: 123.6px;
    }
    /* Trigger zones must stay flush with the screen edges on every desktop
       breakpoint (large desktop >=960px and small desktop 620-959px) so the
       mousemove hit-testing in interactive-hero.js -- which measures zones
       relative to the trigger's own getBoundingClientRect() -- lines up with
       the actual edge of the viewport. This 5% inset previously pulled the
       trigger away from the edge on very wide (>=2060px) screens only. */
    .trigger.is--left {
        left: 0;
    }
    .trigger.is--right {
        right: 0;
    }
}

@media screen and (max-width: 2060px) {
    .cafe-color-block,
    .snack-color-block {
        width: 110%;
        left: -5%;
    }
}

@media screen and (max-width: 1600px) {
    #hero .trigger {
        width: 40vw;
    }
    .cafe-color-block,
    .snack-color-block {
        width: 115%;
        left: -7.5%;
    }
    .cafe-category-ingredients-wrapper img,
    .snack-category-ingredients-wrapper img {
        width: 40vw !important;
        height: 40vh !important;
    }
}

@media screen and (max-width: 1200px) {
    #hero {
        align-items: flex-end;
    }
    #hero h1 {
        font-size: 8vw;
    }
    #hero h2 {
        font-size: 2.5vw;
    }
    #hero .main-text-wrapper,
    #hero .cafe-image-wrapper,
    #hero .snack-image-wrapper {
        margin-bottom: 10rem;
    }
    .cafe-image-wrapper {
        max-height: 42.5rem;
    }
    .snack-image-wrapper {
        max-height: 45rem;
    }
    #hero .trigger {
        height: 40%;
        margin-bottom: 10rem;
    }
    #hero .wrapper {
        width: 40vw;
    }
}

@media screen and (max-width: 960px) {
    .header .header-cta {
        top: 0.875rem;
        right: 6.5rem;
        padding: 5px 10px;
    }
    #hero h1 {
        font-size: 10vw;
    }
    #hero .copy {
        font-size: 1rem !important;
    }
    #hero .wrapper {
        width: 45vw;
    }
    /* Matches .wrapper's width above -- .trigger was staying at 40vw here
       (from the <1600px rule) while .wrapper widened to 45vw, so the
       mousemove zone math (measured against .trigger's own box) was
       narrower than the actual content, leaving the locked red zone unable
       to reach the full width of the content. */
    #hero .trigger {
        width: 45vw;
    }
    .cafe-image-wrapper,
    .snack-image-wrapper {
        max-height: 60rem !important;
        min-width: 75% !important;
    }
    .cafe-category-ingredients-wrapper img,
    .snack-category-ingredients-wrapper img {
        width: 45vw !important;
        height: 45vh !important;
    }
}

@media screen and (max-width: 760px) {
    .header .header-cta {
        font-size: .675rem;
    }
    #hero .main-text-wrapper,
    #hero .cafe-image-wrapper,
    #hero .snack-image-wrapper {
        margin-bottom: 20rem;
    }
}

@media screen and (min-width: 620px) {
    .mobile-cta-wrapper {
        display: none !important;
    }
}

@media screen and (max-width: 620px) {
    .header .header-cta {
        display: none !important;
    }
    #hero {
        height: 70vh;
        max-height: 50rem;
        min-height: 40rem;
    }
    #hero h1 {
        font-size: 12vw;
    }
    #hero .main-text-wrapper {
        margin-bottom: 10rem;
        flex-direction: column;
    }
    #hero .section-image {
        min-height: 10rem;
        max-height: 15rem;
    }
    #hero .trigger,
    #hero .snack-color-block,
    #hero .cafe-color-block,
    #hero .category-image-wrapper {
        display: none !important;
    }
    #hero h2 {
        font-size: 4vw;
    }
    #hero .btn {
        font-size: .75rem;
        padding: 0.5rem 0.75rem;
    }
    .section-header .header.overlaying:not(.solid):not(.showing-megamenu) .logo img:not(:only-child):first-child {
        display: block !important;
    }
    .section-header .header.overlaying:not(.solid):not(.showing-megamenu) .logo img+img {
        display: none !important;
    }
}

/* Text Heading */
.section-text-heading .content {
    padding-bottom: 0 !important;
}

.section-text-heading .text-heading {
    padding: 0 30px 0 !important;
    text-align: center;
}

.section-text-heading .text-heading .inner {
    margin-bottom: 5rem !important;
}

.section-text-heading .text-heading .inner svg {
    display: inline-block;
    margin-left: .25rem;
    width: 1rem;
    height: 1rem;
    transition: transform .2s ease-in-out;
}

.section-text-heading .text-heading .heading-link-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto 0;
    color: var(--secondary-clr);
}

.section-text-heading .text-heading .heading-link-wrapper:hover svg {
    transform: translateX(.25rem);
}

.section-text-heading .text-heading .heading-link {
    display: inline-block;
    font-size: .875rem;
    text-transform: uppercase;
    text-decoration: none !important;
    color: inherit !important;
    font-weight: 900;
    letter-spacing: .1em;
}

@media screen and (max-width: 620px) {
    .section-text-heading .text-heading .inner {
        padding-top: 1rem !important;
        margin-bottom: 2.5rem !important;
    }
    .section-text-heading .text-heading .heading-link {
        font-size: .75rem;
    }
}

/* Image w/ Text Section */
.image-with-text .flex-row .image-wrapper {
    display: flex;
    align-self: stretch;
    justify-content: stretch;
    flex-basis: 50%;
    flex-grow: 1 !important;
    gap: 20px;
    overflow: hidden;
}

.image-with-text .flex-row .image {
  position: relative;
}

.image-with-text .flex-row .image img {
  position: absolute;
}

.image-with-text .flex-row.odd .image-wrapper {
  order: 2;
}

.image-with-text .info h2 {
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 0.125em !important;
    hyphens: auto;
}

@media screen and (min-width: 2060px) {
    .image-with-text .info h2 {
        font-size: 48px;
    }
}

.image-with-text .flex-row.unequal .info-wrapper {
    max-width: 60ch;
    margin: 0 auto;
}

.image-with-text .flex-row.unequal .info {
    flex: 1 0 30%;
}

.image-with-text .flex-row.odd .info {
    padding-left: 20px !important;
}

.image-with-text .flex-row.even .info {
    padding-right: 20px !important;
}

.image-with-text .flex-row.unequal .image {
    flex-grow: 1 !important;
}

.image-with-text .info .category {
    font-weight: 900;
    font-size: .875em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.modal { display: none; }

.modal.is-open { display: block; }

@media (max-width: 1200px) {
    .image-with-text .flex-row.unequal .info {
        flex-basis: 40%;
    }

    .image-with-text .flex-row .image-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .image-with-text .flex-row .image-wrapper .image {
        flex: 0 1 50% !important;
        min-height: 0;
    }
}

@media (max-width: 960px) {
    .image-with-text .info h2 {
        font-size: 28px;
    }

    .image-with-text .flex-row.unequal .info {
        flex-basis: 50%;
    }
}

@media (max-width: 620px) { 
    .image-with-text .flex-row .image-wrapper {
      max-height: 25rem !important;
    }
  
    .image-with-text .flex-row.odd .image-wrapper {
      order: 0;
    }

    .image-with-text .flex-row .image-wrapper .image {
      flex: initial !important;
      overflow: hidden;
    }

    .image-with-text .flex-row .image,
    .image-with-text .flex-row .image-wrapper .image {
      min-height: 0;
    }

    .image-with-text .flex-row .image-wrapper .image {
      height: 40vw;
    }

    .image-with-text .flex-row .image {
      height: 60vw;
    }

    .image-with-text .flex-row .image-wrapper {
      gap: 5px;
    }
  
    .image-with-text .flex-row .image img {
      position: static;
      aspect-ratio: auto;
    }
  
    .image-with-text .flex-row.unequal .info-wrapper {
        max-width: none;
    }
    .image-with-text .flex-row.odd .info {
        padding-left: 0 !important;
    }
    
    .image-with-text .flex-row.even .info {
        padding-right: 0 !important;
    }

    .image-with-text .info h2 {
        font-size: 28px;
    }
}

/* Banner w/ Text Section */
.banner-with-text {
    display: flex;
    align-items: center;
}

.banner-with-text .info.hidden {
    background: none !important;
}

.banner-with-text .info.opaque {
    background: white !important;
}

.banner-with-text .info {
    max-width: 65rem;
}

.banner-with-text.position-right {
    justify-content: flex-end;
}

.banner-with-text.position-right .image {
    background-position: right !important;
}

.banner-with-text.position-left .image {
    background-position: left !important;
}

.banner-with-text.position-right .background {
    margin-right: auto;
}

.banner-with-text.position-left .background {
    margin-left: auto;
}

@media screen and (max-width: 960px) {
    .banner-with-text {
        padding: 10px !important;
    }

    .banner-with-text .info {
        padding: 15px !important;
    }

    .banner-with-text .info h1 {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }
}

@media screen and (max-width: 620px) {
    .banner-with-text {
        justify-content: center;
        flex-direction: column;
        padding: 0 !important;
        min-height: none !important;
    }
    .banner-with-text .info h1 {
        font-size: 28px!important;
    }
    .banner-with-text.position-left .background,
    .banner-with-text.position-right .background {
        padding: 0 1.5rem !important;
        width: 100% !important;
    }
    .banner-with-text.position-center .image {
        height: 100% !important;
    }
    .banner-with-text .image {
        background-size: 100% !important;
    }
    .banner-with-text.position-center .background {
        position: absolute !important;
    }
    .banner-with-text.position-center .background .image {
      background-size: cover !important;
    }f
}

/* Text with Images Section */
.text-columns-with-images .cols.flex {
    max-width: none !important;
    display: flex;
    justify-content: space-between;
}

.text-columns-with-images .cols.flex .col {
    margin: 0 auto !important;
    padding: 15px 30px !important;
    max-width: 325px;
    flex: 1 1 100%;
}

.text-columns-with-images .cols .col img,
.text-columns-with-images .cols .col .number {
    margin-bottom: 15px !important;
}

.text-columns-with-images .cols .col .number {
    font-family: 'Kure Bold' !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px !important;
}

@media screen and (max-width: 960px) {
    .text-columns-with-images .cols.flex {
        flex-wrap: wrap;
    }
    .text-columns-with-images .cols.flex .col {
        padding: 15px !important;
        max-width: 200px;
    }
}

@media screen and (max-width: 620px) {
    .text-columns-with-images .cols.flex .col {
        flex-basis: 50% !important;
    }
}

/* Contact Page */
.section-contact .content {
    background-color: white !important;
}

/* CTA Section */
.content.call-to-action h2:only-child {
    margin-bottom: 0 !important;
}

/* Collection Page */
.collection-products .collection-product .metas .line {
    display: flex;
    justify-content: space-between;
}

.collection-products .collection-product .collection-product-title .title {
    display: block !important;
    line-height: 1.1 !important;
}

.collection-products .collection-product .collection-product-price .price {
    font-family: 'Kure Bold' !important;
    line-height: 1.1 !important;
    text-align: right;
}

.collection-products .collection-product > .inner {
    background-color: #f6f6f6 !important;
    position: relative;
}

.collection-products .collection-product > .inner .info {
    background-color: white !important;
    height: 100%;
}

.collection-products .collection-product > .inner .image {
    z-index: 1;
}

.collection-products .collection-product > .inner .image img {
    background-color: transparent !important;
}

.collection-products .collection-product > .inner .unwrapped-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.collection-products .collection-product > .inner .unwrapped-image img {
    height: 100% !important;
    padding-bottom: 25%;
    object-fit: cover;
}

.collection-products .collection-product.has-unwrap-hover .inner .image img {
    transition: transform .35s ease-in-out !important;
}

/* Reveal-on-hover effect: opt-in per collection via the "bars" tag (see
   snippets/collection-product.liquid). Collections without that tag don't
   get the .has-unwrap-hover class, so this never fires for them. */
.collection-products .collection-product.has-unwrap-hover:hover .inner .image img {
    opacity: 1 !important;
    transform: translateY(40%);
}

@media screen and (max-width: 1200px) {
  .collection-products .collection-product .metas .line {
      flex-direction: column;
      justify-content: center;
  }
  .collection-products .collection-product .collection-product-title .title,
  .collection-products .collection-product .collection-product-price .price {
      text-align: center;
      margin-bottom: 4px;
  }
}

@media screen and (max-width: 960px) {
    .collection-products .collection-product .collection-product-title .title,
    .collection-products .collection-product .collection-product-price .price {
        font-size: .8rem !important;
    }
}

@media screen and (max-width: 620px) {
  .collection-products .collection-product > .inner .unwrapped-image img {
    padding-bottom: 40%;
  }
}

/* Product Page */
.product .item > .right .radio-wrapper > label,
.product .item > .right .selector-wrapper > label {
    display: none !important;
}

.product .item > .right .radio-wrapper fieldset label, 
.product .item > .right .selector-wrapper fieldset label {
    color: var(--primary-clr) !important;
}

.product .item > .right .radio-wrapper fieldset input[type=radio]:checked + label, 
.product .item > .right .selector-wrapper fieldset input[type=radio]:checked + label {
    color: #ffffff!important;
    border: 2px solid var(--primary-clr);
    background-color: var(--primary-clr);
}

.main .layout .shopify-section .content.product {
    max-width: none !important;
    padding-top: 30px !important;
}

.product .item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.product .item .left {
    max-width: 55rem;
    margin-left: auto;
}

.product .item .right .row.type_title {
    margin-bottom: 5px !important;
}

.shopify-product-form {
    margin: 3rem;
    max-width: 45rem;
}

#shopify-product-reviews {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#shopify-product-reviews h2 {
    padding-bottom: .5em !important;
    border-bottom: 2px solid var(--primary-clr) !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--dark-clr) !important;
    opacity: .5;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    display: none !important;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
    font-size: 2rem !important;
}

.swiper-pagination-bullet {
    opacity: 1 !important;
    background-color: #e4e4e4 !important;
}

.swiper-pagination-bullet-active {
    background: var(--primary-clr) !important;
    opacity: 1 !important;
}

.product-bug-wrapper {
    display: flex;
    padding: 1rem 0;
}

.product-bug {
    flex: 1 1 auto;
    max-width: 75px;
    padding: .5rem;
}

.product-bug img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 960px) {
    .product .item > .right {
        padding-left: 0 !important;
    }
    .shopify-product-form {
        margin: 1.5rem;
    }
    .product .item > .right h1 {
        font-size: 32px;
        line-height: 1.1 !important;
    }
    .product .item > .right h2 {
        font-size: 18px;
        line-height: 1.1 !important;
    }
}

@media screen and (max-width: 620px) {
    .product .item > .right h1 {
        font-size: 28px !important;
    }
    .product .item > .right h2 {
        font-size: 16px !important;
    }
}

/* Footer */
.footer .top {
    padding-bottom: 60px !important;
}

.footer .top .col form .flex {
    position: relative;
    display: flex !important;
    align-items: stretch !important;
    max-width: 45ch !important;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer .top .col form .flex input.text {
    display: flex !important;
    padding: 8px 10px 8px !important;
    flex: 1 1 60%;
}

.footer .top .col form .flex .btn {
    font-size: 12px !important;
    flex: 1 1 30%;
    margin-right: 0 !important;
}

.footer .top .col form .response {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-family: Roboto;
    font-weight: 900;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border: 2px solid var(--secondary-clr);
    color: var(--secondary-clr);
}

.footer .top .col.menu ul,
.footer .top .col .rte {
    columns: auto;
    column-width: 12rem;
}

.footer .top .col.menu ul li {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1;
    margin-bottom: 0.75em;
}

.footer .top .col .rte strong {
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: .1em;
    line-height: 1.5 !important;
    font-weight: 900 !important;
}

.footer .top .col .rte p {
    border-bottom: solid 1em transparent !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    -webkit-column-break-inside: avoid;
}

.footer .top .col.menu ul li a {
    font-size: 12px !important;
}

.footer .top .col.menu ul li a:hover {
    text-decoration: none !important;
    opacity: .8;
}

.footer .top .fine-print {
    font-size: 0.55rem;
    font-style: italic;
    max-width: 89ch;
    color: #9f9f9f;
    margin-top: 1em;
}

.footer .top .col .rte p.connect a i.fc, 
.footer .top .col p.connect a i.fc, 
.footer .top .col li.connect a i.fc {
    font-size: 24px !important;
}

.footer .top .col .social-image {
    max-width: 135px !important;
    margin-bottom: 15px;
}

.footer .bottom {
    padding: 10px 30px !important;
}

.footer .bottom .text {
    text-transform: uppercase !important;
    letter-spacing: .1em;
    font-size: .675rem !important;
    font-weight: 900 !important;
}

.footer .bottom .text span {
    margin-left: 0.25em;
    margin-right: 0.25em;
}

@media screen and (max-width: 620px) {
    .footer .top {
        padding: 30px !important;
    }
    .footer .top .col.menu ul,
    .footer .top .col .rte {
        column-width: 7rem;
    }
    .footer .top .col form .flex {
        max-width: none !important;
    }
    .footer .top .col form .flex input.text {
        flex-shrink: .5;
    }
    .footer .bottom {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 15px !important;
    }
    .footer .bottom .text {
        font-size: 8px !important;
        line-height: 1.2 !important;
        margin: 2px 0 !important;
    }
    .footer .bottom .left, 
    .footer .bottom .right {
        flex: 0 1 auto !important;
        width: auto !important;
        margin: 0 auto;
    }
    .footer .bottom .right {
        text-align: right !important;
    }
}