/** Shopify CDN: Minification failed

Line 3119:4 Unexpected "{"
Line 3119:5 Expected identifier but found "%"
Line 3124:4 Unexpected "{"
Line 3124:5 Expected identifier but found "%"

**/
/* Shave Sauce Early Access theme CSS — ported from approved reference build (globals.css) */
*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    line-height: inherit
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
[type='button'],
[type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    cursor: pointer
}

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

b,
strong {
    font-weight: bolder
}

sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -.5em
}

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

@font-face {
  font-family: 'Helvetica';
  src: url('/cdn/shop/files/Helvetica-Bold.woff2?v=1790835662') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Palatino';
  src: url('/cdn/shop/files/palatino.woff2?v=1790835662') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Handlee';
  src: url('/cdn/shop/files/Handlee-Regular.woff2?v=1790835662') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ITC American Typewriter Std';
  src: url('/cdn/shop/files/ITC_American_Typewriter_Std_Condensed.woff2?v=1790926404') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
    --ink: #12110f;
    --paper: #f8f5ef;
    --gold: #a97820;

    --font-family: "Helvetica", sans-serif;
    --second-family: "Palatino", sans-serif;
    --third-family: "Impact", sans-serif;
    --font3: "ITC American Typewriter Std", sans-serif;
    --font4: "Comic Sans MS", sans-serif;
    --font5: "Handlee", sans-serif;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif
}

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

.container {
    width:100%;
    margin: 0 auto;
    padding: 0 8vw
}



.site-header {
    height: 88px;
    display: flex;
    align-items: center;
    gap: 38px;
    padding: 0 5vw;
    background: rgba(255, 255, 255, .96);
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid #ece8e0
}

.site-header>a:first-child {
    margin-right: auto
}

.site-header img {
    width: 220px;
    height: auto;
    display: block
}

.site-header nav {
    display: flex;
    gap: 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.button {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    padding: 17px 25px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 900
}

.button.small {
    padding: 13px 18px
}

.button.inverse {
    background: #fff;
    color: var(--ink);
    margin-top: 35px
}

.text {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 24px;
}
.eyebrow {
    font-family: var(--font-family);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 28px;
    margin: 0 0 20px
}

@media (max-width: 768px) {
    .eyebrow {
        font-size: 18px;
        margin: 0 0 16px;
    }
    .text {
        font-size: 20px;
    }
}
p:not(:last-child) {
    margin-bottom: 1em;
}

.gold {
    color: var(--gold)
}

h1,
h2,
h3,
.footer-shout {
    font-family: Impact, "Arial Black", "Arial Narrow", Arial, sans-serif;
    font-weight: 400;
    line-height: .93;
    text-transform: uppercase
}

h1,
h2 {
    margin: 0;
    -webkit-text-stroke: .35px currentColor
}

h1 {
    font-size: clamp(78px, 10vw, 170px)
}

h2 {
    font-size: clamp(52px, 7vw, 120px)
}

.hero {
    min-height: calc(100vh - 88px);
    display: grid;
    grid-template-columns: 48% 52%;
    background: var(--paper)
}

.hero-copy {
    padding: 9vw 6vw 7vw 8vw;
    display: flex;
    align-items: flex-end;
    position: relative;
}
.hero-product-image {
    position: absolute;
    transform: rotate(0deg);
    max-width: 370px;
    height: unset;
    width: 100%;
    object-fit: contain;
    right: 0;
    transition:0.4s;
    z-index:2
}
.hero-product-image:hover {
transform: rotate(3deg);
}

.whisper {
    max-width: 520px;
        max-width: 70%;
    margin: 38px 0
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 30px
}

.hero .hero-tape-button { 
    background: url(electrical-tape-xl.png) center / 100% 100% no-repeat;
    width: 364px;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    padding: 0 10px;
    min-height: 125px;
    text-transform: capitalize;
    transform: rotate(-3deg);
    line-height: normal;
}

.hero-bottom-image {
        width: 100%;
        max-width: 340px;
    margin: 20px 0 0;
}

.text-link {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 900;
    border-bottom: 2px solid;
    padding-bottom: 6px
}

.hero-image {
    position: relative;
    min-height: 600px;
    overflow: hidden
}

.hero-image>img {
    object-fit: cover
}

@media(max-width: 1600px) {
    .hero-product-image {
        right: -10vw;
    }
}
@media (max-width: 1200px) {
    .hero-product-image {
       display: none
    }
}
.tape-note {
    position: absolute;
    right: 5%;
    bottom: 7%;
    background: #161513;
    color: #fff;
    padding: 15px 25px;
    font: 26px/1.05 "Comic Sans MS", cursive;
    transform: rotate(-3deg);
    box-shadow: 0 8px 20px #0003
}

.nod {
    padding: 150px 8vw
}

.center {
    text-align: center
}

.nod p:last-child {
    font: 22px/1.5 Georgia, serif;
    margin: 32px auto 0;
    max-width: 650px
}

.reveal {
    background: var(--ink);
    color: #fff;
    display: grid;
    grid-template-columns: 42% 58%;
    padding: 110px 8vw;
    align-items: center;
    gap: 7vw
}

.bottle-stage {
    text-align: center;
    position: relative
}

.bottle-stage img {
    height: 620px;
    width: auto;
    object-fit: contain
}

.scribble {
    position: absolute;
    top: 7%;
    right: -3%;
    font: 24px/1.2 "Comic Sans MS", cursive;
    transform: rotate(-6deg)
}

.reveal h2 {
    font-size: clamp(55px, 7vw, 120px);
    color: #f8f5ef;
}

.dark-copy {
    margin: 20px 0 30px;
    max-width: 650px;
    margin: 35px 0
}

.torn {
    background: #eee6d8;
    color: #161513;
    padding: 24px 30px;
    margin-top: 35px;
    max-width: 600px;
    transform: rotate(-1deg);
    font: 20px/1.5 Georgia, serif
}

.torn b {
    font: 900 27px/1 Arial, sans-serif
}

.signup {
    padding: 130px 8vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8vw;
    background: var(--paper)
}

.signup>div>p:not(.eyebrow) {
    font: 18px/1.6 Georgia, serif
}

.signup-form {
    display: flex;
    max-width: 600px;
    margin-top: 35px
}

.signup-form input {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 2px solid var(--ink);
    padding: 18px;
    font-weight: 800
}

.signup-form button {
    border: 0;
    background: var(--gold);
    color: #fff;
    padding: 18px 23px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900
}

.form-success {
    background: #fff;
    border-left: 7px solid var(--gold);
    padding: 22px;
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.materials {
    position: relative
}

.materials img {
    width: 100%;
    height: auto;
    display: block
}

.material-note {
    position: absolute;
    bottom: 3%;
    left: 5%;
    background: #111;
    color: #fff;
    padding: 14px 21px;
    font: 23px/1.05 "Comic Sans MS", cursive;
    transform: rotate(2deg)
}

.social {
    padding: 130px 8vw
}

.social .button {
    margin-top: 40px
}

footer {
    background: var(--ink);
    color: #fff;
    padding: 75px 7vw;
        display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 7vw;
}
.footer__logo {
        max-width: 280px;
}


.subpage {
    min-height: calc(100vh - 88px);
    padding: 9vw 8vw;
    background: var(--paper)
}

.subpage h1 {
    font-size: clamp(60px, 8vw, 130px)
}

.subintro {
    max-width: 720px;
    margin: 22px 0 40px;
}

.shop {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    gap: 6vw
}

.shop ul {
    padding-left: 28px;
        list-style: disc;
}

.fine {
    margin-top: 20px
}

.shop-bottle {
    text-align: center;
    position: relative
}

.shop-bottle img {
    height: 680px;
    width: auto;
    object-fit: contain
}

.bottle-note {
    position: absolute;
    right: 0;
    bottom: 10%;
    background: #111;
    color: #fff;
    padding: 15px 20px;
    font: 21px/1.1 "Comic Sans MS", cursive;
    transform: rotate(10deg)
}

.shipping {
    display: flex;
    align-items: center;
    gap: 20px;
    border-block: 1px solid #cfc8bb;
    padding: 22px 0;
    margin: 28px 0
}

.shipping strong {
    font-size: 56px;
    letter-spacing: -.06em
}

.shipping span {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: .08em
}

.wide-button {
    width: 100%;
    max-width: 520px
}

.instructions {
    background: #f8f5ef;    
    padding: 120px 8vw;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 8vw
}

.instructions ol {
    list-style: none;
    padding: 0;
    margin: 0
}

.instructions li {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ffffff33;
    padding: 22px 0
}

.instructions li:last-child {
    border-bottom: 1px solid #ffffff33
}

.instructions li span {
    font: 16px Georgia, serif;
    color: #c9c5bd
}

.face-mark {
    font: 27px "Comic Sans MS", cursive;
    color: #d2a04a;
    margin-top: 30px
}

.story {
    padding-top: 80px;
    padding-bottom: 60px;
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 8vw;
    align-items: center
}

p.story-line {
    max-width: 700px;
    border-top: 1px solid #989898;
    padding: 20px 0;
    margin: 0;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    color: #12110f;
}

.story-signoff {
    margin: 32px 0
}
.story-signoff-title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 38px;
    color: #000;
    margin-bottom:10px
}
.story-signoff-subtitle {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 28px;
    color: #a97820;
}
.story-button {
        font-family: var(--second-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 167%;
    color: #f8f5ef;
    text-transform: capitalize;
}

.story-visual img {
    width: 100%;
    height: auto;
    display: block
}

.photo-note {
    background: #111;
    color: #fff;
    margin: -20px 25px 0;
    padding: 17px;
    position: relative;
    text-align: center;
    transform: rotate(-1deg)
}
.photo-note-title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #f8f5ef;
}
.photo-note-position {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #a97820;
}

.get-it-on {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 8vw;
    align-items: center
}

.how-list p {
    border-top: 1px solid #cec7ba;
    padding: 17px 0;
    margin: 0;
    display: flex;
    justify-content: space-between
}

.how-list b {
    font-size: 18px
}

.how-list span {
    font: 16px Georgia, serif
}

@media(max-width:900px) {
    .story-signoff-title,
    .photo-note-title {
        font-size: 24px;
    }
    .story-signoff-subtitle {
        font-size: 22px;
    }
    .photo-note-position {
        font-size: 14px;
    }
    /* .site-header nav {
        display: none
    } */

    .site-header {
        height: 72px
    }

    .site-header img {
        width: 180px
    }

    .hero {
        grid-template-columns: 1fr
    }

    .hero-copy {
        padding: 90px 7vw
    }

    .hero-image {
        min-height: 72vw
    }

    .reveal,
    .signup,
    .shop,
    .story,
    .get-it-on,
    .instructions {
        grid-template-columns: 1fr
    }

    .bottle-stage img {
        height: 480px
    }

    .shop-bottle img {
        height: 520px
    }

    .subpage {
        padding: 100px 7vw;
        overflow: hidden;
    }

    .story-visual {
        order: -1
    }

    .instructions {
        gap: 55px
    }

    footer {
        grid-template-columns: 1fr
    }

    .footer-shout {
        text-align: left
    }
}

@media(max-width:520px) {
    .site-header .button {
        display: none
    }

    .hero-buttons {
        align-items: flex-start;
        flex-direction: column
    }

    .nod,
    .signup,
    .social {
        padding: 95px 6vw
    }

    .reveal,
    .instructions {
        padding: 90px 6vw
    }

    .bottle-stage img {
        height: 390px
    }

    .scribble {
        right: 0;
        font-size: 19px
    }

    .signup-form {
        flex-direction: column
    }

    .signup-form button {
        min-height: 55px
    }

    .shop-bottle img {
        height: 430px
    }

    .how-list p,
    .instructions li {
        flex-direction: column;
        gap: 8px
    }

    .story h1 {
        font-size: 64px
    }
}

/* Approved Coming Soon refinements */
.portrait-image>img {
    object-position: center 34%
}

.spaced-period {
    display: inline;
    margin-left: .075em
}

.shipping-tape:before,
.shipping-tape:after {
    content: "";
    position: absolute;
    top: 0;
    width: 28px;
    height: 100%;
    background: #c6a260;
    opacity: .94
}

.shipping-tape:before {
    left: -15px;
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 92%, 20% 76%, 0 58%, 20% 41%, 0 22%)
}

