.box-shopping { border-radius: 8px; padding: 5px 0; background: #f8f8f8; max-height: 500px; }

@media (max-width: 1200px) { .box-shopping { max-height: 430px; overflow: hidden; } }

@media (min-width: 1400px) { .box-shopping { max-height: 600px; } }

.tabs { display: flex; background: white; border-bottom: 2px solid #CCCCCC; transition: background ease 0.3s; padding: 0 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; }

label { flex: 1; text-align: center; padding: 12px 10px 8px; cursor: pointer; font-weight: bold; color: black; margin-bottom: -3px; }

label svg { vertical-align: sub; }

label svg path { fill: #000000; }

input[name="tab"] { display: none; }

input#tab1:checked ~ .tabs label[for="tab1"], input#tab2:checked ~ .tabs label[for="tab2"] { border-bottom: 5px solid white; border-top: solid 2px #CCCCCC; border-left: solid 2px #CCCCCC; border-right: solid 2px #CCCCCC; border-top-left-radius: 8px; border-top-right-radius: 8px; color: #21409A; }

input#tab1:checked ~ .tabs label[for="tab1"] svg path, input#tab2:checked ~ .tabs label[for="tab2"] svg path { fill: #21409A; }

.tab-content { display: none; max-height: 350px; overflow: auto; background: white; padding: 10px 0; }

@media (max-width: 1200px) { .tab-content { max-height: 300px; } }

@media (min-width: 1400px) { .tab-content { max-height: 430px; } }

#tab1:checked ~ #products, #tab2:checked ~ #chat { display: block; }

.product { display: flex; align-items: center; position: relative; font-family: Montserrat-FF, Arial, Tahoma, sans-serif; margin-bottom: 15px; padding: 0 14px 0 10px; }

.product svg { position: absolute; top: 3px; right: 5px; }

.product .area-img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; position: relative; }

.product .area-img img { width: 100%; height: auto; object-fit: cover; border-radius: 5px; }

.product .area-img span { position: absolute; top: 0; left: 0; background: black; color: white; padding: 2px 5px; border-top-left-radius: 5px; font-size: 10px; font-weight: 600; width: 20px; text-align: center; }

.product-info { flex: 1; padding-left: 12px; font-size: 12px; font-weight: 400; }

.product-info p { margin: 5px 0; color: #000; }

.product-info p.title-product { -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; word-wrap: break-word; display: -webkit-box; }

p.label-flash { font-size: 10px; background: #FAE9EC; width: fit-content; padding: 2px 5px; border-radius: 5px; }

p.label-flash::before { content: ''; background: url("https://cdn.detik.net.id/20detik3/images/flash-icon.svg?v=2025021315567") no-repeat; background-size: contain; width: 12px; height: 12px; display: inline-block; vertical-align: middle; }

.price { font-weight: bold; color: black; font-size: 16px; }

.old-price { text-decoration: line-through; color: gray; font-size: 10px; font-weight: 400; }

.buy-btn { background: #ED131B; color: white; border: none; padding: 4px 12px; cursor: pointer; border-radius: 5px; font-weight: 600; font-size: 12px; align-self: flex-start; margin-top: auto; margin-bottom: 14px; }

.buy-btn:hover { background: #BE0F16; color: #fff; }

.buy-btn.disabled { background: #E6E6E6; color: #fff; cursor: not-allowed; }

.store-name { background: #fff; font-family: Montserrat-FF, Arial, Tahoma, sans-serif; font-size: 14px; font-style: normal; font-weight: 600; display: flex; color: #000; padding: 10px 10px 5px; align-items: center; gap: 10px; }

.store-name .logo-store { border-radius: 100%; border: solid 2px #E6E6E6; overflow: hidden; }

.store-name .logo-store img { width: 32px; height: 32px; aspect-ratio: 1/1; object-fit: cover; }

.overflow-auto { overflow: auto; }