:root {
    --canvas: #fcf7f6;
    --paper: #ffffff;
    --ink: #33141f;
    --ink-rgb: 51, 20, 31;
    --ink-soft: #4d2833;
    --muted: #7a5a64;
    --placeholder: #8a6c76;
    --field-line: #a88690;
    --line: #f0e1e1;
    --line-strong: #e3c9cb;
    --accent: #a01848;
    --accent-rgb: 160, 24, 72;
    --accent-deep: #7e1038;
    --accent-deep-rgb: 126, 16, 56;
    --accent-soft: #fbe7ea;
    --accent-tint: #fef8f8;
    --signal: #f7cdd1;
    --signal-hover: #f9dadd;
    --signal-active: #f2bcc2;
    --signal-deep: #2b7a5c;
    --success-ink: #24704f;
    --success-ink-rgb: 36, 112, 79;
    --cover: #fad1cf;
    --cover-ratio: 1 / 1;
    --cover-position: center;
    --hero-bg: #f9dcd9;
    --hero-ink: var(--ink);
    --hero-lead: #5b3642;
    --swatch-1: #f1d2cc;
    --swatch-2: #e5a3a8;
    --swatch-3: #c44468;
    --swatch-4: #a01848;
    --swatch-5: #5c1028;
    --display-weight: 400;
    --nail-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
}

:focus-visible {
    outline-color: var(--accent);
}

.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.btn-close:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

@media (hover: hover) {
    .card-overlay .btn:focus-visible,
    .course-card .card-fav-btn:focus-visible {
        outline-color: #fff;
    }
}

.course-card .card-fav-btn:focus-visible {
    background: #fff;
}

.site-footer :focus-visible {
    outline-color: var(--signal);
}

.course-card-media:focus-visible {
    outline-offset: -3px;
}

.form-control,
.form-select,
.form-check-input,
.site-search {
    border-color: var(--field-line);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.site-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.site-search .form-control:focus {
    box-shadow: none;
}

.legal-doc h1 {
    font-weight: var(--display-weight);
}

.btn-signal {
    --bs-btn-color: var(--on-accent);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-deep);
    --bs-btn-hover-border-color: var(--accent-deep);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent-deep);
    --bs-btn-active-border-color: var(--accent-deep);
}

.btn-signal:hover {
    box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb), .7);
}

.brand-mark-nail {
    fill: var(--accent);
}

.brand-mark-tip {
    fill: #f4bcc3;
}

.brand-mark-gloss {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .7;
}

.site-brand--footer .brand-mark-nail {
    fill: var(--signal);
}

.site-brand--footer .brand-mark-tip {
    fill: #fff;
}

.hero::before {
    background-image: radial-gradient(circle at 78% 58%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 42%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.hero-title {
    text-wrap: balance;
    font-size: clamp(1.875rem, .95rem + 3vw, 3.375rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.hero .btn:focus-visible {
    outline-color: var(--accent);
}

.tip-fan {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-inline: auto;
    overflow: visible;
}

.tip-fan-tip {
    transform-box: view-box;
    transform-origin: 260px 332px;
    transform: rotate(var(--a));
    animation: tip-fan-open 1.15s var(--ease-io) calc(.2s + var(--i) * 45ms) both;
}

.tip-fan-stick {
    fill: none;
    stroke: #e2b4b7;
    stroke-width: 4;
    stroke-linecap: round;
}

.tip-fan-body {
    fill: var(--c);
    stroke: rgba(var(--ink-rgb), .14);
    stroke-width: 1;
}

.tip-fan-french {
    fill: #fffdfc;
}

.tip-fan-gloss {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    opacity: .6;
    animation: draw-line .7s var(--ease-out) calc(1.3s + var(--i) * 70ms) both;
}

.tip-fan-rivet {
    fill: var(--ink);
}

.tip-fan-rivet-core {
    fill: var(--signal);
}

@keyframes tip-fan-open {
    from {
        transform: rotate(0deg);
    }
}

@media (max-width: 991.98px) {
    .tip-fan {
        max-width: 360px;
    }
}

@media (max-width: 575.98px) {
    .tip-fan {
        max-width: 300px;
    }
}

.category-row-name {
    font-weight: 400;
}

.price {
    font-weight: 500;
}

.course-card-category::before {
    width: 7px;
    height: 10px;
    border-radius: var(--nail-radius);
}

.category-swatch {
    width: 16px;
    height: 23px;
    border-radius: var(--nail-radius);
}

.category-row:hover .category-swatch:not(:has(img)),
.category-row:focus-visible .category-swatch:not(:has(img)) {
    transform: rotate(-14deg);
}

.course-description h2::before,
.course-description h3::before {
    width: 11px;
    height: 16px;
    border: 0;
    border-radius: var(--nail-radius);
    background: var(--accent);
}

.course-description ul > li::before {
    top: .58em;
    width: 7px;
    height: 10px;
    border-radius: var(--nail-radius);
}

.course-description ul > li.desc-lead::before {
    top: calc(1rem + .58em);
}

.course-cover {
    aspect-ratio: 4 / 3;
}

.course-cover img {
    height: 100%;
    object-fit: scale-down;
}

.course-cover-placeholder {
    aspect-ratio: auto;
    height: 100%;
}

.autocomplete-item img {
    width: 44px;
    height: 44px;
}

.cart-item {
    grid-template-columns: auto 96px minmax(0, 1fr) auto;
}

.order-line {
    grid-template-columns: 72px minmax(0, 1fr) auto;
}

.order-thumb {
    width: 56px;
    height: 56px;
}

@media (max-width: 575.98px) {
    .cart-item {
        grid-template-columns: auto 72px minmax(0, 1fr);
    }

    .order-line {
        grid-template-columns: 64px minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tip-fan-tip,
    .tip-fan-gloss {
        animation: none !important;
    }

    .tip-fan-gloss {
        stroke-dashoffset: 0;
    }
}