.shipping-tape:after {
    right: -15px;
    clip-path: polygon(0 0, 70% 6%, 100% 23%, 76% 42%, 100% 62%, 75% 82%, 100% 100%, 0 100%)
}

.shipping-tape b {
    font: 900 25px/1 Arial, sans-serif
}

.materials {
    max-height: 680px;
    overflow: hidden
}

.ohhh-image img {
    height: 680px;
    object-fit: cover;
    object-position: center 25%
}

.bottle-stage img,
.shop-bottle img {
    filter: drop-shadow(0 24px 24px #0005)
}

/* Full-photo compositions and real masking tape */
.portrait-image {
    display: grid;
    place-items: center;
    background: #e9e2d7
}

.portrait-image>img {
    position: relative !important;
    inset: auto !important;
    width: 50% !important;
    height: 50% !important;
    object-fit: contain !important;
    object-position: center !important;
    box-shadow: 0 18px 38px #392e221f
}

.ohhh-image {
    display: grid;
    place-items: center;
    max-height: none;
    overflow: visible;
    min-height: 610px
}

.ohhh-image img {
    width: 50%;
    height: auto;
    object-fit: contain;
    object-position: center;
    box-shadow: 0 18px 38px #392e221f
}

.shipping-tape {
    background: url('masking-tape.webp') center/100% 100% no-repeat;
    box-shadow: none;
    max-width: 610px;
    margin: -50px 0;
    padding: 90px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-1.5deg);
    color: #191713;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 38px; 
}

.shipping-button {
        font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    text-transform: capitalize;
}

.shipping-tape:before,
.shipping-tape:after {
    display: none
}

.shipping-tape>span {
    display: block;
    text-align: left;
    transform: rotate(.5deg)
}

.shipping-tape b {
    font-size: 23px
}
@media (max-width: 1300px) {
    .shipping-tape {
        
    font-size: 24px;
    }
}
@media(max-width:900px) {
    .portrait-image>img {
        width: 50% !important;
        height: 50% !important
    }

    .ohhh-image {
        min-height: 520px
    }

    .ohhh-image img {
        width: 50%
    }

    .shipping-tape {
        max-width: 540px
    }
}

@media(max-width:520px) {
    .portrait-image>img {
        width: 60% !important;
        height: 60% !important
    }

    .ohhh-image {
        min-height: 430px
    }

    .ohhh-image img {
        width: 60%
    }

    .shipping-tape b {
        font-size: 18px
    }

    .shipping-tape {
        font-size: 15px
    }
}

/* A restrained layer of the campaign's real-world materials */
.nod {
    position: relative;
    isolation: isolate;
    overflow: hidden
}

.nod:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('materials.webp') center/cover;
    opacity: .08;
    z-index: -1;
    filter: grayscale(.25)
}

.nod:after {
    content: "";
    position: absolute;
    inset: 0;
    border-block: 1px solid #b7aa9566;
    pointer-events: none
}

.social {
    background: #c7a36a14;
    border-top: 1px solid #b7aa9550
}

