.king-addons-compare-table { width: 100%; --kng-compare-gap: 10px; --kng-compare-view-cart-gap: 10px; } .king-addons-compare-table__scroll { width: 100%; overflow-x: auto; } .king-addons-compare-table__table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; } .king-addons-compare-table__row { transition: background-color 0.2s ease; } .king-addons-compare-table__cell { padding: 14px 16px; border: 1px solid #e5e7eb; vertical-align: top; background-color: #ffffff; } .king-addons-compare-table__row:nth-child(2n) .king-addons-compare-table__cell { background-color: #f9fafb; } .king-addons-compare-table__row--head .king-addons-compare-table__cell { background-color: #f3f4f6; font-weight: 700; } .king-addons-compare-table__cell--label { width: 160px; font-weight: 600; color: #111827; background-color: #f8fafc; } .king-addons-compare-table__product-head { display: flex; align-items: center; gap: 12px; } .king-addons-compare-table__product-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e7eb; background-color: #ffffff; } .king-addons-compare-table__product-title { font-weight: 700; color: #111827; } .king-addons-compare-table__product-title a, .king-addons-compare-table__cell a { color: inherit; text-decoration: none; } .king-addons-compare-table__price { font-weight: 700; color: #16a34a; } .king-addons-compare-table__stock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; } .king-addons-compare-table__stock.is-in { background-color: #ecfdf3; color: #15803d; } .king-addons-compare-table__stock.is-out { background-color: #fef2f2; color: #b91c1c; } .king-addons-compare-table__cell .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid #111827; background-color: #111827; color: #ffffff; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart { position: relative; overflow: hidden; } .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart.loading { pointer-events: none; } .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart.loading .king-addons-compare-table__add-to-cart-label, .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart.added .king-addons-compare-table__add-to-cart-label { visibility: hidden; } .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart.loading::after { content: ""; display: inline-block; width: var(--king-addons-atc-indicator-size, 14px); height: var(--king-addons-atc-indicator-size, 14px); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kng-compare-spin 0.8s linear infinite; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart.added::after { content: "✓"; display: inline-block; font-size: var(--king-addons-atc-indicator-size, 14px); line-height: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart.loading.added::after { content: ""; display: inline-block; width: var(--king-addons-atc-indicator-size, 14px); height: var(--king-addons-atc-indicator-size, 14px); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kng-compare-spin 0.8s linear infinite; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .king-addons-compare-table__cell .king-addons-compare-table__add-to-cart + .added_to_cart { display: inline-flex; align-items: center; margin-left: var(--kng-compare-view-cart-gap); } @keyframes kng-compare-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .king-addons-compare-table__cell .button:hover { background-color: #0b1220; border-color: #0b1220; } .king-addons-compare-table[data-sticky-header="yes"] .king-addons-compare-table__row--head .king-addons-compare-table__cell { position: sticky; top: 0; z-index: 3; } .king-addons-compare-table__row.is-equal-hidden { display: none; } .king-addons-compare-table__row.is-different { background-color: #f0f9ff; } @media (max-width: 768px) { .king-addons-compare-table__table { min-width: 100%; } .king-addons-compare-table__product-head { flex-direction: column; align-items: flex-start; } }