/* ========================================
    🔤 FONTS
======================================== */

/* None */


/* ========================================
    🎨 SETTINGS
======================================== */

:root {
    /* Brand colors */
    --brand-primary: rgba(0, 114, 151, 1);
    --brand-hover: rgba(0, 114, 151, .8);
    --brand-disabled: rgba(0, 114, 151, .6);
    --brand-muted: rgba(0, 114, 151, 0.35);

    /* brand colors */
    --brand-CAV: rgba(241, 241, 242);
    --brand-CEQ: rgba(241, 241, 242);
    --brand-CLP: rgba(241, 241, 242);
    --brand-CLX: rgba(241, 241, 242);
    --brand-CNO: rgba(153, 153, 153);
    --brand-CQE: rgba(241, 241, 242);
    --brand-CQF: rgba(241, 241, 242);
    --brand-CQG: rgba(241, 241, 242);
    --brand-CQM: rgba(241, 241, 242);
    --brand-CQP: rgba(241, 241, 242);
    --brand-CQS: rgba(241, 241, 242);
    --brand-CSD: rgba(255, 199, 0);
    --brand-CSJ: rgba(74, 140, 189);
    --brand-CSX: rgba(255, 199, 0);
    --brand-JSH: rgba(200, 182, 105);
    --brand-STL: rgba(229, 189, 128);
    --brand-HCF: rgba(195, 70, 40);
    --brand-HCG: rgba(0, 112, 131);
    --brand-HPO: rgba(0, 84, 164);
    --brand-HCS: rgba(170, 109, 118);

    /* Template colors */
    --neutral-900: #212529;
    --neutral-800: #343A40;
    --neutral-700: #4D5154; /* generated */
    --neutral-600: #6C757D;
    --neutral-500: #717171;
    --neutral-400: #909294;
    --neutral-300: #A6A8A9; /* generated */
    --neutral-200: #BCBEBF; /* generated */
    --neutral-100: #CED4DA; 
    --neutral-50: #EBEBEB;
    --neutral-25: #f3f4f6;

    /* Typography */
    --font-size: 1rem;
    --line-height: 1.7;
    --font-family: Helvetica, Arial, Lucida Grande, sans-serif;
    --font-weight-bold: bold;
    --font-weight-normal: normal;

    /* Form fields */
    --field-border-radius: 0.25rem;
    --field-height: 2.25rem;

    /* Spacing */
    --header-height-sm: 6.125rem;
    --header-height-md: 6.125rem;
    --header-height-lg: 6.125rem;
}


/* ========================================
    🔄 RESET
======================================== */

body, html {
    height: 100%;
}
*, *:before, *:after {
    box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
figure {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    height: auto;
}
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}


/* ========================================
    🅰️ TYPOGRAPHY
======================================== */

/* Default */
body {
    color: var(--neutral-900);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6, legend {
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: 1rem;
}
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
    outline: none;
}
h1 {
    font-size: 1.375rem;
    margin-bottom: 0.625rem;
}
h2 {
    font-size: 1.375rem;
}
h3 {
    font-size: calc(var(--font-size) + 2px);
}
legend {
    font-size: 1.125rem;
    margin-bottom: 0.875rem;
}

/* Paragraph */
p {
    line-height: var(--line-height);
    margin-bottom: 1rem;
}

/* Links */
a {
    border-radius: var(--field-border-radius);
    color: inherit;
    text-decoration: none;
}
a:active, a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}
a:focus-visible {
    outline: 1px solid var(--brand-primary);
    outline-offset: 2px;
}

p a {
    color: var(--brand-primary);
}


/* ========================================
    🧪 UTILITIES
======================================== */

/* Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  
/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-7 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-7 { margin-bottom: 2rem !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-5 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-7 { margin-left: 2rem !important; margin-right: 2rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-7 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.25rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-7 { padding-top: 2rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.25rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-7 { padding-bottom: 2rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-7 { padding-left: 2rem !important; padding-right: 2rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-7 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Typography */
.text-large   { font-size: calc(var(--font-size) + 2px) !important; }
.text-larger  { font-size: calc(var(--font-size) + 4px) !important; }
.text-small   { font-size: calc(var(--font-size) - 2px) !important; }
.text-smaller { font-size: calc(var(--font-size) - 4px) !important; }

.fw-normal { font-weight: var(--font-weight-normal) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }

.text-left      { text-align: left !important; }
.text-center    { text-align: center !important; }
.text-right     { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }

.text-underline { text-decoration: underline !important; }
.strikethrough  { text-decoration: line-through !important; }

.text-no-wrap { white-space: nowrap !important; }

.ls-tightest { letter-spacing: -0.05em !important; }
.ls-tighter  { letter-spacing: -0.025em !important; }
.ls-tight    { letter-spacing: -0.0125em !important; }
.ls-normal   { letter-spacing: 0 !important; }
.ls-wide     { letter-spacing: 0.025em !important; }
.ls-wider    { letter-spacing: 0.05em !important; }
.ls-widest   { letter-spacing: 0.1em !important; }