.material-note {
    left: auto;
    right: 2%;
    bottom: 7%;
    width: 300px;
    min-height: 100px;
    background: url('electrical-tape.webp') center/100% 100% no-repeat;
    padding: 26px 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 20px;
    line-height: 1.05;
    box-shadow: none;
    transform: rotate(-2deg)
}

@media(max-width:520px) {
    .material-note {
        right: 0;
        width: 250px;
        min-height: 84px;
        padding: 20px 32px;
        font-size: 17px
    }
}

/* The finished distressed portrait replaces the earlier Ohhh photo */
.asian-composite {
    background: var(--paper)
}

.asian-composite img {
    width: min(112.5%, 610px);
    height: auto;
    object-fit: contain;
    filter: contrast(1.03) saturate(.94);
    mix-blend-mode: multiply;
    box-shadow: none
}

@media(max-width:520px) {
    .asian-composite img {
        width: 100%
    }
}

/* Electrical-tape CTA test */
.tape-button {
    width: 245px;
    min-height: 82px;
    padding: 0 36px;
    background: url('electrical-tape.webp') center/100% 100% no-repeat;
    color: #fff;
    box-shadow: none;
    transform: rotate(3deg);
    font-size: 13px;
    text-shadow: 0 1px 1px #000;
    transition: 0.4s
}

.tape-button:hover {
    transform: rotate(-3deg) scale(1.025)
}

/* A real photograph laid into the brand's material world */
.portrait-image {
    isolation: isolate;
    padding: 5vw 4vw;
    background: #ded5c6
}

.photo-mat {
    position: relative;
    width: min(78%, 610px);
    padding: 7%;
    background: transparent url('/cdn/shop/files/distressed-kraft-tears-patches.png?v=1788856624') center/100% 100% no-repeat;
    transform: rotate(2.2deg);
    filter: drop-shadow(0 22px 22px #392e2230);
    transition: 0.4s
}
.photo-mat:hover {
        transform: rotate(10deg);
}
.photo-card {
    position: relative;
    z-index: 1;
    transform: rotate(-5deg);
    background: #eee8df;
        border-radius: 10px;
    padding: 18px;
    box-shadow: 0 16px 22px #30241955, 8px 12px 15px #2f24172e;
    overflow: hidden
}

.photo-card img {
    display: block;
    width: 100%;
    height: auto;
    filter: contrast(1.04) saturate(.92) sepia(.04)
}

.portrait-image-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 30%);
    gap: 1vw;
    align-items: flex-start
}

.photo-mat {
    width: min(100%, 610px)
}

