:root {
    --primary-color: #e82118;
    --secondary-color: #ffcc07;
    --text-dark: #203263;
    --text-light: #666;
    --border-color: #e5e7eb;
    --bg-light: #f9fafb;
    --success-color: #10b981;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: all .3s;
}

html {
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body {
    background: #fff;
    color: var(--text-dark);
}

.admin-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 82% 8%, rgba(255, 204, 7, .16), transparent 28%),
        linear-gradient(135deg, #f7f8fc 0%, #eef2f8 100%);
}

.admin-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 290px minmax(0, 1fr);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    padding: 1.2rem;
    flex-direction: column;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 204, 7, .24), transparent 28%),
        linear-gradient(180deg, #172650, #0f1730);
    color: #fff;
}

.admin-sidebar__brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem;
    border-radius: 22px;
    color: #fff;
}

.admin-sidebar__brand > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 12px 30px rgba(232, 33, 24, .24);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 900;
}

.admin-sidebar__brand strong,
.admin-sidebar__brand small {
    display: block;
}

.admin-sidebar__brand strong {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.admin-sidebar__brand small {
    margin-top: .12rem;
    color: rgba(255, 255, 255, .62);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-sidebar__nav {
    display: grid;
    gap: .45rem;
    margin-top: 1.5rem;
}

.admin-sidebar__link {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: .75rem;
    padding: .78rem .9rem;
    border: 1px solid transparent;
    border-radius: 16px;
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    font-weight: 850;
    transition: var(--transition);
}

.admin-sidebar__link i {
    width: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.admin-sidebar__link:hover,
.admin-sidebar__link.is-active {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.admin-sidebar__link.is-disabled {
    cursor: default;
    opacity: .52;
}

.admin-sidebar__link em {
    margin-left: auto;
    color: rgba(255, 255, 255, .44);
    font-size: .62rem;
    font-style: normal;
    text-transform: uppercase;
}

.admin-sidebar__group {
    min-width: 0;
}

.admin-sidebar__group-toggle {
    width: 100%;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.admin-sidebar__group-toggle::-webkit-details-marker {
    display: none;
}

.admin-sidebar__group-toggle::marker {
    content: "";
}

.admin-sidebar__group-toggle .admin-sidebar__group-chevron {
    width: auto;
    margin-left: auto;
    color: rgba(255, 255, 255, .42);
    font-size: .65rem;
    transition: transform .25s ease, color .25s ease;
}

.admin-sidebar__group[open] .admin-sidebar__group-chevron {
    color: var(--secondary-color);
    transform: rotate(90deg);
}

.admin-sidebar__submenu {
    display: grid;
    gap: .25rem;
    margin: .35rem 0 .15rem 1.55rem;
    padding: .25rem 0 .25rem .7rem;
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.admin-sidebar__sublink {
    display: flex;
    min-height: 39px;
    min-width: 0;
    align-items: center;
    gap: .65rem;
    padding: .58rem .7rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, .58);
    font-size: .76rem;
    font-weight: 800;
    transition: var(--transition);
}

.admin-sidebar__sublink i {
    width: 17px;
    color: rgba(255, 204, 7, .68);
    font-size: .72rem;
    text-align: center;
}

.admin-sidebar__sublink:hover,
.admin-sidebar__sublink.is-active {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.admin-sidebar__sublink.is-active {
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.admin-sidebar__sublink.is-disabled {
    cursor: default;
    opacity: .46;
}

.admin-sidebar__sublink em {
    margin-left: auto;
    color: rgba(255, 255, 255, .42);
    font-size: .55rem;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-sidebar__footer {
    display: grid;
    gap: .55rem;
    margin-top: auto;
}

.admin-sidebar__footer a,
.admin-sidebar__footer button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .65rem;
    padding: .8rem .9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
    font-weight: 850;
    transition: var(--transition);
}

.admin-sidebar__footer a:hover,
.admin-sidebar__footer button:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.admin-main {
    min-width: 0;
    padding: 1.2rem clamp(1rem, 3vw, 2.2rem) 2.2rem;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1rem;
    border: 1px solid rgba(229, 231, 235, .88);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 40px rgba(32, 50, 99, .08);
    backdrop-filter: blur(14px);
}

.admin-topbar span,
.admin-page-heading span,
.admin-panel__heading span {
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.admin-topbar strong {
    display: block;
    margin-top: .16rem;
    color: var(--text-dark);
    font-weight: 900;
}

.admin-topbar__profile {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem 1rem;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    transition: var(--transition);
}

.admin-topbar__profile:hover {
    background: var(--primary-color);
    transform: translateY(-1px);
}

.admin-dashboard {
    padding-top: clamp(1.4rem, 3vw, 2.4rem);
}

.admin-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.admin-page-heading h1 {
    margin-top: .3rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: .95;
}

.admin-page-heading p {
    max-width: 620px;
    margin-top: .75rem;
    color: var(--text-light);
    font-size: .95rem;
    line-height: 1.6;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.admin-stat-card,
.admin-panel {
    border: 1px solid rgba(229, 231, 235, .88);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 48px rgba(32, 50, 99, .08);
    backdrop-filter: blur(14px);
}

.admin-stat-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    border-radius: 24px;
}

.admin-stat-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 18px;
    font-size: 1.05rem;
}

.admin-stat-card--blue .admin-stat-card__icon {
    background: rgba(32, 50, 99, .1);
    color: var(--text-dark);
}

.admin-stat-card--red .admin-stat-card__icon {
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.admin-stat-card--yellow .admin-stat-card__icon {
    background: rgba(255, 204, 7, .22);
    color: var(--text-dark);
}

.admin-stat-card--green .admin-stat-card__icon {
    background: rgba(16, 185, 129, .12);
    color: var(--success-color);
}

.admin-stat-card small,
.admin-health-list span {
    display: block;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 800;
}

.admin-stat-card strong {
    display: block;
    margin-top: .18rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
    gap: 1rem;
    margin-top: 1rem;
}

.admin-panel {
    padding: 1.2rem;
    border-radius: 26px;
}

.admin-panel__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-panel__heading h2 {
    margin-top: .2rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
}

.admin-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
}

.admin-table__row {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr .8fr .9fr;
    gap: .8rem;
    align-items: center;
    padding: .9rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: .82rem;
}

.admin-table__row:first-child {
    border-top: 0;
}

.admin-table__row--head {
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-table__row strong {
    color: var(--text-dark);
    font-weight: 900;
}

.admin-table__row em {
    width: max-content;
    padding: .34rem .58rem;
    border-radius: 999px;
    background: rgba(255, 204, 7, .2);
    color: var(--text-dark);
    font-size: .68rem;
    font-style: normal;
    font-weight: 900;
}

.admin-empty-state {
    display: grid;
    min-height: 220px;
    place-items: center;
    border: 1px dashed var(--border-color);
    border-radius: 20px;
    color: var(--text-light);
    text-align: center;
}

.admin-empty-state i {
    margin-bottom: .8rem;
    color: rgba(32, 50, 99, .18);
    font-size: 2.4rem;
}

.admin-prices {
    padding-top: clamp(1.4rem, 3vw, 2.4rem);
}

.admin-price-switcher {
    display: inline-flex;
    gap: .35rem;
    padding: .35rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 30px rgba(32, 50, 99, .07);
}

.admin-price-switcher button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: .5rem;
    padding: .65rem .95rem;
    border-radius: 12px;
    color: var(--text-light);
    font-size: .76rem;
    font-weight: 900;
    transition: var(--transition);
}

.admin-price-switcher button.is-active {
    background: var(--text-dark);
    box-shadow: 0 8px 18px rgba(32, 50, 99, .2);
    color: #fff;
}

.admin-price-switcher button.is-active i {
    color: var(--secondary-color);
}

.admin-price-panel {
    margin-top: 1rem;
}

.admin-price-products,
.admin-price-categories {
    display: grid;
    gap: .75rem;
}

.admin-price-product {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 150px 120px 130px minmax(100px, .45fr);
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.admin-price-product.has-error,
.admin-price-category.has-error {
    border-color: rgba(232, 33, 24, .48);
    box-shadow: 0 16px 36px rgba(232, 33, 24, .1);
}

.admin-price-product__identity {
    min-width: 0;
}

.admin-price-product__identity span {
    display: block;
    color: var(--primary-color);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.admin-price-product__identity strong {
    display: block;
    overflow: hidden;
    margin-top: .18rem;
    color: var(--text-dark);
    font-size: .84rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-price-product__identity small {
    display: block;
    margin-top: .18rem;
    color: var(--text-light);
    font-size: .66rem;
}

.admin-price-field {
    display: grid;
    min-width: 0;
    gap: .35rem;
}

.admin-price-field > span:first-child,
.admin-price-product__total span {
    color: var(--text-light);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-price-input {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-light);
    transition: var(--transition);
}

.admin-price-input:focus-within {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(232, 33, 24, .09);
}

.admin-price-input input {
    width: 100%;
    min-width: 0;
    padding: .65rem .25rem .65rem .75rem;
    outline: none;
    background: transparent;
    color: var(--text-dark);
    font-size: .8rem;
    font-weight: 850;
}

.admin-price-input input:disabled {
    opacity: .55;
}

.admin-price-input em {
    padding: 0 .7rem 0 .35rem;
    color: var(--text-light);
    font-size: .7rem;
    font-style: normal;
    font-weight: 900;
}

.admin-price-product__total {
    display: grid;
    gap: .35rem;
}

.admin-price-product__total strong {
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 950;
}

.admin-price-status {
    min-height: 18px;
    color: var(--text-light);
    font-size: .65rem;
    font-weight: 850;
    text-align: right;
}

.admin-price-status[data-tone="saving"] {
    color: #b07800;
}

.admin-price-status[data-tone="saved"] {
    color: var(--success-color);
}

.admin-price-status[data-tone="error"] {
    color: var(--primary-color);
}

.admin-price-category {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

.admin-price-category summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.admin-price-category summary::-webkit-details-marker {
    display: none;
}

.admin-price-category summary::marker {
    content: "";
}

.admin-price-category__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: rgba(232, 33, 24, .09);
    color: var(--primary-color);
}

.admin-price-category summary strong,
.admin-price-category summary small {
    display: block;
}

.admin-price-category summary strong {
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 900;
}

.admin-price-category summary small {
    margin-top: .18rem;
    color: var(--text-light);
    font-size: .68rem;
}

.admin-price-category__chevron {
    color: var(--text-light);
    font-size: .72rem;
    transition: transform .25s ease;
}

.admin-price-category[open] .admin-price-category__chevron {
    transform: rotate(180deg);
}

.admin-price-category__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border-color);
}

.admin-price-category__editor {
    display: grid;
    grid-template-columns: 170px 140px auto minmax(120px, 1fr);
    align-items: end;
    gap: .75rem;
    padding: 1rem 0;
}

.admin-price-category__editor .admin-price-status {
    align-self: center;
}

.admin-price-category__editor .admin-action-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.admin-price-category__products {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.admin-price-category__product {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    border-top: 1px solid var(--border-color);
    font-size: .7rem;
}

.admin-price-category__product:first-child {
    border-top: 0;
}

.admin-price-category__product > span {
    color: var(--primary-color);
    font-weight: 900;
}

.admin-price-category__product > strong {
    overflow: hidden;
    color: var(--text-dark);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-price-category__product small {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--text-light);
}

.admin-price-category__product small b {
    color: var(--text-dark);
    font-weight: 900;
}

.admin-price-category__product small em {
    padding: .25rem .4rem;
    border-radius: 999px;
    background: rgba(255, 204, 7, .2);
    color: var(--text-dark);
    font-style: normal;
    font-weight: 900;
}

.admin-price-category__empty {
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    color: var(--text-light);
    font-size: .76rem;
    text-align: center;
}

.admin-stock-page {
    padding-top: clamp(1.4rem, 3vw, 2.4rem);
}

.admin-stock-sync i {
    transition: transform .35s ease;
}

.admin-stock-sync:hover i {
    transform: rotate(90deg);
}

.admin-stock-source-form {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 46px;
    padding: .42rem .5rem .42rem .85rem;
    border: 1px solid rgba(32, 50, 99, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(32, 50, 99, .06);
}

.admin-stock-source-form label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-dark);
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
}

.admin-stock-source-form label i {
    color: var(--primary-color);
}

.admin-stock-source-form select {
    min-height: 36px;
    padding: .45rem 2rem .45rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    outline: none;
    background: #fff;
    color: var(--text-dark);
    font-size: .78rem;
    font-weight: 900;
}

.admin-stock-source-form select:focus {
    border-color: rgba(232, 33, 24, .48);
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .08);
}

.admin-stock-source-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(229, 231, 235, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 42px rgba(32, 50, 99, .08);
}

.admin-stock-source-card__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(22, 163, 74, .1);
    color: var(--success-color);
}

.admin-stock-source-card.needs-validation .admin-stock-source-card__icon {
    background: rgba(245, 158, 11, .13);
    color: #b07800;
}

.admin-stock-source-card strong {
    display: block;
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 950;
}

.admin-stock-source-card p {
    margin: .22rem 0 0;
    color: var(--text-light);
    font-size: .78rem;
    line-height: 1.5;
}

.admin-stock-table-panel {
    padding: 0;
    overflow: hidden;
}

.admin-stock-table-scroll {
    overflow-x: auto;
}

.admin-stock-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-stock-table th,
.admin-stock-table td {
    padding: .9rem 1rem;
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.admin-stock-table thead th {
    border-top: 0;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-stock-table th:first-child,
.admin-stock-table td:first-child {
    width: 190px;
}

.admin-stock-table th:last-child,
.admin-stock-table td:last-child {
    width: 220px;
}

.admin-stock-table tbody tr {
    transition: background-color .2s ease, box-shadow .2s ease;
}

.admin-stock-table tbody tr:hover {
    background: rgba(32, 50, 99, .025);
}

.admin-stock-table tbody tr.has-error {
    background: rgba(232, 33, 24, .045);
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.admin-stock-table td {
    color: var(--text-light);
    font-size: .8rem;
}

.admin-stock-table td strong {
    color: var(--text-dark);
    font-size: .84rem;
    font-weight: 900;
}

.admin-stock-reference {
    color: var(--primary-color);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.admin-stock-quantity {
    display: grid;
    grid-template-columns: 100px minmax(80px, 1fr);
    align-items: center;
    gap: .7rem;
}

.admin-stock-quantity input {
    width: 100%;
    min-height: 42px;
    padding: .65rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    outline: none;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 900;
    transition: var(--transition);
}

.admin-stock-quantity input:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(232, 33, 24, .09);
}

.admin-stock-quantity input:disabled {
    cursor: wait;
    opacity: .58;
}

.admin-stock-quantity span {
    color: var(--text-light);
    font-size: .64rem;
    font-weight: 850;
}

.admin-stock-quantity span[data-tone="saving"] {
    color: #b07800;
}

.admin-stock-quantity span[data-tone="saved"] {
    color: var(--success-color);
}

.admin-stock-quantity span[data-tone="error"] {
    color: var(--primary-color);
}

@media (max-width: 1100px) {
    .admin-price-product {
        grid-template-columns: minmax(220px, 1fr) 140px 110px 120px;
    }

    .admin-price-product .admin-price-status {
        grid-column: 1 / -1;
        text-align: left;
    }

    .admin-price-category__editor {
        grid-template-columns: 1fr 1fr auto;
    }

    .admin-price-category__editor .admin-price-status {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (max-width: 700px) {
    .admin-price-switcher {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .admin-price-switcher button {
        justify-content: center;
    }

    .admin-price-product {
        grid-template-columns: 1fr 1fr;
    }

    .admin-price-product__identity,
    .admin-price-product .admin-price-status {
        grid-column: 1 / -1;
    }

    .admin-price-product__total {
        grid-column: 1 / -1;
        padding-top: .2rem;
    }

    .admin-price-category__editor {
        grid-template-columns: 1fr 1fr;
    }

    .admin-price-category__editor .admin-action-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .admin-price-category__product {
        grid-template-columns: 1fr;
        gap: .3rem;
    }

    .admin-price-category__product small {
        flex-wrap: wrap;
    }

    .admin-stock-table {
        min-width: 620px;
    }
}

.admin-health-list {
    display: grid;
    gap: .75rem;
}

.admin-health-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
}

.admin-health-list strong {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 900;
}

.admin-page-heading--actions {
    align-items: center;
}

.admin-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.admin-action-button,
.admin-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 46px;
    padding: .78rem 1.05rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 900;
    transition: var(--transition);
}

.admin-action-button {
    border: 0;
    background: linear-gradient(135deg, var(--primary-color), #ff5b35 55%, var(--secondary-color));
    background-size: 180% 180%;
    color: #fff;
    box-shadow: 0 16px 32px rgba(232, 33, 24, .22);
}

.admin-action-button:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
}

.admin-action-button--wide,
.admin-secondary-button--wide {
    width: 100%;
}

.admin-secondary-button {
    border: 1px solid rgba(32, 50, 99, .12);
    background: rgba(255, 255, 255, .88);
    color: var(--text-dark);
    box-shadow: 0 12px 30px rgba(32, 50, 99, .06);
}

.admin-secondary-button:hover {
    border-color: rgba(232, 33, 24, .24);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.admin-flashes {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}

.admin-flash {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(229, 231, 235, .88);
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    color: var(--text-dark);
    box-shadow: 0 14px 32px rgba(32, 50, 99, .08);
    font-size: .86rem;
    font-weight: 850;
}

.admin-flash i {
    color: var(--primary-color);
}

.admin-flash--success i {
    color: var(--success-color);
}

.admin-search-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .75rem;
    border: 1px solid rgba(229, 231, 235, .88);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 48px rgba(32, 50, 99, .08);
    backdrop-filter: blur(14px);
}

.admin-search-bar label {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: .55rem;
    color: var(--text-dark);
    font-size: .78rem;
    font-weight: 900;
}

.admin-search-bar label i {
    color: var(--primary-color);
}

.admin-search-bar input,
.admin-search-bar select {
    min-width: 0;
    flex: 1;
    padding: .85rem .95rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    color: var(--text-dark);
    font-size: .88rem;
    outline: none;
}

.admin-search-bar select {
    max-width: 220px;
    font-weight: 850;
}

.admin-search-bar input:focus,
.admin-search-bar select:focus {
    border-color: rgba(232, 33, 24, .48);
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .08);
}

.admin-search-bar button,
.admin-search-bar a {
    padding: .78rem 1rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    transition: var(--transition);
}

.admin-search-bar button {
    background: var(--text-dark);
    color: #fff;
}

.admin-search-bar button:hover {
    background: var(--primary-color);
}

.admin-search-bar a {
    color: var(--text-light);
}

.admin-products-panel {
    overflow: hidden;
}

.admin-product-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.admin-product-table__row {
    display: grid;
    grid-template-columns: minmax(250px, 1.5fr) minmax(120px, .72fr) minmax(120px, .72fr) .55fr .45fr .62fr .62fr 110px;
    gap: .85rem;
    align-items: center;
    padding: .85rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: .82rem;
}

.admin-product-table__row:first-child {
    border-top: 0;
}

.admin-product-table__row--head {
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-product-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .8rem;
    color: var(--text-dark);
}

.admin-product-cell strong {
    display: block;
    overflow: hidden;
    color: var(--text-dark);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-product-cell small {
    display: block;
    margin-top: .18rem;
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 800;
}

.admin-product-thumb {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    color: rgba(32, 50, 99, .26);
}

.admin-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-stock,
.admin-product-status {
    width: max-content;
    padding: .38rem .62rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, .12);
    color: var(--success-color);
    font-size: .72rem;
    font-weight: 900;
}

.admin-stock--low {
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.admin-product-status {
    background: rgba(32, 50, 99, .08);
    color: var(--text-dark);
}

.admin-product-status--promo {
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.admin-product-status--new {
    background: rgba(255, 204, 7, .28);
    color: var(--text-dark);
}

.admin-product-status--bestseller {
    background: rgba(16, 185, 129, .12);
    color: var(--success-color);
}

.admin-product-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .38rem;
}

.admin-product-actions a,
.admin-product-actions button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: rgba(32, 50, 99, .06);
    color: var(--text-dark);
    transition: var(--transition);
}

.admin-product-actions a:hover,
.admin-product-actions button:hover {
    background: var(--text-dark);
    color: #fff;
}

.admin-product-actions button:hover {
    background: var(--primary-color);
}

.admin-order-stats {
    margin-bottom: 1rem;
}

.admin-orders-panel,
.admin-order-items-panel {
    overflow: hidden;
}

.admin-order-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.admin-order-table__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.1fr) minmax(130px, .7fr) .55fr .72fr .72fr 80px;
    gap: .85rem;
    align-items: center;
    padding: .9rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: .82rem;
}

.admin-order-table__row:first-child {
    border-top: 0;
}

.admin-order-table__row--head {
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-order-number,
.admin-order-customer {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.admin-order-number strong,
.admin-order-customer strong {
    overflow: hidden;
    color: var(--text-dark);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-order-number small,
.admin-order-customer small {
    overflow: hidden;
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-order-badge {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    padding: .4rem .62rem;
    border-radius: 999px;
    background: rgba(32, 50, 99, .08);
    color: var(--text-dark);
    font-size: .68rem;
    font-weight: 950;
    line-height: 1.1;
}

.admin-order-badge--pending_payment,
.admin-order-badge--payment-pending,
.admin-order-badge--payment-processing {
    background: rgba(255, 204, 7, .26);
    color: var(--text-dark);
}

.admin-order-badge--paid,
.admin-order-badge--delivered,
.admin-order-badge--payment-paid {
    background: rgba(16, 185, 129, .12);
    color: var(--success-color);
}

.admin-order-badge--cancelled,
.admin-order-badge--refunded,
.admin-order-badge--payment-failed,
.admin-order-badge--payment-refunded {
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.admin-customers-panel {
    overflow: hidden;
}

.admin-customer-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.admin-customer-table__row {
    display: grid;
    grid-template-columns: minmax(230px, 1.35fr) minmax(180px, 1fr) .55fr .45fr .62fr .62fr 80px;
    gap: .85rem;
    align-items: center;
    padding: .9rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: .82rem;
}

.admin-customer-table__row:first-child {
    border-top: 0;
}

.admin-customer-table__row--head {
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-customer-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.admin-customer-editor__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}

.admin-customer-form {
    max-width: none;
}

.admin-customer-switches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.admin-customer-switches .admin-field--switch {
    min-height: 54px;
    padding: .85rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-light);
}

.admin-customer-side {
    display: grid;
    gap: 1rem;
}

.admin-customer-profile-card {
    display: grid;
    justify-items: center;
    gap: .55rem;
    text-align: center;
}

.admin-customer-avatar {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
    font-size: 1.6rem;
}

.admin-customer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-customer-profile-card strong {
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 950;
}

.admin-customer-profile-card small {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-customer-profile-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
}

.admin-customer-mini-stats {
    display: grid;
    gap: .65rem;
}

.admin-customer-mini-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem;
    border-radius: 16px;
    background: var(--bg-light);
}

.admin-customer-mini-stats span {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 850;
}

.admin-customer-mini-stats strong {
    color: var(--text-dark);
    font-weight: 950;
}

.admin-customer-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.admin-customer-addresses,
.admin-customer-orders {
    display: grid;
    gap: .7rem;
}

.admin-customer-address,
.admin-customer-order {
    display: grid;
    gap: .2rem;
    padding: .85rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
}

.admin-customer-address strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    color: var(--text-dark);
    font-weight: 950;
}

.admin-customer-address em {
    padding: .18rem .45rem;
    border-radius: 999px;
    background: rgba(255, 204, 7, .28);
    color: var(--text-dark);
    font-size: .62rem;
    font-style: normal;
    font-weight: 900;
}

.admin-customer-address span,
.admin-customer-address small {
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 750;
}

.admin-customer-order {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    color: inherit;
}

.admin-customer-order span {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.admin-customer-order span strong,
.admin-customer-order > strong {
    color: var(--text-dark);
    font-weight: 950;
}

.admin-customer-order small {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 800;
}

.admin-customer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: -0.25rem 0 1rem;
}

.admin-customer-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 950;
    transition: var(--transition);
}

.admin-customer-tabs a:hover,
.admin-customer-tabs a.is-active {
    border-color: rgba(232, 33, 24, .2);
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.admin-crm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1rem;
}

.admin-crm-filters a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .58rem .9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--text-light);
    font-size: .76rem;
    font-weight: 950;
    transition: var(--transition);
}

.admin-crm-filters a:hover,
.admin-crm-filters a.is-active {
    border-color: rgba(232, 33, 24, .22);
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.admin-crm-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.admin-crm-table__row {
    display: grid;
    gap: .85rem;
    align-items: center;
    padding: .9rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: .82rem;
}

.admin-crm-table__row:first-child {
    border-top: 0;
}

.admin-crm-table__row--head {
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-cart-table .admin-crm-table__row {
    grid-template-columns: minmax(190px, 1.1fr) minmax(140px, .7fr) minmax(220px, 1.4fr) 110px minmax(135px, .75fr) minmax(170px, .9fr);
}

.admin-viewer-table .admin-crm-table__row {
    grid-template-columns: minmax(210px, 1.1fr) minmax(260px, 1.5fr) minmax(140px, .75fr) minmax(130px, .7fr) minmax(100px, .55fr);
}

.admin-crm-products,
.admin-crm-date,
.admin-crm-actions,
.admin-crm-path {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.admin-crm-products strong,
.admin-crm-date strong,
.admin-crm-path strong {
    color: var(--text-dark);
    font-weight: 950;
}

.admin-crm-products small,
.admin-crm-date small,
.admin-crm-actions small,
.admin-crm-path small {
    overflow: hidden;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-crm-path strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-crm-muted {
    color: var(--text-light);
    font-size: .74rem;
    font-weight: 850;
}

.admin-crm-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.admin-action-button--small,
.admin-secondary-button--small {
    width: auto;
    min-height: 36px;
    padding: .55rem .8rem;
    border-radius: 999px;
    font-size: .72rem;
}

.admin-secondary-button--danger {
    border-color: rgba(232, 33, 24, .22);
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.admin-secondary-button--danger:hover {
    background: var(--primary-color);
    color: #fff;
}

.admin-viewer-refresh-note {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin-bottom: 1rem;
    padding: .65rem .85rem;
    border: 1px solid rgba(16, 185, 129, .16);
    border-radius: 999px;
    background: rgba(16, 185, 129, .08);
    color: var(--success-color);
    font-size: .78rem;
    font-weight: 900;
}

.admin-viewer-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, .12);
    vertical-align: middle;
}

.admin-emailing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
    gap: 1rem;
    align-items: start;
}

.admin-emailing-form,
.admin-emailing-side {
    display: grid;
    gap: 1rem;
}

.admin-emailing-html-field textarea {
    min-height: 480px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.55;
}

.admin-emailing-warning,
.admin-emailing-sent-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem .95rem;
    border-radius: 18px;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.5;
}

.admin-emailing-warning {
    border: 1px solid rgba(255, 204, 7, .35);
    background: rgba(255, 204, 7, .14);
    color: var(--text-dark);
}

.admin-emailing-warning i {
    color: #d89b00;
}

.admin-emailing-sent-note {
    margin-bottom: 1rem;
    border: 1px solid rgba(16, 185, 129, .18);
    background: rgba(16, 185, 129, .08);
    color: var(--success-color);
}

.admin-emailing-recipient-picker {
    position: relative;
    z-index: 12;
}

.admin-emailing-recipient-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .9rem .95rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    color: var(--text-dark);
    font-size: .88rem;
    font-weight: 900;
    text-align: left;
    transition: var(--transition);
}

.admin-emailing-recipient-toggle:hover,
.admin-emailing-recipient-toggle.is-open {
    border-color: rgba(232, 33, 24, .35);
    box-shadow: 0 12px 30px rgba(32, 50, 99, .08);
}

.admin-emailing-recipient-toggle i:first-child {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.admin-emailing-recipient-toggle i:last-child {
    color: var(--text-light);
    font-size: .78rem;
    transition: transform .2s ease;
}

.admin-emailing-recipient-toggle.is-open i:last-child {
    transform: rotate(180deg);
}

.admin-emailing-recipient-toggle span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-emailing-recipient-panel {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    right: 0;
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid rgba(32, 50, 99, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 60px rgba(32, 50, 99, .18);
    backdrop-filter: blur(12px);
}

.admin-emailing-recipient-panel[hidden] {
    display: none;
}

.admin-emailing-select-all,
.admin-emailing-recipient-option {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.admin-emailing-select-all {
    padding: .72rem .8rem;
    border: 1px solid rgba(232, 33, 24, .12);
    border-radius: 16px;
    background: rgba(232, 33, 24, .06);
}

.admin-emailing-recipient-picker .admin-emailing-select-all input,
.admin-emailing-recipient-picker .admin-emailing-recipient-option input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-color);
}

.admin-emailing-select-all span {
    flex: 1;
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 950;
}

.admin-emailing-select-all small,
.admin-emailing-recipient-option em {
    color: var(--text-light);
    font-size: .7rem;
    font-style: normal;
    font-weight: 850;
}

.admin-emailing-manual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
}

.admin-emailing-recipient-picker .admin-emailing-manual input {
    min-width: 0;
    padding: .74rem .8rem;
    border-radius: 14px;
    font-size: .82rem;
}

.admin-emailing-manual button {
    padding: 0 .95rem;
    border: 0;
    border-radius: 14px;
    background: var(--text-dark);
    color: #fff;
    font-size: .78rem;
    font-weight: 950;
    transition: var(--transition);
}

.admin-emailing-manual button:hover {
    background: var(--primary-color);
}

.admin-emailing-manual-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.admin-emailing-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .48rem .52rem .48rem .7rem;
    border: 1px solid rgba(16, 185, 129, .18);
    border-radius: 999px;
    background: rgba(16, 185, 129, .08);
    color: var(--text-dark);
    font-size: .74rem;
    font-weight: 900;
}

.admin-emailing-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-emailing-chip button {
    display: grid;
    width: 22px;
    height: 22px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(32, 50, 99, .08);
    color: var(--text-dark);
    font-size: .68rem;
}

.admin-emailing-recipient-list {
    display: grid;
    gap: .45rem;
    max-height: 330px;
    overflow: auto;
    padding-right: .15rem;
}

.admin-emailing-recipient-option {
    padding: .72rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    transition: var(--transition);
}

.admin-emailing-recipient-option:has(input:checked) {
    border-color: rgba(232, 33, 24, .2);
    background: rgba(232, 33, 24, .06);
}

.admin-emailing-recipient-option > span {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: .08rem;
}

.admin-emailing-recipient-option strong,
.admin-emailing-recipient-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-emailing-recipient-option strong {
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 950;
}

.admin-emailing-recipient-option small {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 750;
}

.admin-emailing-recipient-empty {
    padding: .9rem;
    border-radius: 16px;
}

.admin-emailing-preview-card,
.admin-emailing-templates {
    display: grid;
    gap: 1rem;
}

.admin-emailing-preview {
    width: 100%;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
}

.admin-emailing-template-list {
    display: grid;
    gap: .65rem;
    max-height: 520px;
    overflow: auto;
    padding-right: .2rem;
}

.admin-emailing-template {
    display: grid;
    gap: .2rem;
    padding: .85rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    text-align: left;
    transition: var(--transition);
}

.admin-emailing-template:hover {
    border-color: rgba(232, 33, 24, .22);
    box-shadow: 0 12px 26px rgba(32, 50, 99, .08);
    transform: translateY(-1px);
}

.admin-emailing-template strong {
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 950;
}

.admin-emailing-template span,
.admin-emailing-template small {
    overflow: hidden;
    color: var(--text-light);
    font-size: .74rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-order-show__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-order-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.admin-order-summary div,
.admin-order-info-list div,
.admin-order-totals div {
    display: grid;
    gap: .25rem;
    padding: .85rem .95rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
}

.admin-order-summary span,
.admin-order-info-list span,
.admin-order-totals span {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-order-summary strong,
.admin-order-info-list strong,
.admin-order-totals strong {
    min-width: 0;
    color: var(--text-dark);
    font-weight: 950;
    overflow-wrap: anywhere;
}

.admin-order-info-list {
    display: grid;
    gap: .75rem;
}

.admin-order-address {
    display: grid;
    gap: .3rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
    color: var(--text-light);
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
}

.admin-order-address strong {
    color: var(--text-dark);
    font-weight: 950;
}

.admin-order-items-panel,
.admin-order-totals-panel {
    margin-top: 1rem;
}

.admin-order-items {
    display: grid;
}

.admin-order-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) .55fr .35fr .55fr;
    gap: .85rem;
    align-items: center;
    padding: .85rem 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: .84rem;
}

.admin-order-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.admin-order-item:last-child {
    padding-bottom: 0;
}

.admin-order-item__image {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-light);
    color: rgba(32, 50, 99, .28);
}

.admin-order-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-order-item__main {
    display: grid;
    gap: .16rem;
    min-width: 0;
}

.admin-order-item__main strong {
    overflow: hidden;
    color: var(--text-dark);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-order-item__main small {
    overflow: hidden;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-order-item > strong {
    color: var(--text-dark);
    font-weight: 950;
}

.admin-order-totals {
    display: grid;
    gap: .65rem;
    margin-left: auto;
    width: min(100%, 360px);
}

.admin-order-totals div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-order-totals__grand {
    border-color: rgba(232, 33, 24, .18) !important;
    background: rgba(232, 33, 24, .06) !important;
}

.admin-order-totals__grand strong {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.admin-active-switch {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .45rem;
    padding: .28rem .58rem .28rem .28rem;
    border: 1px solid rgba(32, 50, 99, .12);
    border-radius: 999px;
    background: rgba(32, 50, 99, .06);
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 900;
    transition: var(--transition);
}

.admin-active-switch span {
    position: relative;
    display: block;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(32, 50, 99, .18);
    transition: var(--transition);
}

.admin-active-switch span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(32, 50, 99, .18);
    content: "";
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.admin-active-switch.is-active {
    border-color: rgba(16, 185, 129, .18);
    background: rgba(16, 185, 129, .1);
    color: var(--success-color);
}

.admin-active-switch.is-active span {
    background: var(--success-color);
}

.admin-active-switch.is-active span::after {
    transform: translateX(14px);
}

.admin-active-switch:disabled {
    cursor: progress;
    opacity: .62;
}

.admin-product-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
    align-items: start;
}

.admin-product-form__main {
    display: grid;
    gap: 1rem;
}

.admin-product-form__side {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.admin-form-card {
    display: grid;
    gap: 1rem;
}

.admin-form-card__heading {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.admin-form-card__heading > span {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 16px;
    background: rgba(232, 33, 24, .09);
    color: var(--primary-color);
}

.admin-form-card__heading strong {
    display: block;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 900;
}

.admin-form-card__heading small {
    display: block;
    margin-top: .14rem;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 700;
}

.admin-form-grid {
    display: grid;
    gap: .9rem;
}

.admin-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-field {
    display: grid;
    gap: .42rem;
}

.admin-field label,
.admin-field > span {
    color: var(--text-dark);
    font-size: .76rem;
    font-weight: 900;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
    width: 100%;
    padding: .86rem .95rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    color: var(--text-dark);
    font-size: .88rem;
    font-weight: 700;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.admin-field textarea {
    min-height: 116px;
    resize: vertical;
    line-height: 1.55;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    border-color: rgba(232, 33, 24, .5);
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .08);
}

.admin-field ul {
    display: grid;
    gap: .24rem;
    color: var(--primary-color);
    font-size: .76rem;
    font-weight: 800;
}

.admin-field--switch {
    display: flex;
    align-items: center;
    gap: .65rem;
    align-self: end;
    min-height: 48px;
    padding: .72rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
}

.admin-field--switch input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.admin-field--switch label {
    margin: 0;
}

.admin-product-preview {
    display: grid;
    gap: 1rem;
}

.admin-product-preview__image {
    display: grid;
    min-height: 240px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 204, 7, .18), transparent 30%),
        #fff;
    color: rgba(32, 50, 99, .2);
    font-size: 3rem;
}

.admin-product-preview__image img {
    width: 100%;
    height: 240px;
    object-fit: contain;
    padding: 1rem;
}

.admin-product-preview__meta {
    display: grid;
    gap: .25rem;
    padding: .9rem;
    border-radius: 18px;
    background: var(--bg-light);
}

.admin-product-preview__meta span {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 800;
}

.admin-product-preview__meta strong {
    color: var(--text-dark);
    font-weight: 900;
}

.admin-product-preview__meta em {
    width: max-content;
    margin-top: .2rem;
    padding: .34rem .58rem;
    border-radius: 999px;
    background: rgba(255, 204, 7, .25);
    color: var(--text-dark);
    font-size: .68rem;
    font-style: normal;
    font-weight: 900;
}

.admin-product-gallery-field {
    display: grid;
    gap: .75rem;
}

.admin-product-gallery-field__heading strong {
    display: block;
    color: var(--text-dark);
    font-size: .84rem;
    font-weight: 950;
}

.admin-product-gallery-field__heading small {
    display: block;
    margin-top: .15rem;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 750;
}

.admin-product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.admin-product-gallery-pending {
    display: contents;
}

.admin-product-gallery-pending[hidden] {
    display: none;
}

.admin-product-gallery-tile {
    position: relative;
    display: grid;
    min-height: 118px;
    place-items: center;
    overflow: hidden;
    padding: .65rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    color: var(--text-dark);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.admin-product-gallery-tile:hover {
    border-color: rgba(232, 33, 24, .35);
    box-shadow: 0 14px 32px rgba(32, 50, 99, .08);
    transform: translateY(-1px);
}

.admin-product-gallery-tile--existing img {
    width: 100%;
    height: 92px;
    object-fit: contain;
}

.admin-product-gallery-tile--pending {
    gap: .35rem;
    border-color: rgba(32, 50, 99, .16);
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 204, 7, .2), transparent 34%),
        linear-gradient(180deg, #fff, rgba(247, 248, 250, .92));
    cursor: default;
}

.admin-product-gallery-tile--pending img {
    width: 100%;
    height: 82px;
    object-fit: contain;
}

.admin-product-gallery-tile__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(18, 186, 129, .12);
    color: #0c8f62;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .01em;
}

.admin-product-gallery-tile--pending small {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-light);
    font-size: .62rem;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-product-gallery-tile--existing span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    color: var(--text-light);
    font-size: .68rem;
    font-weight: 850;
}

.admin-product-gallery-tile--existing input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.admin-product-gallery-tile--upload {
    border-style: dashed;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 204, 7, .2), transparent 35%),
        rgba(247, 248, 250, .86);
    text-align: center;
}

.admin-product-gallery-tile--upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-product-gallery-tile__plus {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary-color), #ff5b35);
    color: #fff;
    box-shadow: 0 12px 24px rgba(232, 33, 24, .22);
}

.admin-product-gallery-tile--upload strong {
    margin-top: .55rem;
    font-size: .76rem;
    font-weight: 950;
}

.admin-product-gallery-tile--upload small {
    color: var(--text-light);
    font-size: .64rem;
    font-weight: 760;
}

.admin-web-components {
    display: grid;
    gap: 1.25rem;
}

.admin-web-components-page {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(32, 50, 99, .08);
}

.admin-web-components-page > summary,
.admin-web-components-block > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.admin-web-components-page > summary::-webkit-details-marker,
.admin-web-components-block > summary::-webkit-details-marker {
    display: none;
}

.admin-web-components-page > summary::marker,
.admin-web-components-block > summary::marker {
    content: '';
}

.admin-web-components-page > summary {
    padding: 1.25rem 1.35rem;
    background:
        radial-gradient(circle at 4% 0%, rgba(255, 204, 7, .22), transparent 34%),
        linear-gradient(135deg, rgba(232, 33, 24, .08), rgba(32, 50, 99, .04));
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 950;
}

.admin-web-components-page > summary span,
.admin-web-components-block > summary span {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

.admin-web-components-page > summary > i,
.admin-web-components-block > summary::after {
    transition: transform .2s ease;
}

.admin-web-components-page[open] > summary > i {
    transform: rotate(180deg);
}

.admin-web-components-page__content {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.admin-web-components-block {
    overflow: hidden;
    border: 1px solid rgba(32, 50, 99, .1);
    border-radius: 22px;
    background: rgba(247, 248, 250, .68);
}

.admin-web-components-block > summary {
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, .75);
}

.admin-web-components-block > summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--text-light);
}

