/* Verified text requirements. Shared vertical storefront card and palette. */
:root {
    --green: #00C853;
    --green-hover: #00A844;
    --accent: #00C853;
    --accent-strong: #00A844;
    --red: #E02020;
    --orange: #F26522;
    --paper: #F5F5F5;
    --ink: #202626;
    --muted: #68716C;
    --line: #E3E7E4;
}
.topline { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.site-header { background: #fff; }
.catalog-launch, .search button, .button, .button.lime { background: var(--green); color: #07331B; }
.catalog-launch:hover, .search button:hover, .button:hover, .button.lime:hover { background: var(--green-hover); }
.button.light { background: #fff; color: var(--ink); }
.button.light:hover { background: #EDF8F0; }
.text-link, .nav-highlight { color: #087B37; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--green-hover); }
.tm-storefront .bg-accent-500 { background-color: var(--green); }
.tm-storefront .hover\:bg-accent-600:hover { background-color: var(--green-hover); }
.tm-storefront .toast[data-toast] { background: #fff; color: var(--ink); border: 1px solid var(--line); }

/* Both home collections use the same grid and component. */
.shelf, #week .shelf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 16px;
    overflow: visible;
    padding: 0;
}
.shelf .market-card, #week .shelf .market-card { display: flex !important; }
.market-card, #week .market-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none;
}
.market-card .product-image, #week .market-card .product-image, .catalog-grid .market-card .product-image {
    position: relative;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.35;
    background: #fff;
    flex: none;
}
.market-card .product-image > a, #week .market-card .product-image > a {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 18px 34px;
}
.market-card .product-image img.device, #week .market-card .product-image img.device {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: contain; transform: none;
}
.market-card .favorite, #week .market-card .favorite {
    top: 6px; right: 6px; bottom: auto; width: 44px; height: 44px;
    background: #FFFFFFE8; z-index: 3;
}
.market-card .favorite:after { display: none; }
.card-status-stack, .card-promo-stack {
    position: absolute; left: 10px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    max-width: calc(100% - 64px); pointer-events: none;
}
.card-status-stack { top: 10px; }
.card-photo-badge, .market-card .card-condition {
    display: block; max-width: 100%; padding: 4px 9px;
    border-radius: 20px; background: #202626B8; color: #fff;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-size: 11px; line-height: 16px; font-weight: 600;
    white-space: normal; overflow-wrap: anywhere;
}
.market-card .card-condition > span { display: block; }
.market-card .card-battery { display: inline-flex; align-items: center; gap: 5px; color: #fff; }
.card-battery-label { white-space: nowrap; }
.card-battery-icon { position: relative; display: inline-flex; align-items: center; width: 25px; height: 14px; flex: 0 0 25px; }
.card-battery-frame { display: block; width: 22px; height: 12px; padding: 2px; border: 1px solid currentColor; border-radius: 3px; }
.card-battery-fill { display: block; height: 100%; max-width: 100%; background: currentColor; border-radius: 1px; }
.card-battery-contact { position: absolute; right: 0; top: 4px; width: 2px; height: 6px; border-radius: 0 1px 1px 0; background: currentColor; }
.card-battery--good .card-battery-icon { color: #00C853; }
.card-battery--warning .card-battery-icon { color: #F26522; }
.card-battery--danger .card-battery-icon { color: #E02020; }
.card-promo-stack { bottom: 10px; }
.card-new-badge, .card-discount-badge {
    padding: 4px 9px; border-radius: 20px; font-size: 11px;
    line-height: 16px; font-weight: 650; color: #fff;
}
.card-new-badge { background: var(--green); color: #07331B; }
.card-discount-badge { background: var(--red); }
.market-card .image-disclosure, #week .market-card .image-disclosure {
    left: auto; right: 5px; bottom: 4px; max-width: 58%; margin: 0;
    font-size: 9px; line-height: 11px; text-align: right;
}
.market-card .product-info, #week .market-card .product-info, .catalog-grid .market-card .product-info {
    display: flex; flex-direction: column; gap: 7px; flex: 1;
    min-width: 0; padding: 14px;
}
.card-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; min-height: 30px; }
.market-card .product-price, #week .market-card .product-price, .catalog-grid .market-card .product-price {
    margin: 0; font-size: 24px; line-height: 30px; font-weight: 750;
    letter-spacing: -.65px; white-space: nowrap; color: var(--ink);
}
.market-card .product-price.has-discount, #week .market-card .product-price.has-discount { color: var(--red); }
.market-card .product-price > span, #week .market-card .product-price > span { font-size: 17px; }
.market-card .product-price small { font-size: 12px; font-weight: 450; letter-spacing: 0; }
.card-old-price { font-size: 12px; line-height: 18px; color: #737B76; white-space: nowrap; }
.market-card .product-name, #week .market-card .product-name, .catalog-grid .market-card .product-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; height: 42px; min-height: 42px; margin: 0;
    font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink);
}
.market-card .title-spec { display: inline; font-size: inherit; font-weight: inherit; }
.market-card .title-spec::before { content: ' · '; }
.market-card .card-variants { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; min-height: 44px; height: auto; overflow: visible; flex-shrink: 0; }
.market-card .memory-chip, #week .market-card .memory-chip, .market-card .variant-more, .market-card .feature-chip {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; min-height: 44px; min-width: 44px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 9px;
    background: #fff; color: var(--ink); font-size: 12px; white-space: nowrap;
}
.market-card .memory-chip.selected { border-color: var(--green); background: #F3FCF6; color: var(--ink); }
.market-card .variant-more { background: #F5F5F5; }
.market-card .feature-chip { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.market-card .variant-unavailable { color: #737B76; border-style: dashed; }
.market-card .card-specification { color: var(--muted); font-size: 11px; line-height: 16px; }
.market-card .card-location, #week .market-card .card-location {
    display: block; margin: 0; color: var(--muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere;
}
.market-card .card-buy-row { display: block; align-self: stretch; flex-shrink: 0; width: 100%; height: auto; margin-top: auto; padding-top: 4px; }
.market-card .card-action, #week .market-card .card-action {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; height: 44px; min-height: 44px; padding: 10px 12px;
    border: 0; border-radius: 999px; background: var(--green); color: #07331B;
    font-size: 13px; line-height: 18px; font-weight: 650;
}
.market-card .card-action:hover { background: var(--green-hover); }
.market-card .card-action .icon { display: block; width: 17px; height: 17px; }
.market-card button.card-action { white-space: nowrap; }
.market-card .card-action.choose-unit { padding-block: 6px; line-height: 14px; }
.market-card .choose-unit-label { display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; }
.market-card .card-action.is-active { background: #E9F8EE; color: #146B36; }
.market-card .card-action.unavailable { background: #F0F2F1; color: #737B76; opacity: 1; }
.battery-health.battery-good { color: #087B37; }
.battery-health.battery-warning { color: var(--orange); }
.battery-health.battery-danger { color: var(--red); }
.battery-health.battery-good .battery-track > i { background: var(--green); }
.battery-health.battery-warning .battery-track > i { background: var(--orange); }
.battery-health.battery-danger .battery-track > i { background: var(--red); }
.pickup-branches { display: grid; gap: 12px; }
.pickup-branch { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.pickup-branch strong { display: block; margin-bottom: 6px; font-size: 18px; }
.pickup-branch address { font-size: 15px; font-style: normal; color: var(--ink); }
@media (max-width: 1150px) {
    .shelf, #week .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .market-card .product-price, #week .market-card .product-price { font-size: 22px; }
}
@media (max-width: 900px) {
    .shelf, #week .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .promo-tile { min-height: 215px; }
    .shelf, #week .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .market-card, #week .market-card { border-radius: 13px; }
    .market-card .product-image, #week .market-card .product-image, .catalog-grid .market-card .product-image { aspect-ratio: 1; }
    .market-card .product-image > a, #week .market-card .product-image > a { padding: 20px 8px; }
    .market-card .product-info, #week .market-card .product-info, .catalog-grid .market-card .product-info { padding: 10px; gap: 6px; }
    .market-card .product-name, #week .market-card .product-name, .catalog-grid .market-card .product-name { font-size: 13px; line-height: 19px; min-height: 38px; height: 38px; }
    .market-card .product-price, #week .market-card .product-price, .catalog-grid .market-card .product-price { font-size: 20px; line-height: 26px; }
    .market-card .product-price > span, #week .market-card .product-price > span { font-size: 14px; }
    .card-price-row { gap: 0 6px; min-height: 44px; align-content: center; }
    .card-old-price { font-size: 11px; }
    .card-status-stack { top: 8px; left: 7px; max-width: calc(100% - 48px); }
    .card-promo-stack { left: 7px; bottom: 8px; }
    .card-photo-badge, .market-card .card-condition, .card-new-badge, .card-discount-badge { padding: 3px 7px; font-size: 10px; line-height: 14px; }
    .market-card .favorite, #week .market-card .favorite { top: 2px; right: 0; }
    .market-card .card-action, #week .market-card .card-action { font-size: 12px; padding: 9px 7px; }
    .pickup-branch { padding: 18px; }
}