.handwritten-note {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 3;
    width: 100%;
    justify-self: end;
    transform: rotate(3deg);
    transform-origin: center;
    filter: drop-shadow(0 2px 1px #fff9);
        margin: 6vw 0 0 0;
}

.handwritten-note img {
    display: block;
    width: 100%;
    height: auto
}

@media(max-width:900px) {
    .portrait-image {
        padding: 11vw 8vw;
        grid-template-columns: 1fr
    }

    .portrait-image-wrap {
        display: flex;
        flex-direction: column-reverse;
    }
    .photo-mat {
        width: min(82%, 560px)
            margin: 0 auto;
    }

    .handwritten-note {
        width: min(50%, 300px);
        align-self: self-end;
        margin-bottom: -11%;
    }
    .whisper {
        max-width: 100%;
    }
}

@media(max-width:520px) {
    .portrait-image {
        padding: 15vw 6vw
    }

    .hero .hero-tape-button {
        max-width: 360px;
        width: 100%;
    }
    
}

/* Four places to stalk us, presented as one quiet system */
.social-grid {
    max-width: 900px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block: 1px solid #000
}

.social-grid a {
    padding: 44px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 33px;
    border-right: 1px solid #000;
    text-align: left;
    transition: background .2s ease, transform .2s ease
}

.social-grid a:last-child {
    border-right: 0
}

.social-grid a:hover {
    background: #fff;
    transform: translateY(-2px)
}

.social-grid a>span:last-child {
    display: grid;
    gap: 6px;
    font: 15px/1.2 Arial, sans-serif
}

.social-grid b {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 10px
}

.social-mark {
    position: relative;
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #fff;
    background: #12110f;
    padding: 6px;
}


@media(max-width:900px) {
    .social-grid {
        grid-template-columns: 1fr
    }

     .social-grid a {
        border-right: 0;
        border-bottom: 1px solid #000
    }

    .social-grid a:last-child {
        border-bottom: 0
    }
}

@media(max-width:480px) {
   

   
}

/* Give the bottle room to be beautiful */

.reveal .bottle-stage {
    min-height: 780px;
    display: grid;
    place-items: center;
    transition: 0.4s
}
.reveal .bottle-stage img {
    transition: 0.4s
}

.reveal .bottle-stage img:hover {
    transform: rotate(0deg)
}
.reveal .scribble {
        width: fit-content;
    z-index: 2;
    top: 7%;
    left: 2vw;
    font-size: 34px;
    transform: rotate(-20deg);
}

/* Five quick moves, not a sad instruction chart */
.instructions {
    grid-template-columns: .72fr 1.28fr;
    align-items: center;
    gap: 6vw
}

.steps-panel {
    max-width: 1000px;
    width: 100%;
    justify-self: end
}

.steps-panel-kraft {
    position: relative;
    counter-reset: shave-step;
    background: transparent url('kraft2.png') center/100% 100% no-repeat;
    color: #171512;
        padding: 68px 109px 98px 6vw;
    filter: drop-shadow(14px 20px 18px #0007);
    transform: rotate(-.55deg)
}

/* .steps-panel ol:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -30px;
    width: 210px;
    height: 70px;
    background: url('masking-tape.webp') center/100% 100% no-repeat;
    transform: translateX(-50%) rotate(-2deg);
    opacity: .93
} */

.steps-panel li {
    counter-increment: shave-step;
    display: grid;
    grid-template-columns: 42px 220px 1fr;
    align-items: center;
    gap: 18px;
    padding: 6px 0 !important;
    border-top: 1px solid #12110f !important;
    margin: 0;
    min-height: 70px;
}

.steps-panel li:first-child {
    border-top: 0 !important
}

.steps-panel li:last-child {
    border-bottom: 0 !important
}

.steps-panel li:before {
    content: counter(shave-step);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #171512;
    border-radius: 50%;
    color: #171512;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
}

.steps-panel li b {
        padding-left: 20px;
}

.steps-panel li span {

    font-family: var(--second-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 167%;
    color: #12110f;
    text-transform: none;
}

.steps-panel .face-mark {
    font-weight: 700;
    font-size: 28px;
    line-height: 107%;
    text-align: center;
    color: #a97820;
    margin: 34px auto 0;
    text-align: center;
}

.steps-panel .face-mark strong {
    display: inline-block;
    font: inherit;
    font-size: 1.12em
}

.steps-panel .face-mark span {
    display: inline-block;
    color: inherit;
    margin-top: 5px
}

.steps-panel .face-mark sup {
    font: 700 .48em Arial, sans-serif;
    vertical-align: super;
    margin-left: 2px
}
@media(max-width: 1230px)  {
    .instructions {
        grid-template-columns: 1fr;
        align-items: center;
        gap: 60px;
    }
}
@media(max-width:900px) {
    .reveal .bottle-stage {
        min-height: 610px
    }

    .reveal .bottle-stage img {
        height: 590px
    }

    .instructions {
        grid-template-columns: 1fr
    }

    .steps-panel {
        justify-self: stretch
    }
}
@media(max-width:768px) {
    .steps-panel li {
        grid-template-columns: 34px 1fr !important;
        gap: 5px 12px !important
    }

    .steps-panel li span {
                grid-column: 1 / 3
    }
    .steps-panel li:before {
        width: 34px;
        height: 34px;
    }
    .steps-panel li b {
        padding-left: 0;
    }
    .steps-panel-kraft {
        background-image: url(distressed-kraft-tears-patches.webp);
          padding: 68px 109px 98px 11vw
    }
}


@media(max-width:520px) {
    .reveal .bottle-stage {
        min-height: 485px
    }

    .reveal .bottle-stage img {
        height: 470px
    }
    .steps-panel {
        width: calc(100% + 10vw);
        margin-left: -5vw;
    }
    .steps-panel-kraft {
            padding: 64px 32px 55px 12vw;
    }
   

    .steps-panel ol:before {
        width: 160px;
        height: 54px;
        top: -23px
    }

    

    .steps-panel .face-mark {
        text-align: center
    }
}

.steps-panel .step-copy {
    display: grid;
    gap: 7px;
    line-height: 1.35
}

.steps-panel .step-copy>span {
    display: block;
    grid-column: auto
}

/* Product means product: the bottle owns these compositions */
.reveal {
    grid-template-columns: 50% 50%;
    gap: 2vw;
    overflow: visible;
    padding-block: 70px
}

.reveal .bottle-stage {
    min-height: 970px
}

.reveal .bottle-stage img {
    height: 950px;
    max-width: none;
    transform: rotate(11deg) translateX(-3%);
    filter: drop-shadow(-16px 34px 34px #0009)
}

.shop {
    grid-template-columns: .9fr 1.1fr;
    gap: 2vw;
    overflow: visible;
    padding-top: 5vw;
    padding-bottom: 5vw
}

.shop-bottle {
    min-height: 900px;
    display: grid;
    place-items: center
}

.shop-bottle img {
    height: 920px;
    max-width: none;
    transform: rotate(4deg) translateX(-4%);
    filter: drop-shadow(-12px 30px 28px #392e2255)
}

.shop-bottle .bottle-note {
   right: 1vw;
    bottom: 21%;
    z-index: 2
}

@media(max-width:1050px) {
    .reveal .bottle-stage {
        min-height: 820px
    }

    .reveal .bottle-stage img {
        height: 800px
    }

    .shop-bottle {
        min-height: 790px
    }

    .shop-bottle img {
        height: 790px
    }
}

@media(max-width:900px) {
    .reveal {
        grid-template-columns: 1fr;
        padding-block: 70px
    }

    .reveal .bottle-stage {
        min-height: 760px
    }

    .reveal .bottle-stage img {
        height: 740px
    }

    .reveal .scribble {
        top: 7%
    }

    .shop {
        grid-template-columns: 1fr
    }

    .shop-bottle {
        min-height: 760px;
        order: -1
    }

    .shop-bottle img {
        height: 750px
    }

    .shop-bottle .bottle-note {
        right: 2%;
        bottom: 12%
    }
}

@media(max-width:520px) {
    .reveal .bottle-stage {
        min-height: 590px
    }

    .reveal .bottle-stage img {
        height: 575px
    }

    .reveal .scribble {
        top: 4%;
                font-size: 24px;
    }

    .shop-bottle {
        min-height: 600px
    }

    .shop-bottle img {
        height: 590px
    }

    .shop-bottle .bottle-note {
        right: 1%;
        bottom: 5%
    }
}

.social-invite {
    margin: 10px auto 0;
    display: grid;
}

.social-eyebrow {
    margin-bottom: 10px;
}
.social-title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    display: block;
}
.social-link-text {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 167%;
    color: #989898;
}

/* The official instructions: centered, useful, and still unmistakably Shave Sauce */
.official-instructions {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    text-align: center;
    background: var(--paper);
    padding-block: 110px 130px
}

.official-instructions:before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -8vw;
    top: 13%;
    width: 27vw;
    height: 68%;
    background: url('materials.webp') 72% center/cover no-repeat;
    transform: rotate(-6deg);
    opacity: .09;
    mix-blend-mode: multiply
}

.official-instructions:after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -7vw;
    bottom: 5%;
    width: 31vw;
    height: 42%;
    background: url('materials.webp') center/cover no-repeat;
    transform: rotate(5deg);
    opacity: .12;
    mix-blend-mode: multiply
}

.instructions-content {
    position: relative;
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 96px 92px 88px;
    background: transparent url('/cdn/shop/files/distressed-kraft-tears-patches.png?v=1788856624') center/100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 24px 25px #3e2f2135);
    transform: rotate(-.25deg)
}

.instructions-content:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -39px;
    width: 250px;
    height: 82px;
    background: url('masking-tape.webp') center/100% 100% no-repeat;
    transform: translateX(-50%) rotate(-2deg);
    opacity: .9
}

.instructions-content:after {
    content: "OFFICIAL FACE BUSINESS";
    position: absolute;
    right: -70px;
    bottom: 40px;
    width: 245px;
    min-height: 78px;
    padding: 26px 34px;
    display: grid;
    place-items: center;
    background: url('electrical-tape.webp') center/100% 100% no-repeat;
    color: #fff;
    font: 900 11px/1.2 Arial, sans-serif;
    letter-spacing: .13em;
    transform: rotate(-5deg)
}

.official-instructions .eyebrow {
    margin-bottom: 22px;
    color: #171411
}

.official-instructions .subintro {
    margin: 30px auto 44px
}

.official-instructions .how-list {
    position: relative;
    text-align: left;
    padding: 16px 38px 12px;
    background: transparent;
    transform: rotate(-.35deg)
}

.official-instructions .how-list:before,
.official-instructions .how-list:after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 4px;
    border: 2px solid #6d665d;
    border-radius: 50%;
    box-shadow: 0 2px 2px #0003;
    background: transparent;
    transform: rotate(-8deg)
}

.official-instructions .how-list:before {
    left: 10px;
    top: 7px
}

.official-instructions .how-list:after {
    right: 10px;
    top: 7px;
    transform: rotate(8deg)
}

.official-instructions .how-list p {
    padding: 20px 4px;
    gap: 30px;
    border-top-color: #9b8f7b80
}

.official-instructions .how-list p:first-of-type {
    border-top: 0
}

.official-instructions .face-mark {
    margin: 45px auto 0;
    line-height: 1.25;
    transform: rotate(-1deg)
}

.official-instructions .face-mark strong {
    font: inherit;
    font-size: 1.15em
}

.handwritten-congrats {
    width: min(100%, 650px);
    margin: 40px auto -4px;
    transform: rotate(-1.2deg)
}

.handwritten-congrats img {
    display: block;
    width: 100%;
    height: auto
}

/* Jim and Jen as a real photograph, not a floating website image */
.story-photo-object {
    position: relative;
    padding: 7% 5% 10%;
    isolation: isolate
}

.story-photo-object:before {
    content: "";
    position: absolute;
    inset: -5% -9% -7%;
    z-index: -2;
    background: url('materials.webp') center/cover no-repeat;
    opacity: .08;
    transform: rotate(3deg);
    mix-blend-mode: multiply
}

.story-kraft-mat {
    position: relative;
    padding: 11%;
    background: url('/cdn/shop/files/distressed-kraft-tears-patches.png?v=1788856624') center/100% 100% no-repeat;
    transform: rotate(2.4deg);
    filter: drop-shadow(0 24px 25px #3e2f2135)
}

.story-kraft-mat:before {
    content: "";
    position: absolute;
    z-index: 4;
    left: 50%;
    top: -22px;
    width: 210px;
    height: 72px;
    background: url('masking-tape.webp') center/100% 100% no-repeat;
    transform: translateX(-50%) rotate(-3deg);
    opacity: .92
}

.story-photo-card {
    position: relative;
    padding: 11px 11px 26px;
    background: #f5f0e8;
    transform: rotate(-4.2deg);
    box-shadow: 0 17px 28px #2b21175c;
    border-radius: 2px 2px 20px 3px/2px 2px 28px 4px;
    overflow: hidden
}

.story-photo-card:after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -5px;
    width: 24%;
    height: 11%;
    border-radius: 50%;
    box-shadow: 11px 13px 12px #291f1750;
    transform: rotate(-4deg)
}