.admin-web-components-block[open] > summary::after {
    transform: rotate(180deg);
}

.admin-web-components-block > summary span {
    color: var(--text-dark);
    font-size: .94rem;
    font-weight: 950;
}

.admin-web-components-block > summary small {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 750;
}

.admin-web-components-grid,
.admin-web-components-newsletter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: .9rem;
    padding: 1rem;
}

.admin-web-components-grid--licenses {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
}

.admin-web-component-card,
.admin-web-component-upload {
    position: relative;
    min-height: 168px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
}

.admin-web-component-card {
    display: grid;
    align-content: space-between;
    gap: .65rem;
    padding: .7rem;
}

.admin-web-component-card--wide,
.admin-web-component-upload--wide {
    min-height: 220px;
}

.admin-web-component-card img {
    display: block;
    width: 100%;
    height: 116px;
    object-fit: cover;
    border-radius: 15px;
    background: rgba(247, 248, 250, .9);
}

.admin-web-component-card--wide img {
    height: 168px;
}

.admin-web-components-grid--licenses .admin-web-component-card img {
    object-fit: contain;
}

.admin-web-component-card span {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .74rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-web-component-card > small {
    color: var(--text-light);
    font-size: .66rem;
    font-weight: 760;
}

.admin-web-component-card--muted img {
    filter: grayscale(.45);
    opacity: .72;
}

.admin-web-component-card form {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 2;
}

.admin-web-component-card button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(232, 33, 24, .92);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(232, 33, 24, .28);
}

.admin-web-component-replace {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 3;
}

.admin-web-component-replace label {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color), #ff5b35);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(232, 33, 24, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

.admin-web-component-replace label:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 16px 30px rgba(232, 33, 24, .34);
}

.admin-web-component-replace input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-web-component-upload {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .45rem;
    padding: 1rem;
    border-style: dashed;
    background:
        radial-gradient(circle at 35% 20%, rgba(255, 204, 7, .22), transparent 35%),
        rgba(255, 255, 255, .82);
    color: var(--text-dark);
    text-align: center;
    cursor: pointer;
}

.admin-web-component-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-web-component-upload i {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary-color), #ff5b35);
    color: #fff;
    box-shadow: 0 15px 28px rgba(232, 33, 24, .22);
}

.admin-web-component-upload strong {
    font-size: .82rem;
    font-weight: 950;
}

.admin-web-component-upload small {
    color: var(--text-light);
    font-size: .68rem;
    font-weight: 760;
}

.admin-web-component-upload.is-submitting,
.admin-web-component-replace.is-submitting {
    pointer-events: none;
}

.admin-web-component-upload.is-submitting {
    border-color: rgba(232, 33, 24, .35);
    background: rgba(232, 33, 24, .06);
}

.admin-web-component-upload.is-submitting i,
.admin-web-component-replace.is-submitting label {
    animation: admin-web-components-upload-pulse .75s ease-in-out infinite alternate;
}

@keyframes admin-web-components-upload-pulse {
    from {
        opacity: .62;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

.admin-web-components-mobile {
    display: grid;
    gap: .95rem;
    padding: 1rem;
    border-top: 1px solid rgba(32, 50, 99, .08);
    background: rgba(255, 255, 255, .52);
}

.admin-web-components-mobile__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.admin-web-components-mobile__heading strong {
    display: block;
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 950;
}

.admin-web-components-mobile__heading small {
    display: block;
    margin-top: .15rem;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 760;
}

.admin-web-components-breakpoint {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
}

.admin-web-components-breakpoint label {
    padding-left: .55rem;
    color: var(--text-light);
    font-size: .68rem;
    font-weight: 850;
}

.admin-web-components-breakpoint input {
    width: 86px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .78rem;
    font-weight: 900;
    outline: 0;
    padding: .5rem .65rem;
}

.admin-web-components-breakpoint button {
    border: 0;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 900;
    padding: .5rem .8rem;
}

.admin-product-form__actions {
    display: grid;
    gap: .6rem;
}

.admin-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(232, 33, 24, .18);
    border-radius: 22px;
    background: rgba(232, 33, 24, .06);
}

.admin-danger-zone strong,
.admin-danger-zone span {
    display: block;
}

.admin-danger-zone strong {
    color: var(--text-dark);
    font-weight: 900;
}

.admin-danger-zone span {
    margin-top: .2rem;
    color: var(--text-light);
    font-size: .82rem;
}

.admin-danger-zone button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .72rem 1rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    transition: var(--transition);
}

.admin-danger-zone button:hover {
    transform: translateY(-2px);
}

.admin-category-form {
    display: grid;
    max-width: 860px;
    gap: 1rem;
}

.admin-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.admin-category-card {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(32, 50, 99, .07);
    transition: var(--transition);
}

.admin-category-card:hover {
    border-color: rgba(232, 33, 24, .18);
    transform: translateY(-3px);
}

.admin-category-card--depth-1 {
    border-left: 4px solid rgba(232, 33, 24, .35);
}

.admin-category-card--depth-2 {
    border-left: 4px solid rgba(32, 50, 99, .2);
}

.admin-category-card__main {
    display: flex;
    min-width: 0;
    gap: .85rem;
    color: var(--text-dark);
}

.admin-category-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 18px;
    background: rgba(232, 33, 24, .09);
    color: var(--primary-color);
}

.admin-category-card__icon--license {
    background: rgba(255, 204, 7, .24);
    color: var(--text-dark);
}

.admin-category-card__icon--image {
    overflow: hidden;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border-color);
}

.admin-category-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .35rem;
}

.admin-catalog-icon-upload {
    position: absolute;
    top: .72rem;
    left: 3.45rem;
    z-index: 3;
}

.admin-catalog-icon-upload label {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color), #ff5b35);
    color: #fff;
    cursor: pointer;
    font-size: .62rem;
    box-shadow: 0 10px 22px rgba(232, 33, 24, .24);
    transition: transform .2s ease, box-shadow .2s ease;
}

.admin-catalog-icon-upload label:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 14px 26px rgba(232, 33, 24, .32);
}

.admin-catalog-icon-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-category-card__main strong {
    display: block;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 900;
}

.admin-category-card__level {
    display: inline-flex;
    margin-bottom: .2rem;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: .62rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-category-card__main .admin-category-card__path {
    display: block;
    color: var(--primary-color);
    font-weight: 800;
    -webkit-line-clamp: 1;
}

.admin-category-card__main small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .26rem;
    color: var(--text-light);
    font-size: .78rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-category-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.admin-category-card__stats span {
    display: grid;
    gap: .1rem;
    padding: .72rem;
    border-radius: 16px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 800;
}

.admin-category-card__stats strong {
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 900;
}

.admin-category-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.admin-category-card__footer .admin-secondary-button {
    min-height: 40px;
    padding: .58rem .82rem;
    font-size: .74rem;
}

.admin-category-warning {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem .9rem;
    border: 1px solid rgba(232, 33, 24, .16);
    border-radius: 18px;
    background: rgba(232, 33, 24, .06);
    color: var(--text-light);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.45;
}

.admin-category-warning i {
    margin-top: .12rem;
    color: var(--primary-color);
}

.admin-model-3d-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.admin-model-3d-card {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.admin-model-3d-card__heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
}

.admin-model-3d-card__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(232, 33, 24, .12), rgba(255, 204, 7, .22));
    color: var(--primary-color);
}

.admin-model-3d-card__heading strong {
    display: block;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-model-3d-card__heading small {
    display: block;
    overflow: hidden;
    color: var(--text-light);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-model-3d-card__heading em {
    display: inline-flex;
    width: max-content;
    margin-top: .35rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--text-light);
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.admin-model-3d-card__select {
    display: grid;
    gap: .4rem;
}

.admin-model-3d-card__select > span {
    color: var(--text-dark);
    font-size: .78rem;
    font-weight: 900;
}

.admin-model-3d-card__select small {
    color: var(--text-light);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.35;
}

.admin-model-3d-card__select--empty {
    padding: .9rem;
    border: 1px dashed rgba(148, 163, 184, .45);
    border-radius: 18px;
    background: #f8fafc;
}

.admin-model-3d-product-select {
    width: 100%;
    min-height: 44px;
    padding: 0 2.5rem 0 .9rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 16px;
    background:
        linear-gradient(45deg, transparent 50%, var(--text-light) 50%) right 1rem center / 6px 6px no-repeat,
        linear-gradient(135deg, var(--text-light) 50%, transparent 50%) right .72rem center / 6px 6px no-repeat,
        #fff;
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 800;
    appearance: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.admin-model-3d-product-select:focus {
    border-color: rgba(232, 33, 24, .36);
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .08);
    outline: none;
}

.admin-model-3d-card__body {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    padding: .75rem;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 20px;
    background: #f8fafc;
}

.admin-model-3d-card__thumb {
    display: grid;
    width: 74px;
    height: 74px;
    overflow: hidden;
    place-items: center;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(32, 50, 99, .08);
}

.admin-model-3d-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-model-3d-card__thumb.is-empty {
    color: #94a3b8;
    font-size: 1.4rem;
}

.admin-model-3d-status {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 900;
}

.admin-model-3d-status.is-ready {
    color: var(--success-color);
}

.admin-model-3d-card__body p {
    margin-top: .35rem;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
}

.admin-model-3d-configure {
    width: 100%;
    justify-content: center;
}

.admin-model-3d-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-dark);
    font-size: .8rem;
    font-weight: 800;
}

.admin-model-3d-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.admin-model-3d-type {
    display: grid;
    gap: .45rem;
}

.admin-model-3d-type span {
    color: var(--text-dark);
    font-size: .8rem;
    font-weight: 900;
}

