:root {
    --uvz-replace-ink: #15372b;
    --uvz-replace-green: #4f7d35;
    --uvz-replace-green-dark: #315e3b;
    --uvz-replace-muted: #607168;
    --uvz-replace-line: #dbe5d5;
    --uvz-replace-soft: #f2f6ee;
    --uvz-replace-error: #9a3328;
}

.uvz-replacements {
    width: min(100%, 1180px);
    margin: 0 auto 28px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid var(--uvz-replace-line);
    border-radius: 16px;
    background: #fff;
    color: var(--uvz-replace-ink);
    box-shadow: 0 14px 34px rgba(21, 55, 43, .08);
}

.uvz-replacements__header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--uvz-replace-line);
}

.uvz-replacements__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: var(--uvz-replace-soft);
    color: var(--uvz-replace-green-dark);
}

.uvz-replacements__icon svg { width: 25px; height: 25px; }
.uvz-replacements h2 { margin: 0 0 6px; color: var(--uvz-replace-ink); font-size: clamp(22px, 3vw, 30px); line-height: 1.2; letter-spacing: -.025em; }
.uvz-replacements__header p { max-width: 68ch; margin: 0; color: var(--uvz-replace-muted); font-size: 15px; line-height: 1.55; }

.uvz-replacement-group { padding-top: 24px; }
.uvz-replacement-group + .uvz-replacement-group { margin-top: 26px; border-top: 1px solid var(--uvz-replace-line); }
.uvz-replacement-group__title { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.uvz-replacement-group__title > div { min-width: 0; }
.uvz-replacement-group__title span { display: block; margin-bottom: 3px; color: var(--uvz-replace-muted); font-size: 13px; font-weight: 650; }
.uvz-replacement-group__title h3 { margin: 0; overflow-wrap: anywhere; color: var(--uvz-replace-ink); font-size: 19px; line-height: 1.3; }
.uvz-replacement-group__title p { margin: 4px 0 0; color: var(--uvz-replace-muted); font-size: 13px; }

.uvz-replacement-discard {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid #dfc8c3;
    border-radius: 12px;
    background: #fff;
    color: var(--uvz-replace-error);
    font-weight: 700;
    cursor: pointer;
}

.uvz-replacement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.uvz-replacement-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--uvz-replace-line);
    border-radius: 14px;
    background: #fff;
}

.uvz-replacement-card > img { width: 112px; height: 100%; min-height: 178px; object-fit: cover; background: var(--uvz-replace-soft); }
.uvz-replacement-card__body { display: flex; min-width: 0; flex-direction: column; padding: 14px; }
.uvz-replacement-card h4 { margin: 0 0 6px; overflow-wrap: anywhere; color: var(--uvz-replace-ink); font-size: 16px; line-height: 1.3; }
.uvz-replacement-card__match { margin: 0 0 12px; color: var(--uvz-replace-muted); font-size: 12px; line-height: 1.45; }
.uvz-replacement-card__price { display: flex; align-items: baseline; gap: 6px; margin: auto 0 10px; color: var(--uvz-replace-ink); }
.uvz-replacement-card__price strong { font-size: 16px; }
.uvz-replacement-card__price span { color: var(--uvz-replace-muted); font-size: 11px; }
.uvz-replacement-card button,
.uvz-replacements__empty a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--uvz-replace-green-dark);
    color: #fff !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

.uvz-replacement-card button:hover,
.uvz-replacement-card button:focus-visible,
.uvz-replacements__empty a:hover,
.uvz-replacements__empty a:focus-visible { background: var(--uvz-replace-green); }
.uvz-replacement-card button:focus-visible,
.uvz-replacement-discard:focus-visible,
.uvz-replacements__empty a:focus-visible { outline: 3px solid rgba(79, 125, 53, .28); outline-offset: 3px; }
.uvz-replacement-card button:disabled,
.uvz-replacement-discard:disabled { cursor: wait; opacity: .68; }

.uvz-replacements__empty { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--uvz-replace-soft); }
.uvz-replacements__empty strong { display: block; margin-bottom: 4px; }
.uvz-replacements__empty p { margin: 0 0 12px; color: var(--uvz-replace-muted); }
.uvz-replacements__status { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--uvz-replace-soft); color: var(--uvz-replace-ink); font-weight: 700; }
.uvz-replacements__status:empty { display: none; }
.uvz-replacements__status.is-error { background: #fff2ef; color: var(--uvz-replace-error); }

.uvz-checkout-product-name { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.uvz-checkout-remove { display: inline-grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: var(--uvz-replace-error) !important; font-size: 22px; line-height: 1; text-decoration: none !important; }
.uvz-checkout-remove:hover,
.uvz-checkout-remove:focus-visible { background: #fff2ef; outline: 2px solid #dfc8c3; outline-offset: 1px; }

.woocommerce-cart a.remove {
    display: inline-grid !important;
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    place-items: center;
    border-radius: 50%;
    color: var(--uvz-replace-error) !important;
    line-height: 1 !important;
}

.woocommerce-cart a.remove:hover,
.woocommerce-cart a.remove:focus-visible {
    background: #fff2ef !important;
    outline: 2px solid #dfc8c3;
    outline-offset: 1px;
}

.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] { min-height: 44px; }

.uvz-product-unavailable {
    width: 100%;
    margin: 26px 0 8px;
    color: var(--uvz-replace-ink);
}

.uvz-product-unavailable__message {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: clamp(18px, 3vw, 26px);
    border-radius: 16px;
    background: var(--uvz-replace-soft);
}

.uvz-product-unavailable__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--uvz-replace-green-dark);
}