.story-photo-card img {
    filter: contrast(1.035) saturate(.94) sepia(.035)
}

.story-staple {
    position: absolute;
    right: 8%;
    bottom: 8%;
    z-index: 5;
    width: 24px;
    height: 5px;
    border: 2px solid #625d55;
    border-radius: 50%;
    box-shadow: 0 2px 2px #0003;
    transform: rotate(15deg)
}

.story-photo-object .photo-note {
    z-index: 6;
    width: min(88%, 360px);
    margin: -14px auto 0;
    padding: 18px 24px;
    background: #111;
    color: #fff;
    font: 900 13px/1.35 Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    box-shadow: 0 8px 16px #2f251d30
}

@media(max-width:900px) {
    .story-photo-object {
        width: min(100%, 650px);
        margin: 0 auto 30px
    }

    .story-photo-object:before {
        inset: -3% -5% -5%
    }
}

@media(max-width:520px) {
    .story-photo-object {
        padding: 8% 2% 13%
    }

    .story-kraft-mat {
        padding: 10%
    }

    .story-kraft-mat:before {
        width: 155px;
        height: 54px;
        top: -16px
    }

    .story-photo-card {
        padding: 8px 8px 19px
    }

    .story-photo-object .photo-note {
        font-size: 11px
    }
}

/* A temporary pinned notice: the material itself says this offer may disappear. */
.early-access-bar {
    position: relative;
    z-index: 12;
    padding: 18px 5vw 24px;
    background: var(--paper);
    color: #111;
    border-bottom: 1px solid #b9aa9145
}

.early-access-inner {
    position: relative;
    width: min(100%, 1180px);
    min-height: 150px;
    margin: 0 auto;
    padding: 28px 62px 27px;
    display: grid;
    grid-template-columns: 205px minmax(240px, 1fr) 225px 225px;
    align-items: center;
    gap: 25px;
    background: var(--paper) url('early-access-lined-paper-v3.webp') center/100% 100% no-repeat;
    filter: drop-shadow(0 13px 12px #392e2230);
    transform: rotate(-.45deg)
}

.early-access-message {
    display: contents;
    white-space: nowrap
}

.early-access-message strong {
    font: 900 clamp(24px, 2.4vw, 38px)/.9 Impact, "Arial Black", Arial, sans-serif;
    letter-spacing: -.02em;
    text-transform: uppercase
}

.early-access-family {
    width: 205px;
    min-height: 58px;
    padding: 15px 24px;
    display: grid;
    place-items: center;
    background: url('electrical-tape.webp') center/100% 100% no-repeat;
    color: #fff;
    font: 900 10px/1.1 Arial, sans-serif;
    letter-spacing: .14em;
    text-align: center;
    transform: rotate(-2deg)
}

.early-access-limit {
    position: relative;
    display: block;
    width: 225px;
    justify-self: center;
    transform: rotate(-2deg)
}

.early-access-limit img {
    display: block;
    width: 100%;
    height: auto
}

.early-access-action {
    width: 225px;
    min-height: 70px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('electrical-tape.webp') center/100% 100% no-repeat;
    color: #fff;
    font: 900 11px/1.15 Arial, sans-serif;
    letter-spacing: .12em;
    white-space: nowrap;
    transform: rotate(1.2deg);
    transition: transform .2s ease
}

.early-access-action:hover {
    transform: rotate(1.2deg) scale(1.03)
}

@media(max-width:1100px) {
    .early-access-inner {
        padding-inline: 45px;
        grid-template-columns: 175px minmax(205px, 1fr) 180px 205px;
        gap: 16px
    }

    .early-access-family {
        width: 175px
    }

    .early-access-limit {
        width: 180px
    }

    .early-access-action {
        width: 205px
    }
}

@media(max-width:800px) {
    .early-access-bar {
        padding: 15px 3vw 22px
    }

    .early-access-inner {
        min-height: 300px;
        padding: 43px 10vw 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 9px;
        background-size: 100% 100%;
        transform: rotate(-.2deg)
    }

    .early-access-message {
        display: flex;
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 9px 15px
    }

    .early-access-family {
        width: 180px;
        min-height: 50px;
        margin: -20px 0 3px
    }

    .early-access-limit {
        width: min(70%, 245px)
    }

    .early-access-action {
        width: 220px;
        margin-bottom: -18px
    }
}

@media(max-width:900px) {
    .official-instructions:before {
        width: 46vw;
        left: -15vw
    }

    .official-instructions:after {
        width: 48vw
    }

    .instructions-content {
        padding: 82px 10vw 72px
    }

    .instructions-content:after {
        right: -25px;
        bottom: 24px;
        transform: rotate(-3deg) scale(.85)
    }
}

@media(max-width:520px) {
    .official-instructions {
        padding: 90px 5vw
    }

    .official-instructions:before {
        width: 70vw;
        left: -38vw;
        opacity: .45
    }

    .official-instructions:after {
        width: 70vw;
        right: -34vw
    }

    .instructions-content {
        padding: 62px 22px 52px
    }

    .instructions-content:before {
        width: 190px;
        height: 64px;
        top: -31px
    }

    .official-instructions .how-list {
        padding: 10px 17px
    }

    .official-instructions .how-list p {
        gap: 7px
    }

    .official-instructions .how-list:before {
        left: 0
    }

    .official-instructions .how-list:after {
        right: 0
    }

    .instructions-content:after {
        position: relative;
        right: auto;
        bottom: auto;
        width: 210px;
        min-height: 68px;
        margin: 38px auto -25px;
        transform: rotate(-3deg)
    }
}

/* Give the footer's final two thoughts room to land. */

.footer__tagline {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 18px;
    margin-top: 12px;
        white-space: nowrap;
}
.footer__links {
        font-family: var(--font-family);
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: #f8f5ef;
    display: flex;
    gap: 16px 40px;
    flex-wrap: wrap;
}
.footer__shout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.footer__image {
    max-width: 80px;
}
.footer__text {
        white-space: nowrap;
    font-family: var(--font3);
    font-weight: 400;
    font-size: 30px;
    color: #a57711;
}
@media(max-width: 1100px) {
    footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 60px;
    }
    .footer__links {
            justify-content: center;
    }
}

/* --- Shopify additions (cart, account, generic pages, form errors) --- */
.shave-generic {
    display: block !important;
    grid-template-columns: none
}

.shave-generic .generic-inner {
    max-width: 900px;
    margin: 0 auto
}

.shave-generic h1 {
    font-size: clamp(56px, 7vw, 110px);
    margin-bottom: 28px
}

.shave-generic.center {
    text-align: center
}

.form-errors {
    margin: 18px 0;
    padding: 14px 18px;
    background: #fff;
    border-left: 4px solid #a00;
    font-size: 14px
}

.form-errors ul {
    list-style: disc;
    padding-left: 18px
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 15px
}

.cart-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 0 12px 12px 0;
    border-bottom: 2px solid var(--ink)
}

.cart-table td {
    padding: 16px 12px 16px 0;
    border-bottom: 1px solid #ece8e0
}

.cart-qty {
    width: 64px;
    padding: 8px;
    border: 1px solid var(--ink);
    font-weight: 700
}

.cart-subtotal {
    font-size: 19px;
    margin: 8px 0
}

.cart-actions {
    display: flex;
    gap: 14px;
    margin: 26px 0
}

.account-form {
    display: grid;
    gap: 12px;
    max-width: 420px;
    margin: 26px 0
}