.admin-model-3d-type select {
    width: 100%;
    min-height: 44px;
    padding: 0 2.4rem 0 .9rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 16px;
    background:
        linear-gradient(45deg, transparent 50%, var(--text-light) 50%) right 1rem center / 6px 6px no-repeat,
        linear-gradient(135deg, var(--text-light) 50%, transparent 50%) right .72rem center / 6px 6px no-repeat,
        #f8fafc;
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 900;
    appearance: none;
}

.admin-model-3d-type select:focus {
    border-color: rgba(232, 33, 24, .34);
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .08);
    outline: none;
}

.admin-model-3d-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1rem;
}

.admin-model-3d-controls--modal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-model-3d-field {
    display: grid;
    min-width: 0;
    gap: .45rem;
}

.admin-model-3d-field span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 800;
}

.admin-model-3d-field output {
    color: var(--text-light);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.admin-model-3d-field input[type="range"] {
    width: 100%;
    height: 22px;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.admin-model-3d-field input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.admin-model-3d-field input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6px;
    appearance: none;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--text-dark);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .2);
}

.admin-model-3d-field input[type="range"]::-moz-range-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.admin-model-3d-field input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--text-dark);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .2);
}

.admin-model-3d-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
}

.admin-model-3d-modal {
    position: fixed;
    z-index: 140;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(.8rem, 2vw, 1.5rem);
}

.admin-model-3d-modal.is-hidden {
    display: none;
}

.admin-model-3d-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(12, 20, 43, .72);
    backdrop-filter: blur(14px);
}

.admin-model-3d-modal__dialog {
    position: relative;
    display: grid;
    width: min(1380px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .24s ease, transform .24s cubic-bezier(.16, 1, .3, 1);
}

.admin-model-3d-modal.is-open .admin-model-3d-modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.admin-model-3d-preview {
    position: relative;
    min-height: min(74dvh, 720px);
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 18%, rgba(255, 204, 7, .24), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 38%),
        #12110f;
}

.admin-model-3d-preview__canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    cursor: grab;
    outline: none;
    touch-action: none;
}

.admin-model-3d-preview__canvas.is-dragging {
    cursor: grabbing;
}

.admin-model-3d-preview__loader {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border: 3px solid rgba(255, 255, 255, .18);
    border-top-color: var(--primary-color);
    border-right-color: var(--secondary-color);
    border-radius: 50%;
    animation: product-preview-spin .9s linear infinite;
}

.admin-model-3d-preview__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .9rem;
    padding: 2rem;
    color: rgba(255, 255, 255, .8);
    text-align: center;
}

.admin-model-3d-preview__empty[hidden] {
    display: none;
}

.admin-model-3d-preview__empty i {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .08);
    color: #ffcc07;
    font-size: 1.6rem;
}

.admin-model-3d-preview__empty span {
    max-width: 320px;
    font-weight: 800;
    line-height: 1.45;
}

.admin-model-3d-editor {
    display: flex;
    min-height: 0;
    overflow-y: auto;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1rem, 2.2vw, 1.45rem);
}

.admin-model-3d-editor__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-model-3d-editor__top span {
    color: var(--primary-color);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-model-3d-editor__top h2 {
    margin-top: .35rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 900;
    line-height: 1;
}

.admin-model-3d-editor__top p {
    margin-top: .35rem;
    color: var(--text-light);
    font-size: .85rem;
    font-weight: 700;
}

.admin-model-3d-editor__close {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #f8fafc;
    color: var(--text-dark);
    transition: var(--transition);
}

.admin-model-3d-editor__close:hover {
    color: var(--primary-color);
    transform: rotate(8deg);
}

.admin-model-3d-upload {
    display: block;
}

.admin-model-3d-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.admin-model-3d-upload > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    padding: .9rem;
    border: 1px dashed rgba(32, 50, 99, .28);
    border-radius: 20px;
    background: #f8fafc;
    cursor: pointer;
    transition: var(--transition);
}

.admin-model-3d-upload > span:hover {
    border-color: rgba(232, 33, 24, .34);
    background: rgba(232, 33, 24, .04);
}

.admin-model-3d-upload i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.admin-model-3d-upload strong,
.admin-model-3d-upload small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-model-3d-upload strong {
    color: var(--text-dark);
    font-size: .88rem;
    font-weight: 900;
}

.admin-model-3d-upload small {
    margin-top: .16rem;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 700;
}

.admin-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-payment-card {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid rgba(229, 231, 235, .88);
    border-radius: 26px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 18px 48px rgba(32, 50, 99, .08);
}

.admin-payment-card.is-active {
    border-color: rgba(232, 33, 24, .28);
    box-shadow: 0 22px 55px rgba(232, 33, 24, .12);
}

.admin-payment-card__head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.admin-payment-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 18px;
    background: rgba(32, 50, 99, .1);
    color: var(--text-dark);
}

.admin-payment-card__icon--live {
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.admin-payment-card__head strong,
.admin-payment-card__head small {
    display: block;
}

.admin-payment-card__head strong {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.admin-payment-card__head small {
    margin-top: .16rem;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 750;
}

.admin-payment-card__head em {
    margin-left: auto;
    padding: .38rem .62rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, .12);
    color: var(--success-color);
    font-size: .66rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-payment-status-list {
    display: grid;
    gap: .55rem;
}

.admin-payment-status-list span {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .85rem;
    border-radius: 16px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: .82rem;
    font-weight: 850;
}

.admin-payment-status-list .is-ready {
    background: rgba(16, 185, 129, .1);
    color: var(--success-color);
}

.admin-payment-status-list .is-missing {
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.admin-payment-card button[disabled] {
    cursor: default;
    opacity: .7;
    transform: none;
}

.admin-payment-help {
    margin-top: 1rem;
}

.admin-payment-help p {
    color: var(--text-light);
    line-height: 1.65;
}

.admin-payment-help code {
    display: inline-flex;
    margin-top: .85rem;
    padding: .65rem .85rem;
    border-radius: 14px;
    background: #10172a;
    color: #fff;
    font-size: .84rem;
    font-weight: 850;
}

.admin-scanner-open {
    overflow: hidden;
}

.admin-scanner-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.admin-scanner-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 48, .66);
    backdrop-filter: blur(12px);
}

.admin-scanner-modal__panel {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 520px);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 80px rgba(15, 23, 48, .24);
}

.admin-scanner-modal__close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: rgba(32, 50, 99, .08);
    color: var(--text-dark);
    transition: var(--transition);
}

.admin-scanner-modal__close:hover {
    background: var(--primary-color);
    color: #fff;
}

.admin-scanner-modal__heading {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-right: 3rem;
}

.admin-scanner-modal__heading > span {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 17px;
    background: rgba(255, 204, 7, .24);
    color: var(--text-dark);
    font-size: 1.1rem;
}

.admin-scanner-modal__heading strong,
.admin-scanner-modal__heading small {
    display: block;
}

.admin-scanner-modal__heading strong {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -.04em;
}

.admin-scanner-modal__heading small {
    margin-top: .18rem;
    color: var(--text-light);
    font-size: .82rem;
    line-height: 1.45;
}

.admin-scanner-video {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    border-radius: 24px;
    background: #10172f;
}

.admin-scanner-video video {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.admin-scanner-video__frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(76%, 340px);
    height: 116px;
    border: 2px solid rgba(255, 204, 7, .95);
    border-radius: 18px;
    box-shadow:
        0 0 0 999px rgba(15, 23, 48, .34),
        0 0 30px rgba(255, 204, 7, .34);
    transform: translate(-50%, -50%);
}

.admin-scanner-video__frame::after {
    position: absolute;
    top: 50%;
    right: 12px;
    left: 12px;
    height: 2px;
    border-radius: 999px;
    background: var(--primary-color);
    content: "";
    box-shadow: 0 0 14px rgba(232, 33, 24, .65);
}

.admin-scanner-status {
    min-height: 22px;
    color: var(--text-light);
    font-size: .84rem;
    font-weight: 800;
    text-align: center;
}

.admin-scanner-manual {
    display: grid;
    gap: .45rem;
}

.admin-scanner-manual label {
    color: var(--text-dark);
    font-size: .76rem;
    font-weight: 900;
}

.admin-scanner-manual div {
    display: flex;
    gap: .55rem;
}

.admin-scanner-manual input {
    min-width: 0;
    flex: 1;
    padding: .85rem .95rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    outline: none;
}

.admin-scanner-manual button {
    padding: .85rem 1rem;
    border-radius: 16px;
    background: var(--text-dark);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.admin-scanner-result__card {
    display: grid;
    gap: .7rem;
    padding: .95rem;
    border-radius: 18px;
    background: rgba(255, 204, 7, .16);
}

.admin-scanner-result__card--success {
    background: rgba(16, 185, 129, .12);
}

.admin-scanner-result__card strong {
    color: var(--text-dark);
    font-weight: 900;
}

.admin-scanner-result__card a {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: .72rem 1rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.is-hidden {
    display: none !important;
}

body.is-page-loading {
    cursor: progress;
}

.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #edf0f5 0%, #f8fafc 45%, #edf0f5 100%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.05s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    from {
        background-position: 220% 0;
    }

    to {
        background-position: -220% 0;
    }
}

.page-transition-skeleton {
    position: fixed;
    inset: 0;
    z-index: 120;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 204, 7, .22), transparent 28%),
        radial-gradient(circle at 10% 8%, rgba(232, 33, 24, .11), transparent 24%),
        rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}

.page-transition-skeleton.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.page-transition-skeleton__screen {
    display: grid;
    width: 100%;
    max-width: 1280px;
    min-height: 100%;
    align-content: start;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin: 0 auto;
    padding: clamp(.9rem, 2vw, 1.4rem);
}

.page-transition-skeleton__header {
    display: grid;
    min-height: 70px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.4rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid rgba(229, 231, 235, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 42px rgba(32, 50, 99, .08);
}

.page-transition-skeleton__logo {
    color: var(--primary-color);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -.04em;
}

.page-transition-skeleton__logo strong {
    color: var(--text-dark);
}

.page-transition-skeleton__nav {
    display: flex;
    justify-content: center;
    gap: .7rem;
}

.page-transition-skeleton__nav span {
    width: clamp(72px, 9vw, 110px);
    height: 18px;
    border-radius: 999px;
}

.page-transition-skeleton__actions {
    display: flex;
    gap: .55rem;
}

.page-transition-skeleton__actions span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.page-transition-skeleton__hero {
    display: grid;
    min-height: clamp(150px, 18vw, 230px);
    align-content: end;
    gap: .75rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(32, 50, 99, .96), rgba(232, 33, 24, .82)),
        var(--text-dark);
    box-shadow: 0 20px 60px rgba(32, 50, 99, .18);
}

.page-transition-skeleton__hero span,
.page-transition-skeleton__hero strong,
.page-transition-skeleton__hero em {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .35), rgba(255, 255, 255, .18));
    background-size: 220% 100%;
}

.page-transition-skeleton__hero span {
    width: 120px;
    height: 13px;
}

.page-transition-skeleton__hero strong {
    width: min(520px, 78%);
    height: 32px;
}

.page-transition-skeleton__hero em {
    width: min(360px, 62%);
    height: 16px;
}

.page-transition-skeleton__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-transition-skeleton__toolbar > div {
    display: grid;
    gap: .45rem;
}

.page-transition-skeleton__toolbar span,
.page-transition-skeleton__toolbar strong {
    display: block;
    border-radius: 999px;
}

.page-transition-skeleton__toolbar > div span {
    width: 88px;
    height: 12px;
}

.page-transition-skeleton__toolbar > div strong {
    width: 180px;
    height: 20px;
}

.page-transition-skeleton__toolbar > span {
    width: 150px;
    height: 44px;
}

.page-transition-skeleton__catalog {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.page-transition-skeleton__filters {
    display: grid;
    gap: .9rem;
    padding: 1.3rem;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(32, 50, 99, .07);
}

.page-transition-skeleton__filters span {
    height: 18px;
    border-radius: 999px;
}

.page-transition-skeleton__filters span:first-child {
    width: 65%;
    height: 24px;
}

.page-transition-skeleton__products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-transition-skeleton__product {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(32, 50, 99, .06);
}

.page-transition-skeleton__product-visual {
    aspect-ratio: 1 / .82;
    margin: .85rem;
    border-radius: 18px;
}

.page-transition-skeleton__product-body {
    display: grid;
    gap: .6rem;
    padding: 0 1rem 1rem;
}

.page-transition-skeleton__product-body span,
.page-transition-skeleton__product-body strong,
.page-transition-skeleton__product-body em,
.page-transition-skeleton__product-body i {
    display: block;
    border-radius: 999px;
}

.page-transition-skeleton__product-body span {
    width: 38%;
    height: 10px;
}

.page-transition-skeleton__product-body strong {
    width: 92%;
    height: 18px;
}

.page-transition-skeleton__product-body em {
    width: 58%;
    height: 14px;
}

.page-transition-skeleton__product-body i {
    width: 44%;
    height: 20px;
}

.page-transition-skeleton__mobile-nav {
    display: none;
}

.product-preview {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2rem);
}

.product-preview__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 20, 43, .62);
    backdrop-filter: blur(14px);
}

.product-preview__dialog {
    position: relative;
    display: grid;
    width: min(900px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .7fr);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: scale(.96) translateY(12px);
    transition: opacity .26s ease, transform .26s cubic-bezier(.16, 1, .3, 1);
}

.product-preview__dialog.is-3d-preview {
    width: min(1120px, 100%);
    grid-template-columns: 1fr;
    background: #060817;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .38),
        0 0 80px rgba(47, 88, 255, .16);
}

.product-preview.open .product-preview__dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.product-preview__close {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-md);
    color: var(--text-dark);
    transition: var(--transition);
}

.product-preview__close:hover {
    color: var(--primary-color);
    transform: rotate(8deg);
}

.product-preview__media {
    position: relative;
    display: grid;
    min-height: 420px;
    overflow: hidden;
    place-items: center;
    padding: clamp(2rem, 6vw, 4rem);
    background:
        radial-gradient(circle at 78% 12%, rgba(255, 204, 7, .22), transparent 30%),
        var(--bg-light);
}

.product-preview__media.is-3d-mode {
    min-height: clamp(520px, 78dvh, 820px);
    padding: 0;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 204, 7, .28), transparent 18%),
        radial-gradient(circle at 78% 22%, rgba(232, 33, 24, .24), transparent 20%),
        radial-gradient(circle at 50% 90%, rgba(44, 92, 255, .28), transparent 34%),
        linear-gradient(135deg, #040616 0%, #0b102d 45%, #17091f 100%);
    isolation: isolate;
}

.product-preview__media.is-3d-mode::before,
.product-preview__media.is-3d-mode::after {
    position: absolute;
    inset: -12%;
    content: "";
    pointer-events: none;
}

.product-preview__media.is-3d-mode::before {
    z-index: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .92) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(255, 204, 7, .65) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(137, 169, 255, .72) 0 1.2px, transparent 1.8px);
    background-position: 0 0, 38px 72px, 120px 28px;
    background-size: 118px 118px, 174px 174px, 232px 232px;
    opacity: .52;
    transform: rotate(-8deg) scale(1.08);
}

.product-preview__media.is-3d-mode::after {
    z-index: 0;
    background:
        conic-gradient(from 145deg at 50% 52%, transparent 0deg, rgba(255, 255, 255, .08) 58deg, transparent 116deg, rgba(255, 204, 7, .1) 178deg, transparent 250deg, rgba(87, 125, 255, .12) 318deg, transparent 360deg),
        radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, .12), transparent 46%);
    filter: blur(1px);
    opacity: .82;
    mix-blend-mode: screen;
}

.product-preview__media img {
    display: block;
    max-width: 100%;
    max-height: 520px;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .24));
}

.product-preview__media.is-3d-mode img {
    display: none;
}

.product-preview__canvas {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: inherit;
    cursor: grab;
    outline: none;
    touch-action: none;
}

.product-preview__canvas.is-dragging {
    cursor: grabbing;
}

.product-preview__loader {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border: 3px solid rgba(255, 255, 255, .18);
    border-top-color: var(--primary-color);
    border-right-color: var(--secondary-color);
    border-radius: 50%;
    animation: product-preview-spin .9s linear infinite;
    pointer-events: none;
}

@keyframes product-preview-spin {
    to {
        transform: rotate(360deg);
    }
}

.product-preview__error {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 3;
    max-width: 560px;
    margin: 0 auto;
    padding: .8rem .9rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(12, 20, 43, .78);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
    backdrop-filter: blur(16px);
}

.product-preview__content {
    display: flex;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    flex-direction: column;
}

.product-preview__content[hidden] {
    display: none;
}

.product-preview__content span {
    color: var(--primary-color);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-preview__content h2 {
    margin-top: .75rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.05;
}

.product-preview__link {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .55rem;
    margin-top: 1.4rem;
    padding: .95rem 1.25rem;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    font-size: .86rem;
    font-weight: 900;
    transition: var(--transition);
}

.product-preview__link:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.header-profile-link {
    overflow: hidden;
}

.header-profile-link__avatar {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: inherit;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* Compact loyalty banner */
.home-loyalty__card {
    position: relative;
    display: grid;
    min-height: 190px;
    overflow: hidden;
    grid-template-areas:
        "intro formula reward action"
        "benefits benefits benefits benefits";
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
    align-items: center;
    gap: .9rem 1.2rem;
    padding: 1.55rem 2rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 204, 7, .26), transparent 30%),
        linear-gradient(125deg, #e82118 0%, #d01818 55%, #a80f18 100%);
    box-shadow: 0 20px 48px rgba(184, 20, 24, .24);
    color: #fff;
    isolation: isolate;
}

.home-loyalty__card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    mask-image: linear-gradient(to right, #000, transparent 75%);
    pointer-events: none;
}

.home-loyalty__intro,
.home-loyalty__formula,
.home-loyalty__reward,
.home-loyalty__benefits,
.home-loyalty__action {
    position: relative;
    z-index: 1;
}

.home-loyalty__intro {
    grid-area: intro;
}

.home-loyalty__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .65rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-loyalty__intro h2 {
    margin-top: .55rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.65rem, 2.7vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.home-loyalty__intro > p {
    max-width: 520px;
    margin-top: .45rem;
    color: rgba(255, 255, 255, .78);
    font-size: .76rem;
    line-height: 1.45;
}

.home-loyalty__formula {
    display: inline-flex;
    align-items: center;
    grid-area: formula;
    gap: .55rem;
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.home-loyalty__formula span {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0;
    padding: 0;
    color: rgba(255, 255, 255, .75);
    font-size: .55rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.home-loyalty__formula strong {
    color: #fff;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
}

.home-loyalty__formula > i {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--primary-color);
    font-size: .58rem;
}

.home-loyalty__reward {
    display: grid;
    place-items: center;
    grid-area: reward;
}

.home-loyalty__reward-ring {
    display: flex;
    width: auto;
    min-width: 126px;
    aspect-ratio: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .35rem;
    padding: .65rem .75rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.home-loyalty__reward-ring::before {
    display: none;
}

.home-loyalty__reward-kicker {
    color: rgba(255, 255, 255, .78);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-loyalty__discount {
    position: static;
    display: grid;
    min-width: 92px;
    padding: .4rem .65rem;
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(112, 8, 13, .2);
    color: var(--primary-color);
    text-align: center;
    transform: none;
}

.home-loyalty__discount b {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: .9;
}

.home-loyalty__discount small {
    color: #a80f18;
    font-size: .49rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home-loyalty__benefits {
    grid-area: benefits;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0;
    border: 0;
}

.home-loyalty__benefit {
    display: inline-flex;
    min-height: auto;
    align-items: center;
    gap: .38rem;
    padding: .34rem .58rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    transition: background .2s ease, border-color .2s ease;
}

.home-loyalty__benefit:hover {
    border-color: rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .16);
    transform: none;
}

.home-loyalty__benefit > i {
    color: var(--secondary-color);
    font-size: .62rem;
}

.home-loyalty__benefit strong {
    font-size: .62rem;
    font-weight: 900;
}

.home-loyalty__action {
    display: flex;
    width: fit-content;
    grid-area: action;
    min-height: 46px;
    align-items: center;
    gap: .65rem;
    margin: 0;
    padding: .55rem .65rem .55rem .85rem;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(112, 8, 13, .22);
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-loyalty__action span {
    display: grid;
    gap: .1rem;
}

.home-loyalty__action small {
    color: #777;
    font-size: .57rem;
}

.home-loyalty__action > i {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    background: var(--primary-color);
    color: #fff;
}

.home-loyalty__action:hover {
    box-shadow: 0 15px 32px rgba(112, 8, 13, .3);
    transform: translateY(-2px);
}

.home-loyalty__orb--yellow {
    position: absolute;
    z-index: 0;
    top: -130px;
    right: -70px;
    bottom: auto;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: rgba(255, 204, 7, .24);
    filter: blur(28px);
    pointer-events: none;
}

@media (max-width: 1050px) {
    .home-loyalty__card {
        grid-template-areas:
            "intro intro reward"
            "formula benefits action";
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
}

@media (max-width: 700px) {
    .home-loyalty {
        margin-top: 2.5rem;
    }

    .home-loyalty__card {
        grid-template-areas:
            "intro intro"
            "formula reward"
            "benefits benefits"
            "action action";
        grid-template-columns: 1fr 1fr;
        gap: .8rem;
        padding: 1.25rem;
        border-radius: 16px;
    }

    .home-loyalty__intro {
        text-align: left;
    }

    .home-loyalty__intro > p {
        margin-right: 0;
        margin-left: 0;
    }

    .home-loyalty__formula,
    .home-loyalty__action {
        margin-right: 0;
        margin-left: 0;
    }

    .home-loyalty__formula,
    .home-loyalty__reward-ring {
        width: 100%;
    }

    .home-loyalty__action {
        width: 100%;
        justify-content: space-between;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

.carousel-track {
    display: flex;
    transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}

.carousel-slide {
    min-width: 100%;
}

.home-hero__picture,
.home-hero__image,
.home-hero__media-fallback {
    display: block;
}

.home-hero__picture {
    width: 100%;
}

.home-hero__image {
    filter: brightness(.78) contrast(1.04);
}

.home-hero__overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 56%, transparent);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 22s linear infinite;
}

.prod-card {
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.prod-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.prod-img {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.prod-card:hover .prod-img {
    transform: scale(1.08) rotate(-1deg);
}

.card-actions {
    opacity: 0;
    transform: translateX(120%);
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
}

.prod-card:hover .card-actions {
    opacity: 1;
    transform: translateX(0);
}

.quick-add {
    opacity: 0;
    transform: translateY(120%);
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
}

.prod-card:hover .quick-add {
    opacity: 1;
    transform: translateY(0);
}

.cart-drawer {
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.cart-drawer.open {
    transform: translateX(0);
}

.cart-drawer__shipping {
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
}

.cart-drawer__checkout {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--text-dark), var(--primary-color), var(--secondary-color), var(--primary-color), var(--text-dark));
    background-size: 320% 320%;
    box-shadow: 0 16px 34px rgba(232, 33, 24, .26);
    color: #fff;
    font-weight: 900;
    transition: transform .25s ease, box-shadow .25s ease;
    animation: cart-gradient-flow 5.5s ease infinite;
}

.cart-drawer__checkout::before {
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
    content: "";
}

.cart-drawer__checkout:hover {
    box-shadow: 0 20px 42px rgba(232, 33, 24, .34);
    transform: translateY(-2px);
}

.cart-drawer__checkout i {
    transition: transform .25s ease;
}

.cart-drawer__checkout:hover i {
    transform: translateX(4px);
}

@keyframes cart-gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.badge-pulse {
    animation: badge-pulse .4s ease;
}

@keyframes badge-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.6);
    }
}

.blob {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    content: "";
    transition: width .3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.fly {
    position: fixed;
    z-index: 200;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    padding: 6px;
    box-shadow: var(--shadow-lg);
    transition: all .9s cubic-bezier(.5, -.3, .4, 1);
    pointer-events: none;
}

.modal-box {
    opacity: 0;
    transform: scale(.92);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

.modal-wrap.open .modal-box {
    opacity: 1;
    transform: scale(1);
}

.search-modal__box {
    display: flex;
    max-height: calc(100vh - 7rem);
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 28px;
}

.search-modal__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem .75rem;
}

.search-modal__title-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.search-modal__header strong,
.search-modal__header small {
    display: block;
}

.search-modal__header strong {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.05rem;
    font-weight: 950;
}

.search-modal__header small {
    margin-top: .1rem;
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 750;
}

.search-modal__close {
    display: grid;
    width: 38px;
    height: 38px;
    margin-left: auto;
    place-items: center;
    border-radius: 13px;
    background: var(--bg-light);
    color: var(--text-light);
    transition: var(--transition);
}

.search-modal__close:hover {
    background: var(--primary-color);
    color: #fff;
}

.search-modal__input-wrap {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: .7rem;
    margin: 0 1.1rem .85rem;
    padding: 0 .9rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-light);
    color: var(--text-light);
    transition: var(--transition);
}

.search-modal__input-wrap:focus-within {
    border-color: rgba(232, 33, 24, .4);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .07);
}

.search-modal__input-wrap > i {
    color: var(--primary-color);
}

.search-modal__input-wrap input {
    min-width: 0;
    flex: 1;
    background: transparent;
    color: var(--text-dark);
    font-size: .95rem;
    font-weight: 800;
    outline: none;
}

.search-modal__input-wrap button {
    color: #9ca3af;
    transition: color .2s ease;
}

.search-modal__input-wrap button:hover {
    color: var(--primary-color);
}

.search-modal__input-wrap button[hidden] {
    display: none;
}

.search-modal__input-wrap kbd {
    padding: .22rem .42rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: #fff;
    color: #9ca3af;
    font-size: .6rem;
    font-weight: 900;
}

.search-modal__results {
    min-height: 230px;
    overflow-y: auto;
    padding: 0 1.1rem 1.1rem;
}

.search-empty-state {
    display: grid;
    min-height: 230px;
    place-items: center;
    align-content: center;
    padding: 1.4rem;
    border: 1px dashed var(--border-color);
    border-radius: 22px;
    background: var(--bg-light);
    text-align: center;
}

.search-empty-state > span {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: .8rem;
    place-items: center;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(32, 50, 99, .08);
    color: var(--primary-color);
    font-size: 1.15rem;
}

.search-empty-state strong {
    color: var(--text-dark);
    font-weight: 950;
}

.search-empty-state p {
    max-width: 380px;
    margin-top: .35rem;
    color: var(--text-light);
    font-size: .8rem;
    line-height: 1.55;
}

.search-empty-state.is-error > span {
    color: var(--secondary-color);
}

.search-results__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .2rem .2rem .65rem;
    color: var(--text-dark);
}

.search-results__heading span {
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.search-results__heading small {
    overflow: hidden;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-results__list {
    display: grid;
    gap: .55rem;
}

.search-result-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto 32px;
    gap: .8rem;
    align-items: center;
    padding: .65rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    transition: var(--transition);
}

.search-result-card:hover {
    border-color: rgba(232, 33, 24, .2);
    box-shadow: 0 12px 28px rgba(32, 50, 99, .08);
    transform: translateY(-1px);
}

.search-result-card__image {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    overflow: hidden;
    border-radius: 15px;
    background: var(--bg-light);
}

.search-result-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-result-card__content {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.search-result-card__content small {
    overflow: hidden;
    color: var(--primary-color);
    font-size: .62rem;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.search-result-card__content strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .84rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-card__content em {
    color: var(--text-light);
    font-size: .66rem;
    font-style: normal;
    font-weight: 800;
}

.search-result-card__content em.is-available {
    color: var(--success-color);
}

.search-result-card__content em.is-unavailable {
    color: var(--primary-color);
}

.search-result-card__price {
    color: var(--text-dark);
    font-size: .88rem;
    font-weight: 950;
    white-space: nowrap;
}

.search-result-card__arrow {
    color: #c1c6d0;
    font-size: .75rem;
    transition: var(--transition);
}

.search-result-card:hover .search-result-card__arrow {
    color: var(--primary-color);
    transform: translateX(2px);
}

.search-loading {
    display: grid;
    gap: .55rem;
}

.search-loading__row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 70px;
    gap: .8rem;
    align-items: center;
    padding: .65rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
}

.search-loading__row i,
.search-loading__row b,
.search-loading__row em {
    display: block;
    border-radius: 12px;
    background: linear-gradient(90deg, #eef0f4 25%, #f8f9fb 50%, #eef0f4 75%);
    background-size: 200% 100%;
    animation: search-shimmer 1.2s linear infinite;
}

.search-loading__row i {
    width: 64px;
    height: 64px;
}

.search-loading__row b {
    width: min(100%, 260px);
    height: 16px;
}

.search-loading__row em {
    width: 70px;
    height: 16px;
}

@keyframes search-shimmer {
    to {
        background-position: -200% 0;
    }
}

@keyframes heart-pop {
    0%,
    100% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.4);
    }
}

.heart-active {
    color: var(--primary-color) !important;
    animation: heart-pop .4s ease;
}

.ship-bar {
    transition: width .6s cubic-bezier(.16, 1, .3, 1);
}

.cart-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2rem;
    align-items: start;
}

.cart-page__panel,
.cart-page__summary {
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(32, 50, 99, .08);
}

.cart-page__panel {
    padding: clamp(1rem, 2vw, 1.5rem);
}

.cart-page__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cart-page__panel-head div {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-light);
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cart-page__panel-head strong {
    display: grid;
    min-width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: .82rem;
}

.cart-page__panel-head a {
    color: var(--primary-color);
    font-size: .86rem;
    font-weight: 900;
}

.cart-page__items {
    display: grid;
    gap: 1rem;
}

.cart-page__summary {
    position: sticky;
    top: 7rem;
    display: grid;
    gap: 1.2rem;
    padding: 1.35rem;
}

.cart-page__summary h2 {
    font-family: var(--font-display, inherit);
    font-size: 1.35rem;
    font-weight: 900;
}

.cart-page__shipping {
    padding: .85rem;
    border: 1px solid rgba(32, 50, 99, .07);
    border-radius: 18px;
    background: #f9fafb;
}

.cart-promo {
    display: grid;
    gap: .4rem;
    padding: .55rem .6rem;
    border: 1px solid rgba(32, 50, 99, .09);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 204, 7, .08), #f9fafb 60%);
}

.cart-promo__form {
    display: grid;
    gap: .35rem;
}

.cart-promo__form label {
    color: var(--text-light);
    font-size: .67rem;
    font-weight: 850;
}

.cart-promo__form > div {
    display: flex;
    gap: .35rem;
}

.cart-promo__form input {
    min-width: 0;
    flex: 1;
    height: 36px;
    padding: 0 .7rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-dark);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    outline: none;
}

.cart-promo__form input:focus {
    border-color: rgba(232, 33, 24, .5);
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .08);
}

