@charset "UTF-8";
@import"https://p.typekit.net/p.css?s=1&k=cfq7apl&ht=tk&f=39437.39433.39434.39435.39436&a=70117292&app=typekit&e=css";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
    display: block
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: "";
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}

body {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.57;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: contain
}

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

    a:hover, a:visited, a:focus {
        outline: 0
    }

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: left;
    display: block;
    cursor: pointer;
    width: auto;
    background-color: transparent;
    color: currentColor;
    text-decoration: none;
    font-family: inherit
}

    button:hover, button:visited, button:focus {
        outline: 0
    }

*:focus {
    outline: 0
}

p, h1, h2, h3, h4, h5, h6 {
    max-width: 100%;
    white-space: pre-line;
    text-overflow: ellipsis;
    word-break: break-word
}

input {
    font-family: inherit
}

@font-face {
    font-family: ConduitITC;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/ITCConduitProRegular/font.woff2) format("woff2"),url(/fonts/ITCConduitProRegular/font.woff) format("woff")
}

@font-face {
    font-family: ConduitITC;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/ITCConduitProBold/font.woff2) format("woff2"),url(/fonts/ITCConduitProBold/font.woff) format("woff")
}

@font-face {
    font-family: Didot-headline;
    src: url(https://use.typekit.net/af/05d1ce/00000000000000007735bbca/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/05d1ce/00000000000000007735bbca/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/05d1ce/00000000000000007735bbca/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal
}

@font-face {
    font-family: Didot;
    src: url(https://use.typekit.net/af/aec0c1/00000000000000007735bbc9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/aec0c1/00000000000000007735bbc9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/aec0c1/00000000000000007735bbc9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal
}

@font-face {
    font-family: Didot;
    src: url(https://use.typekit.net/af/8bae95/00000000000000007735bbd9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/8bae95/00000000000000007735bbd9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/8bae95/00000000000000007735bbd9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3) format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal
}

@font-face {
    font-family: Didot;
    src: url(https://use.typekit.net/af/cf4868/00000000000000007735bbdc/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/cf4868/00000000000000007735bbdc/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/cf4868/00000000000000007735bbdc/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal
}

@font-face {
    font-family: Didot;
    src: url(https://use.typekit.net/af/b00c42/00000000000000007735bbdf/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/b00c42/00000000000000007735bbdf/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/b00c42/00000000000000007735bbdf/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal
}

:root, *:after, *:before {
    --font-family-content: ConduitITC, Arial, sans-serif;
    --font-family-didot: Didot, Arial, sans-serif;
    --typography-heading1: 700 40px/1 var(--font-family-content);
    --typography-heading2: 700 28px/1 var(--font-family-content);
    --typography-heading3: 700 24px/1 var(--font-family-content);
    --typography-heading4: 700 20px/1 var(--font-family-content);
    --typography-heading5: 700 16px/1 var(--font-family-content);
    --typography-heading6: 700 16px/1 var(--font-family-content);
    --typography-alternate-heading5: italic 400 18px/1.4 var(--font-family-didot);
    --typography-paragraph1: 400 16px/1.3 var(--font-family-content);
    --typography-paragraph2: 400 14px/1.3 var(--font-family-content);
    --typography-label1: 700 14px/1 var(--font-family-content);
    --typography-label2: 700 14px/1 var(--font-family-content);
    --typography-label3: 700 12px/1 var(--font-family-content);
    --typography-quote: 700 50px/.9 var(--font-family-content);
    --color-venetianred: #B70E0C;
    --color-nero: #282828;
    --color-springwood: #E7E3D4;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-greenwhite: #DDDACB;
    --color-greenwhite-alternative: #DCD7C7;
    --color-green: #5F8B00;
    --color-sangria: #A80000;
    --color-quillgrey: #CECCBF;
    --color-stormdust: #61605C;
    --color-milk-white: #D9D5C7;
    --color-masala: #554F4A;
    --color-springwood-30: rgba(231, 227, 212, .3);
    --color-springwood-80: rgba(231, 227, 212, .8);
    --color-stormdust-60: rgba(97, 96, 92, .6);
    --color-black-4: rgba(0,0,0,.04);
    --color-black-6: rgba(0,0,0,.06);
    --color-black-10: rgba(0,0,0,.1);
    --color-black-25: rgba(0,0,0,.25);
    --color-black-30: rgba(0,0,0,.3);
    --color-black-40: rgba(0,0,0,.4);
    --color-nero-10: rgba(40,40,40,.1);
    --color-nero-30: rgba(40,40,40,.3);
    --color-nero-50: rgba(40,40,40,.5);
    --color-nero-60: rgba(40,40,40,.6);
    --color-nero-70: rgba(40,40,40,.7);
    --color-white-20: rgba(255,255,255,.2);
    --color-white-30: rgba(255,255,255,.3);
    --header-zindex: 25;
    --menutoolbar-zindex: 24;
    --language-selector-zindex: 20;
    --navigation-sidebar-zindex: 15;
    --backdrop-zindex: 10;
    --elevated-zindex: 2;
    --base-zindex: 1;
    --underline-zindex: -1;
    --error-color: var(--color-sangria);
    --foreground-color: var(--color-nero);
    --foreground-subtle-color: var(--color-black-40);
    --background-color: var(--color-springwood);
    --border-dark: var(--color-black-10);
    --border-light: var(--color-springwood-30);
    --page-gutter: 16px;
    --page-width: 1440px;
    --grid-columns-mobile: 8;
    --grid-columns-desktop: 12;
    --grid-gap-mobile: 10px;
    --grid-gap-desktop: 20px;
    --grid-columns: var(--grid-columns-mobile);
    --grid-gap: var(--grid-gap-mobile);
    --grid-template: auto / repeat(var(--grid-columns), 1fr);
    --easing: cubic-bezier(.4, 0, .2, 1);
    --general-transition: all .2s var(--easing);
    --global-header-height: 102px
}

@media only screen and (min-width: 1024px) {
    :root {
        --grid-columns: var(--grid-columns-desktop);
        --grid-gap: var(--grid-gap-desktop);
        --grid-template: auto / repeat(var(--grid-columns), 1fr);
        --page-gutter: 24px;
        --typography-heading1: 700 60px/1 var(--font-family-content);
        --typography-heading2: 700 40px/1 var(--font-family-content);
        --typography-heading3: 700 28px/1 var(--font-family-content);
        --typography-heading4: 700 24px/1 var(--font-family-content);
        --typography-heading5: 700 18px/1 var(--font-family-content);
        --typography-heading6: 700 16px/1 var(--font-family-content);
        --typography-alternate-heading5: italic 400 20px/1.4 var(--font-family-didot);
        --typography-paragraph1: 400 16px/1.3 var(--font-family-content);
        --typography-paragraph2: 400 14px/1.3 var(--font-family-content);
        --typography-label1: 700 14px/1 var(--font-family-content);
        --typography-label2: 700 14px/1 var(--font-family-content);
        --typography-label3: 700 12px/1 var(--font-family-content);
        --typography-quote: 700 100px/.9 var(--font-family-content);
        --typography-subtitle: italic 400 20px/1.4 var(--font-family-didot)
    }
}

@media only screen and (min-width: 1920px) {
    :root {
        --page-width: 1680px
    }
}

@keyframes skewedTextAnimation {
    to {
        opacity: 1;
        transform: scaleY(1) skewY(0) translateY(0)
    }
}

@keyframes lineAnimation {
    to {
        width: 56px
    }
}

.gift-card-page {
    background: var(--background-color);
    box-sizing: border-box;
    color: var(--foreground-color);
    column-gap: var(--grid-gap);
    display: grid;
    font-family: var(--font-family-content);
    grid-template: var(--grid-template);
    width: 100%
}

    .gift-card-page *, .gift-card-page :after, .gift-card-page :before {
        box-sizing: inherit
    }

    .gift-card-page .hero {
        align-items: flex-end;
        background: linear-gradient(0, var(--color-black-30), var(--color-black-30)), url(/images/gift-card.jpg) center -20% / contain no-repeat;
        display: flex;
        height: 100vh;
        justify-content: center;
        padding-bottom: calc(60vh + 24px);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: var(--base-zindex);
    }

@media only screen and (min-width: 1024px) {
    .gift-card-page .hero {
        align-items: center;
        background: linear-gradient(0, var(--color-black-30), var(--color-black-30)), url(/images/gift-card.jpg) top left / cover no-repeat;
        grid-column: span 6;
        padding-bottom: 0;
        position: sticky;
    }
}

.gift-card-page .hero .title {
    animation: skewedTextAnimation .5s cubic-bezier(.23,1,.32,1) forwards;
    color: var(--color-white);
    display: inline-flex;
    font: var(--typography-heading1);
    opacity: 0;
    padding-bottom: 18px;
    text-transform: uppercase;
    transform: scaleY(.7) skewY(10deg) translateY(10px);
    transform-origin: left bottom
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .hero .title {
        padding-bottom: 22px
    }
}

.gift-card-page .hero .title:after {
    animation: lineAnimation 1s cubic-bezier(.23,1,.32,1) .1s forwards;
    background: var(--color-white);
    bottom: 0;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    translate: -50%;
    width: 0
}

.gift-card-page .content {
    background: var(--background-color);
    border-radius: 20px 20px 0 0;
    column-gap: var(--grid-gap);
    display: grid;
    grid-column: span 8;
    grid-template: var(--grid-template);
    margin-top: 40vh;
    z-index: var(--elevated-zindex)
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content {
        border-radius: 0;
        grid-column: span 6;
        margin-top: 0;
        overflow: auto;
    }
}

.gift-card-page .content .form {
    grid-column: span 8;
    padding: 30px 16px
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .form {
        grid-column: span 12;
        padding: calc(var(--global-header-height) + 60px) var(--grid-gap) 100px 0
    }
}

@media only screen and (min-width: 1440px) {
    .gift-card-page .content .form {
        grid-column: 3/span 8;
        padding: calc(var(--global-header-height) + 60px) 0 100px
    }
}

.gift-card-page .content .description {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 30px
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .description {
        font-size: 22px
    }
}

.gift-card-page .content .input-group {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap)
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .input-group {
        flex-direction: row
    }
}

.gift-card-page .content .input {
    position: relative;
    width: 100%
}

    .gift-card-page .content .input input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        border: 1px solid var(--border-dark);
        border-radius: 60px;
        color: var(--foreground-color);
        display: inline-flex;
        font-size: 16px;
        font-weight: 700;
        height: 50px;
        letter-spacing: .05em;
        line-height: 1.2;
        padding: 23px 25px 11px;
        transition: var(--general-transition);
        width: 100%
    }

        .gift-card-page .content .input input:focus {
            border-color: var(--color-black-40);
            outline: none
        }

        .gift-card-page .content .input input + label {
            left: 25px;
            position: absolute;
            top: 25px;
            transform: translateY(-50%);
            transform-origin: left center
        }

        .gift-card-page .content .input input:focus + label, .gift-card-page .content .input input:not(:placeholder-shown) + label {
            left: 26px;
            top: 15px;
            transform: scale(.75) translateY(-50%)
        }

    .gift-card-page .content .input label {
        color: var(--color-nero-60);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .05em;
        line-height: 1.2;
        pointer-events: none;
        text-transform: uppercase;
        transition: var(--general-transition)
    }

.gift-card-page .content .phone-input {
    width: 100%
}

    .gift-card-page .content .phone-input .phone-input-container {
        border: 1px solid var(--border-dark);
        border-radius: 60px;
        display: flex;
        position: relative;
        transition: var(--general-transition)
    }

    .gift-card-page .content .phone-input:focus-within {
        border-color: var(--color-black-40);
        outline: none
    }

    .gift-card-page .content .phone-input .select {
        align-items: center;
        display: inline-flex;
        height: 50px;
        padding: 14px 0 14px 17px;
        position: relative;
        transition: var(--general-transition)
    }

    .gift-card-page .content .phone-input img {
        display: block;
        height: 14px;
        margin-right: 10px;
        width: 20px
    }

    .gift-card-page .content .phone-input .phone-divider {
        border: 0;
        border-left: 1px solid var(--color-black-10);
        height: 22px;
        margin-left: 16px;
        width: 1px
    }

    .gift-card-page .content .phone-input select {
        cursor: pointer;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
    }

    .gift-card-page .content .phone-input .input input {
        border: 0
    }

.gift-card-page .content .error {
    color: var(--error-color);
    display: none;
    font: var(--typography-label2);
    margin-top: 5px;
    padding-left: 26px
}

.gift-card-page .content .delivery {
    margin-top: 40px
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .delivery {
        margin-top: 60px
    }
}

.gift-card-page .content .question {
    font: var(--typography-heading4);
    margin-bottom: 15px;
    text-transform: uppercase
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .question {
        margin-bottom: 30px
    }
}

.gift-card-page .content .radio-group {
    border: 1px solid var(--border-dark);
    border-radius: 10px
}

.gift-card-page .content .radio {
    cursor: pointer;
    padding: 16px
}

    .gift-card-page .content .radio * {
        cursor: pointer
    }

    .gift-card-page .content .radio:not(:last-child) {
        border-bottom: 1px solid var(--border-dark)
    }

    .gift-card-page .content .radio > input {
        left: -9999px;
        opacity: 0;
        position: absolute
    }

        .gift-card-page .content .radio > input:checked + label:before {
            background: var(--border-dark);
            border-color: transparent;
            transition-duration: .6s
        }

        .gift-card-page .content .radio > input:checked + label:after {
            opacity: 1;
            scale: 1;
            transition-delay: .1s
        }

    .gift-card-page .content .radio > label {
        align-items: center;
        color: var(--color-nero-60);
        display: flex;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .06em;
        line-height: 1.2;
        justify-content: space-between;
        min-height: 32px;
        padding-left: 46px;
        position: relative;
        text-transform: uppercase
    }

        .gift-card-page .content .radio > label:before {
            border: 1px solid var(--border-dark);
            border-radius: 50%;
            content: "";
            height: 30px;
            left: 0;
            position: absolute;
            top: 50%;
            transition: var(--general-transition);
            transition-duration: .9s;
            translate: 0 -50%;
            width: 30px
        }

        .gift-card-page .content .radio > label:after {
            background: var(--color-white);
            border-radius: 50%;
            content: "";
            height: 16px;
            left: 7px;
            opacity: 0;
            position: absolute;
            scale: .4;
            top: 50%;
            transform-origin: center;
            transition: var(--general-transition);
            translate: 0 -50%;
            width: 16px
        }

    .gift-card-page .content .radio:hover label:before, .gift-card-page .content .radio:focus label:before {
        border-color: var(--color-nero-60);
        outline: none
    }

.gift-card-page .content .credit-card {
    box-shadow: 0 2px 4px 0 var(--color-black-25);
    display: block;
    margin: 0 4px;
    width: 40px
}

.gift-card-page .content .mobilepay {
    height: 32px;
    margin: 0 8px
}

    .gift-card-page .content .mobilepay img {
        display: block;
        position: relative;
        translate: 0 -1px;
        width: 32px
    }

.gift-card-page .content .details {
    margin-top: 32px
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .details {
        margin-top: 48px
    }
}

.gift-card-page .content .details > .input, .gift-card-page .content .details .input-group {
    margin-bottom: 10px
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .details > .input, .gift-card-page .content .details .input-group {
        margin-bottom: 16px
    }
}

.gift-card-page .content .submit-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: var(--color-nero-50);
    color: var(--color-white);
    box-shadow: 0 4px 14px #00000040;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    padding: 0 25px;
    border-radius: 25px;
    min-width: 50px;
    background: var(--color-nero);
    font: var(--typography-heading6);
    letter-spacing: .05em;
    margin-top: 25px;
    text-transform: uppercase;
    transition: var(--general-transition);
    width: 100%
}

    .gift-card-page .content .submit-button:hover {
        background: var(--color-black-40)
    }

        .gift-card-page .content .submit-button:disabled, .gift-card-page .content .submit-button:hover:disabled, .gift-card-page .content .submit-button:focus:disabled {
            cursor: not-allowed;
            opacity: .3;
            pointer-events: none
        }

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .submit-button {
        margin-top: 40px
    }
}

.gift-card-page .content .terms {
    color: var(--color-nero-50);
    font: var(--typography-paragraph1);
    margin-bottom: 12px;
    margin-top: 16px
}

@media only screen and (min-width: 1024px) {
    .gift-card-page .content .terms {
        margin-bottom: 18px;
        margin-top: 25px
    }
}

.gift-card-page .content .link {
    color: var(--foreground-color);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    transition: var(--general-transition)
}

    .gift-card-page .content .link:before {
        display: block;
        content: "";
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100%;
        height: 2px;
        translate: 0 -2px;
        opacity: 0;
        transition: var(--general-transition);
        background-color: var(--color-venetianred)
    }

    .gift-card-page .content .link:hover {
        color: var(--color-venetianred)
    }

        .gift-card-page .content .link:hover:before {
            translate: 0 0;
            opacity: 1
        }

.gift-card-page .content .link {
    align-items: center;
    font-weight: 700;
    gap: 2px;
    text-transform: uppercase
}