.account-form input {
    padding: 15px 16px;
    border: 1px solid var(--ink);
    font-weight: 700;
    letter-spacing: .06em
}

.account-sub {
    font-size: 28px;
    margin: 30px 0 12px
}

.search-results {
    margin: 24px 0;
    display: grid;
    gap: 10px
}

.search-results a {
    text-decoration: underline
}

.product-list {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin: 34px 0
}

.product-list a {
    display: grid;
    gap: 8px;
    font-weight: 700
}

.gift-code {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .12em;
    margin: 18px 0;
    padding: 16px;
    border: 2px dashed var(--ink);
    display: inline-block
}

.rte {
    line-height: 1.7;
    font-size: 16px;
    max-width: 70ch
}

.rte p {
    margin: 0 0 18px
}

.rte a {
    text-decoration: underline
}


.ingredients-story {
    isolation: isolate;
    background: #eee7dc;
    border-top: 1px solid #b7aa9566;
    padding: 120px 8vw 135px;
    position: relative;
    overflow: hidden
}

.ingredients-story:before {
    content: "";
    z-index: -2;
    opacity: .045;
    mix-blend-mode: multiply;
    background: url('/cdn/shop/files/materials.png?v=1788856625') 50%/cover no-repeat;
    position: absolute;
    inset: 0
}

.ingredients-story:after {
    content: "";
    z-index: -1;
    opacity: .04;
    background: #171512;
    width: 30vw;
    height: 25vw;
    position: absolute;
    bottom: -9vw;
    left: -7vw;
    transform: rotate(8deg)
}

.ingredients-intro {
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 6vw;
    display: grid
}

.ingredients-copy {
    z-index: 2;
    position: relative
}

.ingredients-story h2 {
    font-size: clamp(58px,7.4vw,118px)
}

.ingredients-lead {
    max-width: 620px;
    margin: 31px 0 13px;
    font-size: 38px;
    color: #a57711;
}

.ingredients-body {
    max-width: 610px;
    margin: 0;
}

.ingredients-photo-object {
    padding: 5% 3% 9%;
    position: relative;
    transition: 0.4s
}

.ingredients-photo-object:hover {
        transform: rotate(5deg);
}
.ingredients-kraft {
    background-image: url(/cdn/shop/files/kraft.png?v=1790845433);
    padding: 10% 10%;
    position: relative;
    background-size: cover;
    background-position: center;
}

.ingredients-kraft:before {
    content: "";
    z-index: 4;
    background: url(masking-tape-crop.png) 50% / 100% 100% no-repeat;
    width: 48%;
    height: 13%;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
}

.ingredients-photo {
    z-index: 2;
    position: relative;
    overflow: hidden;
}

.ingredients-photo img {
    width: 100%;
    height: auto;
    display: block
}

.ingredients-staple {
    z-index: 5;
    border: 2px solid #625d55;
    border-radius: 50%;
    width: 24px;
    height: 5px;
    position: absolute;
    box-shadow: 0 2px 2px #0003;
    display: none
}

.ingredients-staple-one {
    bottom: 13%;
    left: 9%;
    transform: rotate(-17deg)
}

.ingredients-staple-two {
    top: 15%;
    right: 9%;
    transform: rotate(18deg)
}

.ingredients-note {
    z-index: 6;
    color: #fff;
    text-align: center;
    letter-spacing: .12em;
    background: url(/brand/electrical-tape.png) 50%/100% 100% no-repeat;
    place-items: center;
    width: min(78%,390px);
    min-height: 82px;
    margin: -25px 0 0 auto;
    padding: 22px 40px;
    font: 900 12px/1.35 Arial,sans-serif;
    display: grid;
    position: relative;
    transform: rotate(2.2deg)
}

.ingredient-team-board {
    filter: drop-shadow(0 23px 25px #3e2f213d);
    background: url(/cdn/shop/files/distressed-kraft-tears-patches.png?v=1788856624) 50%/100% 100% no-repeat;
    width: min(100%,1240px);
    margin: 72px auto 0;
    padding: 78px 7% 66px;
    position: relative;
    transform: rotate(-.35deg)
}

.ingredient-board-tape {
    opacity: .94;
    background: url(/brand/masking-tape.png) 50%/100% 100% no-repeat;
    width: 230px;
    height: 76px;
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translate(-50%)rotate(2deg)
}

.ingredient-team-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 42px 5vw;
    display: grid
}

.ingredient-job {
    border-top: 2px solid #28231d80;
    padding-top: 20px
}

.ingredient-job-label {
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 12px;
    font: 900 17px/1 Arial,sans-serif
}

.ingredient-job-purpose {
    color: #40372c;
    min-height: 65px;
    margin: 0 0 18px;
    font: italic 16px/1.45 Georgia,serif
}

.ingredient-job ul {
    letter-spacing: .015em;
    gap: 6px;
    margin: 0;
    padding: 0;
    font: 700 14px/1.35 Arial,sans-serif;
    list-style: none;
    display: grid
}

.ingredient-job li:before {
    content: "—";
    color: #9c671a;
    margin-right: 8px
}

.ingredient-team-note {
    color: #fff;
    text-align: center;
    letter-spacing: .13em;
    background: url(/brand/electrical-tape.png) 50%/100% 100% no-repeat;
    place-items: center;
    width: min(92%,720px);
    min-height: 92px;
    margin: 38px auto 0;
    padding: 24px 55px;
    font: 900 12px/1.4 Arial,sans-serif;
    display: grid;
    transform: rotate(1deg)
}

.ingredients-bottom-texts  {
    max-width: 1440px;
    margin: 40px auto 0;
    text-align: center;
}
.ingredients-bottom-texts .eyebrow {
    color: #a57711;
    margin-bottom: 30px
}
.ingredients-bottom-texts .text {
   font-size: 20px
}

@media (width<=900px) {
    .ingredients-story {
        padding: 100px 7vw 115px
    }

    .ingredients-intro {
        grid-template-columns: 1fr;
        gap: 60px
    }

    .ingredients-copy {
        max-width: 760px
    }

    .ingredients-photo-object {
        width: min(100%,780px);
        margin: 0 auto
    }

    .ingredient-team-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .ingredient-job-purpose {
        min-height: 0
    }
    .ingredients-bottom-texts .text {
        font-size: 16px;
    }
}

@media (width<=620px) {
    .ingredient-team-board {
        background-size: 100% 100%;
        padding: 64px 12% 60px
    }

    .ingredient-team-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .ingredient-job-purpose {
        margin-bottom: 14px
    }

    .ingredient-team-note {
        width: 100%;
        padding-inline:34px;font-size: 10px
    }
}

@media (width<=520px) {
    .ingredients-story {
        padding: 85px 6vw 95px
    }

    .ingredients-intro {
        gap: 42px
    }

    .ingredients-story h2 {
        font-size: clamp(52px,17vw,78px)
    }

    .ingredients-lead {
        font-size: 22px
    }

    .ingredients-body {
        font-size: 17px
    }

    

    .ingredients-note {
        width: 82%;
        min-height: 70px;
        padding: 18px 28px;
        font-size: 10px
    }

    .ingredient-team-board {
        margin-top: 54px;
        padding-inline:14%}

    .ingredient-board-tape {
        width: 160px;
        height: 55px;
        top: -18px
    }

    .ingredient-job-label,.ingredient-job-purpose {
        font-size: 15px
    }

    .ingredient-job ul {
        font-size: 13px
    }
}

.ingredient-roll {
    border: 1px solid #12110f;
    grid-template-columns: repeat(3,1fr);
    gap: 0;
    width: min(100%,1440px);
    margin: 66px auto 0;
    display: grid
}

.ingredient-group {
    padding: 40px  3vw;
}



.ingredient-group+.ingredient-group {
    border-left: 1px solid #12110f
}