.cart-promo__form button {
    min-width: 76px;
    height: 36px;
    padding: 0 .7rem;
    border-radius: 10px;
    background: var(--text-dark);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    transition: var(--transition);
}

.cart-promo__form button:hover {
    background: var(--primary-color);
}

.cart-promo__form button.is-loading,
.cart-promo__active button.is-loading {
    position: relative;
    cursor: progress;
    color: transparent;
    opacity: .75;
}

.cart-promo__form button.is-loading::after,
.cart-promo__active button.is-loading::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    content: "";
    animation: cart-promo-spin .65s linear infinite;
    transform: translate(-50%, -50%);
}

.cart-promo__active button.is-loading::after {
    border-color: rgba(232, 33, 24, .22);
    border-top-color: var(--primary-color);
}

@keyframes cart-promo-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.cart-promo__active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    min-height: 34px;
}

.cart-promo__active > span {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .45rem;
    color: var(--success-color);
    font-size: .75rem;
}

.cart-promo__active strong,
.cart-promo__active small {
    font-weight: 900;
}

.cart-promo__active button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.cart-promo-flash {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem .8rem;
    border-radius: 14px;
    font-size: .78rem;
    font-weight: 850;
}

.cart-promo-flash--success {
    background: rgba(16, 185, 129, .1);
    color: #047857;
}

.cart-promo-flash--error {
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.cart-promo-discount {
    color: var(--success-color) !important;
}

.cart-promo-discount small {
    margin-left: .25rem;
    font-weight: 900;
}

.shipping-meter {
    display: grid;
    gap: .7rem;
}

.shipping-meter__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.shipping-meter__heading p {
    margin: 0;
    color: var(--text-light);
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.35;
}

.shipping-meter__heading > strong {
    flex: 0 0 auto;
    padding: .32rem .52rem;
    border-radius: 999px;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 950;
}

.shipping-meter__heading > strong.is-free {
    background: rgba(16, 185, 129, .12);
    color: var(--success-color);
}

.shipping-meter__track {
    position: relative;
    height: 30px;
    margin: 0 5px;
}

.shipping-meter__track::before,
.shipping-meter__fill {
    position: absolute;
    top: 5px;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 999px;
}

.shipping-meter__track::before {
    background: #e0e4eb;
    content: "";
}

.shipping-meter__fill {
    right: auto;
    z-index: 1;
    background: linear-gradient(90deg, var(--primary-color), #ff6a3d);
    transition: width .6s cubic-bezier(.16, 1, .3, 1);
}

.shipping-meter__checkpoints {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.shipping-meter__checkpoint {
    position: absolute;
    top: 0;
    left: var(--checkpoint-position);
    display: grid;
    min-width: 28px;
    justify-items: center;
    color: #98a0b2;
    text-align: center;
    transform: translateX(-50%);
}

.shipping-meter__checkpoint:first-child {
    justify-items: start;
    text-align: left;
    transform: none;
}

.shipping-meter__checkpoint:last-child {
    justify-items: end;
    text-align: right;
    transform: translateX(-100%);
}

.shipping-meter__checkpoint i {
    display: block;
    width: 13px;
    height: 13px;
    border: 3px solid #f9fafb;
    border-radius: 50%;
    background: #cbd1dc;
    box-shadow: 0 2px 5px rgba(32, 50, 99, .12);
    transition: var(--transition);
}

.shipping-meter__checkpoint small {
    display: block;
    white-space: nowrap;
}

.shipping-meter__checkpoint small {
    margin-top: .2rem;
    font-size: .5rem;
    font-weight: 800;
}

.shipping-meter__checkpoint.is-reached {
    color: var(--text-dark);
}

.shipping-meter__checkpoint.is-reached i {
    background: var(--primary-color);
}

.shipping-meter__checkpoint.is-current {
    color: var(--primary-color);
}

.shipping-meter__checkpoint.is-current i {
    background: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(232, 33, 24, .12);
    transform: scale(1.12);
}

.shipping-meter__checkpoint.is-free-checkpoint i {
    background: #cbd1dc;
}

.shipping-meter__checkpoint.is-free-checkpoint.is-reached i {
    background: var(--success-color);
}

.shipping-meter--compact {
    gap: .6rem;
}

.shipping-meter--compact .shipping-meter__heading p {
    font-size: .7rem;
}

.shipping-meter--compact .shipping-meter__track {
    height: 28px;
}

.shipping-meter--compact .shipping-meter__checkpoint small {
    font-size: .46rem;
}

#cart-shipping.is-free,
#cart-page-shipping.is-free {
    color: var(--success-color);
}

.cart-page__summary dl {
    display: grid;
    gap: .9rem;
}

.cart-page__summary dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-light);
    font-size: .92rem;
}

.cart-page__summary dd {
    color: var(--text-dark);
    font-weight: 900;
}

.cart-page__summary dd.is-free {
    color: var(--success-color);
}

.cart-page__summary-total {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-dark) !important;
    font-size: 1.08rem !important;
    font-weight: 900;
}

.cart-page__summary-total dd {
    color: var(--primary-color);
}

.cart-page__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 3.4rem;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    font-weight: 900;
    opacity: .72;
}

.cart-page__checkout--enabled {
    border: 0;
    background: linear-gradient(135deg, var(--primary-color), #ff5b35 48%, var(--secondary-color));
    background-size: 180% 180%;
    box-shadow: 0 18px 34px rgba(232, 33, 24, .24);
    opacity: 1;
    transition: var(--transition);
}

.cart-page__checkout--enabled:hover {
    background-position: 100% 50%;
    color: #fff;
    transform: translateY(-2px);
}

.checkout-address-form {
    display: grid;
    gap: .85rem;
}

.checkout-address-form__heading {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-top: .4rem;
    border-top: 1px solid var(--border-color);
}

.checkout-address-form__heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.checkout-address-form__heading strong,
.checkout-address-form__heading small {
    display: block;
}

.checkout-address-form__heading strong {
    color: var(--text-dark);
    font-weight: 900;
}

.checkout-address-form__heading small {
    margin-top: .12rem;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 700;
}

.checkout-address-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 38px;
    gap: .75rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid rgba(32, 50, 99, .1);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 204, 7, .16), transparent 34%),
        #fff;
    box-shadow: 0 12px 30px rgba(32, 50, 99, .06);
}

.checkout-address-card[hidden],
.checkout-address-form__editor[hidden] {
    display: none;
}

.checkout-address-card__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 15px;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.checkout-address-card address {
    display: grid;
    min-width: 0;
    gap: .15rem;
    color: var(--text-light);
    font-size: .78rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1.4;
}

.checkout-address-card address strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-address-card address span,
.checkout-address-card address small {
    overflow-wrap: anywhere;
}

.checkout-address-card address small {
    color: #8a91a0;
    font-size: .68rem;
    font-weight: 800;
}

.checkout-address-card__edit {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(32, 50, 99, .1);
    border-radius: 13px;
    background: var(--bg-light);
    color: var(--text-dark);
    transition: var(--transition);
}

.checkout-address-card__edit:hover {
    border-color: rgba(232, 33, 24, .2);
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-1px);
}

.checkout-address-form__editor {
    display: grid;
    gap: .85rem;
    padding: .85rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-light);
}

.checkout-address-form__grid {
    display: grid;
    grid-template-columns: .75fr 1fr;
    gap: .7rem;
}

.checkout-address-form__field {
    display: grid;
    gap: .35rem;
}

.checkout-address-form__field label {
    color: var(--text-dark);
    font-size: .74rem;
    font-weight: 900;
}

.checkout-address-form__field input {
    width: 100%;
    min-height: 2.9rem;
    padding: .78rem .9rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 750;
    outline: none;
    transition: var(--transition);
}

.checkout-address-form__field input:focus {
    border-color: rgba(232, 33, 24, .42);
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .08);
}

.checkout-address-form__field ul,
.checkout-address-form > ul {
    margin: 0;
    padding: 0;
    color: var(--primary-color);
    font-size: .75rem;
    font-weight: 800;
    list-style: none;
}

.checkout-address-form__cancel {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .45rem;
    padding: .58rem .78rem;
    border-radius: 999px;
    background: #fff;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 900;
    transition: var(--transition);
}

.checkout-address-form__cancel:hover {
    color: var(--primary-color);
}

.checkout-address-form__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: var(--text-light);
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
}

.checkout-result {
    display: grid;
    min-height: 72vh;
    place-items: center;
    padding: clamp(2rem, 8vw, 5rem) 1rem;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 204, 7, .2), transparent 26%),
        linear-gradient(135deg, #fff 0%, #f7f8fc 100%);
}

.checkout-result__card {
    width: min(100%, 560px);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border: 1px solid var(--border-color);
    border-radius: 32px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 24px 70px rgba(32, 50, 99, .12);
    text-align: center;
}

.checkout-result__icon {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 26px;
    font-size: 2rem;
}

.checkout-result__card--success .checkout-result__icon {
    background: rgba(16, 185, 129, .12);
    color: var(--success-color);
}

.checkout-result__card--cancel .checkout-result__icon {
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.checkout-result__eyebrow {
    color: var(--primary-color);
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.checkout-result h1 {
    margin-top: .4rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 7vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -.05em;
}

.checkout-result__card > p:not(.checkout-result__eyebrow) {
    max-width: 420px;
    margin: .75rem auto 0;
    color: var(--text-light);
    line-height: 1.65;
}

.checkout-result__order {
    display: grid;
    gap: .25rem;
    margin: 1.2rem auto 0;
    padding: .95rem 1rem;
    border-radius: 18px;
    background: var(--bg-light);
}

.checkout-result__order span {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.checkout-result__order strong {
    color: var(--text-dark);
    font-size: 1.08rem;
    font-weight: 950;
}

.checkout-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.4rem;
}

.checkout-result__primary,
.checkout-result__secondary {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .78rem 1.15rem;
    border-radius: 999px;
    font-weight: 900;
    transition: var(--transition);
}

.checkout-result__primary {
    background: var(--text-dark);
    color: #fff;
}

.checkout-result__secondary {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-dark);
}

.checkout-result__primary:hover,
.checkout-result__secondary:hover {
    transform: translateY(-2px);
}

.cart-line {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: .9rem;
    padding: .75rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(32, 50, 99, .06);
}

.cart-line__media {
    display: grid;
    width: 82px;
    height: 92px;
    place-items: center;
    overflow: hidden;
    border-radius: 15px;
    background: var(--bg-light);
    color: var(--text-light);
}

.cart-line__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-line__content {
    display: grid;
    min-width: 0;
    gap: .55rem;
}

.cart-line__top,
.cart-line__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.cart-line__top a {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.cart-line__content > span {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 700;
}

.cart-line__remove {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: .7rem;
    transition: var(--transition);
}

.cart-line__remove:hover {
    background: var(--primary-color);
    color: #fff;
}

.cart-line__quantity {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-light);
}

.cart-line__quantity button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--text-dark);
    font-size: .65rem;
    transition: var(--transition);
}

.cart-line__quantity button:hover {
    background: var(--text-dark);
    color: #fff;
}

.cart-line__quantity strong {
    min-width: 22px;
    color: var(--text-dark);
    font-size: .78rem;
    text-align: center;
}

.cart-line__bottom > strong {
    color: var(--primary-color);
    font-size: .86rem;
    font-weight: 900;
}

.shop-product-card__add.is-loading,
.product-detail__primary.is-loading,
.cart-line button.is-loading {
    cursor: wait;
    opacity: .72;
}

#toast.is-error {
    background: var(--primary-color);
}

#toast.is-error i {
    color: #fff;
}

.line-clamp-1 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shop-catalog-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.shop-catalog-heading p {
    margin-top: .55rem;
    color: var(--text-light);
    font-size: .82rem;
}

.shop-catalog-heading__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .9rem;
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 999px;
    background: rgba(16, 185, 129, .08);
    color: #087b59;
    font-size: .7rem;
    font-weight: 800;
}

.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.shop-product-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(32, 50, 99, .07);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.shop-product-card:hover {
    box-shadow: 0 22px 48px rgba(32, 50, 99, .14);
    transform: translateY(-7px);
}

.shop-product-card__visual {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 1;
    place-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 85% 10%, rgba(255, 204, 7, .15), transparent 28%),
        var(--bg-light);
}

.shop-product-card__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.shop-product-card:hover .shop-product-card__visual img {
    transform: scale(1.06);
}

.shop-product-card__tag {
    position: absolute;
    z-index: 2;
    top: .85rem;
    left: .85rem;
    padding: .45rem .65rem;
    border-radius: 999px;
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shop-product-card__tag.is-promo {
    background: var(--primary-color);
    box-shadow: 0 8px 20px rgba(232, 33, 24, .25);
}

.shop-product-card__tag.is-new {
    background: var(--text-dark);
    box-shadow: 0 8px 20px rgba(32, 50, 99, .22);
}

.shop-product-card__tag.is-bestseller {
    background: linear-gradient(135deg, var(--text-dark), var(--primary-color));
    box-shadow: 0 8px 20px rgba(32, 50, 99, .22);
}

.shop-product-card__open {
    position: absolute;
    right: .85rem;
    bottom: .85rem;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-md);
    color: var(--text-dark);
    font-size: .72rem;
    opacity: 0;
    transform: translateY(8px);
    transition: var(--transition);
}

.shop-product-card:hover .shop-product-card__open {
    opacity: 1;
    transform: translateY(0);
}

.shop-product-card__body {
    padding: 1.1rem;
}

.shop-product-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
    color: var(--text-light);
    font-size: .65rem;
    font-weight: 700;
}

.shop-product-card__meta span:last-child {
    color: var(--text-dark);
}

.shop-product-card__meta i,
.product-detail__rating i {
    color: var(--secondary-color);
}

.shop-product-card h2 {
    min-height: 2.65rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.shop-product-card h2 a:hover {
    color: var(--primary-color);
}

.shop-product-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

.shop-product-card__price {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
}

.shop-product-card__price strong {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 900;
}

.shop-product-card__price del {
    color: #9ca3af;
    font-size: .7rem;
}

.shop-product-card__button {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: var(--text-dark);
    color: #fff;
    font-size: .75rem;
    transition: var(--transition);
}

.shop-product-card__button:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.product-detail {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(32, 50, 99, .1);
}

.product-detail__visual {
    position: relative;
    display: grid;
    min-height: 560px;
    place-items: center;
    padding: clamp(2rem, 6vw, 5rem);
    border-right: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 85% 12%, rgba(255, 204, 7, .17), transparent 28%),
        var(--bg-light);
}

.product-detail__visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: contain;
}

.product-detail__content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
    flex-direction: column;
}

.product-detail__category {
    margin-bottom: .55rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.product-detail h2 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.product-detail__rating {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
}

.product-detail__rating span {
    font-size: .8rem;
    font-weight: 900;
}

.product-detail__rating small {
    color: var(--text-light);
    font-size: .68rem;
}

.product-detail__description {
    max-width: 520px;
    margin: 1.5rem 0;
    color: var(--text-light);
    font-size: .9rem;
    line-height: 1.7;
}

.product-detail__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.product-detail__price strong {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 900;
}

.product-detail__price del {
    color: #9ca3af;
    font-size: .9rem;
}

.product-detail__price span {
    padding: .35rem .55rem;
    border-radius: 999px;
    background: rgba(232, 33, 24, .09);
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 900;
}

.product-detail__actions {
    display: flex;
    width: 100%;
    gap: .75rem;
    margin-top: 1.6rem;
}

.product-detail__primary {
    display: inline-flex;
    min-height: 52px;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .85rem 1.3rem;
    border-radius: 999px;
    background: var(--text-dark);
    box-shadow: 0 12px 28px rgba(32, 50, 99, .2);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    transition: var(--transition);
}

.product-detail__primary:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.product-detail__secondary {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: #fff;
    color: var(--text-dark);
    transition: var(--transition);
}

.product-detail__secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.product-detail__benefits {
    display: grid;
    width: 100%;
    gap: .65rem;
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--border-color);
}

.product-detail__benefits span {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 700;
}

.product-detail__benefits i {
    width: 18px;
    color: var(--success-color);
    text-align: center;
}

/* Store catalog and product page */
.shop-catalog {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    background: #fff;
}

.shop-catalog--with-hero {
    padding-top: 0rem;
}

.shop-category-hero {
    grid-column: 1 / -1;
    overflow: hidden;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    background: #f3b91d;
}

.shop-category-hero[data-hero-key="drinks"] {
    background: #f7d4df;
}

.shop-category-hero[data-hero-key="savory"] {
    background: #f3c17e;
}

.shop-category-hero[data-hero-key="sweet"] {
    background: #e9679a;
}

.shop-category-hero__media {
    position: relative;
    overflow: hidden;
    height:350px;
    background: inherit;
}

.shop-category-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.shop-category-hero__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 72%, rgba(15, 23, 42, .08));
    content: "";
    pointer-events: none;
}

.shop-category-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .28s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-hero.is-changing .shop-category-hero__media img {
    opacity: .2;
    transform: scale(1.025);
}

.shop-layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 3rem;
}

.shop-sidebar {
    display: grid;
    align-content: start;
    gap: 1.5rem;
}

.shop-filter-backdrop,
.shop-filter-trigger,
.shop-filter-modal__handle,
.shop-filter-modal__header,
.shop-filter-modal__footer {
    display: none;
}

.shop-results-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.shop-filter-card {
    padding: 1.6rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(32, 50, 99, .08);
}

.shop-filter-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.1rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

.shop-filter-title i {
    width: 16px;
    color: var(--primary-color);
    text-align: center;
}

.shop-filter-card--categories {
    padding: 1.75rem;
    border-color: rgba(15, 23, 42, .05);
    border-radius: 24px;
    box-shadow:
        0 12px 34px -10px rgba(15, 23, 42, .08),
        0 4px 12px -5px rgba(15, 23, 42, .03);
}

.shop-filter-card--categories .shop-filter-title {
    gap: .85rem;
    margin-bottom: 1.75rem;
    font-size: 1.25rem;
    letter-spacing: -.03em;
}

.shop-filter-title-icon-wrapper {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(232, 33, 24, .06);
    color: var(--primary-color);
    font-size: .9rem;
}

.shop-filter-title-icon-wrapper i {
    width: auto;
}

.shop-category-list {
    display: grid;
    gap: .8rem;
}

.shop-category-button {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .5rem .9rem .5rem .5rem;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--text-dark);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: .2s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-button:hover {
    background: #f8fafc;
}