.uvz-product-unavailable__icon svg { width: 25px; height: 25px; }
.uvz-product-unavailable__message > div { min-width: 0; }
.uvz-product-unavailable h2 {
    margin: 0 0 8px;
    color: var(--uvz-replace-ink);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.2;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
.uvz-product-unavailable__message p {
    max-width: 68ch;
    margin: 0 0 16px;
    color: var(--uvz-replace-muted);
    font-size: 15px;
    line-height: 1.6;
}

.uvz-product-unavailable__category,
.uvz-product-alternative__action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 12px;
    background: var(--uvz-replace-green-dark);
    color: #fff !important;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
    text-decoration: none !important;
}
.uvz-product-unavailable__category svg { width: 18px; height: 18px; flex: 0 0 auto; }
.uvz-product-unavailable__category:hover,
.uvz-product-unavailable__category:focus-visible,
.uvz-product-alternative__action:hover,
.uvz-product-alternative__action:focus-visible { background: var(--uvz-replace-green); }
.uvz-product-unavailable__category:focus-visible,
.uvz-product-alternative__action:focus-visible,
.uvz-product-alternative a:focus-visible { outline: 3px solid rgba(79, 125, 53, .28); outline-offset: 3px; }

.uvz-product-unavailable__alternatives { margin-top: 30px; }
.uvz-product-unavailable__alternatives > h3 {
    margin: 0 0 6px;
    color: var(--uvz-replace-ink);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.25;
    letter-spacing: -.02em;
}
.uvz-product-unavailable__alternatives > p { margin: 0; color: var(--uvz-replace-muted); font-size: 14px; }

.uvz-product-alternative-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.uvz-product-alternative {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--uvz-replace-line);
    border-radius: 14px;
    background: #fff;
}
.uvz-product-alternative__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--uvz-replace-soft); }
.uvz-product-alternative__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.uvz-product-alternative__image:hover img { transform: scale(1.025); }
.uvz-product-alternative__body { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 15px; }
.uvz-product-alternative h4 { margin: 0 0 7px; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.uvz-product-alternative h4 a { color: var(--uvz-replace-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.uvz-product-alternative__match { margin: 0 0 14px; color: var(--uvz-replace-muted); font-size: 12px; line-height: 1.5; }
.uvz-product-alternative__price { display: flex; align-items: baseline; gap: 7px; margin: auto 0 12px; color: var(--uvz-replace-ink); }
.uvz-product-alternative__price strong { font-size: 17px; }
.uvz-product-alternative__price span { color: var(--uvz-replace-muted); font-size: 12px; }
.uvz-product-alternative__action { width: 100%; }

@media (max-width: 980px) {
    .uvz-replacement-grid { grid-template-columns: 1fr; }
    .uvz-replacement-card { grid-template-columns: 104px minmax(0, 1fr); }
    .uvz-replacement-card > img { width: 104px; min-height: 168px; }
    .uvz-product-alternative-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .uvz-replacements { margin-bottom: 20px; padding: 16px; border-radius: 14px; }
    .uvz-replacements__header { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; }
    .uvz-replacements__icon { width: 40px; height: 40px; border-radius: 12px; }
    .uvz-replacement-group__title { align-items: flex-start; flex-direction: column; }
    .uvz-replacement-discard { width: 100%; }
    .uvz-replacement-card { grid-template-columns: 92px minmax(0, 1fr); }
    .uvz-replacement-card > img { width: 92px; min-height: 190px; }
    .uvz-replacement-card__body { padding: 12px; }
    .uvz-product-unavailable { margin-top: 22px; }
    .uvz-product-unavailable__message { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 14px; }
    .uvz-product-unavailable__icon { width: 40px; height: 40px; border-radius: 12px; }
    .uvz-product-unavailable__category { width: 100%; }
    .uvz-product-alternative-grid { grid-template-columns: 1fr; }
    .uvz-product-alternative { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
    .uvz-product-alternative__image { height: 100%; min-height: 210px; aspect-ratio: auto; }
    .uvz-product-alternative__body { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .uvz-replacements *, .uvz-replacements *::before, .uvz-replacements *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .uvz-product-unavailable *, .uvz-product-unavailable *::before, .uvz-product-unavailable *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}