.ingredient-group-title {
    color: #9c671a;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.ingredient-group ol {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 22px;
    
}

/* .ingredient-group li::marker {
    color: #9c671a;
    font-size: 12px;
    font-weight: 900
} */

.ingredient-group ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ingredient-group ol li {
  position: relative;
  padding-left: 44px; 
}

.ingredient-group ol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em; 
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M23 12L20.56 9.22004L20.9 5.54004L17.29 4.72004L15.4 1.54004L12 3.00004L8.6 1.54004L6.71 4.72004L3.1 5.53004L3.44 9.21004L1 12L3.44 14.78L3.1 18.47L6.71 19.29L8.6 22.47L12 21L15.4 22.46L17.29 19.28L20.9 18.46L20.56 14.78L23 12ZM10 17L6 13L7.41 11.59L10 14.17L16.59 7.58004L18 9.00004L10 17Z' fill='%23A57711'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media(max-width: 1300px) {
    .ingredient-group-title {
        font-size: 22px;
    }
    .ingredient-group ol li {
        font-size: 18px;
    }
}
@media (width<=900px) {
    .ingredient-roll {
        grid-template-columns: 1fr;
        gap: 34px
    }

   

    .ingredient-group+.ingredient-group {
        border-top: 1px solid #12110f;
        border-left: 0;
    }
}

@media (width<=520px) {
    .ingredient-roll {
        margin-top: 48px
    }

}

.shopify-section-group-header-group {
        position: sticky;
    top: 0;
    z-index: 20;
}

@media(max-width: 767px) {
    .wide-button {
        max-width: 100%
    }
}

@media (max-width: 520px) {
    .shop-bottle img,
    .reveal .bottle-stage img {
        max-width: 140%;
    }
    .shop-bottle,
    .bottle-stage {
        overflow: hidden
    }
    .shipping-tape {
        max-width: 100%;
    }
  
}

.offer-tape-button {
    flex-direction: column;
    gap: 6px;
    line-height: 1
}

.shipping-tape>span {
    text-align: center
}

.offer-shipping {
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 24px;
    display: grid
}

.offer-shipping>div {
    align-items: center;
    gap: 10px;
    display: flex
}

.offer-shipping>div+div {
    border-left: 1px solid #cfc8bb;
    padding-left: 24px
}

.offer-shipping strong {
    font-size: 52px
}

.offer-shipping span,.offer-shipping p {
    letter-spacing: .08em;
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4
}

.sample-choices {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    display: grid
}

.sample-choices button {
    text-align: left;
    grid-template-columns: 1fr auto;
    gap: 12px;
    min-height: 78px;
    width:100%;
    display: grid
}

.sample-choices button span {
    font-size: 11px
}

.sample-choices button strong {
    letter-spacing: -.03em;
    font-size: 25px
}

.sample-choice-success {
    background: var(--gold);
    color: #fff;
    gap: 4px;
    width: 100%;
    max-width: 520px;
    padding: 20px 24px;
    display: grid
}

.sample-choice-success strong {
    letter-spacing: .1em;
    font: 900 18px/1 Arial,sans-serif
}

.sample-choice-success span {
    font: 900 14px/1.2 Arial,sans-serif
}

.sample-choice-success small {
    font: 13px/1.3 Georgia,serif
}

@media (width<=600px) {
    .offer-shipping {
        grid-template-columns: 1fr 1fr
    }

    .offer-shipping>p {
        grid-column: 1/-1
    }

    .sample-choices {
        grid-template-columns: 1fr
    }

    .sample-choices button {
        min-height: 68px
    }
}