.shop-category-button.is-active {
    background: rgba(232, 33, 24, .06);
    box-shadow: inset 0 0 0 1px rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.shop-category-button:focus-visible,
.shop-category-group > summary:focus-visible {
    outline: 2.5px solid var(--primary-color);
    outline-offset: 2px;
}

.shop-category-button__label {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: .85rem;
}

.shop-category-button__label i {
    width: 16px;
    flex: 0 0 auto;
    color: currentColor;
    text-align: center;
}

.shop-category-button__label span,
.shop-category-button__label strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-category-button__count,
.shop-category-group__count {
    display: inline-grid;
    min-width: 30px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0 .6rem;
    border-radius: 20px;
    background: #f1f5f9;
    color: var(--text-light);
    font-size: .75rem;
    font-weight: 700;
    transition: .2s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-button.is-active .shop-category-button__count {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(232, 33, 24, .15);
}

.shop-category-button--root {
    min-height: 58px;
    margin-bottom: .25rem;
    border-color: var(--border-color);
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
}

.shop-category-button--root:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
    transform: translateY(-1px);
}

.shop-category-img-container {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f5f9;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
    transition: .35s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .35s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-img-container--root img {
    padding: 5px;
    object-fit: contain;
}

.shop-category-img-container--license img {
    padding: 5px;
}

.shop-category-button:hover .shop-category-img-container img,
.shop-category-group:hover > summary .shop-category-img-container img {
    transform: scale(1.1);
}

.shop-category-button__icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: #f1f5f9;
}

.shop-category-group {
    border: 1px solid transparent;
    border-radius: 20px;
    background: transparent;
    transition: .35s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-group[open],
.shop-category-group.has-active-category {
    margin: .4rem 0;
    border-color: rgba(15, 23, 42, .06);
    background: #fff;
    box-shadow:
        0 12px 34px -10px rgba(15, 23, 42, .08),
        0 4px 12px -5px rgba(15, 23, 42, .03);
}

.shop-category-group > summary {
    display: flex;
    min-height: 60px;
    height: auto;
    align-items: center;
    gap: .85rem;
    padding: .5rem .9rem .5rem .5rem;
    border-radius: 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: .2s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-group > summary:hover {
    background: #f8fafc;
}

.shop-category-group > summary::-webkit-details-marker {
    display: none;
}

.shop-category-group__title {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: .1rem;
}

.shop-category-group__title strong {
    overflow: visible;
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.shop-category-group__title small {
    overflow: hidden;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-category-group__chevron {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: .8rem;
    transition:
        transform .35s cubic-bezier(.16, 1, .3, 1),
        color .2s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-group[open] .shop-category-group__chevron {
    color: var(--text-dark);
    transform: rotate(180deg);
}

.shop-category-group__panel {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    gap: .3rem;
    padding: .4rem .6rem .9rem 3rem;
    animation: shop-category-panel-in .4s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-group__panel::before {
    position: absolute;
    top: 0;
    bottom: 1.7rem;
    left: 1.85rem;
    width: 2px;
    border-radius: 2px;
    background: #e2e8f0;
    content: "";
    transition: background .35s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-group.has-active-category .shop-category-group__panel::before {
    background: linear-gradient(to bottom, var(--primary-color), rgba(232, 33, 24, .3));
}

@keyframes shop-category-panel-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.shop-category-button--parent {
    position: relative;
    margin-bottom: .3rem;
    background: transparent;
    color: var(--text-dark);
    font-weight: 700;
}

.shop-category-button--parent .shop-category-button__label i {
    color: #94a3b8;
    font-size: .8rem;
}

.shop-category-button--child {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .4rem .8rem;
    border-radius: 10px;
    color: var(--text-light);
    font-size: .85rem;
    font-weight: 500;
}

.shop-category-button--child .shop-category-button__label {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.shop-category-button--child .shop-category-button__label > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-category-button--child .shop-category-button__count {
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: end;
}

.shop-category-button--child::before {
    position: absolute;
    top: 50%;
    left: -1.15rem;
    width: .75rem;
    height: 2px;
    border-radius: 2px;
    background: #e2e8f0;
    content: "";
    transition: background .2s cubic-bezier(.16, 1, .3, 1);
}

.shop-category-button--child:hover::before,
.shop-category-button--child.is-active::before {
    background: var(--primary-color);
}

.shop-category-button--child .fa-angle-right {
    display: none;
}

.shop-category-group.has-active-category > summary {
    background: rgba(232, 33, 24, .06);
}

.shop-category-group.has-active-category .shop-category-img-container {
    box-shadow: 0 4px 12px rgba(232, 33, 24, .25);
    transform: scale(1.04);
}

.shop-price-range {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    outline: 0;
    background: var(--primary-color);
    accent-color: var(--primary-color);
    cursor: pointer;
}

.shop-price-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: none;
    appearance: none;
}

.shop-price-label {
    margin-top: 1.2rem;
    color: var(--text-light);
    font-size: .78rem;
}

.shop-price-label strong {
    color: var(--text-dark);
}

.shop-filter-check {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .8rem;
    color: var(--text-dark);
    font-size: .84rem;
    cursor: pointer;
}

.shop-filter-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--primary-color);
}

.shop-results {
    min-width: 0;
}

.shop-results-toolbar {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.shop-active-category {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .7rem;
}

.shop-active-category > img {
    display: block;
    width: 64px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-light);
    object-fit: cover;
}

.shop-active-category__copy {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.shop-active-category__copy > strong {
    overflow: hidden;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-active-category__copy small {
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 600;
}

.shop-active-category__copy b {
    color: var(--text-dark);
    font-size: .76rem;
}

.shop-product-card:not([hidden]) {
    animation: shop-product-reveal .4s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--shop-card-reveal-index, 0) * 24ms);
}

@keyframes shop-product-reveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shop-infinite-loader {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 22px;
    background: rgba(249, 250, 251, .76);
    color: var(--text-dark);
    backdrop-filter: blur(14px);
}

.shop-infinite-loader[hidden] {
    display: none;
}

.shop-infinite-loader__spinner {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(
        from 220deg,
        rgba(32, 50, 99, .08) 0deg,
        #203263 70deg,
        #675cff 145deg,
        #e82118 220deg,
        #ffcc07 285deg,
        rgba(32, 50, 99, .08) 360deg
    );
    box-shadow:
        0 8px 24px rgba(32, 50, 99, .12),
        0 0 20px rgba(103, 92, 255, .12);
    animation: shop-loader-spin .9s linear infinite;
}

.shop-infinite-loader__spinner::before {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(249, 250, 251, .98);
    content: "";
}

.shop-infinite-loader__spinner::after {
    position: absolute;
    top: 1px;
    left: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, .9);
    content: "";
}

.shop-infinite-loader > span:last-child {
    display: grid;
    gap: .12rem;
}

.shop-infinite-loader strong {
    font-size: .8rem;
    font-weight: 850;
}

.shop-infinite-loader small {
    color: var(--text-light);
    font-size: .68rem;
    font-weight: 650;
}

.shop-infinite-loader small b {
    color: var(--primary-color);
}

@keyframes shop-loader-spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.shop-results-toolbar p {
    color: var(--text-light);
    font-size: .84rem;
}

.shop-results-toolbar p strong {
    color: var(--text-dark);
    font-size: 1rem;
}

.shop-sort {
    position: relative;
    display: flex;
    min-width: 190px;
    align-items: center;
}

.shop-sort select {
    width: 100%;
    min-height: 44px;
    padding: 0 2.6rem 0 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    outline: 0;
    background: #fff;
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 800;
    appearance: none;
    cursor: pointer;
}

.shop-sort select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(232, 33, 24, .1);
}

.shop-sort i {
    position: absolute;
    right: 1rem;
    font-size: .65rem;
    pointer-events: none;
}

.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.shop-products-grid.home-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-product-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: box-shadow .3s ease, transform .3s ease;
}

.shop-product-card:hover,
.shop-product-card:focus-visible {
    box-shadow: 0 18px 42px rgba(32, 50, 99, .14);
    transform: translateY(-4px);
}

.shop-product-card:focus-visible {
    outline: 3px solid rgba(232, 33, 24, .18);
    outline-offset: 3px;
}

.shop-product-card::before,
.shop-product-card::after {
    position: absolute;
    z-index: 8;
    content: "";
    pointer-events: none;
}

.shop-product-card::before {
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 204, 7, .34), transparent 36%),
        radial-gradient(circle at 50% 75%, rgba(232, 33, 24, .24), transparent 42%),
        linear-gradient(135deg, rgba(232, 33, 24, .12), rgba(255, 204, 7, .18));
    opacity: 0;
    transform: scale(.92);
}

.shop-product-card::after {
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 -92px 0 rgba(255, 204, 7, .92),
        82px -46px 0 rgba(232, 33, 24, .82),
        86px 44px 0 rgba(255, 204, 7, .82),
        0 96px 0 rgba(232, 33, 24, .8),
        -86px 44px 0 rgba(255, 204, 7, .82),
        -82px -46px 0 rgba(232, 33, 24, .82);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18);
}

.shop-product-card.is-cart-bursting {
    animation: cart-card-pop .55s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 24px 56px rgba(232, 33, 24, .18), 0 14px 38px rgba(32, 50, 99, .12);
}

.shop-product-card.is-cart-bursting::before {
    animation: cart-card-halo .68s ease-out;
}

.shop-product-card.is-cart-bursting::after {
    animation: cart-card-sparkles .72s ease-out;
}

.shop-product-card__visual {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    place-items: center;
    padding: 1.8rem;
    border-bottom: 0;
    background: #f8f9fb;
}

.shop-product-card__image-link {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.shop-product-card__visual img {
    width: 100%;
    height: 100%;
    max-height: 88%;
    object-fit: contain;
    transition: opacity .25s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.shop-product-card__visual img.is-deferred {
    opacity: 0;
}

.shop-product-card:hover .shop-product-card__visual img {
    transform: scale(1.04);
}

.shop-product-card__tag {
    top: 1rem;
    left: 1rem;
    padding: .45rem .75rem;
    font-size: .62rem;
    letter-spacing: 0;
    text-transform: none;
}

.shop-product-card__tag.is-promo {
    background: var(--primary-color);
}

.shop-product-card__tag.is-new {
    background: var(--secondary-color);
    box-shadow: 0 8px 20px rgba(255, 204, 7, .2);
    color: var(--text-dark);
}

.shop-product-card__tag.is-bestseller {
    background: linear-gradient(135deg, var(--text-dark), var(--primary-color));
    color: #fff;
}

.shop-product-card__actions {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;
    display: grid;
    gap: .55rem;
}

.shop-product-card__actions button,
.shop-product-card__actions a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(229, 231, 235, .7);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 3px 10px rgba(32, 50, 99, .08);
    color: var(--text-dark);
    font-size: .82rem;
    transition: var(--transition);
}

.shop-product-card__actions button:hover,
.shop-product-card__actions a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.favorite-button {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.favorite-button i {
    position: relative;
    z-index: 2;
    transition: color .18s ease, transform .18s ease;
}

.favorite-button::before,
.favorite-button::after {
    position: absolute;
    z-index: 1;
    content: "";
    pointer-events: none;
}

.favorite-button::before {
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 33, 24, .26), transparent 68%);
    opacity: 0;
    transform: scale(.2);
}

.favorite-button::after {
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary-color);
    box-shadow:
        0 -24px 0 rgba(232, 33, 24, .95),
        20px -13px 0 rgba(255, 204, 7, .95),
        22px 10px 0 rgba(232, 33, 24, .9),
        0 24px 0 rgba(255, 204, 7, .9),
        -22px 10px 0 rgba(232, 33, 24, .9),
        -20px -13px 0 rgba(255, 204, 7, .95);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25);
}

.favorite-button.is-active {
    border-color: rgba(232, 33, 24, .26);
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.favorite-button.is-active i {
    animation: favorite-heart-pop .48s cubic-bezier(.16, 1, .3, 1);
}

.favorite-button.is-bursting::before {
    animation: favorite-halo .58s ease-out;
}

.favorite-button.is-bursting::after {
    animation: favorite-sparkles .62s ease-out;
}

.favorite-button.is-pending {
    cursor: progress;
}

@keyframes favorite-heart-pop {
    0% {
        transform: scale(.72) rotate(-10deg);
    }

    55% {
        transform: scale(1.24) rotate(8deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes favorite-halo {
    0% {
        opacity: .8;
        transform: scale(.25);
    }

    100% {
        opacity: 0;
        transform: scale(2.6);
    }
}

@keyframes favorite-sparkles {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.25) rotate(0deg);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15) rotate(28deg);
    }
}

.shop-product-card__body {
    min-height: 190px;
    padding: 1.25rem;
}

.shop-product-card__category {
    display: block;
    margin-bottom: .5rem;
    color: var(--text-light);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shop-product-card h2 {
    min-height: 2.65rem;
    margin: 0;
    font-size: .98rem;
    line-height: 1.35;
}

.shop-product-card__rating {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .75rem;
}

.shop-product-card__rating span {
    display: flex;
    gap: .18rem;
    color: var(--secondary-color);
    font-size: .72rem;
}

.shop-product-card__rating small {
    color: var(--text-light);
    font-size: .7rem;
}

.shop-product-card__stock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 800;
}

.shop-product-card__stock.is-in-stock i {
    color: var(--success-color);
}

.shop-product-card__stock.is-out-of-stock i {
    color: var(--primary-color);
}

.shop-product-card__price {
    margin-top: .8rem;
}

.shop-product-card__price strong {
    font-size: 1.05rem;
}

.shop-product-card__price del {
    font-size: .72rem;
}

.shop-product-card--quantity .shop-product-card__body {
    padding-bottom: 5.15rem;
}

.shop-product-card__purchase {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: .55rem;
    padding: .55rem;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 24px rgba(32, 50, 99, .06);
    backdrop-filter: blur(10px);
}

.shop-product-card__quantity {
    display: grid;
    min-width: 0;
    grid-template-columns: 30px minmax(28px, 1fr) 30px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #f7f8fb;
}

.shop-product-card__quantity button {
    display: grid;
    width: 30px;
    height: 40px;
    place-items: center;
    color: var(--text-dark);
    font-size: .62rem;
    transition: color .2s ease, background .2s ease;
}

.shop-product-card__quantity button:hover {
    background: #fff;
    color: var(--primary-color);
}

.shop-product-card__quantity input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-dark);
    font-size: .82rem;
    font-weight: 900;
    text-align: center;
    appearance: textfield;
}

.shop-product-card__quantity input::-webkit-inner-spin-button,
.shop-product-card__quantity input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.shop-product-card__purchase .shop-product-card__add {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    min-height: 42px;
    border-radius: 12px;
    transform: none;
}

.shop-product-card__add {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--text-dark);
    color: #fff;
    font-size: .84rem;
    font-weight: 850;
    transform: translateY(101%);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}

.shop-product-card__add:disabled,
.product-detail__primary:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.shop-product-card:hover .shop-product-card__add,
.shop-product-card:focus-within .shop-product-card__add {
    transform: translateY(0);
}

.shop-product-card__add:hover {
    background: var(--primary-color);
}

.cart-add-button {
    isolation: isolate;
    overflow: hidden;
}

.product-detail__primary.cart-add-button {
    position: relative;
}

.cart-add-button i {
    position: relative;
    z-index: 2;
    transition: transform .18s ease;
}

.cart-add-button::before,
.cart-add-button::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.cart-add-button::before {
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 204, 7, .42), transparent 38%),
        linear-gradient(90deg, rgba(232, 33, 24, .95), rgba(255, 204, 7, .95), rgba(32, 50, 99, .95));
    opacity: 0;
    transform: scaleX(.25);
    transform-origin: center;
}

.cart-add-button::after {
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 -26px 0 rgba(255, 255, 255, .95),
        26px -14px 0 rgba(255, 204, 7, .95),
        28px 12px 0 rgba(255, 255, 255, .92),
        0 27px 0 rgba(255, 204, 7, .95),
        -28px 12px 0 rgba(255, 255, 255, .92),
        -26px -14px 0 rgba(255, 204, 7, .95);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25);
}

.cart-add-button.is-cart-bursting::before {
    animation: cart-add-wave .62s ease-out;
}

.cart-add-button.is-cart-bursting::after {
    animation: cart-add-sparkles .7s ease-out;
}

.cart-add-button.is-cart-bursting i {
    animation: cart-bag-pop .52s cubic-bezier(.16, 1, .3, 1);
}

@keyframes cart-bag-pop {
    0% {
        transform: translateY(0) scale(.78) rotate(-8deg);
    }

    50% {
        transform: translateY(-3px) scale(1.22) rotate(8deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes cart-add-wave {
    0% {
        opacity: 0;
        transform: scaleX(.2);
    }

    28% {
        opacity: .95;
    }

    100% {
        opacity: 0;
        transform: scaleX(1.08);
    }
}

@keyframes cart-add-sparkles {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.25) rotate(0deg);
    }

    32% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.28) rotate(32deg);
    }
}

@keyframes cart-card-pop {
    0% {
        transform: translateY(-4px) scale(.985);
    }

    48% {
        transform: translateY(-7px) scale(1.018);
    }

    100% {
        transform: translateY(-4px) scale(1);
    }
}

@keyframes cart-card-halo {
    0% {
        opacity: 0;
        transform: scale(.88);
    }

    34% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@keyframes cart-card-sparkles {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.18) rotate(0deg);
    }

    28% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05) rotate(34deg);
    }
}

.shop-no-results {
    padding: 5rem 1rem;
    color: var(--text-light);
    text-align: center;
}

.shop-no-results i {
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-size: 2rem;
}

.product-hero {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background:
        linear-gradient(90deg, rgba(18, 31, 69, .98), rgba(32, 50, 99, .82)),
        var(--product-hero-image) center 32% / cover;
    color: #fff;
}

.product-hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 40%, rgba(255, 204, 7, .08));
    content: "";
}

.product-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 260px;
    justify-content: center;
    flex-direction: column;
}

.product-hero__content p {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.8rem;
    color: rgba(255, 255, 255, .7);
    font-size: .7rem;
}

.product-hero__content p a:hover {
    color: var(--secondary-color);
}

.product-hero__content p i {
    font-size: .5rem;
}

.product-hero__content > span {
    margin-bottom: .45rem;
    color: var(--secondary-color);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-hero h1 {
    max-width: 720px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.product-page {
    padding-top: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.product-detail {
    display: grid;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: clamp(2rem, 6vw, 5rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.product-detail__gallery {
    min-width: 0;
}

.product-detail__visual {
    position: relative;
    display: grid;
    overflow: hidden;
    min-height: 0;
    aspect-ratio: 1 / 1;
    place-items: center;
    padding: clamp(2rem, 6vw, 4.5rem);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #f7f8fa;
}

.product-detail__visual img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain;
}

.product-detail__thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1rem;
}

.product-detail__thumbnail {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    padding: .45rem;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border-color);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.product-detail__thumbnail:hover,
.product-detail__thumbnail.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 14px 30px rgba(232, 33, 24, .14);
    transform: translateY(-2px);
}

.product-detail__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-detail__content {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    flex-direction: column;
}

.product-detail__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.product-detail__badges span {
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(32, 50, 99, .07);
    color: var(--text-dark);
    font-size: .64rem;
    font-weight: 850;
    text-transform: uppercase;
}

.product-detail__badges .is-stock {
    background: rgba(16, 185, 129, .1);
    color: #087b59;
}

.product-detail__badges .is-out-of-stock {
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
}

.product-detail h2 {
    margin-top: 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.product-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.product-detail__meta span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 800;
}

.product-detail__meta i {
    color: var(--primary-color);
}

.product-detail__rating {
    margin-top: 1rem;
}

.product-detail__rating span {
    display: flex;
    gap: .2rem;
    color: var(--secondary-color);
    font-size: .85rem;
}

.product-detail__rating strong {
    font-size: .78rem;
}

.product-detail__price {
    margin-top: 1.5rem;
}

.product-detail__price strong {
    font-size: 2.2rem;
}

.product-detail__stock {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1.4rem;
    padding: 1rem;
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 13px;
    background: rgba(16, 185, 129, .06);
}

.product-detail__stock > i {
    color: var(--success-color);
}

.product-detail__stock.is-out-of-stock {
    border-color: rgba(232, 33, 24, .18);
    background: rgba(232, 33, 24, .06);
}

.product-detail__stock.is-out-of-stock > i {
    color: var(--primary-color);
}

.product-detail__stock div {
    display: grid;
    gap: .15rem;
}

.product-detail__stock strong {
    color: #087b59;
    font-size: .75rem;
}

.product-detail__stock span {
    color: var(--text-light);
    font-size: .67rem;
}

.product-detail__description {
    margin: 1.5rem 0;
}

.product-detail__purchase {
    display: flex;
    gap: .75rem;
}

.product-quantity {
    display: flex;
    min-height: 52px;
    flex: 0 0 auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
}

.product-quantity button {
    width: 42px;
    height: 50px;
    color: var(--text-dark);
    font-size: .7rem;
}

.product-quantity button:hover {
    color: var(--primary-color);
}

.product-quantity span {
    min-width: 24px;
    font-size: .8rem;
    font-weight: 900;
    text-align: center;
}

.product-detail__primary {
    min-width: 0;
}

.product-detail__benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.product-detail__benefits span {
    align-items: flex-start;
    line-height: 1.4;
}

.product-tabs {
    margin-top: clamp(3rem, 7vw, 6rem);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(32, 50, 99, .06);
    overflow: hidden;
}

.product-tabs__nav-wrapper {
    padding: .75rem;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.product-tabs__nav {
    display: flex;
    max-width: 680px;
    margin: 0 auto;
    gap: .4rem;
    padding: .35rem;
    border-radius: 16px;
    background: #eef2f7;
}

.product-tabs__nav button {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1rem;
    border-radius: 12px;
    color: var(--text-light);
    font-size: .76rem;
    font-weight: 850;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product-tabs__nav button.is-active {
    background: #fff;
    box-shadow: 0 5px 16px rgba(32, 50, 99, .1);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.product-tabs__nav button span {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(232, 33, 24, .09);
    color: var(--primary-color);
    font-size: .62rem;
}

.product-tabs__panel {
    min-height: 220px;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    animation: product-tab-enter .35s cubic-bezier(.16, 1, .3, 1);
}

@keyframes product-tab-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-tab-copy,
.product-ingredients-heading {
    display: grid;
    max-width: 920px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 1rem;
}

.product-tab-copy__icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.product-tab-copy__icon.is-green {
    background: rgba(16, 185, 129, .1);
    color: var(--success-color);
}

.product-tab-copy__eyebrow {
    display: block;
    margin-bottom: .35rem;
    color: var(--primary-color);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.product-tabs__panel h3 {
    margin-bottom: .65rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    font-weight: 850;
}

.product-tab-copy p,
.product-ingredients-heading p,
.product-review-card p {
    color: var(--text-light);
    font-size: .82rem;
    line-height: 1.8;
}

.product-ingredient-grid {
    display: grid;
    margin-top: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    padding: 0;
    list-style: none;
}

.product-ingredient-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .72rem .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: var(--text-dark);
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.4;
    box-shadow: 0 8px 22px rgba(32, 50, 99, .045);
}

.product-ingredient-card__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: var(--ingredient-soft, rgba(16, 185, 129, .1));
    color: var(--ingredient-color, var(--success-color));
    font-size: .86rem;
}

.product-ingredient-card--blue {
    --ingredient-soft: rgba(14, 165, 233, .11);
    --ingredient-color: #0284c7;
}

.product-ingredient-card--amber,
.product-ingredient-card--gold {
    --ingredient-soft: rgba(245, 158, 11, .12);
    --ingredient-color: #d97706;
}

.product-ingredient-card--orange {
    --ingredient-soft: rgba(249, 115, 22, .11);
    --ingredient-color: #ea580c;
}

.product-ingredient-card--olive {
    --ingredient-soft: rgba(101, 163, 13, .11);
    --ingredient-color: #4d7c0f;
}

.product-ingredient-card--violet,
.product-ingredient-card--purple {
    --ingredient-soft: rgba(124, 58, 237, .1);
    --ingredient-color: #7c3aed;
}

.product-ingredient-card--sky {
    --ingredient-soft: rgba(6, 182, 212, .1);
    --ingredient-color: #0891b2;
}

.product-ingredient-card--rose {
    --ingredient-soft: rgba(244, 63, 94, .1);
    --ingredient-color: #e11d48;
}

.product-ingredient-information {
    display: grid;
    margin-top: 1.25rem;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #f8fafc;
}

.product-ingredient-information__icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: rgba(32, 50, 99, .08);
    color: var(--text-dark);
}

.product-ingredient-information h4 {
    margin: 0 0 .3rem;
    color: var(--text-dark);
    font-size: .8rem;
    font-weight: 900;
}

.product-ingredient-information p {
    margin: 0;
    color: var(--text-light);
    font-size: .76rem;
    line-height: 1.7;
}

.product-reviews__overview {
    display: grid;
    grid-template-columns: minmax(210px, .75fr) minmax(280px, 1.5fr);
    gap: clamp(1.25rem, 4vw, 3rem);
}

.product-reviews__score {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    flex-direction: column;
    background: #f8fafc;
    text-align: center;
}

.product-reviews__score > strong {
    font-family: "Bricolage Grotesque", sans-serif;
    color: var(--text-dark);
    font-size: clamp(3rem, 7vw, 4.2rem);
    font-weight: 900;
    line-height: 1;
}

.product-review-stars {
    display: flex;
    gap: .2rem;
    margin: .7rem 0;
    color: var(--secondary-color);
    font-size: 1rem;
}

.product-reviews__score > span {
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 750;
}

.product-reviews__notice {
    margin-top: .55rem;
    color: #94a3b8;
    font-size: .58rem;
    font-weight: 650;
}

.product-reviews__distribution {
    display: flex;
    justify-content: center;
    gap: .8rem;
    flex-direction: column;
}

.product-rating-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 38px;
    align-items: center;
    gap: .8rem;
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 750;
}

.product-rating-row strong {
    color: var(--text-dark);
    text-align: right;
}

.product-rating-bar {
    height: 8px;
    border-radius: 999px;
    background: #edf1f6;
    overflow: hidden;
}

.product-rating-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--secondary-color), #ff9f1c);
}