.text-primary { color: var(--primary-color, #007bff) !important; }
.text-neutral-900 {color: var(--neutral-900) !important }
.text-neutral-800 {color: var(--neutral-800) !important }
.text-neutral-700 {color: var(--neutral-700) !important }
.text-neutral-600 {color: var(--neutral-600) !important }
.text-neutral-500 {color: var(--neutral-500) !important }
.text-neutral-400 {color: var(--neutral-400) !important }
.text-neutral-300 {color: var(--neutral-300) !important }
.text-neutral-200 {color: var(--neutral-200) !important }
.text-neutral-100 {color: var(--neutral-100) !important }
.text-neutral-50  {color: var(--neutral-50) !important }
.text-white {color: #ffffff !important }
.text-muted { opacity: .7 !important; }

/* Layout & Display */
.hidden, .d-none { display: none !important; }
.show, .d-block  { display: block !important; }
.d-inline        { display: inline !important; }
.d-inline-block  { display: inline-block !important; }
.d-flex          { display: flex !important; }
.d-grid          { display: grid !important; }

.w-100  { width: 100% !important; }
.w-auto { width: auto !important; }

.h-100  { height: 100% !important; }
.h-auto { height: auto !important; }

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }

/* Flexbox */
.flex-row    { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start  { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end    { justify-content: flex-end !important; }

.items-start  { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end    { align-items: flex-end !important; }

/* Border Radius */
.border-none { border-radius: 0 !important; }
.border-sm   { border-radius: 0.125rem !important; }
.border      { border-radius: 0.25rem !important; }
.border-md   { border-radius: 0.375rem !important; }
.border-lg   { border-radius: 0.5rem !important; }
.border-xl   { border-radius: 0.75rem !important; }
.border-2xl  { border-radius: 1rem !important; }
.border-full { border-radius: 9999px !important; }

/* Filters */
.invert { filter: brightness(0) invert(1); }

/* Shadow */
.no-shadow {
    box-shadow: none !important;
}


/* ========================================
    ✨ ANIMATIONS
======================================== */

@keyframes dots {
    0%   { 
        content: ''; 
    }
    25%  { 
        content: '.'; 
    }
    50%  { 
        content: '..'; 
    }
    75%  { 
        content: '...'; 
    }
    100% { 
        content: ''; 
    }
}

@keyframes pulse {
    0% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.4;
    }
    100% { 
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes floatUp {
    0% {
        opacity: .5;
        transform: translate3d(0,50%,0) translateX(-50%);
    }
    to {
        opacity: 1;
        transform:translateZ(0) translateX(-50%)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash {
    0%, 100%, to {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@keyframes bounce {
    20% {
        background-position:0%   0%, 50%  50%,100%  50%
    }
    40% {
        background-position:0% 100%, 50%   0%,100%  50%
    }
    60% {
        background-position:0%  50%, 50% 100%,100%   0%
    }
    80% {
        background-position:0%  50%, 50%  50%,100% 100%
    }
}


/* ========================================
    🔧 LAYOUT
======================================== */

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
}
.container {
    margin: 0 auto;
    max-width: 54.5rem;
    padding: 0 1.5rem;
    width: 100%;
}
main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 9rem 0 4rem 0;
}
main .container {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    justify-content: space-between;
    max-width: 54.5rem;
}
.col-1 {
    display: flex;
    align-items: start;
    flex: 1;
    min-width: 0;
}
.col-2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
section {
    flex: 1;
    opacity: 0;
    transition: opacity .3s linear;
}
section.active {
    opacity: 1;
}

@media (min-width: 768px) {
    .container {
        max-width: 70rem;
    }
    main {
        padding: 11rem 0 5rem 0;
    }
    main .container {
        flex-direction: row;
    }
    .col-2 {
        width: 66%;
    }
}


/* Steps
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.col-1 img {
    box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
    max-width: 200px;
}
ol.checkout__steps__nav {
    display: none;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.0625rem;
    font-weight: var(--font-weight-bold);
    list-style: decimal;
    list-style-position: inside;
}

@media (min-width: 768px) {
    .checkout__steps {
        margin-bottom: 0;
        padding-top: 0;
    }
    .checkout__steps > div {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    ol.checkout__steps__nav {
        display: flex;
    }
}
@media (min-width: 768px) and (min-height: 675px) {
    .checkout__steps > div {
        position: sticky;
        padding-top: 0;
        top: 11rem;
    }
}

/* ========================================
    🟦 Buttons
======================================== */

/* Default */
button, a.button {
    align-items: center;
    cursor: pointer;
    background-color: var(--brand-primary);
    border: 0;
    border-radius: var(--field-border-radius);
    color: #fff;
    display: flex;
    font-family: inherit;
    font-size: calc(var(--font-size) -2px);
    font-weight: var(--font-weight-normal);
    height: var(--field-height);
    justify-content: center;
    max-width: 10.75rem;
    padding: 0;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}
button:hover, a.button:hover {
    background-color: var(--brand-hover);
    text-decoration: none;
}
button:focus-visible, a.button:focus-visible {
    background-color: var(--brand-primary);
    outline: 1px solid var(--brand-primary);
    outline-offset: 2px;
}
button:disabled, button.processing, button.calculating {
    background-color: var(--brand-disabled);
    cursor: not-allowed;
}
button:focus-visible, a.button:focus-visible {
    transition: none;
}
button.processing span:not(.sr-only), button.calculating span:not(.sr-only) {
    display: none;
}
button.processing::before {
    content: '';
    animation: rotate 1s infinite linear;
    border: 4px solid rgba(255, 255, 255, .25);
    border-right-color: rgba(255, 255, 255, .75);
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
}
button.calculating::before {
    content: 'Calculating Tax';
}
button.calculating::after {
    content: '';
    color: inherit;
    animation: dots 2s steps(4, end) infinite;
    text-align: left;
    width: 1rem;
}

/* Outline */
button.outline, a.button.outline {
    background-color: transparent;
    border: 1px solid var(--neutral-800);
    color: var(--neutral-800);
}
button.outline:hover, a.button.outline:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}
button.outline:disabled, button.outline.processing, button.outline.calculating {
    border-color: var(--neutral-400);
    color: var(--neutral-400);
}
button.outline:disabled:hover, button.outline.processing:hover, button.outline.calculating:hover {
    background-color: transparent;
}
button.outline.processing {
    border-color: var(--brand-primary);
}
button.outline.processing::before {
    border: 4px solid var(--brand-muted);
    border-right-color: var(--brand-hover);
}

/* Ghost */
button.ghost, a.button.ghost {
    background-color: transparent;
    border: 0.063rem solid transparent;
    color: var(--neutral-900);
    max-width: none;
}
button.ghost:hover {
    color: var(--brand-primary);
}
button.ghost:focus-visible {
    border-color: var(--brand-primary);
    outline: 1px solid transparent;
    outline-offset: 2px;
}

/* Icons */
button.icon, a.button.icon {
    background-color: transparent;
    border: 1px solid transparent;
    width: auto;
    height: auto;
}
button.icon svg, a.button.icon svg {
    fill: var(--neutral-500);
    width: 1rem;
    height: 1rem;
}
button.icon:hover svg, a.button.icon:hover svg {
    fill: var(--neutral-900);
}
button.icon:focus-visible, a.button.icon:focus-visible {
    border-color: var(--brand-primary);
    outline: 1px solid transparent;
    outline-offset: 2px;
}

/* Collapse */
button.collapse {
    background-color: transparent;
    border: 0.063rem solid transparent;
    color: var(--neutral-900);
    font-weight: var(--font-weight-bold);
    justify-content: space-between;
    text-align: left;
    gap: 0.75rem;
    margin: 0.875rem 0;
}
button.collapse:focus-visible {
    border-color: var(--brand-primary);
    outline: 1px solid transparent;
    outline-offset: 2px;
}
button.collapse::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='%23212529' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.1867 5.10005L8.93699 11.3468L2.78249 5.10005C2.70862 5.03461 2.62258 4.98435 2.52929 4.95215C2.436 4.91995 2.33728 4.90645 2.23877 4.9124C2.14026 4.91835 2.04389 4.94366 1.95515 4.98685C1.86642 5.03005 1.78706 5.09031 1.72161 5.16418C1.65617 5.23805 1.60591 5.32408 1.57371 5.41737C1.54151 5.51067 1.52801 5.60939 1.53396 5.7079C1.54599 5.90685 1.63655 6.09288 1.78574 6.22505L8.46824 12.9376C8.50355 12.9629 8.54123 12.9847 8.58074 13.0028C8.65584 13.0656 8.74989 13.1012 8.84774 13.1041C8.89404 13.1148 8.94125 13.121 8.98874 13.1228C9.03623 13.1182 9.08319 13.1092 9.12899 13.0958C9.17605 13.0887 9.22227 13.0769 9.26699 13.0606C9.31207 13.0368 9.35455 13.0084 9.39374 12.9758C9.43002 12.9559 9.46463 12.933 9.49724 12.9076L16.2472 6.15755C16.3748 6.01449 16.4427 5.82803 16.4371 5.63646C16.4314 5.44489 16.3527 5.26274 16.217 5.12742C16.0812 4.99209 15.8989 4.91385 15.7073 4.90876C15.5157 4.90367 15.3294 4.97212 15.1867 5.10005Z' /%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    display: block;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    transition: all .25s linear;
}
button.collapse[aria-expanded='true']::after {
    transform: scaleY(-1);
}


/* ========================================
    📜 HEADER
======================================== */

header {
    background-color: #FFF;
    border-width: 0.625rem 0 0;
    border-style: solid;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1.125rem 0;
    position: fixed;
    width: 100%;
    z-index: 1;
}
header a {
    line-height: 0;
}
header nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    padding: 0 1rem;
}
header .container {
    max-width: 72.375rem;
}
header nav > a {
    max-width: calc(100% - (1.625rem + 1.625rem + (1.875rem * 2)));
}
header nav > a img {
    max-height: 2.8125rem;
}
header nav ul {
    display: flex;
    flex-direction: row;
    column-gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
header nav ul li a {
    color: var(--neutral-900);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: bold;
}
header nav .menu {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    position: absolute;
    bottom: -1.125rem;
    left: 0;
    width: 100%;
}
header nav .dropdown {
    max-height: 0;
    height: auto;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0px;
    background: #FFF;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px;
}
header nav .dropdown ul {
    display: flex;
    flex-direction: column;
    column-gap: 2rem;
    row-gap: 0.5rem;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    margin: 1rem;
}
header nav .dropdown ul li {
    padding: 0.625rem 0;
}
header nav .dropdown ul li.bg {
    background: #d9e3f7;
    padding: 0.625rem 0.75rem;
    border-radius: 0.3125rem;
}
.hamburger {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    padding: 0 0.25rem;
    transform: translate(-0.25rem, -50%);
    background-color: transparent;
}
.hamburger > span {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hamburger > span span {
    width: 1.625rem;
    height: 0.25rem;
    background-color: #262626;
}
.hamburger:active, .hamburger:hover, .hamburger:focus {
    background-color: var(--neutral-50);
}

@media (min-width: 768px) {
    header {
        border-width: 1.25rem 0 0;
        padding: 1rem 0;
    }
    header nav {
        justify-content: space-between;
    }
    header button.hamburger {
        display: none;
    }
    header nav > a {
        max-width: none;
    }
    header nav .menu {
        display: flex;
        gap: 1.25rem;
        align-items: center;
        position: static;
        width: auto;
    }
    header nav .dropdown {
        position: static;
        box-shadow: none;
        max-height: 100%;
        overflow: visible;
    }
    header nav .dropdown.hidden {
        display: block !important;
    }
    header nav .dropdown ul {
        flex-direction: row;
        margin: 0;
    }
    header nav .dropdown.not-visible {
        display: block;
    }
}

header.CAV {
    border-color: var(--brand-CAV);
}
header.CEQ {
    border-color: var(--brand-CEQ);
}
header.CLP {
    border-color: var(--brand-CLP);
}
header.CLX {
    border-color: var(--brand-CLX);
}
header.CNO {
    border-color: var(--brand-CNO);
}
header.CQE {
    border-color: var(--brand-CQE);
}
header.CQF {
    border-color: var(--brand-CQF);
}
header.CQG {
    border-color: var(--brand-CQG);
}
header.CQM {
    border-color: var(--brand-CQM);
}
header.CQP {
    border-color: var(--brand-CQP);
}
header.CQS {
    border-color: var(--brand-CQS);
}
header.CSD {
    border-color: var(--brand-CSD);
}
header.CSJ {
    border-color: var(--brand-CSJ);
}
header.CSX {
    border-color: var(--brand-CSX);
}
header.JSH {
    border-color: var(--brand-JSH);
}
header.STL {
    border-color: var(--brand-STL);
}
header.HCF {
    border-color: var(--brand-HCF);
}
header.HCG {
    border-color: var(--brand-HCG);
}
header.HPO {
    border-color: var(--brand-HPO);
}
header.HCS {
    border-color: var(--brand-HCS);
}


/* ========================================
    🦶 FOOTER
======================================== */

footer {
    background-color: #2E2E2E;
    color: #fff;
    padding: 2rem 0;
    width: 100%;
}
footer .container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
    max-width: 72.375rem;
}
footer .container > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 33.75rem;
}
footer nav {
    max-width: 350px;
    width: 100%;
}
footer nav ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 1.25rem;
}
footer nav ul li {
    font-size: 0.875rem;
    width: calc(50% - 1rem);
}
footer nav ul li a:hover {
    color: inherit;
}
footer p {
    margin-bottom: 0;
}

@media (min-width: 460px) {
    footer nav ul {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    footer .container {
        flex-direction: row;
    }
    footer nav ul {
        justify-content: end;
    }
}


/* ========================================
    🔄 LOADING
======================================== */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.loading::before {
    content: '';
    display: block;
    width: 60px;
    aspect-ratio: 2;
    background: 
        no-repeat radial-gradient(circle closest-side, rgba(46, 46, 46, 1) 90%, rgba(46, 46, 46, 0)) 0%   50%,
        no-repeat radial-gradient(circle closest-side, rgba(46, 46, 46, 1) 90%, rgba(46, 46, 46, 0)) 50%  50%,
        no-repeat radial-gradient(circle closest-side, rgba(46, 46, 46, 1) 90%, rgba(46, 46, 46, 0)) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: bounce 1s infinite linear;
    margin: 0 auto 1rem auto;
}


/* ========================================
    📝 CHECKOUT
======================================== */

/* Layout */
form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
}
.firstLastName {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.firstLastName > div {
    flex: 1;
}
.cityStatePostal {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.cityStatePostal > div:first-of-type {
    flex: 0 0 auto;
    width: 100%;
}
.cityStatePostal > div:nth-of-type(2) {
    flex: 0 0 auto;
    width: 56%;
}
.cityStatePostal > div:last-of-type {
    flex: 1 0 0%;
}
.cityStatePostal[data-state="hide"] > div:first-of-type {
    width: 60%;
}
.cityStatePostal[data-state="hide"] > div:nth-of-type(2) {
    display: none;
}
.form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-fields + .selection-control {
    background-color: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    border-radius: var(--field-border-radius);
    font-size: 0.875rem;
    padding: 0.625rem;
    margin-top: 1.5rem;
}
@media (min-width: 460px) {
    .firstLastName {
        flex-direction: row;
    }
}
@media (min-width: 768px) {
    .firstLastName {
        flex-direction: column;
    }
}
@media (min-width: 1024px) {
    .firstLastName {
        flex-direction: row;
    }
    .cityStatePostal > div:first-of-type {
        flex: 0 0 auto;
        width: 40%;
    }
    .cityStatePostal > div:nth-of-type(2) {
        flex: 0 0 auto;
        width: 32%;
    }
}

/* Fields */
label {
    display: block;
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: inherit;
    line-height: 0.875; /* To match payment capture */
    margin-bottom: 0.3125rem; /* To match payment capture */
    transform: translate3d( 0, 0, 0); /* To fix anti-alias issue */
    width: 100%;
}
input[type=text], input[type=email], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0.063rem solid var(--neutral-100);
    border-radius: var(--field-border-radius);
    font-family: var(--font-family);
    font-size: inherit;
    line-height: 1.5;
    padding: calc(((var(--field-height) - (var(--font-size) * 1.5))  / 2) - 0.063rem) 0.75rem;
    transition-duration: 150ms;
    transition-property: border-color;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    width: 100%;
}
input[type=text]:disabled, input[type=email]:disabled, textarea:disabled, select:disabled, input[type=text]:read-only, input[type=email]:read-only {
    background-color: var(--neutral-25);
    cursor: not-allowed;
}
select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}
input[type='text']:focus, input[type='email']:focus, textarea:focus, select:focus {
    border-color: var(--brand-primary);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Checkboxes & Radios */
.selection-control {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.selection-control label {
    color: var(--neutral-900);
    cursor: pointer;
    letter-spacing: normal;
    line-height: 1.2;
    margin-bottom: 0;
}
.selection-control label a {
    color: var(--brand-primary);
}
input[type='checkbox'], input[type='radio'] {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #fff;
    border: 1px solid var(--neutral-500);
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type='radio'] {
    border-radius: 999px;
}
input[type='checkbox']:checked, input[type='radio']:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
input[type='checkbox']:focus-visible, input[type='radio']:focus-visible {
    outline: 1px solid var(--brand-primary);
    outline-offset: 2px;
}
input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
input[type='radio']:checked {
    background: radial-gradient(var(--brand-primary) 0%, var(--brand-primary) 40%, transparent 50%, transparent);
}

/* Offers */
.checkout__form__offers > fieldset.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
    height: 20rem;
}
.checkout__form__offers > fieldset.loading::before {
    content: '';
    width: 3rem;
    height: 3rem;
    border: 0.3125rem solid var(--brand-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}
.checkout__form__offers > fieldset.loading::after {
    content: 'Hang tight! We\'re loading the latest offers for you...';
}
.checkout__form__offers > ul {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    justify-content: center;
}
.checkout__form__offers ul li.item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.checkout__form__offers ul li.item label {
    cursor: pointer;
    line-height: var(--line-height);
    margin: 0;
}
.checkout__form__offers ul li.item label s {
    color: var(--neutral-600);
}
.checkout__form__offers ul li.item label s:not(:empty) {
    padding-right: 6px;
}
p[data-description] {
    font-size: 0.875rem;
    margin: 1.25rem 0 0;
}

/* Delivery */
.checkout__form__delivery {
    margin-top: -0.5rem;
}
.checkout__form__delivery-fields {
    height: auto;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    padding-top: 2rem;
}
.checkout__form__delivery .selection-control {
    background-color: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    border-radius: var(--field-border-radius);
    font-size: 0.875rem;
    padding: 0.625rem;
}

/* Terms */
.checkout__form__terms {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}
.checkout__form__terms .container {
    max-width: 33.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2.125rem;
}
.checkout__form__autorenewal {
    border: 1px solid var(--brand-primary);
    border-radius: 0.375rem;
    padding: 0.625rem;
    background-color: var(--brand-muted);
}
.checkout__form__autorenewal h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.checkout__form__autorenewal p {
    display: inline;
    font-weight: var(--font-weight-bold);
}
.checkout__form__autorenewal .selection-control {
    background-color: #fff;
    border: 1px solid var(--brand-primary);
    border-radius: 0.375rem;
    padding: 0.625rem;
    margin: 1rem 0 0;
}
.checkout__form__terms ul {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
}
.checkout__form__terms ul div {
    display: flex;
    justify-content: space-between;
}
.checkout__form__terms ul div:last-of-type {
    border-top: 1px solid var(--neutral-900);
    font-weight: var(--font-weight-bold);
    padding-top: 0.875rem;
}

/* Description List */
dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
dl div {
    display: flex;
    justify-content: space-between;
}
dl div:last-of-type {
    border-top: 1px solid var(--neutral-100);
    font-weight: var(--font-weight-bold);
    padding-top: 1rem;
}
dl div dt {
    display: flex;
    gap: 0.5rem;
}
dd.calculating::after {
    content: '';
    color: inherit;
    animation: dots 2s steps(4, end) infinite;
    text-align: left;
    width: 1rem;
}
.skeleton {
    background: var(--neutral-200);
    border-radius: 0.25rem;
    animation: pulse 1.5s infinite ease-in-out;
    min-width: 2.5rem;
}


/* ========================================
    🎁 GIFTS
======================================== */

/* Layout */
.checkout__form__gifts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.gift-entries {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.gift-entry {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}
.gift-entry:not(:first-of-type) {
    padding-top: 2rem;
    border-top: 1px solid var(--neutral-50);
}

/* Offers */
.checkout__form__gifts > ul {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    justify-content: center;
}
.checkout__form__gifts ul li.item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.checkout__form__gifts ul li.item label {
    cursor: pointer;
    line-height: var(--line-height);
    margin: 0;
}
.checkout__form__gifts ul li.item label s {
    color: var(--neutral-600);
}

/* Buttons */
.checkout__form__gifts button[name="add"] {
    font-size: calc(var(--font-size) - 2px);
}
.checkout__form__gifts button[name="delete"] {
    border-color: var(--neutral-100);
    color: var(--neutral-800);
    font-size: calc(var(--font-size) - 2px);
    gap: 0.125rem;
    width: 6rem;
    position: absolute;
    top: 2rem;
    right: 0;
}
.checkout__form__gifts button[name="delete"]::before {
    content: '';
    background-repeat: no-repeat;
    background-color: var(--neutral-900);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0'%3E%3C/path%3E%3C/svg%3E");
    width: 1.25rem;
    height: 1.25rem;
    transition: background-color .2s ease-in-out;
}
.checkout__form__gifts button[name="delete"]:hover {
    background-color: var(--neutral-25);
    color: var(--brand-primary);
}
.checkout__form__gifts button[name="delete"]:hover::before {
    background-color: var(--brand-primary);
}
.checkout__form__gifts .gift-entry:first-of-type button[name="delete"] {
    display: none;
}


/* ========================================
    🧩 COMPONENTS
======================================== */

/* Tooltips */
.tooltip {
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.6875rem 0.875rem, rgba(0, 0, 0, 0.12) 0px 0.25rem 1.25rem;
    color: var(--neutral-900);
    font-size: 0.75rem;
    opacity: 1;
    padding: 0.75rem;
    position: absolute;
    transition: visibility 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
    visibility: visible;
    width: 100%;
    max-width: 280px;
    height: auto;
    z-index: 1000;
    --move-tooltip: calc(-100% - (1.25rem + (0.5624rem * 2)));
    transform: translateY(var(--move-tooltip));
}
.tooltip::after {
    border-left: 0.375rem solid transparent;
    border-right: 0.375rem solid transparent;
    border-top: 0.5625rem solid #fff;
    bottom: -0.5625rem;
    content: "";
    height: 0px;
    position: absolute;
    right: 1.375rem;
    width: 0px;
}

/* Promo Code */
#promo__lookup {
    border-top: 1px solid var(--neutral-100);
    border-bottom: 1px solid var(--neutral-100);
}
.promo__lookup-form {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.promo__lookup-form > div {
    display: flex;
    column-gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.promo__lookup-form > div button {
    width: 24%;
}
.promo__lookup-form > div input[type=text] {
    flex: 1 0 0%;
}
.promo__lookup-form div.error {
    width: 100%;
}
.promo__lookup-form > div + .valid-code {
    background-color: var(--neutral-50);
    display: inline-flex;
    align-items: center;
    border-radius: var(--field-border-radius);
    gap: 0.25rem;
    color: var(--neutral-500);
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    padding: 0.25rem 0.625rem;
    text-transform: uppercase;
}
.promo__lookup-form > div + .valid-code .tags {
    -webkit-mask: url("data:image/svg+xml,%3Csvg role='img' width='21' height='21' viewBox='0 0 21 21' fill='%23717171' xmlns='http://www.w3.org/2000/svg' aria-describedby='svg-tags'%3E%3Cpath d='M14.6705 9.47713L9.70451 4.51115C9.49353 4.30017 9.20739 4.18164 8.90902 4.18164H4.125C3.50367 4.18164 3 4.68531 3 5.30664V10.0907C3 10.389 3.11853 10.6752 3.32951 10.8861L8.29549 15.8521C8.73481 16.2915 9.44712 16.2915 9.88648 15.8521L14.6705 11.0681C15.1098 10.6288 15.1098 9.91647 14.6705 9.47713ZM5.625 7.93164C5.00367 7.93164 4.5 7.42797 4.5 6.80664C4.5 6.18531 5.00367 5.68164 5.625 5.68164C6.24633 5.68164 6.75 6.18531 6.75 6.80664C6.75 7.42797 6.24633 7.93164 5.625 7.93164ZM17.6705 11.0681L12.8865 15.8521C12.4471 16.2915 11.7348 16.2915 11.2955 15.8521L11.2871 15.8437L15.3666 11.7642C15.765 11.3658 15.9844 10.8361 15.9844 10.2726C15.9844 9.70919 15.765 9.17948 15.3666 8.78106L10.7671 4.18164H11.909C12.2074 4.18164 12.4935 4.30017 12.7045 4.51115L17.6705 9.47713C18.1098 9.91647 18.1098 10.6288 17.6705 11.0681Z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg role='img' width='21' height='21' viewBox='0 0 21 21' fill='%23717171' xmlns='http://www.w3.org/2000/svg' aria-describedby='svg-tags'%3E%3Cpath d='M14.6705 9.47713L9.70451 4.51115C9.49353 4.30017 9.20739 4.18164 8.90902 4.18164H4.125C3.50367 4.18164 3 4.68531 3 5.30664V10.0907C3 10.389 3.11853 10.6752 3.32951 10.8861L8.29549 15.8521C8.73481 16.2915 9.44712 16.2915 9.88648 15.8521L14.6705 11.0681C15.1098 10.6288 15.1098 9.91647 14.6705 9.47713ZM5.625 7.93164C5.00367 7.93164 4.5 7.42797 4.5 6.80664C4.5 6.18531 5.00367 5.68164 5.625 5.68164C6.24633 5.68164 6.75 6.18531 6.75 6.80664C6.75 7.42797 6.24633 7.93164 5.625 7.93164ZM17.6705 11.0681L12.8865 15.8521C12.4471 16.2915 11.7348 16.2915 11.2955 15.8521L11.2871 15.8437L15.3666 11.7642C15.765 11.3658 15.9844 10.8361 15.9844 10.2726C15.9844 9.70919 15.765 9.17948 15.3666 8.78106L10.7671 4.18164H11.909C12.2074 4.18164 12.4935 4.30017 12.7045 4.51115L17.6705 9.47713C18.1098 9.91647 18.1098 10.6288 17.6705 11.0681Z'/%3E%3C/svg%3E") no-repeat center;
    background-color: var(--neutral-500);
    height: 1.25rem;
    width: 1.25rem;
}
.promo__lookup-form > div + .valid-code button.icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg role='img' width='21' height='21' viewBox='0 0 21 21' fill='%23717171' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.78785 6.13144C6.6138 6.13144 6.44688 6.20058 6.32381 6.32365C6.20074 6.44672 6.1316 6.61364 6.1316 6.78769C6.1316 6.96174 6.20074 7.12866 6.32381 7.25173L9.57208 10.5L6.32381 13.7483C6.20074 13.8713 6.1316 14.0383 6.1316 14.2123C6.1316 14.3864 6.20074 14.5533 6.32381 14.6763C6.44688 14.7994 6.6138 14.8686 6.78785 14.8686C6.9619 14.8686 7.12882 14.7994 7.25189 14.6763L10.5002 11.4281L13.7484 14.6763C13.8715 14.7994 14.0384 14.8686 14.2125 14.8686C14.3865 14.8686 14.5534 14.7994 14.6765 14.6763C14.7996 14.5533 14.8687 14.3864 14.8687 14.2123C14.8687 14.0383 14.7996 13.8713 14.6765 13.7483L11.4282 10.5L14.6765 7.25173C14.7996 7.12866 14.8687 6.96174 14.8687 6.78769C14.8687 6.61364 14.7996 6.44672 14.6765 6.32365C14.5534 6.20058 14.3865 6.13144 14.2125 6.13144C14.0384 6.13144 13.8715 6.20058 13.7484 6.32365L10.5002 9.57192L7.25189 6.32365C7.12882 6.20058 6.9619 6.13144 6.78785 6.13144Z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg role='img' width='21' height='21' viewBox='0 0 21 21' fill='%23717171' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.78785 6.13144C6.6138 6.13144 6.44688 6.20058 6.32381 6.32365C6.20074 6.44672 6.1316 6.61364 6.1316 6.78769C6.1316 6.96174 6.20074 7.12866 6.32381 7.25173L9.57208 10.5L6.32381 13.7483C6.20074 13.8713 6.1316 14.0383 6.1316 14.2123C6.1316 14.3864 6.20074 14.5533 6.32381 14.6763C6.44688 14.7994 6.6138 14.8686 6.78785 14.8686C6.9619 14.8686 7.12882 14.7994 7.25189 14.6763L10.5002 11.4281L13.7484 14.6763C13.8715 14.7994 14.0384 14.8686 14.2125 14.8686C14.3865 14.8686 14.5534 14.7994 14.6765 14.6763C14.7996 14.5533 14.8687 14.3864 14.8687 14.2123C14.8687 14.0383 14.7996 13.8713 14.6765 13.7483L11.4282 10.5L14.6765 7.25173C14.7996 7.12866 14.8687 6.96174 14.8687 6.78769C14.8687 6.61364 14.7996 6.44672 14.6765 6.32365C14.5534 6.20058 14.3865 6.13144 14.2125 6.13144C14.0384 6.13144 13.8715 6.20058 13.7484 6.32365L10.5002 9.57192L7.25189 6.32365C7.12882 6.20058 6.9619 6.13144 6.78785 6.13144Z'/%3E%3C/svg%3E") no-repeat center;
    background-color: var(--neutral-500);
    height: 1.3125rem;
    width: 1.3125rem;
}
.promo__lookup-form > div + .valid-code button.icon:hover {
    background-color: var(--neutral-900);
}
.promo__lookup-form input[type=text]:disabled + button + div.error, .promo__lookup-form input[aria-invalid="false"] + button + div.error {
    display: none;
}

/* ========================================
    ⚠️ ERRORS
======================================== */

#errors {
    background-color: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(var(--font-size) - 2px);
    position: fixed;
    color: #991b1b;
    bottom: 60px;
    left: 50%;
    width: 100%;
    max-width: 640px;
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    animation-name: floatUp;
    animation-duration: .75s;
    animation-fill-mode: both;
    z-index: 999;
    gap: 2rem;
    line-height: 1.5;
}
#errors svg {
    fill: #fff;
    width: 0.875rem;
}
#errors button {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 329.26933 329' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0' fill='%23991b1b'%3E%3C/path%3E%3C/svg%3E");
    background-size: 0.75rem 0.75rem;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid transparent;
    padding: 0.25rem;
    margin-right: -0.5rem;
    height: 2rem;
    width: 2rem;
}
#errors button:hover {
    background-color: #fee2e2;
}
#errors button:focus-visible {
    outline: 1px solid #991b1b;
    outline-offset: 0;
}
div.error {
    color: rgb(220, 53, 69);
    font-size: 0.8125rem;
    line-height: 1.2; /* To match payment capture */
    padding-top: 0.5rem; /* To match payment capture */
    transform: translate3d( 0, 0, 0); /* To fix anti-alias issue */
}
.validated input[aria-describedby]:invalid, .validated select[aria-describedby]:invalid, .validated textarea[aria-describedby]:invalid, .validated input:valid.invalid {
    border-color: rgb(220, 53, 69);
    -moz-box-shadow: none;
}
.validated input:invalid:focus-visible, .validated select:invalid:focus-visible, .validated textarea:invalid:focus-visible {
    border-color: var(--brand-primary);
    -moz-box-shadow: none;
}
.validated input:invalid + div.error, .validated select:invalid + div.error, .validated textarea:invalid + div.error, .validated input:valid.invalid + div.error {
    display: block;
}
.validated input:valid + div.error, .validated select:valid + div.error, .validated textarea:valid + div.error, .contains-tooltip:has(input:valid) + div.error, .contains-tooltip:has(select:valid) + div.error {
    display: none;
}
.validated:has(fieldset[aria-invalid="false"]) .error {
    display: none;
}
.validated .err-out:has(input:invalid) {
    border-color: rgb(220, 53, 69);
}
.validated .err-out:has(input[aria-invalid="false"]) + .error {
    display: none;
}


/* ========================================
    🎉 CONFIRMATION 
======================================== */

.confirmation hr {
    border: none;
    border-top: 1px solid var(--neutral-50);
    width: 100%;
}
.confirmation dl {
    background: var(--neutral-25);
    padding: 1.5rem;
    border-radius: var(--field-border-radius);
}
.confirmation .details {
    display: flex;
    column-gap: 5rem;
    row-gap: 2rem;
    flex-wrap: wrap;
}