@media (max-width: 980px) {
    .early-access-inner {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 900px) {
    .reveal .bottle-stage {
        overflow: hidden
    }
}
@media (max-width: 520px) {
    .shipping-tape {
        aspect-ratio: unset;
        padding: 54px 6%;
    }
}


.noticeBanner {
  background: #F8F5EF;
  padding: 39px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.noticeBanner__paper {
    position: relative;
    width: 100%;
    max-width: 1464px;
    padding: 140px 60px;
    background-image: url(noticeBanner.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.noticeBanner__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.noticeBanner__label {
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #77551d;
}

.noticeBanner__title {
  margin: 10px 0 20px;
  font-size: clamp(50px, 8vw, 120px);
  text-transform: uppercase;
  font-weight: 400;
    line-height: 93%;
    text-align: center;
    color: #12110f;
}
@media(min-width:991px) {
    .noticeBanner__title {
        max-width: 60%
    }
}
.noticeBanner__subtitle {
    font-weight: 400;
    font-size: 50px;
    text-align: center;
    color: #12110f;
}

.noticeBanner__text {
    margin: 30px 0 20px;
    font-size: 24px;
    line-height: 125%;
    text-align: center;
    color: #000;
}

.noticeBanner__text p { margin: 0; }
.noticeBanner__text p + p { margin-top: .6em; }

.noticeBanner__btn {
    letter-spacing: unset;
    font-family: 'Impact';
    font-weight: 400;
    font-size: 20px;
    width: 330px;
    height: 113px;
    transform: rotate(-2.5deg);
}

.noticeBanner__btn:hover {
    transform: rotate(-2.5deg) scale(1.025);
}

@media (max-width: 768px) {
    .noticeBanner {
        padding: 0;
    }
    .noticeBanner__paper {
            padding: 100px 16px;
    }
    .noticeBanner__subtitle {
        font-size: 25px;
    }
    .noticeBanner__label {
        font-size: 12px;
    }
    .noticeBanner__text {
        margin: 16px 0 0;
        font-size: 19px;
    }
    .noticeBanner__btn {
        font-size: 18px;
        width: 270px;
        height: 100px;
    }
}



.testimonials {
    padding: 60px 0 100px;
    overflow: hidden;
    background-color: var(--testimonials-bg-color, #1a1a1a);
    {% if section.settings.bg_image != blank %}
    background-image: var(--testimonials-bg-image);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    {% endif %}
}

.testimonials__top {
    display: grid;
    margin-bottom: 100px;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 27vw);
    gap: 40px;
        align-items: flex-end;
}

.testimonials__text {
    max-width: 700px;
}

.testimonials__description {
    margin-bottom: 40px;
    color: #fff;
}
.testimonials__heading {
    color: #f8f5ef;
    font-size: clamp(52px, 8vw, 150px);
}

.testimonials__bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.testimonial {
    background: #f8f5ef;
    padding: 50px 2vw 25px;
    position: relative;
    transition: transform 0.3s ease;
}

.testimonials__card--lead {
    transform: rotate(3deg);
}

.testimonials__bottom .testimonial:nth-child(odd) {
    transform: rotate(-3deg);
}

.testimonials__bottom .testimonial:nth-child(even) {
    transform: rotate(3deg);
}

.testimonial__tape {
    position: absolute;
    width: 75%;
    height: 30%;
    top: -15%;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    background-image: url('masking-tape-crop.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.testimonial__quote {
    margin: 0 0 15px;
}

.testimonial__author {
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 20px;
}

.testimonial__location {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 167%;
    color: #989898;
}

@media (max-width: 900px) {
    .testimonials__top {
        grid-template-columns: 1fr;
        justify-items: center;
        margin-bottom: 60px;
                gap: 100px;
    }
    .testimonials__text {
        max-width: 100%;
    }
    .testimonials__bottom {
        grid-template-columns: 1fr;
        gap: 60px;
        max-width: 400px;
        margin: 0 auto;
    }
    .testimonials__card--lead {
        transform: rotate(3deg);
        max-width: 400px;
        width: 100%;
    }
}


.newsletter-section {
    background: #c7a36a14;
    padding: 120px 8vw 135px;
    position: relative;
    overflow: hidden
}

.newsletter-section-intro {
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 6vw;
    display: grid
}

.newsletter-section h2 {
    font-size: clamp(58px,7.4vw,120px)
}

.newsletter-section-body {
    max-width: 610px;
    margin: 24px 0;
}
.newsletter-section-photo {
    transition: 0.4s
}
.newsletter-section-photo:hover {
    transform: rotate(5deg)
}

@media (width<=900px) {
    .newsletter-section {
        padding: 100px 7vw 115px
    }

    .newsletter-section-intro {
        grid-template-columns: 1fr;
        gap: 60px
    }

    .newsletter-section-copy {
        max-width: 760px
    }

}



@media (width<=520px) {
    .newsletter-section {
        padding: 85px 6vw 95px
    }

    .newsletter-section-intro {
        gap: 42px
    }

    .newsletter-section h2 {
        font-size: clamp(52px,17vw,78px)
    }


    .newsletter-section-body {
        font-size: 17px
    }

}



.faq {
    padding: 80px 8vw 60px;
    margin: 0 auto;
    background: #f8f5ef;
}

.faq__header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 70px;
}

.faq__title {
    font-size: clamp(48px, 8vw, 120px);
    margin: 0;
    text-transform: uppercase;
}

.faq__subtitle {
    font-family: var(--font4);
    font-weight: 400;
    font-size: 28px;
    line-height: 107%;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    rotate: -13deg;
}

.faq__grid {
     column-count: 2;
    column-gap: 90px;
}

.faq__item {
        max-width: 690px;
         break-inside: avoid;
  margin-bottom: 52px;
}

.faq__question {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 20px;
}

.faq__number {
   margin:0
}

.faq__question-text {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 28px;
    line-height: 107%;
    color: #12110f;
}
.faq__answer {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    color: #12110f;
    padding-left: 44px;
}
.faq__cta{
        text-align: center;
    margin-top: 40px;
}
.faq__button {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 18px;
        text-transform: capitalize;
}

@media (max-width: 900px) {
    .faq__grid {
         column-count: 1;
    }

    .faq__header {
        justify-content: center;
        gap: 10px;
    }

    .faq__subtitle {
        font-size: 16px;
        margin-top: -45px;
    }
    .faq__question-text {
        font-size: 20px;
    }
    .faq__answer {
        font-size: 16px;
    }
}

.newsletter-section .klaviyo-form .klaviyo-form-button {
    font-family: var(--third-family) !important;
    color: #f8f5ef !important;
}
.newsletter-section .klaviyo-form input {
    font-family: var(--third-family) !important;
    font-weight: 400 !important;
    font-size: 20px !important;
   color: #989898 !important;
}
.newsletter-section .klaviyo-form input::placeholder {
    font-family: var(--third-family) !important;
    font-weight: 400 !important;
    font-size: 20px !important;
   color: #989898 !important;
}

@media (max-width: 1220px) {
    .newsletter-section-body {
        margin-bottom: 40px;
    }
    .newsletter-section form>div {
        justify-content: flex-end !important;
        align-items: self-start !important;
    }
    .newsletter-section form>div>div {
        flex-direction: column !important;
        width:100% !important;
    }
    .newsletter-section  .klaviyo-form .klaviyo-form-button {
         width:100% !important;
    }
    .newsletter-section form .go508050874 {
         width:100% !important;
    }
}


.contact-section {
    background: #c7a36a14;
    padding: 120px 8vw 135px;
    position: relative;
    overflow: hidden;
}
.contact-section-intro {
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 6vw;
    display: grid;
}
.contact-section-title {
    margin-bottom: 30px;
        font-size: clamp(52px, 6vw, 110px);
}
.contact-section-form form *,
.contact-section-form form input::placeholder {
    font-family: var(--second-family) !important;
}
.contact-section-form form>div {
    gap: 14px !important
}
.contact-section-form [data-testid="form-row"] {
    gap: 14px !important
}
@media (max-width: 1220px)  {
    .contact-section-intro {
        grid-template-columns: 1fr;
        gap:40px;
    }
}
@media (max-width: 768px)  {
    .contact-section-form [data-testid="form-row"],
    .contact-section-form form>div {
        display: block !important;
    }
    .contact-section-form form {
        padding: 16px !important
    }
}
@media (width <= 900px) {
    .contact-section{
        padding: 100px 7vw 115px;
    }
}
@media (width <= 520px) {
    .contact-section {
        padding: 85px 6vw 95px;
    }
}

.hamburger {
    width: 24px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    cursor: pointer;
    display: none;
    position: relative;
    gap: 6px;
    justify-content: space-between;
        z-index: 3333333;
}
.hamburger span {
    width: 100%;
    height: 1px;
    display: block;
    background-color: #000;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}
@media (max-width: 1200px) {
    .header-logo {
        z-index: 3333333;
    }
    .hamburger {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; 
    }
    .site-header nav.header-menu {
        position: fixed;
        z-index: 55;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        padding: 120px 6vw;
        background-color: #f8f5ef;
        -webkit-transition: .4s all;
        transition: .4s all;
        gap: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: flex-start;
    }
    .header-menu a {
        padding: 16px 0
    }
    .header_active.site-header nav.header-menu {
        left: 0;
        overflow-y: auto;
    }
}


.product-offer-wrapper {
  max-width: 700px;
  margin: 40px 0 0;
}

.offer-options {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
}

.offer-option input[type="radio"] {
  display: none;
}

.offer-option {
  flex: 1;
  cursor: pointer;
  border: 2px solid #12110f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  font-family: var(--third-family);
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    color: #12110f;
}

.offer-option.black-theme {
  background-color: #12110f;
  color: #fff;
}

.offer-option.white-theme {
  background-color: transparent;
  color: #12110f;
}

.offer-option:hover {
  opacity: 0.8;
}

.button-gold.add-to-cart-btn {
  width: 100%;
  background-color: #a57711; 
  font-family: var(--third-family);
    font-weight: 400;
    font-size: 28px;
    color: #f8f5ef;
  border: none;
  padding: 15px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}

.button-gold.add-to-cart-btn:hover {
  background-color: #9a6e09;
}
.subpage h1 {
        font-size: clamp(60px, 7vw, 130px);
    }
@media(max-width: 1400px) {
    .shop-bottle {
        min-height: 700px;
    }
    .shop-bottle img {
        height: 700px;
    }
     .subpage h1 {
        font-size: clamp(60px, 5vw, 130px);
    }
}
@media(max-width: 1200px) {
   
    .shop {
        grid-template-columns: 1fr;
    }
    .shop-bottle {
        min-height: 760px;
        order: -1;
    }
}
@media(max-width: 767px){
    .offer-options {
        flex-direction: column;
        gap: 20px;
    }
}

.shipping-tape {
    transition: 0.4s;
}
.shipping-tape:hover {
    transform: rotate(-1.5deg) scale(1.025);
}
.shipping-button,
.story-button,
.faq__button {
    transition: 0.4s;
}
.shipping-button:hover,
.story-button:hover,
.faq__button:hover {
    transform: rotate(-3deg);
    background: var(--gold);
    color: #fff;
}
.klaviyo-form-button {
    transition: 0.4s !important;
}
.klaviyo-form-button:hover {
    transform: rotate(-3deg) !important;
    background: var(--gold) !important;
    color: #fff !important;
}
.button-gold.add-to-cart-btn {
    transition: 0.4s;
}
.button-gold.add-to-cart-btn:hover {
    transform: rotate(-2deg);
}
.story-kraft-mat,
.story-photo-card {
    transition: 0.4s;
}
.story-visual.story-photo-object:hover .story-kraft-mat {
    transform: rotate(-3deg);
}
.story-visual.story-photo-object:hover .story-photo-card {
    transform: rotate(3deg);
}

.mt20 {
    margin-top: 20px
}