.product-reviews__list {
    display: grid;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.product-review-card {
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #fbfcff);
}

.product-review-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.product-review-card__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .7rem;
}

.product-review-card__identity > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--primary-color), #ff625c);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.product-review-card__identity strong {
    display: block;
}

.product-review-card__identity strong {
    color: var(--text-dark);
    font-size: .78rem;
}

.product-review-card time {
    flex: 0 0 auto;
    color: var(--text-light);
    font-size: .64rem;
}

.product-review-stars.is-small {
    margin: .9rem 0 .55rem;
    font-size: .68rem;
}

.product-review-card h4 {
    margin-bottom: .35rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: .88rem;
    font-weight: 850;
}

.product-no-reviews {
    display: grid;
    min-height: 115px;
    place-items: center;
    align-content: center;
    gap: .6rem;
    color: var(--text-light);
    font-size: .8rem;
}

.product-no-reviews i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.product-related {
    margin-top: clamp(3rem, 7vw, 6rem);
}

.shop-seo-copy {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.shop-seo-copy h2 {
    margin-bottom: .65rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    font-weight: 850;
}

.shop-seo-copy p {
    max-width: 850px;
    color: var(--text-light);
    font-size: .82rem;
    line-height: 1.8;
}

.information-hero {
    position: relative;
    min-height: 360px;
    background:
        linear-gradient(125deg, rgba(13, 25, 58, .98), rgba(32, 50, 99, .94)),
        #203263;
    color: #fff;
    overflow: hidden;
}

.information-hero::after {
    position: absolute;
    right: -80px;
    bottom: -210px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(255, 255, 255, .025),
        0 0 0 110px rgba(255, 255, 255, .018);
    content: "";
}

.information-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
}

.information-hero__glow--one {
    top: -120px;
    left: 12%;
    width: 320px;
    height: 320px;
    background: rgba(232, 33, 24, .2);
}

.information-hero__glow--two {
    right: 18%;
    bottom: -140px;
    width: 300px;
    height: 300px;
    background: rgba(255, 204, 7, .16);
}

.information-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 360px;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 3.5rem;
    flex-direction: column;
}

.information-breadcrumb {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 2.25rem;
    color: rgba(255, 255, 255, .55);
    font-size: .68rem;
    font-weight: 700;
}

.information-breadcrumb a:hover {
    color: var(--secondary-color);
}

.information-breadcrumb i {
    font-size: .48rem;
}

.information-hero__icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 1.1rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 17px;
    background: rgba(255, 255, 255, .1);
    color: var(--secondary-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
    font-size: 1.15rem;
}

.information-hero__eyebrow {
    margin-bottom: .45rem;
    color: var(--secondary-color);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.information-hero h1 {
    max-width: 850px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.information-hero__intro {
    max-width: 680px;
    margin-top: 1rem;
    color: rgba(255, 255, 255, .68);
    font-size: clamp(.82rem, 2vw, .95rem);
    line-height: 1.7;
}

.information-layout {
    display: grid;
    margin-top: -42px;
    margin-bottom: clamp(4rem, 8vw, 7rem);
    grid-template-columns: 245px minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.information-nav,
.information-card {
    position: relative;
    z-index: 2;
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: 0 20px 55px rgba(24, 42, 86, .08);
}

.information-nav {
    position: sticky;
    top: 96px;
    padding: 1rem;
    border-radius: 20px;
}

.information-nav > p {
    padding: .55rem .75rem .85rem;
    color: #94a3b8;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.information-nav nav {
    display: grid;
    gap: .28rem;
}

.information-nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: .7rem;
    padding: .7rem .75rem;
    border-radius: 12px;
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 750;
    transition: .2s ease;
}

.information-nav a i {
    width: 18px;
    color: #94a3b8;
    text-align: center;
}

.information-nav a:hover,
.information-nav a.is-active {
    background: rgba(232, 33, 24, .07);
    color: var(--primary-color);
}

.information-nav a.is-active i {
    color: var(--primary-color);
}

.information-card {
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 26px;
}

.information-highlight-grid {
    display: grid;
    margin-bottom: 2.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.information-highlight-grid > div {
    display: grid;
    padding: 1.25rem;
    border: 1px solid #e8edf4;
    border-radius: 17px;
    background: #f8fafc;
}

.information-highlight-grid i {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 12px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.information-highlight-grid strong {
    margin-bottom: .35rem;
    color: var(--text-dark);
    font-size: .76rem;
}

.information-highlight-grid span {
    color: var(--text-light);
    font-size: .68rem;
    line-height: 1.55;
}

.information-section {
    display: grid;
    padding: 2rem 0;
    border-bottom: 1px solid #edf0f4;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 1.1rem;
}

.information-section:last-child {
    border-bottom: 0;
}

.information-section__number {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--text-dark);
    color: var(--secondary-color);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: .68rem;
    font-weight: 900;
}

.information-section h2,
.withdrawal-model h2,
.contact-form-card h2,
.legal-identity-grid h2 {
    margin-bottom: .75rem;
    font-family: "Bricolage Grotesque", sans-serif;
    color: var(--text-dark);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 850;
}

.information-section p,
.withdrawal-model p,
.legal-identity-grid p {
    color: var(--text-light);
    font-size: .78rem;
    line-height: 1.8;
}

.information-section p + p {
    margin-top: .8rem;
}

.information-section a,
.withdrawal-model a,
.legal-identity-grid a {
    color: var(--primary-color);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.information-note {
    display: flex;
    margin-top: 1rem;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem;
    border: 1px solid rgba(255, 204, 7, .35);
    border-radius: 14px;
    background: rgba(255, 204, 7, .08);
}

.information-note i {
    margin-top: .28rem;
    color: #d99e00;
}

.information-note p {
    color: #6e5a23;
    font-size: .72rem;
}

.information-list {
    display: grid;
    margin: .8rem 0;
    gap: .55rem;
}

.information-list li {
    position: relative;
    padding-left: 1.15rem;
    color: var(--text-light);
    font-size: .76rem;
    line-height: 1.7;
}

.information-list li::before {
    position: absolute;
    top: .65rem;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-color);
    content: "";
}

.information-list strong {
    color: var(--text-dark);
}

.information-steps {
    display: grid;
    gap: .65rem;
}

.information-steps li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.information-steps li > span {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
    font-size: .66rem;
    font-weight: 900;
}

.information-cta {
    display: flex;
    margin-top: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 19px;
    background: var(--text-dark);
    color: #fff;
}

.information-cta span,
.information-cta strong {
    display: block;
}

.information-cta span {
    margin-bottom: .25rem;
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
}

.information-cta strong {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1rem;
}

.information-cta a {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1rem;
    border-radius: 12px;
    background: var(--primary-color);
    color: #fff;
    font-size: .7rem;
    font-weight: 850;
}

.information-updated {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .5rem .75rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .64rem;
    font-weight: 750;
}

.withdrawal-model {
    margin-top: 2rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid #dbe4ef;
    border-radius: 20px;
    background: #f8fafc;
}

.withdrawal-model > span {
    display: block;
    margin-bottom: .35rem;
    color: var(--primary-color);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.withdrawal-model blockquote {
    margin-top: 1.2rem;
    padding: 1.25rem;
    border-left: 3px solid var(--primary-color);
    border-radius: 0 12px 12px 0;
    background: #fff;
    color: var(--text-light);
    font-size: .74rem;
    line-height: 1.75;
}

.legal-identity-grid {
    display: grid;
    margin-bottom: 1rem;
    grid-template-columns: 1.4fr 1fr;
    gap: .8rem;
}

.legal-identity-grid section {
    padding: 1.35rem;
    border: 1px solid #e7ebf1;
    border-radius: 18px;
    background: #fbfcfe;
}

.legal-identity-grid section:first-child {
    grid-row: span 2;
}

.legal-identity-grid section > span {
    display: grid;
    width: 40px;
    height: 40px;
    margin-bottom: .9rem;
    place-items: center;
    border-radius: 13px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.legal-identity-grid dl {
    display: grid;
    gap: .6rem;
}

.legal-identity-grid dl div {
    display: grid;
    padding-bottom: .6rem;
    border-bottom: 1px solid #edf0f4;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: .75rem;
    font-size: .7rem;
}

.legal-identity-grid dl div:last-child {
    padding-bottom: 0;
    border: 0;
}

.legal-identity-grid dt {
    color: #94a3b8;
    font-weight: 700;
}

.legal-identity-grid dd {
    color: var(--text-dark);
    font-weight: 750;
}

.privacy-table {
    display: grid;
    margin-top: .9rem;
    border: 1px solid #e6ebf2;
    border-radius: 15px;
    overflow: hidden;
}

.privacy-table div {
    display: grid;
    padding: .85rem 1rem;
    border-bottom: 1px solid #edf0f4;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
    font-size: .7rem;
}

.privacy-table div:last-child {
    border: 0;
}

.privacy-table div:nth-child(even) {
    background: #f8fafc;
}

.privacy-table strong {
    color: var(--text-dark);
}

.privacy-table span {
    color: var(--text-light);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr);
    gap: 1.25rem;
}

.contact-form-card,
.contact-details {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid #e6ebf2;
    border-radius: 20px;
}

.contact-form-card__heading {
    margin-bottom: 1.5rem;
}

.contact-form-card__heading > span {
    display: block;
    margin-bottom: .35rem;
    color: var(--primary-color);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-form-card__heading p,
.contact-details > p {
    color: var(--text-light);
    font-size: .72rem;
    line-height: 1.65;
}

.contact-form {
    display: grid;
    gap: 1rem;
}

.contact-form__field label {
    display: block;
    margin-bottom: .45rem;
    color: var(--text-dark);
    font-size: .68rem;
    font-weight: 800;
}

.contact-form__control {
    position: relative;
}

.contact-form__control > i {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: #9aa7ba;
    font-size: .72rem;
    transform: translateY(-50%);
}

.contact-form__control--textarea > i {
    top: 1.15rem;
    transform: none;
}

.contact-form__control input,
.contact-form__control textarea {
    width: 100%;
    border: 1px solid #dfe5ed;
    border-radius: 13px;
    background: #f8fafc;
    color: var(--text-dark);
    font-size: .76rem;
    outline: none;
    transition: .2s ease;
}

.contact-form__control input {
    min-height: 48px;
    padding: .75rem 1rem .75rem 2.65rem;
}

.contact-form__control textarea {
    min-height: 180px;
    padding: .95rem 1rem .95rem 2.65rem;
    line-height: 1.6;
    resize: vertical;
}

.contact-form__control input:focus,
.contact-form__control textarea:focus {
    border-color: rgba(232, 33, 24, .55);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .07);
}

.contact-form__field ul {
    display: grid;
    margin-top: .4rem;
    gap: .25rem;
    color: var(--primary-color);
    font-size: .65rem;
    font-weight: 650;
}

.contact-form__privacy {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: #7b879a;
    font-size: .63rem;
    line-height: 1.55;
}

.contact-form__privacy i {
    margin-top: .16rem;
    color: var(--success-color);
}

.contact-form__privacy a {
    color: var(--primary-color);
    text-decoration: underline;
}

.contact-form__submit {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .8rem 1.1rem;
    border-radius: 13px;
    background: var(--primary-color);
    box-shadow: 0 12px 25px rgba(232, 33, 24, .2);
    color: #fff;
    font-size: .74rem;
    font-weight: 850;
    transition: .2s ease;
}

.contact-form__submit:hover {
    background: #cc1a13;
    transform: translateY(-1px);
}

.contact-details {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 204, 7, .17), transparent 30%),
        var(--text-dark);
    color: #fff;
}

.contact-details__brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.1rem;
}

.contact-details__brand > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: var(--primary-color);
}

.contact-details__brand small,
.contact-details__brand strong {
    display: block;
}

.contact-details__brand small {
    margin-bottom: .1rem;
    color: rgba(255, 255, 255, .52);
    font-size: .62rem;
}

.contact-details__brand strong {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.1rem;
}

.contact-details > p {
    color: rgba(255, 255, 255, .62);
}

.contact-details address {
    display: grid;
    margin-top: 1.5rem;
    gap: .55rem;
    font-style: normal;
}

.contact-details address > * {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .055);
    color: #fff;
    font-size: .68rem;
    line-height: 1.55;
}

.contact-details address > * > i {
    width: 16px;
    margin-top: .2rem;
    color: var(--secondary-color);
    text-align: center;
}

.contact-details address small {
    display: block;
    margin-bottom: .12rem;
    color: rgba(255, 255, 255, .45);
    font-size: .58rem;
}

.contact-details__note {
    display: flex;
    margin-top: 1.25rem;
    align-items: flex-start;
    gap: .6rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .55);
    font-size: .63rem;
    line-height: 1.55;
}

.contact-details__note i {
    margin-top: .15rem;
    color: var(--secondary-color);
}

.information-flash {
    display: flex;
    margin-bottom: 1.25rem;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    border-radius: 13px;
    font-size: .69rem;
    font-weight: 700;
    line-height: 1.5;
}

.information-flash--success {
    border: 1px solid rgba(16, 185, 129, .25);
    background: rgba(16, 185, 129, .08);
    color: #087a56;
}

.information-flash--error {
    border: 1px solid rgba(232, 33, 24, .2);
    background: rgba(232, 33, 24, .07);
    color: #b4231c;
}

.footer-legal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    color: rgba(255, 255, 255, .48);
    font-size: .66rem;
}

.footer-legal-row nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.footer-legal-row nav a:hover {
    color: var(--secondary-color);
}

.newsletter-form {
    transition: opacity .2s ease, box-shadow .2s ease;
}

.home-newsletter-card {
    min-height: 390px;
    display: grid;
    place-items: center;
    background-image:
        linear-gradient(90deg, rgba(10, 21, 49, .42), rgba(10, 21, 49, .58)),
        var(--newsletter-background);
    background-position: center;
    background-size: cover;
    box-shadow: 0 22px 55px rgba(32, 50, 99, .16);
}

.home-newsletter-card__content {
    width: 100%;
    padding: clamp(1.5rem, 4vw, 2.4rem);

    border-radius: 24px;
    box-shadow: 0 18px 55px rgba(5, 12, 30, .28);

}

.newsletter-form.is-loading {
    opacity: .72;
}

.newsletter-form [type="submit"]:disabled {
    cursor: wait;
}

.newsletter-feedback {
    display: grid;
    max-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
    overflow: hidden;
    margin-top: 0;
    padding: 0 .8rem;
    border: 1px solid transparent;
    border-radius: 13px;
    background: rgba(16, 185, 129, .13);
    color: #a7f3d0;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(-7px);
    transition:
        max-height .32s cubic-bezier(.16, 1, .3, 1),
        margin .25s ease,
        padding .25s ease,
        opacity .22s ease,
        transform .32s cubic-bezier(.16, 1, .3, 1);
}

.newsletter-feedback.is-visible {
    max-height: 120px;
    margin-top: .75rem;
    padding: .7rem .8rem;
    border-color: rgba(52, 211, 153, .22);
    opacity: 1;
    transform: translateY(0);
}

.newsletter-feedback.is-error {
    border-color: rgba(248, 113, 113, .25);
    background: rgba(239, 68, 68, .14);
    color: #fecaca;
}

.newsletter-feedback--centered {
    max-width: 430px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.newsletter-feedback--centered.is-visible {
    margin-top: 1rem;
}

.product-related__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.product-related__heading span {
    color: var(--primary-color);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-related__heading h2 {
    margin-top: .35rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
}

.product-related__heading a {
    color: var(--text-dark);
    font-size: .76rem;
    font-weight: 850;
}

.product-related__heading a:hover {
    color: var(--primary-color);
}

.catalog-empty {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 760px;
    min-width: 0;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4rem);
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 204, 7, .13), transparent 38%),
        linear-gradient(145deg, #fff, #fafbff);
    box-shadow: 0 20px 60px rgba(32, 50, 99, .08);
    text-align: center;
}

.catalog-empty__visual {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    margin: 0 auto 1.5rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(232, 33, 24, .12);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(32, 50, 99, .12);
    color: var(--primary-color);
    font-size: 2rem;
    transform: rotate(-3deg);
}

.catalog-empty__visual > i {
    position: relative;
    z-index: 1;
}

.catalog-empty__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
}

.catalog-empty__orb--yellow {
    top: -18px;
    right: -12px;
    width: 55px;
    height: 55px;
    background: rgba(255, 204, 7, .45);
}

.catalog-empty__orb--red {
    bottom: -22px;
    left: -15px;
    width: 62px;
    height: 62px;
    background: rgba(232, 33, 24, .2);
}

.catalog-empty__eyebrow {
    display: block;
    margin-bottom: .6rem;
    color: var(--primary-color);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.catalog-empty h2 {
    margin-bottom: .75rem;
    overflow-wrap: anywhere;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.08;
}

.catalog-empty p {
    max-width: 540px;
    margin: 0 auto 1.5rem;
    overflow-wrap: anywhere;
    color: var(--text-light);
    font-size: .9rem;
    line-height: 1.7;
}

.catalog-empty__action {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    background: var(--text-dark);
    box-shadow: var(--shadow-md);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    transition: var(--transition);
}

.catalog-empty__action:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-heading__eyebrow {
    display: block;
    margin-bottom: .4rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.section-heading h2 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.section-heading p {
    max-width: 590px;
    margin-top: .65rem;
    color: var(--text-light);
    font-size: .88rem;
    line-height: 1.6;
}

.section-heading__link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .55rem;
    color: var(--text-dark);
    font-size: .78rem;
    font-weight: 800;
    transition: var(--transition);
}

.section-heading__link:hover {
    color: var(--primary-color);
    transform: translateX(3px);
}

.licence-spotlight {
    display: grid;
    min-height: 340px;
    overflow: hidden;
    grid-template-columns: minmax(0, 1.4fr) minmax(390px, .9fr);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(32, 50, 99, .12);
}

.licence-spotlight__media {
    position: relative;
    min-width: 0;
    min-height: 340px;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
    background: #f4f4f4;
}

.licence-spotlight__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.licence-spotlight__media-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem .85rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    background: rgba(32, 50, 99, .92);
    box-shadow: 0 10px 26px rgba(32, 50, 99, .2);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.licence-spotlight__media-badge i {
    color: var(--secondary-color);
}

.licence-spotlight__content {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1.75rem, 3vw, 2.6rem);
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 204, 7, .13), transparent 35%),
        #fff;
}

.licence-spotlight__icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 1.25rem;
    place-items: center;
    border-radius: 17px;
    background: rgba(232, 33, 24, .09);
    color: var(--primary-color);
    font-size: 1.2rem;
    transform: rotate(-3deg);
}

.licence-spotlight__eyebrow {
    margin-bottom: .45rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.licence-spotlight h3 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2.25rem, 4vw, 3.55rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .96;
}

.licence-spotlight__text {
    max-width: 430px;
    margin: 1rem 0 1.25rem;
    color: var(--text-light);
    font-size: .88rem;
    line-height: 1.65;
}

.licence-spotlight__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.5rem;
}

.licence-spotlight__tags span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .65rem;
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .65rem;
    font-weight: 800;
}

.licence-spotlight__tags i {
    color: var(--success-color);
}

.licence-spotlight__tags span:last-child i {
    color: var(--secondary-color);
}

.licence-spotlight__action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .8rem 1.3rem;
    border-radius: 999px;
    background: var(--text-dark);
    box-shadow: 0 12px 28px rgba(32, 50, 99, .2);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    transition: var(--transition);
}

.licence-spotlight__action:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.licenses-showcase {
    overflow: hidden;
    padding: 3.5rem 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 204, 7, .12), transparent 28%),
        linear-gradient(180deg, #fff, var(--bg-light));
}

.licenses-carousel {
    overflow: hidden;
    padding: .75rem 0 1.5rem;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.licenses-carousel::-webkit-scrollbar {
    display: none;
}

.licenses-carousel.is-dragging {
    cursor: grabbing;
}

.licenses-carousel.is-dragging .license-card {
    pointer-events: none;
}

.licenses-carousel__track {
    display: flex;
    width: max-content;
}

.licenses-carousel__group {
    display: flex;
    gap: 1.1rem;
    padding-right: 1.1rem;
}

.license-card {
    display: block;
    width: clamp(280px, 32vw, 410px);
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(32, 50, 99, .09);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.license-card:hover {
    box-shadow: 0 20px 45px rgba(32, 50, 99, .16);
    transform: translateY(-6px);
}

.license-card__visual {
    display: block;
    overflow: hidden;
    aspect-ratio: 1615 / 695;
    background: #f4f4f4;
}

.license-card__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.license-card:hover .license-card__visual img {
    transform: scale(1.025);
}

.license-card__footer {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
}

.license-card__footer > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.license-card__footer small {
    margin-bottom: .2rem;
    color: var(--primary-color);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.license-card__footer strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.license-card__footer > i {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .7rem;
}

.blog-hero {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 15%, rgba(255, 204, 7, .3), transparent 24%),
        radial-gradient(circle at 15% 90%, rgba(232, 33, 24, .18), transparent 28%),
        linear-gradient(135deg, #14234d, #203263);
    color: #fff;
}

.blog-hero__content {
    max-width: 760px;
}

.blog-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .48rem .7rem;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: var(--secondary-color);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-hero h1 {
    max-width: 720px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: .98;
}

.blog-hero p {
    max-width: 660px;
    margin-top: 1.2rem;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(.92rem, 2vw, 1.08rem);
    line-height: 1.75;
}

.blog-index {
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.blog-featured {
    display: grid;
    overflow: hidden;
    min-height: 430px;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .85fr);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(32, 50, 99, .12);
    transition: box-shadow .3s ease, transform .3s ease;
}

.blog-featured:hover {
    box-shadow: 0 30px 72px rgba(32, 50, 99, .17);
    transform: translateY(-4px);
}

.blog-featured__media {
    display: block;
    min-height: 430px;
    overflow: hidden;
    background: var(--bg-light);
}

.blog-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.blog-featured:hover .blog-featured__media img {
    transform: scale(1.035);
}

.blog-featured__content {
    display: flex;
    justify-content: center;
    padding: clamp(1.7rem, 4vw, 3.3rem);
    flex-direction: column;
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.blog-post-meta em {
    padding: .4rem .62rem;
    border-radius: 999px;
    background: rgba(232, 33, 24, .09);
    color: var(--primary-color);
    font-size: .64rem;
    font-style: normal;
    font-weight: 900;
}

.blog-post-meta span {
    color: var(--text-light);
    font-size: .68rem;
    font-weight: 750;
}

.blog-featured__content > strong {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.55rem, 3.2vw, 2.25rem);
    font-weight: 900;
    line-height: 1.15;
}

.blog-featured__content > span {
    margin-top: 1rem;
    color: var(--text-light);
    font-size: .86rem;
    line-height: 1.75;
}

.blog-featured__content > small,
.blog-card__action {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.4rem;
    color: var(--primary-color);
    font-size: .74rem;
    font-weight: 900;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.blog-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(32, 50, 99, .07);
    transition: box-shadow .3s ease, transform .3s ease;
}

.blog-card:hover {
    box-shadow: 0 22px 50px rgba(32, 50, 99, .13);
    transform: translateY(-5px);
}

.blog-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bg-light);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.blog-card:hover .blog-card__media img {
    transform: scale(1.05);
}

.blog-card__media span {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    padding: .38rem .58rem;
    border-radius: 999px;
    background: rgba(20, 35, 77, .9);
    color: #fff;
    font-size: .6rem;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.blog-card__content {
    padding: 1.15rem;
}

.blog-card__date {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-light);
    font-size: .62rem;
    font-weight: 750;
}

.blog-card__date i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--primary-color);
}

.blog-card h2,
.blog-card h3 {
    margin-top: .65rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.35;
}

.blog-card h2 a:hover,
.blog-card h3 a:hover {
    color: var(--primary-color);
}

.blog-card p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .65rem;
    color: var(--text-light);
    font-size: .76rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.blog-card__action {
    margin-top: .9rem;
}

.blog-empty {
    display: grid;
    min-height: 340px;
    place-items: center;
    padding: 2rem;
    border: 1px dashed rgba(32, 50, 99, .22);
    border-radius: 26px;
    background: var(--bg-light);
    color: var(--text-light);
    text-align: center;
}

.blog-empty i {
    color: rgba(32, 50, 99, .2);
    font-size: 3rem;
}

.blog-empty h2 {
    margin-top: 1rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
}

.blog-article {
    padding-top: clamp(2rem, 5vw, 4.5rem);
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.5rem;
    color: var(--text-light);
    font-size: .68rem;
    font-weight: 750;
}

.blog-breadcrumb i {
    font-size: .52rem;
}

.blog-breadcrumb a:hover {
    color: var(--primary-color);
}

