/*! dk-src:6210c7bf49980236b89b14a6d650947e v1 */
.cart-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
align-self: center;
width: 40px;
height: 40px;
min-width: 40px;
margin: 0;
border-radius: var(--radius-md);
background: var(--dk-white);
border: 1.5px solid var(--dk-border-i);
color: var(--dk-dark);
transition: border-color var(--t-hover), background-color var(--t-hover), color var(--t-hover);
flex-shrink: 0;
text-decoration: none;
}
.cart-icon-btn:hover,
.cart-icon-btn:focus {
color: var(--dk-dark);
border-color: var(--dk-dark);
background: var(--dk-white);
}
.cart-icon-btn__icon {
width: 22px;
height: 22px;
stroke: var(--dk-dark);
fill: none;
display: block;
transform: translateX(-1px);
}
.cart-icon-btn:hover .cart-icon-btn__icon {
stroke: var(--dk-dark);
}
.cart-icon-btn__counter {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-full);
background: var(--dk-green-d);
color: var(--dk-white);
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
line-height: 20px;
text-align: center;
box-shadow: 0 0 0 2px var(--dk-white);
pointer-events: none;
transition: transform 0.2s ease;
}
.cart-icon-btn__counter[hidden] {
display: none !important;
}
.cart-icon-btn__counter.is-bump {
transform: scale(1.18);
}
.cart-drawer {
position: fixed;
inset: 0;
z-index: 12000;
visibility: hidden;
pointer-events: none;
}
.cart-drawer.is-open {
visibility: visible;
pointer-events: auto;
}
.cart-drawer__backdrop {
position: absolute;
inset: 0;
background: var(--dk-scrim);
opacity: 0;
transition: opacity 0.3s ease;
}
.cart-drawer.is-open .cart-drawer__backdrop {
opacity: 1;
}
.cart-drawer__inner {
position: absolute;
top: 0;
right: 0;
width: 100%;
max-width: 460px;
height: 100%;
background: var(--dk-white);
box-shadow: -8px 0 32px rgba(22, 22, 22, 0.12);
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.cart-drawer.is-open .cart-drawer__inner {
transform: translateX(0);
}
.cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--dk-border);
flex-shrink: 0;
}
.cart-drawer__title {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--dk-dark);
margin: 0;
width: auto;
}
.cart-drawer__close {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--dk-text);
flex-shrink: 0;
}
.cart-drawer__close .svg-icon {
width: 20px;
height: 20px;
stroke: var(--dk-dark);
fill: none;
}
.cart-drawer__close:hover {
background: var(--dk-grey-bg);
}
.cart-drawer__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 28px 24px 16px;
}
@keyframes dk-skeleton-pulse {
0%, 100% { opacity: 1; }
50%      { opacity: 0.55; }
}
.cart-skeleton {
display: flex;
flex-direction: column;
}
.cart-skeleton__bar,
.cart-skeleton__thumb {
background: var(--dk-border);
border-radius: var(--radius-sm);
animation: dk-skeleton-pulse 1.4s ease-in-out infinite;
}
.cart-skeleton__row {
display: flex;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--dk-border);
}
.cart-skeleton__row:last-child {
border-bottom: none;
}
.cart-skeleton__thumb {
width: 64px;
height: 84px;
border-radius: var(--radius-md);
flex-shrink: 0;
}
.cart-skeleton__col {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cart-skeleton__bar {
height: 12px;
}
.cart-skeleton__bar--80 { width: 80%; }
.cart-skeleton__bar--60 { width: 60%; }
.cart-skeleton__bar--45 { width: 45%; }
.cart-skeleton__bar--30 { width: 30%; }
.cart-skeleton__bar--qty {
height: 30px;
width: 96px;
margin-top: 6px;
}
.cart-skeleton__totals {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--dk-border);
display: flex;
flex-direction: column;
gap: 10px;
}
.cart-skeleton__totals .cart-skeleton__bar {
height: 14px;
}
.cart-skeleton--sidebar {
gap: 14px;
}
.cart-skeleton--sidebar .cart-skeleton__title {
height: 20px;
width: 35%;
}
.cart-skeleton--sidebar .cart-skeleton__totals {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.cart-skeleton--sidebar .cart-skeleton__cta {
height: 48px;
margin-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
.cart-skeleton__bar,
.cart-skeleton__thumb {
animation: none;
}
}
.cart-drawer__footer {
flex-shrink: 0;
padding: 16px 24px 20px;
border-top: 1px solid var(--dk-border);
background: var(--dk-white);
}
.cart-drawer__footer[hidden],
.cart-drawer__footer.is-hidden {
display: none !important;
}
.cart-drawer__cta {
width: 100%;
height: 52px;
border-radius: var(--radius-md);
font-weight: var(--fw-semibold);
margin-top: 12px;
}
.cart-drawer__hint {
font-size: var(--fs-xs);
color: var(--dk-grey-500);
margin: 10px 0 0;
text-align: center;
line-height: var(--lh-snug);
}
.cart-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
}
.cart-list li {
margin: 0;
}
.cart-item {
--cart-head-line: 22px;
--cart-remove-size: 28px;
display: grid;
grid-template-columns: 64px minmax(0, 1fr) var(--cart-remove-size);
grid-template-areas:
"img info  remove"
"img qty   qty"
"img money money";
align-items: start;
column-gap: 16px;
row-gap: 10px;
padding: 16px 0;
border-bottom: 1px solid var(--dk-border);
}
.cart-item:last-child {
border-bottom: none;
}
.cart-item__image {
grid-area: img;
align-self: start;
width: 64px;
height: 84px;
border: 1px solid var(--dk-border);
background: var(--dk-grey-bg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.cart-item__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cart-item__info {
grid-area: info;
min-width: 0;
}
.cart-item__name {
display: block;
width: auto;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--dk-dark);
line-height: var(--cart-head-line);
text-decoration: none;
word-break: break-word;
transition: color 0.15s ease;
}
.cart-item__name:hover {
color: var(--dk-text);
}
.cart-item__bundle-tag {
margin-top: 4px;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--dk-green);
line-height: var(--lh-heading);
}
.cart-item__unavailable {
margin-top: 4px;
font-size: var(--fs-xs);
color: var(--dk-orange);
line-height: var(--lh-heading);
}
.cart-item__qty-row {
grid-area: qty;
align-self: center;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.cart-item__unit {
font-size: var(--fs-xs);
color: var(--dk-grey-500);
line-height: var(--lh-heading);
white-space: nowrap;
}
.cart-item__money {
grid-area: money;
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 10px;
height: var(--cart-head-line);
line-height: var(--cart-head-line);
white-space: nowrap;
}
.cart-item__was {
font-size: var(--fs-xs);
color: var(--dk-grey-500);
text-decoration: line-through;
}
.cart-item__save {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--dk-green);
}
.cart-item__total {
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--dk-dark);
}
.cart-item__remove {
grid-area: remove;
margin-top: calc((var(--cart-head-line) - var(--cart-remove-size)) / 2);
width: var(--cart-remove-size);
height: var(--cart-remove-size);
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--dk-grey-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.cart-item__remove:hover {
background: var(--dk-error-bg);
color: var(--dk-error-t);
}
.cart-item__remove .svg-icon {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
}
@media (min-width: 768px) {
.cart-list--page .cart-item {
grid-template-columns: 64px minmax(0, 1fr) auto 28px;
grid-template-areas:
"img info money remove"
"img qty  qty   qty";
row-gap: 12px;
}
}
.cart-qty {
display: inline-flex;
align-items: center;
height: 32px;
border: 1.5px solid var(--dk-border-i);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--dk-white);
}
.cart-qty__btn {
width: 30px;
height: 30px;
border: none;
background: transparent;
cursor: pointer;
color: var(--dk-dark);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.15s ease;
}
.cart-qty__btn:hover {
background: var(--dk-grey-bg);
}
.cart-qty__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cart-qty__btn .svg-icon {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
}
.cart-qty__value {
width: 36px;
height: 30px;
padding: 0;
text-align: center;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--dk-dark);
background: transparent;
border: none;
outline: none;
font-family: inherit;
-moz-appearance: textfield;
appearance: textfield;
transition: background 0.15s ease;
}
.cart-qty__value::-webkit-outer-spin-button,
.cart-qty__value::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cart-qty__value:focus {
background: var(--dk-grey-bg);
}
.cart-qty__value:focus-visible {
outline: none;
background: var(--dk-grey-bg);
}
.cart-icon-btn:focus-visible,
.cart-drawer__close:focus-visible,
.cart-item__remove:focus-visible,
.cart-qty__btn:focus-visible,
.cart-promo__toggle:focus-visible,
.cart-legal-link:focus-visible,
.cart-empty__cta--ghost:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(22, 22, 22, 0.12);
}
.cart-promo__btn:focus-visible,
.cart-empty__cta:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--dk-white), 0 0 0 4px rgba(22, 22, 22, 0.30);
}
.cart-promo__row input:focus-visible {
outline: none;
border-color: var(--dk-dark);
background: var(--dk-white);
box-shadow: 0 0 0 3px rgba(22, 22, 22, 0.08);
}
.cart-promo {
margin: 0 0 16px;
border-top: 1px solid var(--dk-border);
padding-top: 14px;
}
.cart-promo__toggle {
background: none;
border: none;
color: var(--dk-dark);
cursor: pointer;
padding: 0;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
display: inline-flex;
align-items: center;
gap: 4px;
font-family: inherit;
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-thickness: 1px;
text-decoration-color: rgba(22, 22, 22, 0.45);
text-underline-offset: 4px;
transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.cart-promo__toggle:hover {
color: var(--dk-text);
text-decoration-color: var(--dk-dark);
}
.cart-promo.is-applied .cart-promo__toggle {
text-decoration: none;
}
.cart-promo__panel {
margin-top: 10px;
display: none;
}
.cart-promo.is-open .cart-promo__panel {
display: block;
}
.cart-promo.is-applied .cart-promo__toggle::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dk-green);
margin-right: 6px;
}
.cart-promo__row {
display: flex;
gap: 8px;
align-items: stretch;
}
.cart-promo__row input {
flex: 1 1 auto;
height: 48px;
padding: 0 16px;
border-radius: var(--radius-md);
border: 1.5px solid var(--dk-border-i);
background: var(--dk-grey-bg);
font-size: var(--fs-sm);
color: var(--dk-dark);
box-shadow: none;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.cart-promo__row input:focus {
border-color: var(--dk-dark);
background: var(--dk-white);
}
.cart-promo__btn {
height: 48px;
padding: 0 20px;
border-radius: var(--radius-md);
background: var(--dk-dark);
color: var(--dk-white);
border: none;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
font-family: inherit;
flex-shrink: 0;
}
.cart-promo__btn:hover {
background: var(--dk-text);
}
.cart-promo__btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
.cart-promo__msg {
margin-top: 8px;
font-size: var(--fs-xs);
line-height: var(--lh-snug);
}
.cart-promo__msg--ok {
color: var(--dk-green);
}
.cart-promo__msg--warn {
color: var(--dk-orange);
}
.cart-promo__msg--err {
color: var(--dk-error-t);
}
@keyframes dk-cart-recalc {
0% { opacity: 0.45; transform: translateY(-2px); }
100% { opacity: 1; transform: translateY(0); }
}
[data-cart-totals] .cart-totals {
animation: dk-cart-recalc 0.22s ease;
}
.cart-totals {
display: flex;
flex-direction: column;
gap: 6px;
font-size: var(--fs-sm);
color: var(--dk-text);
}
.cart-totals__row {
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
line-height: var(--lh-snug);
}
.cart-totals__row::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 5px;
border-bottom: 2px dotted var(--dk-border-i);
pointer-events: none;
}
.cart-totals__row > span,
.cart-totals__row > strong {
position: relative;
z-index: 1;
background: var(--dk-white);
}
.cart-totals__row > :first-child {
padding-right: 8px;
}
.cart-totals__row > :last-child {
padding-left: 8px;
text-align: right;
}
.cart-totals__row--total::before {
display: none;
}
.cart-totals__row--discount {
color: var(--dk-green);
}
.cart-totals__row--total {
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--dk-border);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--dk-dark);
}
.cart-cumulative-note {
margin: 8px 0 0;
font-size: var(--fs-xs);
color: var(--dk-green);
line-height: var(--lh-snug);
}
.cart-empty {
text-align: center;
padding: 56px 24px 64px;
max-width: 520px;
margin: 0 auto;
}
.cart-empty__illustration {
width: 200px;
height: 160px;
margin: 0 auto 20px;
display: block;
}
.cart-empty__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--dk-dark);
margin: 0 0 10px;
}
.cart-empty__text {
color: var(--dk-grey-500);
font-size: var(--fs-sm);
margin: 0 auto 24px;
line-height: var(--lh-body);
max-width: 380px;
}
.cart-empty__cta-group {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.cart-empty__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 22px;
border-radius: var(--radius-md);
background: var(--dk-dark);
color: var(--dk-white);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
width: auto;
min-width: 180px;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cart-empty__cta:hover {
background: var(--dk-dark-h);
color: var(--dk-white);
}
.cart-empty__cta--ghost {
background: transparent;
color: var(--dk-dark);
border: 1px solid var(--dk-border-h);
}
.cart-empty__cta--ghost:hover {
background: var(--dk-soft);
color: var(--dk-dark);
border-color: var(--dk-border-i);
}
.cart-page {
padding: calc(var(--hdr-h) + 24px) 0 60px;
}
.cart-page h1 {
margin: 0 0 24px;
}
.checkout-page {
padding: calc(var(--hdr-h) + 24px) 0 60px;
}
.cart-page__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 24px;
align-items: start;
}
.cart-page__main {
background: var(--dk-white);
border: 1px solid var(--dk-border);
border-radius: var(--radius-lg);
padding: 24px;
}
.cart-page__hint {
margin: 12px 0 0;
font-size: var(--fs-xs);
color: var(--dk-grey-500);
line-height: var(--lh-body);
}
.cart-page__sidebar {
grid-column: 2;
grid-row: 1 / span 2;
position: sticky;
top: 100px;
background: var(--dk-white);
border: 1px solid var(--dk-border);
border-radius: var(--radius-lg);
padding: 24px;
}
.cart-page__sidebar h3 {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
margin: 0 0 16px;
color: var(--dk-dark);
width: auto;
}
.cart-page__sidebar .cart-totals {
margin-bottom: 16px;
}
.cart-page__sidebar .cart-promo {
margin: 16px 0 16px;
border-top: 1px solid var(--dk-border);
padding-top: 14px;
}
.cart-page__sidebar .btn-checkout {
width: 100%;
height: 56px;
border-radius: var(--radius-md);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
}
.cart-page__sidebar .btn-checkout:disabled,
.cart-page__sidebar .btn-checkout[disabled] {
background: var(--dk-border-i);
color: var(--dk-grey-300);
cursor: not-allowed;
pointer-events: none;
}
.cart-page__sidebar .cart-page__hint {
font-size: var(--fs-xs);
color: var(--dk-grey-500);
text-align: left;
line-height: var(--lh-body);
margin: 12px 0 0;
line-height: var(--lh-body);
}
.checkout-page h1 {
margin: 0 0 24px;
}
.checkout-page__layout {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.checkout-page__form {
background: var(--dk-white);
border: 1px solid var(--dk-border);
border-radius: var(--radius-lg);
padding: 24px;
}
.checkout-page__tabs {
display: flex;
gap: 4px;
background: var(--dk-grey-bg);
border-radius: var(--radius-md);
padding: 4px;
margin: 0 0 20px;
list-style: none;
}
.checkout-page__tabs li {
flex: 1 1 50%;
margin: 0;
list-style: none;
}
.checkout-page__tabs li button {
width: 100%;
height: 40px;
padding: 0 12px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--dk-text);
font-family: inherit;
transition: 0.15s;
}
.checkout-page__tabs li button.is-active {
background: var(--dk-white);
color: var(--dk-dark);
box-shadow: var(--shadow-sm);
}
.checkout-page__tab {
display: none;
}
.checkout-page__tab.is-active {
display: block;
}
.cart-checkout-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
.cart-checkout-form__field input {
width: 100%;
height: 48px;
padding: 0 16px;
border-radius: var(--radius-md);
border: 1.5px solid var(--dk-border-i);
background: var(--dk-grey-bg);
font-size: var(--fs-sm);
color: var(--dk-dark);
outline: none;
box-shadow: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.cart-checkout-form__field input:focus {
border-color: var(--dk-dark);
background: var(--dk-white);
}
.cart-checkout-form__consent {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--fs-xs);
line-height: var(--lh-snug);
color: var(--dk-text);
cursor: pointer;
user-select: none;
}
.cart-checkout-form__consent input[type=checkbox] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
accent-color: var(--dk-dark);
cursor: pointer;
}
.cart-checkout-form__consent a {
color: var(--dk-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
.cart-checkout-form__cta {
width: 100%;
margin-top: 4px;
}
.cart-checkout-form__email-hint {
margin: 0;
font-size: var(--fs-xs);
color: var(--dk-grey-500);
text-align: center;
}
.cart-checkout-form__email-hint strong {
color: var(--dk-dark);
word-break: break-all;
}
.cart-checkout-form__error {
display: none;
color: var(--dk-error);
background: var(--dk-error-bg);
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: var(--fs-xs);
line-height: var(--lh-snug);
margin: 0;
}
.cart-checkout-form__error.is-shown {
display: block;
}
.cart-checkout-form__consent-text {
margin: 4px 0 0;
font-size: var(--fs-xs);
color: var(--dk-grey-500);
line-height: var(--lh-body);
text-align: left;
}
.cart-checkout-form__consent-text a,
.cart-legal-modal__consent-text a {
display: inline !important;
color: var(--dk-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
.cart-checkout-form__consent-text a:hover,
.cart-legal-modal__consent-text a:hover {
color: var(--dk-dark-h);
}
.cart-legal-modal__consent-text {
margin: 6px 0 0;
font-size: var(--fs-xs);
color: var(--dk-grey-500);
line-height: var(--lh-body);
text-align: left;
}
.cart-legal-link {
background: none;
border: none;
margin: 14px auto 0;
padding: 6px 4px;
display: block;
color: var(--dk-grey-500);
font-size: var(--fs-xs);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--dk-grey-300);
transition: color 0.15s ease, text-decoration-color 0.15s ease;
font-family: inherit;
}
.cart-legal-link:hover,
.cart-legal-link:focus {
color: var(--dk-dark);
text-decoration-color: var(--dk-dark);
outline: none;
}
.cart-legal-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.cart-legal-modal[hidden] {
display: none;
}
.cart-legal-modal__backdrop {
position: absolute;
inset: 0;
background: var(--dk-scrim);
backdrop-filter: blur(2px);
animation: cart-legal-fade .2s ease-out;
}
.cart-legal-modal__inner {
position: relative;
z-index: 1;
background: var(--dk-white);
border-radius: var(--radius-lg);
padding: 32px 28px 24px;
width: 100%;
max-width: 460px;
max-height: calc(100vh - 32px);
overflow-y: auto;
box-shadow: var(--shadow-lg);
animation: cart-legal-pop .25s ease-out;
}
@keyframes cart-legal-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes cart-legal-pop {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cart-legal-modal__close {
position: absolute;
top: 12px;
right: 12px;
background: transparent;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--dk-grey-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.cart-legal-modal__close:hover {
background: var(--dk-soft);
color: var(--dk-dark);
}
.cart-legal-modal__title {
margin: 0 0 8px;
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--dk-dark);
}
.cart-legal-modal__sub {
margin: 0 0 20px;
color: var(--dk-grey-500);
font-size: var(--fs-sm);
line-height: var(--lh-body);
}
body.cart-legal-open {
overflow: hidden;
}
.checkout-legal-success {
text-align: center;
padding: 24px 8px 8px;
}
.checkout-legal-success__icon {
width: 80px;
height: 80px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
}
.checkout-legal-success__icon svg {
width: 100%;
height: 100%;
animation: checkout-legal-success-pop .35s ease-out;
}
@keyframes checkout-legal-success-pop {
0% { transform: scale(0.6); opacity: 0; }
60% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.checkout-legal-success__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--dk-dark);
margin: 0 0 10px;
}
.checkout-legal-success--error .checkout-legal-success__title {
color: var(--dk-error);
}
.checkout-legal-success__text {
color: var(--dk-text);
font-size: var(--fs-sm);
line-height: var(--lh-body);
max-width: 420px;
margin: 0 auto 14px;
}
.checkout-legal-success__sub {
color: var(--dk-grey-500);
font-size: var(--fs-xs);
margin: 0 0 20px;
}
.checkout-legal-success__sub strong {
color: var(--dk-dark);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.checkout-legal-success__actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.checkout-legal-success__actions .btn {
min-width: 180px;
}
.checkout-form label {
margin-bottom: 12px;
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form textarea {
width: 100%;
height: 48px;
padding: 0 16px;
border-radius: var(--radius-md);
border: 1.5px solid var(--dk-border-i);
background: var(--dk-grey-bg);
font-size: var(--fs-sm);
color: var(--dk-dark);
outline: none;
box-shadow: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.checkout-form input[type="text"]:focus,
.checkout-form input[type="email"]:focus,
.checkout-form input[type="tel"]:focus,
.checkout-form textarea:focus {
border-color: var(--dk-dark);
background: var(--dk-white);
}
.checkout-form textarea {
height: 100px;
padding: 12px 16px;
}
.checkout-form input[readonly] {
background: var(--dk-border);
color: var(--dk-grey-500);
cursor: not-allowed;
}
.checkout-form .consent {
font-size: var(--fs-xs);
color: var(--dk-grey-500);
line-height: var(--lh-body);
margin: 8px 0 16px;
width: 100%;
}
.checkout-form .consent--checkbox {
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
gap: 10px;
width: 100%;
max-width: none;
margin: 0 0 16px;
background: transparent;
border: none;
padding: 0;
height: auto;
cursor: pointer;
}
.checkout-form .consent--checkbox > input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
min-width: 18px;
margin: 2px 0 0;
flex: 0 0 18px;
background: var(--dk-white);
border: 1.5px solid var(--dk-border-i);
border-radius: var(--radius-xs);
padding: 0;
box-shadow: none;
appearance: auto;
-webkit-appearance: auto;
accent-color: var(--dk-dark);
cursor: pointer;
}
.checkout-form .consent--checkbox > span {
flex: 1 1 auto;
min-width: 0;
line-height: var(--lh-body);
}
.checkout-form .consent a {
color: var(--dk-dark);
display: inline;
text-decoration: underline;
}
.checkout-form .consent a:hover {
color: var(--dk-text);
}
.checkout-form__cta {
width: 100%;
height: 56px;
border-radius: var(--radius-md);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
}
.checkout-form__hint {
margin: 12px 0 0;
font-size: var(--fs-xs);
color: var(--dk-grey-500);
text-align: center;
line-height: var(--lh-body);
}
.checkout-form__error {
margin: 12px 0 0;
padding: 10px 14px;
border-radius: var(--radius-md);
background: var(--dk-error-bg);
color: var(--dk-error-t);
font-size: var(--fs-xs);
line-height: var(--lh-body);
display: none;
}
.checkout-form__error.is-shown {
display: block;
}
.checkout-page__summary {
position: sticky;
top: 100px;
background: var(--dk-white);
border: 1px solid var(--dk-border);
border-radius: var(--radius-lg);
padding: 24px;
}
.checkout-page__summary h3 {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
margin: 0 0 16px;
color: var(--dk-dark);
width: auto;
}
.checkout-page__summary-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.checkout-page__summary-list li {
margin: 0;
display: flex;
gap: 10px;
align-items: flex-start;
font-size: var(--fs-sm);
color: var(--dk-text);
}
.checkout-page__summary-list li img {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--dk-grey-bg);
object-fit: contain;
flex-shrink: 0;
}
.checkout-page__summary-list li .name {
flex: 1 1 auto;
min-width: 0;
line-height: var(--lh-heading);
}
.checkout-page__summary-list li .qty {
font-size: var(--fs-xs);
color: var(--dk-grey-500);
margin-top: 2px;
}
.checkout-page__summary-list li .price {
font-weight: var(--fw-semibold);
color: var(--dk-dark);
white-space: nowrap;
}
.checkout-page__summary .cart-totals {
border-top: 1px solid var(--dk-border);
padding-top: 16px;
gap: 10px;
font-size: var(--fs-sm);
}
.checkout-page__summary .cart-totals__row--total {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid var(--dk-border-i);
}
.checkout-page__summary .cart-totals__row--total span:last-child {
color: var(--dk-dark);
}
.checkout-page__summary .cart-cumulative-note {
margin-top: 12px;
font-size: var(--fs-xs);
color: var(--dk-green);
}
.product-add-to-cart {
margin-top: 12px;
width: 100%;
height: 48px;
border-radius: var(--radius-md);
background: var(--dk-white);
border: 1.5px solid var(--dk-dark);
color: var(--dk-dark);
font-weight: var(--fw-medium);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
font-size: var(--fs-sm);
transition: 0.15s;
}
.product-add-to-cart:hover {
background: var(--dk-dark);
color: var(--dk-white);
}
.product-add-to-cart .svg-icon {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
}
.product-add-to-cart[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.order-card__items {
margin: 14px 0 0;
border-top: 1px solid var(--dk-border);
padding-top: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
.order-item-row {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 10px 0;
border-radius: 0;
background: transparent;
}
.order-item-row + .order-item-row {
border-top: 1px solid var(--dk-border);
}
.order-item-row__image {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--dk-white);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.order-item-row__image img {
max-width: 100%;
max-height: 100%;
}
.order-item-row__main {
flex: 1 1 auto;
min-width: 0;
}
.order-item-row__head {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
margin: 0 0 4px;
}
.order-item-row__name {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--dk-dark);
margin: 0;
line-height: var(--lh-heading);
flex: 1 1 auto;
min-width: 0;
}
.order-item-row__name a {
color: inherit;
display: inline;
}
.order-item-row__name a:hover {
color: var(--dk-dark);
}
.order-item-row__review-btn {
flex: 0 0 auto;
height: 32px !important;
line-height: 1 !important;
padding: 0 12px !important;
font-size: var(--fs-xs) !important;
border-radius: var(--radius-sm) !important;
white-space: nowrap;
}
.order-item-row__review-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px;
border-radius: var(--radius-full);
background: var(--dk-success-bg);
color: var(--dk-green);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
white-space: nowrap;
line-height: 1;
}
.order-item-row__review-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dk-green);
}
.order-item-row__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
font-size: var(--fs-xs);
color: var(--dk-grey-500);
margin: 0 0 8px;
}
.order-item-row__meta-qty {
color: var(--dk-grey-500);
}
.order-item-row__meta-total {
color: var(--dk-dark) !important;
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
white-space: nowrap;
line-height: var(--lh-heading);
}
.order-item-row__instructions-toggle {
margin-top: 8px;
}
.order-item-row__instructions-toggle summary {
cursor: pointer;
color: var(--dk-dark);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
}
.order-item-row__instructions-toggle .order-detail-card__instructions {
margin-top: 8px;
}
@media (max-width: 540px) {
.order-item-row__head {
flex-direction: column;
align-items: stretch;
}
.order-item-row__review-btn,
.order-item-row__review-badge {
align-self: flex-start;
}
.cart-legal-modal {
padding: 0;
align-items: flex-end;
}
.cart-legal-modal__inner {
max-width: 100%;
max-height: 92vh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 28px 20px 20px;
}
.order-detail-summary {
padding: 14px 16px;
}
.order-detail-summary__list li {
flex-wrap: wrap;
gap: 4px;
}
.order-detail-summary__list li::before {
display: none;
}
.order-detail-summary__value {
margin-left: 0;
}
}
.order-item-row__keys {
margin: 6px 0 0;
}
.order-item-row__keys-toggle {
background: none;
border: none;
color: var(--dk-dark);
cursor: pointer;
padding: 0;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
font-family: inherit;
}
.order-item-row__keys-list {
margin: 8px 0 0;
padding: 0;
list-style: none;
display: none;
flex-direction: column;
gap: 6px;
}
.order-item-row__keys.is-open .order-item-row__keys-list {
display: flex;
}
.order-item-row__key {
display: flex;
gap: 8px;
align-items: center;
padding: 8px 10px;
background: var(--dk-white);
border-radius: var(--radius-sm);
border: 1px solid var(--dk-border);
}
.order-item-row__key code {
flex: 1 1 auto;
font-size: var(--fs-xs);
color: var(--dk-dark);
word-break: break-all;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: transparent;
padding: 0;
}
.order-item-row__key .btn-copy-key {
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
color: var(--dk-grey-500);
border-radius: var(--radius-xs);
}
.order-item-row__key .btn-copy-key:hover {
color: var(--dk-dark);
background: var(--dk-grey-bg);
}
.order-item-row__actions {
margin: 8px 0 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.order-item-row__actions .btn {
height: 36px;
font-size: var(--fs-xs);
padding: 0 14px;
border-radius: var(--radius-sm);
}
@media (max-width: 1023px) {
.cart-page__layout,
.checkout-page__layout {
grid-template-columns: 1fr;
}
.cart-page__sidebar,
.checkout-page__summary {
position: static;
}
.cart-page__sidebar {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 960px) and (min-width: 768px) {
.cart-page__main,
.cart-page__sidebar,
.checkout-page__form,
.checkout-page__summary {
padding: 20px;
}
}
@media (max-width: 767px) {
.cart-drawer__inner {
max-width: 100%;
}
.cart-drawer__header,
.cart-drawer__body,
.cart-drawer__footer {
padding-left: 16px;
padding-right: 16px;
}
.cart-page,
.checkout-page {
padding: calc(var(--hdr-h) + 20px) 0 40px;
}
.cart-page__main,
.cart-page__sidebar,
.checkout-page__form,
.checkout-page__summary {
padding: 16px;
border-radius: var(--radius-md);
}
}
@media (max-width: 480px) {
.cart-item {
--cart-remove-size: 36px;
grid-template-columns: 56px minmax(0, 1fr) var(--cart-remove-size);
column-gap: 12px;
}
.cart-item__image {
width: 56px;
height: 74px;
}
.cart-item__remove .svg-icon {
width: 20px;
height: 20px;
}
.cart-qty {
height: 30px;
}
.cart-qty__btn {
width: 28px;
height: 28px;
}
}
body.cart-drawer-open {
overflow: hidden;
}
.cart-recommend {
margin-top: 48px;
}
.cart-recommend__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--dk-dark);
margin: 0 0 6px;
}
.cart-recommend__sub {
color: var(--dk-grey-500);
font-size: var(--fs-sm);
margin: 0 0 24px;
}
.cart-recommend__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 16px;
row-gap: 32px;
}
.cart-recommend__col {
display: flex;
}
.cart-recommend__col .product-card {
width: 100%;
}
@media (max-width: 1200px) {
.cart-recommend__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
.cart-recommend__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.cart-recommend__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cart-recommend { margin-top: 32px; }
.cart-recommend__title { font-size: var(--fs-lg); }
}
.cart-toast-host {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.cart-toast {
pointer-events: auto;
background: var(--dk-dark);
color: var(--dk-white);
padding: 12px 16px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
max-width: 360px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.cart-toast.is-visible {
opacity: 1;
transform: translateY(0);
}