.blog-article__category {
    display: inline-flex;
    padding: .45rem .68rem;
    border-radius: 999px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
    font-size: .66rem;
    font-weight: 900;
}

.blog-article__header h1 {
    max-width: 900px;
    margin-top: 1rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.blog-article__header > p {
    max-width: 800px;
    margin-top: 1.1rem;
    color: var(--text-light);
    font-size: clamp(.9rem, 2vw, 1.05rem);
    line-height: 1.75;
}

.blog-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
    color: var(--text-light);
    font-size: .7rem;
    font-weight: 750;
}

.blog-article__meta span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.blog-article__meta i {
    color: var(--primary-color);
}

.blog-article__cover {
    margin-top: clamp(1.8rem, 4vw, 3rem);
}

.blog-article__cover img {
    width: 100%;
    max-height: 660px;
    border-radius: 28px;
    box-shadow: 0 24px 62px rgba(32, 50, 99, .14);
    object-fit: cover;
}

.blog-article__layout {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: clamp(1.2rem, 4vw, 3rem);
    padding-top: clamp(2rem, 5vw, 4rem);
}

.blog-article__aside {
    position: sticky;
    top: 100px;
    display: flex;
    height: max-content;
    align-items: center;
    gap: .55rem;
    flex-direction: column;
}

.blog-article__aside > span {
    color: var(--text-light);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.blog-article__aside a {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: var(--text-dark);
    transition: var(--transition);
}

.blog-article__aside a:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.blog-article__content {
    min-width: 0;
    color: #35415f;
    font-size: .94rem;
    line-height: 1.9;
}

.blog-article__content p,
.blog-article__content ul,
.blog-article__content ol,
.blog-article__content blockquote {
    margin: 0 0 1.25rem;
}

.blog-article__content h2,
.blog-article__content h3,
.blog-article__content h4 {
    margin: 2rem 0 .8rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 900;
    line-height: 1.25;
}

.blog-article__content h2 {
    font-size: 1.65rem;
}

.blog-article__content h3 {
    font-size: 1.3rem;
}

.blog-article__content ul,
.blog-article__content ol {
    padding-left: 1.4rem;
}

.blog-article__content a {
    color: var(--primary-color);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-article__content img {
    width: 100%;
    margin: 1.8rem 0;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(32, 50, 99, .12);
}

.blog-article__content blockquote {
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--primary-color);
    border-radius: 0 16px 16px 0;
    background: var(--bg-light);
    color: var(--text-dark);
    font-weight: 700;
}

.blog-related {
    padding-top: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.blog-related__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.blog-related__heading span {
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.blog-related__heading h2 {
    margin-top: .3rem;
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
}

.blog-related__heading > a {
    color: var(--text-dark);
    font-size: .75rem;
    font-weight: 900;
}

.blog-grid--related {
    margin-top: 1.4rem;
}

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

    .blog-featured__media {
        min-height: 320px;
        max-height: 470px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .blog-hero {
        padding: 3.5rem 0;
    }

    .blog-featured {
        min-height: 0;
        border-radius: 22px;
    }

    .blog-featured__media {
        min-height: 220px;
    }

    .blog-featured__content {
        padding: 1.35rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-article__cover img {
        border-radius: 20px;
    }

    .blog-article__layout {
        grid-template-columns: 1fr;
    }

    .blog-article__aside {
        position: static;
        align-items: center;
        flex-direction: row;
    }

    .blog-article__aside > span {
        writing-mode: initial;
    }

    .blog-related__heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.profile-hero {
    border-bottom: 1px solid var(--border-color);
    background: radial-gradient(circle at 80% 10%, rgba(255, 204, 7, .14), transparent 25%), var(--bg-light);
}

.profile-page {
    display: grid;
    gap: 1.5rem;
}

.profile-card,
.language-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(32, 50, 99, .08);
}

.profile-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.15rem;
    padding: clamp(1.5rem, 4vw, 2.3rem);
    border-bottom: 1px solid var(--border-color);
    background: radial-gradient(circle at 100% 0%, rgba(232, 33, 24, .08), transparent 34%), linear-gradient(135deg, #fff, #fafbff);
}

.profile-card__avatar {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 21px;
    background: linear-gradient(145deg, var(--primary-color), #ff5149);
    box-shadow: 0 13px 28px rgba(232, 33, 24, .24);
    color: #fff;
    font-size: 1.35rem;
    transform: rotate(-3deg);
}

.profile-avatar-upload {
    position: relative;
    width: 64px;
    height: 64px;
}

.profile-card__avatar {
    cursor: pointer;
}

.profile-card__avatar img,
.profile-card__avatar-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
    place-items: center;
    border-radius: inherit;
}

.profile-card__avatar img {
    object-fit: cover;
}

.profile-card__avatar-fallback {
    background: linear-gradient(145deg, var(--primary-color), #ff5149);
}

.profile-avatar-upload__button {
    position: absolute;
    right: -9px;
    bottom: -9px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 13px;
    background: var(--text-dark);
    box-shadow: 0 9px 20px rgba(32, 50, 99, .22);
    color: #fff;
    font-size: .72rem;
    transition: var(--transition);
}

.profile-card__avatar:hover .profile-avatar-upload__button {
    background: var(--primary-color);
    transform: rotate(6deg) scale(1.04);
}

.profile-card__eyebrow {
    display: block;
    margin-bottom: .3rem;
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.profile-card h2,
.language-card h2 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
}

.profile-card__header p,
.language-card__heading p {
    margin-top: .35rem;
    color: var(--text-light);
    font-size: .82rem;
}

.profile-card__status,
.profile-card__points {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .8rem;
    border-radius: 999px;
    background: rgba(255, 204, 7, .16);
    color: var(--text-dark);
    font-size: .7rem;
    font-weight: 800;
}

.profile-card__points {
    background: var(--text-dark);
    box-shadow: 0 12px 28px rgba(32, 50, 99, .18);
    color: #fff;
}

.profile-card__points i {
    color: var(--secondary-color);
}

.profile-card__points strong {
    font-size: .82rem;
}

.profile-card__points span {
    color: rgba(255, 255, 255, .72);
    text-transform: lowercase;
}

.profile-card__logout {
    grid-column: 3;
}

.profile-card__logout button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .65rem;
    padding: .65rem .85rem;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    transition: var(--transition);
}

.profile-card__logout button:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.profile-flash {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(32, 50, 99, .08);
    color: var(--text-dark);
    font-size: .78rem;
    font-weight: 800;
}

.profile-flash--success i {
    color: var(--success-color);
}

.profile-flash--error i {
    color: var(--primary-color);
}

.profile-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-color);
}

.profile-detail {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .9rem;
    padding: 1.5rem;
    background: #fff;
}

.profile-detail--address {
    grid-column: 1 / -1;
}

.profile-detail__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    background: var(--bg-light);
    color: var(--text-dark);
}

.profile-detail div {
    min-width: 0;
}

.profile-detail div > span {
    display: block;
    margin-bottom: .25rem;
    color: var(--text-light);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-detail strong {
    display: block;
    overflow: hidden;
    color: var(--text-dark);
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-top: 1px solid var(--border-color);
    background: #fff;
}

.profile-hub-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 142px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    padding: 1.15rem;
    border: 1px solid rgba(32, 50, 99, .1);
    border-radius: 22px;
    background: linear-gradient(145deg, #f8fafc, #fff);
    box-shadow: 0 14px 34px rgba(32, 50, 99, .06);
}

.profile-hub-card--orders {
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.profile-hub-card--orders:hover {
    border-color: rgba(232, 33, 24, .26);
    box-shadow: 0 20px 42px rgba(32, 50, 99, .11);
    transform: translateY(-3px);
}

.profile-hub-card--blog {
    border-color: rgba(255, 204, 7, .3);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 204, 7, .2), transparent 38%),
        linear-gradient(145deg, #fffdf3, #fff);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.profile-hub-card--blog:hover {
    border-color: rgba(255, 204, 7, .7);
    box-shadow: 0 20px 42px rgba(32, 50, 99, .11);
    transform: translateY(-3px);
}

.profile-hub-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    background: var(--text-dark);
    box-shadow: 0 12px 26px rgba(32, 50, 99, .18);
    color: #fff;
    font-size: 1rem;
}

.profile-hub-card--blog .profile-hub-card__icon {
    background: var(--secondary-color);
    box-shadow: 0 12px 26px rgba(255, 204, 7, .25);
    color: var(--text-dark);
}

.profile-hub-card__content {
    display: grid;
    min-width: 0;
    gap: .2rem;
}

.profile-hub-card__content small {
    color: var(--primary-color);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-hub-card__content strong {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
}

.profile-hub-card__content span {
    color: var(--text-light);
    font-size: .74rem;
    line-height: 1.45;
}

.profile-hub-card__action {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
    font-size: .7rem;
}

.profile-orders {
    display: grid;
    scroll-margin-top: 95px;
    gap: 1rem;
    padding: clamp(1.35rem, 4vw, 2.2rem);
    border-top: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 0 0, rgba(232, 33, 24, .055), transparent 28%),
        linear-gradient(180deg, #fafbff, #fff);
}

.profile-orders__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.profile-orders__heading h3 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 850;
}

.profile-orders__heading p {
    margin-top: .35rem;
    color: var(--text-light);
    font-size: .8rem;
}

.profile-orders__count {
    flex: 0 0 auto;
    padding: .5rem .72rem;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
}

.profile-orders__list {
    display: grid;
    gap: .85rem;
}

.profile-order-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 13px 34px rgba(32, 50, 99, .055);
}

.profile-order-card[open] {
    border-color: rgba(32, 50, 99, .2);
    box-shadow: 0 18px 42px rgba(32, 50, 99, .1);
}

.profile-order-card__summary {
    display: grid;
    min-height: 92px;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.profile-order-card__summary::-webkit-details-marker {
    display: none;
}

.profile-order-card__summary::marker {
    content: "";
}

.profile-order-card__package,
.profile-order-card__chevron {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
}

.profile-order-card__package {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.profile-order-card__identity {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.profile-order-card__identity small,
.profile-order-card__identity span {
    color: var(--text-light);
    font-size: .68rem;
}

.profile-order-card__identity strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .88rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-order-card__status {
    padding: .42rem .62rem;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 900;
    white-space: nowrap;
}

.profile-order-card__status--green {
    background: rgba(16, 185, 129, .1);
    color: #087a56;
}

.profile-order-card__status--blue {
    background: rgba(14, 165, 233, .1);
    color: #0369a1;
}

.profile-order-card__status--yellow {
    background: rgba(245, 158, 11, .13);
    color: #a16207;
}

.profile-order-card__status--red {
    background: rgba(232, 33, 24, .09);
    color: #b4231c;
}

.profile-order-card__status--gray {
    background: #eef2f7;
    color: #526078;
}

.profile-order-card__total {
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 950;
    white-space: nowrap;
}

.profile-order-card__chevron {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: .66rem;
    transition: transform .25s ease, color .25s ease;
}

.profile-order-card[open] .profile-order-card__chevron {
    color: var(--primary-color);
    transform: rotate(180deg);
}

.profile-order-card__details {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(230px, .75fr);
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: #fafbff;
}

.profile-order-items {
    display: grid;
    align-content: start;
    gap: .65rem;
}

.profile-order-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .65rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
}

.profile-order-item__image {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    background: var(--bg-light);
}

.profile-order-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-order-item__content {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.profile-order-item__content strong {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .76rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-order-item__content small,
.profile-order-item__content span {
    color: var(--text-light);
    font-size: .66rem;
}

.profile-order-item > strong {
    color: var(--text-dark);
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
}

.profile-order-summary {
    display: grid;
    align-content: start;
    gap: .7rem;
    padding: .9rem;
    border-radius: 17px;
    background: var(--text-dark);
    color: #fff;
}

.profile-order-summary > div {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.profile-order-summary > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-order-summary span {
    color: rgba(255, 255, 255, .62);
    font-size: .68rem;
}

.profile-order-summary strong {
    font-size: .72rem;
    font-weight: 850;
    text-align: right;
}

.profile-order-summary .is-discount strong {
    color: #86efac;
}

.profile-order-summary__address {
    align-items: flex-start;
    flex-direction: column;
}

.profile-order-summary__address strong {
    line-height: 1.55;
    text-align: left;
}

.profile-orders__empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px dashed rgba(32, 50, 99, .2);
    border-radius: 20px;
    background: rgba(255, 255, 255, .75);
}

.profile-orders__empty > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    background: rgba(232, 33, 24, .08);
    color: var(--primary-color);
}

.profile-orders__empty strong {
    display: block;
    color: var(--text-dark);
    font-size: .86rem;
    font-weight: 900;
}

.profile-orders__empty p {
    margin-top: .2rem;
    color: var(--text-light);
    font-size: .74rem;
}

.profile-orders__empty a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .85rem;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    transition: var(--transition);
}

.profile-orders__empty a:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.profile-addresses {
    display: grid;
    gap: 1.15rem;
    padding: clamp(1.35rem, 4vw, 2.2rem);
    background: linear-gradient(180deg, #fff, #fafbff);
}

.profile-addresses__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.profile-addresses__heading h3 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
    line-height: 1.1;
}

.profile-addresses__heading p {
    margin-top: .35rem;
    color: var(--text-light);
    font-size: .8rem;
}

.profile-addresses__list {
    display: grid;
    gap: .9rem;
}

.profile-addresses__empty {
    padding: 1rem;
    border: 1px dashed rgba(32, 50, 99, .22);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    color: var(--text-light);
    font-size: .82rem;
    font-weight: 700;
}

.profile-address-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(32, 50, 99, .06);
    transition: var(--transition);
}

.profile-address-card[open] {
    border-color: rgba(32, 50, 99, .18);
    box-shadow: 0 18px 44px rgba(32, 50, 99, .1);
}

.profile-address-card__summary {
    display: grid;
    min-height: 86px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.profile-address-card__summary::-webkit-details-marker {
    display: none;
}

.profile-address-card__summary::marker {
    content: "";
}

.profile-address-card__summary:focus-visible {
    outline: 3px solid rgba(32, 50, 99, .16);
    outline-offset: -3px;
}

.profile-address-card__icon,
.profile-address-card__edit {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
}

.profile-address-card__icon {
    background: var(--bg-light);
    color: var(--text-dark);
}

.profile-address-card__content {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.profile-address-card__name {
    overflow: hidden;
    color: var(--text-dark);
    font-size: .95rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-address-card__line,
.profile-address-card__meta {
    overflow: hidden;
    color: var(--text-light);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-address-card__badges {
    display: flex;
    justify-content: flex-end;
}

.profile-address-card__badges em {
    padding: .45rem .65rem;
    border-radius: 999px;
    background: rgba(255, 204, 7, .18);
    color: var(--text-dark);
    font-size: .66rem;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.profile-address-card__edit {
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: var(--text-dark);
    transition: var(--transition);
}

.profile-address-card__summary:hover .profile-address-card__edit,
.profile-address-card[open] .profile-address-card__edit {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    transform: rotate(-4deg);
}

.profile-address-card[open] .profile-address-card__summary {
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, #fff, #fafbff);
}

.profile-address-form {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(32, 50, 99, .06);
}

.profile-address-card > .profile-address-form {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.profile-address-form__top {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-address-form__top strong {
    display: block;
    color: var(--text-dark);
    font-size: .95rem;
    font-weight: 900;
}

.profile-address-form__top span {
    display: block;
    margin-top: .25rem;
    color: var(--text-light);
    font-size: .78rem;
}

.profile-address-form__top em {
    flex: 0 0 auto;
    padding: .45rem .65rem;
    border-radius: 999px;
    background: rgba(255, 204, 7, .18);
    color: var(--text-dark);
    font-size: .66rem;
    font-style: normal;
    font-weight: 900;
}

.profile-address-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.profile-address-form__field {
    display: grid;
    min-width: 0;
    gap: .4rem;
}

.profile-address-form__field span,
.profile-address-form__check span {
    color: var(--text-dark);
    font-size: .68rem;
    font-weight: 800;
}

.profile-address-form__field input {
    width: 100%;
    min-height: 46px;
    padding: 0 .9rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    outline: none;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: .84rem;
    transition: var(--transition);
}

.profile-address-form__field input:focus {
    border-color: var(--text-dark);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(32, 50, 99, .08);
}

.profile-address-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.profile-address-form__check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--text-dark);
}

.profile-address-form__check input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.profile-address-form__actions button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.05rem;
    border-radius: 999px;
    background: var(--text-dark);
    color: #fff;
    font-size: .76rem;
    font-weight: 900;
    transition: var(--transition);
}

.profile-address-form__actions button:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.profile-address-add {
    border: 1px solid rgba(32, 50, 99, .12);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(32, 50, 99, .05);
}

.profile-address-add summary {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    border-radius: 20px;
    color: var(--text-dark);
    cursor: pointer;
    font-size: .84rem;
    font-weight: 900;
    list-style: none;
}

.profile-address-add summary::-webkit-details-marker {
    display: none;
}

.profile-address-add summary span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.profile-address-add summary span i {
    color: var(--primary-color);
}

.profile-address-add summary > i {
    color: var(--text-light);
    font-size: .72rem;
    transition: var(--transition);
}

.profile-address-add[open] summary {
    border-bottom: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
}

.profile-address-add[open] summary > i {
    transform: rotate(180deg);
}

.profile-address-form--new {
    border: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: none;
}

.profile-page--guest {
    align-content: start;
    min-height: calc(100vh - 82px);
    background: #f1f5f9;
    box-shadow: 0 0 0 100vmax #f1f5f9;
    clip-path: inset(0 -100vmax);
}

.split-auth-card {
    display: flex;
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 24px 55px -20px rgba(32, 50, 99, .24);
}

.split-auth-image {
    position: relative;
    display: none;
    overflow: hidden;
    flex: 0 0 45%;
    margin: 0;
    background: #e2e8f0;
}

.split-auth-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-auth-image__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 31, 62, .28), transparent 42%);
    pointer-events: none;
}

.split-auth-form-wrapper {
    width: 100%;
    padding: 2rem;
    perspective: 1300px;
    perspective-origin: center;
}

.profile-auth__card {
    position: relative;
    width: 100%;
    transform: rotateY(0deg);
    transform-origin: center;
    transform-style: preserve-3d;
    transition: height .45s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.2, .75, .2, 1);
    will-change: height, transform;
}

.profile-auth__card.is-register {
    transform: rotateY(180deg);
}

.profile-auth__face {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    background: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.profile-auth__face--register {
    transform: rotateY(180deg);
}

.profile-auth__heading {
    margin-bottom: 2rem;
    text-align: left;
}

.profile-auth__heading h2 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
}

.profile-auth__heading p {
    margin-top: .5rem;
    color: var(--text-light);
    font-size: .88rem;
    line-height: 1.55;
}

.profile-auth__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-auth__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.profile-auth__field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .35rem;
}

.profile-auth__field > span:first-child,
.profile-auth__address legend {
    color: var(--text-dark);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.profile-auth__input {
    display: flex;
    height: 46px;
    min-width: 0;
    align-items: center;
    padding: 0 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #94a3b8;
    transition: .2s cubic-bezier(.16, 1, .3, 1);
}

.profile-auth__input:hover {
    border-color: #cbd5e1;
}

.profile-auth__input:focus-within {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 33, 24, .12);
}

.profile-auth__input i {
    flex: 0 0 auto;
    margin-right: .75rem;
    font-size: .9rem;
    transition: color .2s ease;
}

.profile-auth__input:focus-within i {
    color: var(--primary-color);
}

.profile-auth__input input {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-dark);
    font-size: .86rem;
    font-weight: 500;
}

.profile-auth__input input::placeholder {
    color: #b7c0cf;
    font-weight: 400;
}

.profile-auth__forgot {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: flex-start;
    margin-top: -.25rem;
    color: var(--primary-color);
    font-size: .74rem;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.profile-auth__forgot:hover {
    color: var(--text-dark);
}

.profile-auth__address {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: .5rem;
    padding: 1.15rem;
    border: 0;
    border-radius: 16px;
    background: #f8fafc;
}

.profile-auth__address legend {
    padding: 0 0 .5rem;
    color: var(--primary-color);
}

.profile-auth__address .profile-auth__input {
    background: #fff;
}

.profile-auth__terms {
    display: grid;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    grid-template-columns: auto minmax(0, 1fr);
    border: 1px solid rgba(232, 33, 24, .18);
    border-radius: 13px;
    background: rgba(232, 33, 24, .045);
    color: #5e6878;
    cursor: pointer;
    font-size: .7rem;
    line-height: 1.65;
}

.profile-auth__terms input {
    width: 18px;
    height: 18px;
    margin-top: .12rem;
    flex: 0 0 auto;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.profile-auth__terms a {
    display: inline;
    padding: .08rem .22rem;
    border-radius: 4px;

    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.profile-auth__terms a:hover {
    background: var(--text-dark);
    color: #fff;
}

.profile-auth__submit {
    position: relative;
    display: flex;
    width: 100%;
    height: 48px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: .5rem;
    border-radius: 12px;
    background: var(--text-dark);
    color: #fff;
    font-size: .9rem;
    font-weight: 800;
    transition: .4s cubic-bezier(.16, 1, .3, 1);
}

.profile-auth__submit::before {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .2), transparent);
    content: "";
    transform: skewX(-20deg);
    transition: left .5s ease;
}

.profile-auth__submit:hover {
    background: var(--primary-color);
    box-shadow: 0 8px 18px rgba(232, 33, 24, .24);
    transform: translateY(-1px);
}

.profile-auth__submit:hover::before {
    left: 150%;
}

.profile-auth__switch {
    margin-top: 1.5rem;
    color: var(--text-light);
    font-size: .82rem;
    text-align: left;
}

.profile-auth__switch button {
    margin-left: .25rem;
    color: var(--primary-color);
    font-size: inherit;
    font-weight: 800;
}

.profile-auth__switch button:hover {
    text-decoration: underline;
}

.auth-reset-page {
    min-height: calc(100vh - 90px);
    padding: clamp(2rem, 6vw, 5rem) 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(232, 33, 24, .09), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(255, 204, 7, .16), transparent 26%),
        linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}

.auth-reset-shell {
    display: flex;
    justify-content: center;
}

.auth-reset-card {
    position: relative;
    display: grid;
    width: min(100%, 560px);
    gap: 1rem;
    overflow: hidden;
    padding: clamp(1.35rem, 4vw, 2rem);
    border: 1px solid rgba(32, 50, 99, .1);
    border-radius: 28px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 70px rgba(32, 50, 99, .12);
}

.auth-reset-card::before {
    position: absolute;
    top: -120px;
    right: -100px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: rgba(232, 33, 24, .08);
    content: "";
}

.auth-reset-card > * {
    position: relative;
    z-index: 1;
}

.auth-reset-card__back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    color: var(--text-light);
    font-size: .74rem;
    font-weight: 900;
}

.auth-reset-card__back:hover {
    color: var(--primary-color);
}

.auth-reset-card__icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 20px;
    background: rgba(232, 33, 24, .1);
    color: var(--primary-color);
    font-size: 1.15rem;
}

.auth-reset-card__icon--success {
    background: rgba(35, 190, 112, .12);
    color: var(--success-color);
}

.auth-reset-card__eyebrow {
    margin: .4rem 0 -.55rem;
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-reset-card h1 {
    color: var(--text-dark);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: .98;
}

.auth-reset-card p {
    max-width: 46rem;
    color: var(--text-light);
    font-size: .94rem;
    line-height: 1.7;
}

.auth-reset-form {
    display: grid;
    gap: 1rem;
    margin-top: .5rem;
}

@media (min-width: 768px) {
    .split-auth-card {
        min-height: 550px;
        flex-direction: row;
    }

    .split-auth-image {
        display: block;
    }

    .split-auth-form-wrapper {
        display: flex;
        width: 55%;
        align-items: center;
        padding: 3rem;
    }
}

.language-card {
    padding: clamp(1.5rem, 4vw, 2.3rem);
}

.language-card__heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.language-card__icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 18px;
    background: rgba(32, 50, 99, .08);
    color: var(--text-dark);
    font-size: 1.25rem;
}

.language-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.language-option {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 17px;
    background: var(--bg-light);
    color: var(--text-dark);
    text-align: left;
    transition: var(--transition);
}

.language-option:hover {
    border-color: rgba(32, 50, 99, .35);
    background: #fff;
    transform: translateY(-2px);
}

.language-option.is-active {
    border-color: var(--text-dark);
    background: var(--text-dark);
    box-shadow: 0 12px 28px rgba(32, 50, 99, .2);
    color: #fff;
}

.language-option__flag {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4px;
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.language-option__flag img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    object-fit: cover;
}

.language-option.is-active .language-option__flag {
    box-shadow: 0 0 0 3px var(--secondary-color);
}

.language-option__label {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.language-option__label strong {
    font-size: .85rem;
}

.language-option__label small {
    margin-top: .15rem;
    color: var(--text-light);
    font-size: .68rem;
}

.language-option.is-active .language-option__label small {
    color: rgba(255, 255, 255, .6);
}

.language-option__check {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: #fff;
    color: transparent;
    font-size: .65rem;
}

.language-option.is-active .language-option__check {
    border-color: var(--success-color);
    background: var(--success-color);
    color: #fff;
}

.language-card__notice {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    color: var(--text-light);
    font-size: .7rem;
}

.mobile-app-nav {
    position: fixed;
    z-index: 75;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    pointer-events: none;
}

.mobile-app-nav__inner {
    display: grid;
    height: 72px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    padding: 6px 8px;
    border: 1px solid rgba(229, 231, 235, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow:
        0 18px 50px rgba(32, 50, 99, .2),
        inset 0 1px rgba(255, 255, 255, .8);
    backdrop-filter: blur(22px) saturate(180%);
    pointer-events: auto;
}

.mobile-app-nav__item {
    position: relative;
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-direction: column;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: #8790a7;
    font-family: "Archivo", sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.mobile-app-nav__item:hover,
.mobile-app-nav__item.is-active {
    color: var(--primary-color);
}

.mobile-app-nav__item.is-active:not(.mobile-app-nav__item--primary) {
    background: rgba(232, 33, 24, .07);
}

.mobile-app-nav__icon {
    position: relative;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 11px;
    font-size: 1rem;
}

.mobile-app-nav__item.is-active .mobile-app-nav__icon {
    background: rgba(232, 33, 24, .1);
}

.mobile-app-nav__item--primary {
    overflow: visible;
    padding-top: 18px;
    color: var(--text-dark);
}

.mobile-app-nav__primary-icon {
    position: absolute;
    top: -22px;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 5px solid rgba(255, 255, 255, .96);
    border-radius: 18px;
    background: linear-gradient(145deg, #ff362f, var(--primary-color));
    box-shadow: 0 10px 24px rgba(232, 33, 24, .35);
    color: #fff;
    font-size: 1.05rem;
    transform: rotate(-3deg);
}

.mobile-app-nav__item--primary.is-active .mobile-app-nav__primary-icon {
    background: linear-gradient(145deg, var(--text-dark), #314a88);
    box-shadow: 0 10px 24px rgba(32, 50, 99, .35);
}

.mobile-app-nav__badge {
    position: absolute;
    top: -3px;
    right: -4px;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--text-dark);
    font-size: .52rem;
    font-weight: 900;
}

@media (max-width: 1023px) {
    .shop-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shop-products-grid.home-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail {
        grid-template-columns: 1fr;
    }

    .product-detail__visual {
        min-height: 440px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .licence-spotlight {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
    }

    #storefront-app {
        padding-bottom: calc(94px + env(safe-area-inset-bottom));
    }

    #back-top {
        bottom: calc(100px + env(safe-area-inset-bottom));
    }

    footer {
        margin-bottom: 0;
    }
}

@media (max-width: 820px) {
    .shop-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .search-modal .search-modal__box {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: .5rem;
        border-radius: 24px;
    }

    .search-modal__header {
        padding: .85rem .85rem .65rem;
    }

    .search-modal__header small,
    .search-modal__input-wrap kbd {
        display: none;
    }

    .search-modal__input-wrap {
        min-height: 52px;
        margin: 0 .85rem .7rem;
    }

    .search-modal__results {
        min-height: 0;
        padding: 0 .85rem .85rem;
    }

    .search-empty-state {
        min-height: 260px;
    }

    .search-result-card {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: .65rem;
        padding: .58rem;
        border-radius: 16px;
    }

    .search-result-card__image {
        width: 56px;
        height: 56px;
        border-radius: 13px;
    }

    .search-result-card__content strong {
        font-size: .78rem;
    }

    .search-result-card__content em {
        font-size: .6rem;
    }

    .search-result-card__price {
        font-size: .76rem;
    }

    .search-result-card__arrow {
        display: none;
    }

    .search-loading__row {
        grid-template-columns: 56px minmax(0, 1fr) 54px;
    }

    .search-loading__row i {
        width: 56px;
        height: 56px;
    }

    .home-hero {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        padding: 0;
    }

    .home-hero__viewport {
        border-radius: 0;
        box-shadow: none;
    }

    .home-hero__image,
    .home-hero__media-fallback {
        height: clamp(420px, 70svh, 560px);
    }

    .home-hero__image {
        object-position: center;
        filter: brightness(.86) contrast(1.02) saturate(1.02);
    }

    .home-hero__overlay {
        align-items: flex-end;
        justify-content: center;
        background: linear-gradient(180deg, rgba(7, 18, 49, 0) 34%, rgba(7, 18, 49, .24) 72%, rgba(7, 18, 49, .42));
    }

    .home-hero__content {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        max-width: 28rem;
        padding: 1.25rem 1.25rem 4.2rem;
        text-align: center;
    }

    .home-hero__badge,
    .home-hero__arrow {
        display: none !important;
    }

    .home-hero__title {
        display: none;
    }

    .home-hero__text {
        display: flex !important;
        justify-content: center;
        max-width: 19rem;
        margin-bottom: 1.1rem;
        color: rgba(255, 255, 255, .84);
        font-size: .88rem;
        line-height: 1.45;
        text-align: center;
    }

    .home-hero__action {
        justify-content: center;
        min-height: 44px;
        align-items: center;
        margin-inline: auto;
        padding: .72rem 1.15rem;
        font-size: .8rem;
    }

    .home-hero #carousel-dots {
        bottom: 1.2rem;
    }

    .shop-catalog-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .shop-products-grid.home-products-grid {
        grid-template-columns: 1fr;
    }

    .shop-product-card h2 {
        min-height: 0;
    }

    .product-detail__visual {
        min-height: 340px;
        padding: 2rem;
    }

    .product-detail__content {
        padding: 1.7rem;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .licence-spotlight {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .licence-spotlight__content {
        padding: 1.7rem;
    }

    .licence-spotlight__media {
        min-height: auto;
        aspect-ratio: 1615 / 695;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .licence-spotlight__media img {
        object-fit: contain;
    }

    .licence-spotlight__media-badge {
        top: .75rem;
        left: .75rem;
        padding: .48rem .65rem;
        font-size: .58rem;
    }

    .licence-spotlight__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 1rem;
    }

    .licenses-showcase {
        padding: 2.7rem 0;
    }

    .licenses-carousel {
        mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent);
    }

    .license-card {
        width: 82vw;
    }

    .profile-card__header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-card__status,
    .profile-card__points {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .profile-card__logout {
        grid-column: 1 / -1;
    }

    .profile-card__details,
    .profile-hub,
    .profile-address-form__grid,
    .language-selector,
    .profile-auth__grid {
        grid-template-columns: 1fr;
    }

    .profile-order-card__summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .profile-order-card__status {
        grid-column: 2;
        justify-self: start;
    }

    .profile-order-card__total {
        grid-column: 3;
        grid-row: 1;
    }

    .profile-order-card__chevron {
        grid-column: 3;
        grid-row: 2;
    }

    .profile-order-card__details {
        grid-template-columns: 1fr;
    }

    .profile-orders__empty {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-orders__empty a {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .profile-detail--address {
        grid-column: auto;
    }

    .profile-addresses {
        padding: 1.1rem;
    }

    .profile-address-card__summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .75rem;
    }

    .profile-address-card__badges {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .profile-address-card__edit {
        width: 38px;
        height: 38px;
    }

    .profile-address-form__top,
    .profile-address-form__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-address-form__actions button {
        width: 100%;
    }

    .split-auth-card {
        border-radius: 24px;
    }

    .split-auth-form-wrapper {
        padding: 1.5rem;
    }

    .profile-auth__heading {
        margin-bottom: 1.5rem;
    }

    .profile-auth__heading h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 1023px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shop-filter-card--categories {
        grid-column: 1 / -1;
    }

    .shop-filter-card--categories .shop-category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-filter-card--categories .shop-category-button--root {
        grid-column: 1 / -1;
    }

    .shop-product-card__body {
        padding-bottom: 4.5rem;
    }

    .shop-product-card__add {
        transform: translateY(0);
    }

    .product-detail {
        gap: 2.5rem;
    }

    .product-detail__visual {
        min-height: 0;
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .product-detail__content {
        padding: 0;
    }
}

@media (max-width: 760px) {
    .shop-catalog {
        padding-top: 1.5rem;
    }

    .shop-catalog--with-hero {
        padding-top: .65rem;
    }

    .shop-category-hero {
        width: 100vw;
    }

    .shop-category-hero__media {
        height: clamp(145px, 42vw, 190px);
    }

    body.shop-filters-open {
        overflow: hidden;
    }

    .shop-filter-backdrop {
        position: fixed;
        z-index: 110;
        inset: 0;
        display: block;
        border: 0;
        background: rgba(13, 24, 54, .58);
        opacity: 0;
        visibility: hidden;
        backdrop-filter: blur(4px);
        transition: opacity .25s ease, visibility .25s ease;
    }

    .shop-filter-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .shop-sidebar {
        position: fixed;
        z-index: 120;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        max-height: min(88dvh, 760px);
        padding: .6rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-radius: 26px 26px 0 0;
        outline: 0;
        background: #f7f8fb;
        box-shadow: 0 -20px 60px rgba(13, 24, 54, .24);
        opacity: 0;
        visibility: hidden;
        transform: translateY(102%);
        transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s ease, visibility .35s;
        overscroll-behavior: contain;
    }

    .shop-sidebar.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .shop-filter-card {
        margin-bottom: .8rem;
        padding: 1.2rem;
        border-radius: 16px;
        box-shadow: 0 3px 12px rgba(32, 50, 99, .06);
    }

    .shop-filter-card--categories .shop-category-list {
        grid-template-columns: 1fr;
    }

    .shop-filter-card--categories .shop-category-button--root {
        grid-column: auto;
    }

    .shop-filter-modal__handle {
        display: block;
        width: 42px;
        height: 5px;
        margin: 0 auto .65rem;
        border-radius: 999px;
        background: #d5d9e3;
    }

    .shop-filter-modal__header {
        position: sticky;
        z-index: 2;
        top: -.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: 0 -1rem .8rem;
        padding: .9rem 1rem 1rem;
        border-bottom: 1px solid var(--border-color);
        background: rgba(247, 248, 251, .96);
        backdrop-filter: blur(12px);
    }

    .shop-filter-modal__header span {
        display: block;
        margin-bottom: .15rem;
        color: var(--primary-color);
        font-size: .58rem;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .shop-filter-modal__header h2 {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 1.2rem;
        font-weight: 850;
    }

    .shop-filter-modal__header-actions {
        display: flex;
        align-items: center;
        gap: .55rem;
    }

    .shop-filter-reset {
        color: var(--primary-color);
        font-size: .68rem;
        font-weight: 850;
    }

    .shop-filter-close {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        background: #fff;
        color: var(--text-dark);
        box-shadow: var(--shadow-sm);
    }

    .shop-filter-modal__footer {
        position: sticky;
        z-index: 2;
        bottom: calc(-1rem - env(safe-area-inset-bottom));
        display: block;
        margin: .2rem -1rem calc(-1rem - env(safe-area-inset-bottom));
        padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-color);
        background: rgba(247, 248, 251, .97);
        backdrop-filter: blur(12px);
    }

    .shop-filter-modal__footer button {
        display: flex;
        width: 100%;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        border-radius: 999px;
        background: var(--text-dark);
        box-shadow: 0 12px 28px rgba(32, 50, 99, .24);
        color: #fff;
        font-size: .8rem;
        font-weight: 900;
    }

    .shop-filter-modal__footer span {
        display: grid;
        min-width: 24px;
        height: 24px;
        place-items: center;
        border-radius: 999px;
        background: var(--primary-color);
        font-size: .66rem;
    }

    .shop-results-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .shop-results-summary {
        min-height: 46px;
    }

    .shop-active-category > img {
        width: 58px;
        height: 42px;
    }

    .shop-filter-trigger {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        padding: 0 1rem;
        border-radius: 999px;
        background: var(--text-dark);
        box-shadow: 0 8px 20px rgba(32, 50, 99, .18);
        color: #fff;
        font-size: .75rem;
        font-weight: 850;
    }

    .shop-filter-trigger > i {
        color: var(--secondary-color);
    }

    .shop-filter-trigger span {
        display: grid;
        min-width: 21px;
        height: 21px;
        place-items: center;
        border-radius: 50%;
        background: var(--primary-color);
        font-size: .6rem;
    }

    .shop-filter-trigger span[hidden] {
        display: none;
    }

    .shop-sort {
        width: 100%;
    }

    .product-hero,
    .product-hero__content {
        min-height: 220px;
    }

    .product-detail__visual {
        padding: 2rem;
    }

    .product-detail__purchase {
        flex-wrap: wrap;
    }

    .product-detail__benefits {
        grid-template-columns: 1fr;
    }

    .product-tabs__nav {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .product-tabs__nav button {
        min-width: max-content;
        flex: 1 0 auto;
    }

    .product-tabs__panel {
        padding: 1.5rem;
    }

    .product-reviews__overview,
    .product-reviews__list {
        grid-template-columns: 1fr;
    }

    .product-reviews__score {
        min-height: 190px;
    }

    .product-related__heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .shop-product-card h2 {
        min-height: 2.65rem;
    }

    .product-detail__content {
        padding: 0;
    }

    .product-detail__visual {
        min-height: 0;
    }

    .product-tab-copy,
    .product-ingredients-heading {
        grid-template-columns: 1fr;
    }

    .product-tab-copy__icon {
        width: 42px;
        height: 42px;
    }

    .product-hero h1 {
        width: calc(100vw - 2.5rem);
        max-width: 100%;
        font-size: 1.8rem;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .product-detail__purchase {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .65rem;
    }

    .product-detail__primary {
        width: 100%;
        min-width: 0;
        padding: .85rem 1rem;
        white-space: normal;
    }

    .product-detail__secondary {
        grid-column: 2;
        justify-self: end;
    }

    .product-tabs {
        border-radius: 14px;
    }
}

@media (max-width: 640px) {
    #toast {
        --tw-translate-x: 0 !important;
        right: 1rem;
        bottom: calc(6.5rem + env(safe-area-inset-bottom));
        left: 1rem;
        width: auto;
        max-width: none;
        justify-content: center;
        padding: .9rem 1rem;
        border-radius: 18px;
        text-align: center;
        line-height: 1.35;
        white-space: normal;
    }

    #toast-msg {
        min-width: 0;
    }
}

@media (max-width: 1023px) {
    .cart-page__layout {
        grid-template-columns: 1fr;
    }

    .cart-page__summary {
        position: static;
    }

    .page-transition-skeleton__catalog {
        grid-template-columns: 1fr;
    }

    .page-transition-skeleton__filters {
        display: none;
    }

    .page-transition-skeleton__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cart-page {
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
    }

    .cart-page__panel,
    .cart-page__summary {
        border-radius: 22px;
    }

    .cart-page__panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-page__panel-head a {
        display: inline-flex;
        min-height: 2.65rem;
        align-items: center;
        justify-content: center;
        padding: 0 1rem;
        border-radius: 999px;
        background: var(--bg-light);
    }

    .cart-page .cart-line {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: .75rem;
        padding: .65rem;
    }

    .cart-page .cart-line__media {
        width: 72px;
        height: 82px;
    }

    .cart-page .cart-line__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-drawer__shipping {
        padding: .75rem 1rem;
    }

    .shipping-meter__heading {
        align-items: center;
    }

    .shipping-meter__heading p {
        font-size: .68rem;
    }

    .shipping-meter__track {
        margin-right: 2px;
        margin-left: 2px;
    }

    .shipping-meter__checkpoint small {
        font-size: .44rem;
    }

    .checkout-address-form__grid {
        grid-template-columns: 1fr;
    }

    .checkout-address-form__heading {
        align-items: flex-start;
    }

    .checkout-result__actions {
        display: grid;
    }

    .checkout-result__primary,
    .checkout-result__secondary {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .page-transition-skeleton {
        background: #fff;
    }

    .page-transition-skeleton__screen {
        gap: .9rem;
        padding: .8rem .8rem calc(5.8rem + env(safe-area-inset-bottom));
    }

    .page-transition-skeleton__header {
        min-height: 58px;
        grid-template-columns: auto auto;
        justify-content: space-between;
        border-radius: 20px;
    }

    .page-transition-skeleton__nav {
        display: none;
    }

    .page-transition-skeleton__actions span {
        width: 34px;
        height: 34px;
    }

    .page-transition-skeleton__hero {
        min-height: 150px;
        border-radius: 24px;
    }

    .page-transition-skeleton__toolbar {
        align-items: flex-start;
    }

    .page-transition-skeleton__toolbar > span {
        width: 116px;
        height: 40px;
    }

    .page-transition-skeleton__catalog {
        grid-template-columns: 1fr;
    }

    .page-transition-skeleton__filters {
        display: none;
    }

    .page-transition-skeleton__products {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        gap: .75rem;
        width: 100%;
    }

    .page-transition-skeleton__product {
        min-width: 0;
        width: 100%;
        border-radius: 18px;
    }

    .page-transition-skeleton__product-visual {
        margin: .65rem;
        border-radius: 14px;
    }

    .page-transition-skeleton__mobile-nav {
        position: fixed;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 12px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .65rem;
        padding: .7rem;
        border: 1px solid rgba(229, 231, 235, .9);
        border-radius: 24px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 14px 34px rgba(32, 50, 99, .14);
    }

    .page-transition-skeleton__mobile-nav div {
        display: grid;
        justify-items: center;
        gap: .38rem;
    }

    .page-transition-skeleton__mobile-nav span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .page-transition-skeleton__mobile-nav em {
        width: 42px;
        height: 7px;
        border-radius: 999px;
    }

    .product-preview__dialog {
        grid-template-columns: 1fr;
    }

    .product-preview__media {
        min-height: 300px;
        padding: 2rem;
    }

    .product-preview__media.is-3d-mode {
        min-height: 420px;
        padding: 0;
    }

    .product-preview__content {
        padding: 1.4rem;
    }

}

@media (max-width: 520px) {
    .page-transition-skeleton__products {
        grid-template-columns: 1fr;
    }

    .page-transition-skeleton__products .page-transition-skeleton__product:nth-child(n+5) {
        display: none;
    }

    .page-transition-skeleton__product-body {
        gap: .45rem;
        padding: 0 .75rem .8rem;
    }

    .page-transition-skeleton__hero strong {
        width: 82%;
        height: 24px;
    }

    .product-preview {
        padding: .75rem;
    }

    .product-preview__dialog {
        border-radius: 24px;
    }

    .product-preview__media {
        min-height: 360px;
    }

    .product-preview__media.is-image-mode {
        min-height: 260px;
    }

}

@media (max-width: 420px) {
    .mobile-app-nav {
        right: 8px;
        left: 8px;
    }

    .mobile-app-nav__inner {
        border-radius: 21px;
    }

    .mobile-app-nav__item {
        font-size: .54rem;
    }
}

@media (max-width: 1180px) {
    .admin-shell {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-model-3d-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-model-3d-modal__dialog {
        grid-template-columns: 1fr;
    }

    .admin-model-3d-preview {
        min-height: 420px;
    }

    .admin-model-3d-controls--modal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-product-form {
        grid-template-columns: 1fr;
    }

    .admin-product-form__side {
        position: static;
    }

    .admin-product-table__row {
        grid-template-columns: minmax(240px, 1.4fr) .7fr .7fr .55fr .45fr .62fr .62fr 104px;
    }

    .admin-order-table__row {
        grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 120px .55fr .7fr .7fr 70px;
    }

    .admin-customer-table__row {
        grid-template-columns: minmax(210px, 1.2fr) minmax(160px, 1fr) .55fr .45fr .62fr .62fr 70px;
    }

    .admin-cart-table .admin-crm-table__row,
    .admin-viewer-table .admin-crm-table__row {
        grid-template-columns: 1fr;
    }

    .admin-customer-editor__layout,
    .admin-customer-details-grid,
    .admin-emailing-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        height: auto;
        border-radius: 0 0 28px 28px;
    }

    .admin-sidebar__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-sidebar__group {
        grid-column: 1 / -1;
    }

    .admin-sidebar__submenu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-left: .7rem;
    }

    .admin-sidebar__footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 1rem;
    }

    .admin-main {
        padding: 1rem;
    }

    .admin-table__row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .admin-search-bar,
    .admin-page-heading--actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search-bar {
        display: grid;
    }

    .admin-heading-actions,
    .admin-action-button,
    .admin-secondary-button {
        width: 100%;
    }

    .admin-product-table {
        border: 0;
        gap: .75rem;
        overflow: visible;
        background: transparent;
    }

    .admin-product-table__row--head {
        display: none;
    }

    .admin-product-table__row {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .9rem;
        border: 1px solid var(--border-color);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 16px 34px rgba(32, 50, 99, .08);
    }

    .admin-product-actions {
        justify-content: flex-start;
    }

    .admin-search-bar select {
        max-width: none;
    }

    .admin-order-table {
        border: 0;
        gap: .75rem;
        overflow: visible;
        background: transparent;
    }

    .admin-order-table__row--head {
        display: none;
    }

    .admin-order-table__row {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .9rem;
        border: 1px solid var(--border-color);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 16px 34px rgba(32, 50, 99, .08);
    }

    .admin-customer-table {
        border: 0;
        gap: .75rem;
        overflow: visible;
        background: transparent;
    }

    .admin-customer-table__row--head {
        display: none;
    }

    .admin-customer-table__row {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .9rem;
        border: 1px solid var(--border-color);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 16px 34px rgba(32, 50, 99, .08);
    }

    .admin-customer-switches {
        grid-template-columns: 1fr;
    }

    .admin-crm-table {
        border: 0;
        gap: .75rem;
        overflow: visible;
        background: transparent;
    }

    .admin-crm-table__row--head {
        display: none;
    }

    .admin-crm-table__row {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .9rem;
        border: 1px solid var(--border-color);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 16px 34px rgba(32, 50, 99, .08);
    }

    .admin-order-show__grid {
        grid-template-columns: 1fr;
    }

    .admin-order-item {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .admin-order-item > span:not(.admin-order-item__image):not(.admin-order-item__main),
    .admin-order-item > strong {
        padding-left: calc(52px + .85rem);
    }

    .admin-form-grid--two,
    .admin-form-grid--three {
        grid-template-columns: 1fr;
    }

    .admin-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-model-3d-grid {
        grid-template-columns: 1fr;
    }

    .admin-model-3d-card__heading {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-model-3d-toggle {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .admin-payment-grid {
        grid-template-columns: 1fr;
    }

    .admin-danger-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-danger-zone button {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .admin-sidebar__nav,
    .admin-sidebar__footer,
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-sidebar__submenu {
        grid-template-columns: 1fr;
    }

    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-topbar__profile {
        width: 100%;
        justify-content: center;
    }

    .admin-category-grid {
        grid-template-columns: 1fr;
    }

    .admin-model-3d-controls {
        grid-template-columns: 1fr;
    }

    .admin-model-3d-modal {
        padding: .6rem;
    }

    .admin-model-3d-modal__dialog {
        max-height: calc(100dvh - 1.2rem);
        border-radius: 24px;
    }

    .admin-model-3d-preview {
        min-height: 320px;
    }

    .admin-model-3d-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-order-summary {
        grid-template-columns: 1fr;
    }

    .admin-order-totals {
        width: 100%;
    }

    .admin-category-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-category-card__footer .admin-active-switch,
    .admin-category-card__footer .admin-secondary-button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    .carousel-track,
    .marquee-track,
    .reveal,
    .fly {
        animation: none !important;
        transition: none !important;
    }

    .licenses-carousel {
        overflow-x: auto;
        mask-image: none;
    }

    .profile-auth__card {
        transition: height .35s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.2, .75, .2, 1) !important;
    }
}

@media (max-width: 900px) {
    .information-layout {
        margin-top: -28px;
        grid-template-columns: 1fr;
    }

    .information-nav {
        position: relative;
        top: auto;
        padding: .65rem;
        overflow-x: auto;
    }

    .information-nav > p {
        display: none;
    }

    .information-nav nav {
        display: flex;
        min-width: max-content;
    }

    .information-nav a {
        min-height: 40px;
        padding: .6rem .75rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-details {
        order: -1;
    }
}

@media (max-width: 700px) {
    .information-highlight-grid,
    .legal-identity-grid {
        grid-template-columns: 1fr;
    }

    .legal-identity-grid section:first-child {
        grid-row: auto;
    }

    .information-cta,
    .footer-legal-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-legal-row nav {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .information-hero,
    .information-hero__content {
        min-height: 330px;
    }

    .information-hero__content {
        padding-bottom: 2.75rem;
    }

    .information-breadcrumb {
        margin-bottom: 1.5rem;
    }

    .information-card {
        padding: 1.15rem;
        border-radius: 20px;
    }

    .information-section {
        grid-template-columns: 1fr;
    }

    .information-section__number {
        width: 34px;
        height: 34px;
    }

    .legal-identity-grid dl div,
    .privacy-table div {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .information-cta a {
        justify-content: center;
        width: 100%;
    }
}