:root {
    --yellow-ml: #ffe600;
    --blue-ml: #3483fa;
    --orange-ml: #ff7733;
    --green-ml: #00a650;
    --gray-bg: #f5f5f5;
    --text-black: #333;
    --text-gray: #666;
    --nav-border: #e6e6e6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: white;
    padding-bottom: 70px;
    /* Space for bottom nav */
}

/* Header */
.ml-header {
    background-color: var(--yellow-ml);
    padding: 8px 12px;
}

.header-main-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.back-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #333;
    cursor: pointer;
}

.search-container {
    flex: 1;
    background: white;
    height: 36px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

.search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 15px;
    color: #333;
    background: transparent;
}

.search-input::placeholder {
    color: #999;
}

.cart-container {
    position: relative;
    padding: 0 5px;
    color: #333;
    font-size: 20px;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FF3333;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.location-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    font-size: 13px;
    color: #333;
    opacity: 0.9;
}

.location-row i {
    font-size: 14px;
    opacity: 0.6;
}

/* Content */
.product-container {
    padding: 16px;
}

.brand-link {
    display: block;
    color: var(--blue-ml);
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 12px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.condition {
    font-size: 12px;
    color: #999;
}

.rating-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-val {
    font-size: 14px;
    color: var(--blue-ml);
    font-weight: 400;
}

.stars {
    color: var(--blue-ml);
    font-size: 12px;
    display: flex;
    gap: 1px;
}

.rating-count {
    color: #999;
    font-size: 12px;
    margin-left: 2px;
}

.product-title {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 12px;
}

.bestseller-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.bestseller-tag {
    background: var(--orange-ml);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.category-rank {
    font-size: 13px;
    color: var(--blue-ml);
    text-decoration: none;
}

/* Gallery */
.gallery-section {
    position: relative;
    margin-bottom: 25px;
    text-align: center;
}

.image-counter {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    z-index: 10;
}

.floating-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-ml);
    font-size: 18px;
    cursor: pointer;
}

/* Carousel Container */
.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling iOS */
    scrollbar-width: none;
    /* hide scrollbar Firefox */
}

.carousel-container::-webkit-scrollbar {
    display: none;
    /* hide scrollbar Chrome/Safari */
}

.carousel-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 350px;
    /* Fixed height container */
    padding: 20px 0;
}

.carousel-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pagination-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: background 0.3s;
}

.dot.active {
    background: var(--blue-ml);
}

/* Voltage */
.voltage-section {
    margin-top: 20px;
    border-top: 1px solid #f0f0f0;
    /* Optional separator logic, but print doesn't clearly show it immediately above voltage, but usually there is one. */
    padding-top: 15px;
    border-top: none;
    /* Removing based on print */
}

.voltage-title {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    margin-bottom: 12px;
}

.voltage-title strong {
    font-weight: 600;
}

.voltage-options {
    display: flex;
    gap: 10px;
}

.v-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
    font-weight: 400;
    min-width: 80px;
    cursor: pointer;
}

.v-btn.selected {
    border-color: var(--blue-ml);
    color: var(--blue-ml);
    background-color: rgba(52, 131, 250, 0.05);
    /* Subtle blue tint */
}

/* Bottom Nav */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 11px;
    gap: 4px;
    flex: 1;
    height: 100%;
    position: relative;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
}

.nav-item.active {
    color: var(--blue-ml);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--blue-ml);
}

/* CEP Modal */
.cep-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 2000;
    display: none;
    flex-direction: column;
}

.cep-modal.active {
    display: flex;
}

.cep-header {
    background-color: var(--yellow-ml);
    padding: 12px 16px;
    height: 56px;
    display: flex;
    align-items: center;
}

.cep-back-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #333;
    padding: 5px;
    cursor: pointer;
}

.cep-content {
    padding: 24px 16px;
}

.cep-content h2 {
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin-bottom: 30px;
}

.cep-input-container {
    position: relative;
    margin-bottom: 25px;
}

.cep-label-floating {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

.cep-input {
    width: 100%;
    height: 48px;
    border: 1px solid #3483fa;
    /* Blue border as in print */
    border-radius: 6px;
    padding: 0 12px;
    font-size: 16px;
    outline: none;
    color: #999;
    /* Placeholder style text */
}

/* Simulate the double border/focus effect in print */
.cep-input:focus {
    box-shadow: 0 0 0 1px #3483fa;
}

.cep-confirm-btn {
    width: 100%;
    height: 48px;
    background-color: var(--blue-ml);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 25px;
    cursor: pointer;
}

.cep-help-link {
    display: block;
    text-align: center;
    color: var(--blue-ml);
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
}

/* Address Form ML Style */
.input-group {
    position: relative;
    margin-bottom: 20px;
    padding-top: 10px;
    /* Space for label to float up */
}

.ml-input {
    width: 100%;
    height: 48px;
    border: 1px solid #ccc;
    /* Default border */
    border-radius: 6px;
    padding: 0 12px;
    font-size: 16px;
    outline: none;
    background: transparent;
    color: #333;
    transition: all 0.2s;
}

.ml-input:focus {
    border-color: #3483fa;
    box-shadow: 0 0 0 1px #3483fa;
}

.floating-label {
    position: absolute;
    top: 22px;
    /* Center in input */
    left: 12px;
    font-size: 16px;
    color: #999;
    background: white;
    padding: 0 4px;
    transition: all 0.2s;
    pointer-events: none;
}

/* Float label when focused or has value */
.ml-input:focus~.floating-label,
.ml-input:not(:placeholder-shown)~.floating-label,
.ml-input:read-only~.floating-label {
    /* Also float for readonly (pre-filled data) */
    top: 2px;
    left: 10px;
    font-size: 12px;
    color: #3483fa;
}

.ml-input:read-only {
    background-color: #f9f9f9;
    color: #666;
    border-color: #e0e0e0;
}

.ml-input:read-only~.floating-label {
    color: #666;
}

.row-inputs {
    display: flex;
    gap: 12px;
}

.input-group.half {
    flex: 1;
}

/* Price & Shipping Section */
.price-shipping-section {
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
}

.old-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 4px;
}

.current-price-container {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 4px;
    line-height: 1;
}

.currency {
    font-size: 24px;
    font-weight: 500;
    /* Medium bold */
    color: #333;
    margin-top: 6px;
}

.price-value {
    font-size: 36px;
    font-weight: 600;
    /* Bold */
    color: #333;
}

.price-cents {
    font-size: 18px;
    font-weight: 500;
    /* Medium bold */
    color: #333;
    margin-top: 6px;
}

.discount-pill {
    font-size: 14px;
    color: #00a650;
    font-weight: 600;
    margin-left: 8px;
    margin-top: 8px;
}

.installments-text {
    font-size: 16px;
    color: #00a650;
    margin-bottom: 4px;
}

.installments-text span {
    font-weight: 400;
}

.blue-link {
    color: var(--blue-ml);
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
}

.blue-link.small {
    font-size: 14px;
    margin-bottom: 16px;
    display: block;
}

/* Meli+ */
.meli-promo {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

.meli-promo strong {
    color: #00a650;
    font-weight: 600;
}

.meli-badge {
    background: #8e24aa;
    color: white;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

/* Shipping */
.shipping-info,
.pickup-info {
    margin-top: 20px;
}

.shipping-arrival,
.pickup-info p {
    font-size: 16px;
    color: #00a650;
    /* Green for "Chegará" */
    margin-bottom: 4px;
}

.pickup-info p {
    color: #333;
    /* Standard color for pickup */
}

.shipping-arrival strong {
    font-weight: 700;
}

/* Full */
.stock-info {
    margin-top: 24px;
    margin-bottom: 24px;
}

.stock-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.full-delivery {
    font-size: 14px;
    color: #666;
}

.full-delivery i {
    color: #00a650;
    margin-right: 2px;
}

.full-delivery strong {
    color: #00a650;
    font-style: italic;
    font-weight: 900;
}

/* Quantity */
.clean-quantity-selector {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.clean-quantity-selector .faded {
    color: #999;
    font-size: 14px;
}

/* Action Buttons */
.action-btn {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    margin-bottom: 12px;
}

.buy-now {
    background-color: var(--blue-ml);
    /* #3483fa */
    color: white;
}

.add-cart {
    background-color: rgba(65, 137, 230, .15);
    color: var(--blue-ml);
}

/* Seller Info */
.seller-info-card {
    margin-top: 24px;
    border: 1px solid #f0f0f0;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
}

.seller-header-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* Space between logo and text */
    margin-bottom: 24px;
}

.seller-logo-box {
    width: 48px;
    height: 48px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    /* Slightly rounded square */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* ML Logo Image */
.ml-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Adjustments for text */
.seller-info-col {
    flex: 1;
    padding-top: 2px;
}

/* Verified Badge - Blue */
.verified-badge-blue {
    color: #3483fa;
    font-size: 16px;
    margin-left: 4px;
}

.seller-name {
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.2;
}

.seller-name .blue-link {
    font-weight: 400;
    display: inline;
}

.seller-stats {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    /* Bold for stats */
    margin: 0;
}

/* Benefits List */
.seller-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.benefit-icon {
    width: 20px;
    text-align: center;
    color: #999;
    /* Light gray for icons */
    font-size: 18px;
    margin-top: 0px;
}

.benefit-text {
    font-size: 14px;
    color: #666;
    /* Gray text */
    line-height: 1.35;
    flex: 1;
    margin: 0;
}

.benefit-text .blue-link {
    display: inline;
    margin: 0;
}

/* Store Profile Section */
.store-profile-section {
    margin-top: 24px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* Banner */
.store-banner {
    position: relative;
    height: 160px;
    background: #f5f5f5;
    overflow: hidden;
    background-size: auto 100% !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
}

.banner-pattern {
    width: 100%;
    height: 100%;
    /* Removed - now using inline background-image */
}

/* Store Banner Pattern - Product Theme */
.store-banner-pattern {
    background:
        linear-gradient(135deg, transparent 25%, rgba(23, 162, 184, 0.1) 25%, rgba(23, 162, 184, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 193, 7, 0.1) 75%, rgba(255, 193, 7, 0.1)),
        linear-gradient(45deg, transparent 25%, rgba(13, 110, 253, 0.08) 25%, rgba(13, 110, 253, 0.08) 50%, transparent 50%, transparent 75%, rgba(32, 201, 151, 0.08) 75%, rgba(32, 201, 151, 0.08));
    background-color: #f8fcff;
    background-size: 60px 60px, 40px 40px;
    background-position: 0 0, 30px 30px;
}

/* Banner with uploaded image */
.banner-with-image {
    background-image: url('banner.png') !important;
    background-size: auto 100% !important;
    background-repeat: repeat-x !important;
    background-position: left center !important;
}

.store-logo-large {
    position: absolute;
    bottom: -40px;
    left: 20px;
    width: 100px;
    height: 100px;
    background: white;
    border: 4px solid white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
}

.store-logo-img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}

/* Store Info Content */
.store-info-content {
    padding: 50px 20px 24px 20px;
}

.store-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    gap: 12px;
}

.store-title-col {
    flex: 1;
    min-width: 0;
}

.store-title {
    font-size: 28px;
    font-weight: 400;
    color: #333;
    margin: 0 0 6px 0;
}

.store-subtitle {
    font-size: 15px;
    color: #999;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.store-subtitle .verified-badge-blue {
    display: inline-block;
    vertical-align: middle;
}

/* Follow Button */
.follow-btn {
    background: #e3f2fd;
    color: #3483fa;
    border: none;
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

.follow-btn:hover {
    background: #bbdefb;
}

.follow-btn.following {
    background: #f5f5f5;
    color: #666;
}

/* Stats Row */
.store-stats-row {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

/* MercadoLíder Badge */
.ml-platinum-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.badge-icon-green {
    color: #00a650;
    font-size: 24px;
}

.badge-text-col {
    flex: 1;
}

.badge-title {
    font-size: 16px;
    font-weight: 600;
    color: #00a650;
    margin: 0 0 2px 0;
}

.badge-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Reputation Bars */
.reputation-bars {
    margin-bottom: 20px;
}

.rep-bar {
    height: 8px;
    border-radius: 4px;
    width: 100%;
}

/* Performance Metrics */
.performance-metrics {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    margin-top: 24px;
}

.metric-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.metric-icon-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.metric-icon {
    font-size: 32px;
    color: #333;
}

.metric-check-overlay {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 16px;
    color: #00a650;
    background: white;
    border-radius: 50%;
    padding: 2px;
}

.metric-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1;
}

.metric-label {
    font-size: 13px;
    color: #999;
    margin: 0;
    line-height: 1.2;
}

/* Product Details Tabs */
.product-details-tabs {
    margin-top: 24px;
    background: #fff;
}

.details-header-row {
    padding: 16px 0;
}

.details-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.tabs-header {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    position: relative;
}

.tab-btn.active {
    color: #3483fa;
    /* Blue ML */
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    /* Overlap border */
    left: 0;
    width: 100%;
    height: 3px;
    background: #3483fa;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
    padding-bottom: 20px;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Description Content */
.description-section h3 {
    font-size: 16px;
    color: #333;
    margin: 20px 0 8px 0;
    text-transform: uppercase;
    font-weight: 600;
}

.description-section h3:first-child {
    margin-top: 0;
}

.description-section p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 16px;
}

.brand-tagline p {
    font-weight: bold;
    color: #333;
    margin-top: 24px;
}

.legal-notice {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.legal-notice h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    font-weight: 600;
}

/* Characteristics Content */
.characteristics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.char-item {
    display: flex;
    align-items: baseline;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

.char-item::before {
    content: '•';
    color: #ccc;
    margin-right: 8px;
    font-size: 18px;
}

.char-label {
    color: #333;
    margin-right: 4px;
}

.char-value {
    color: #333;
}

/* Feature Image in Description */
.feature-image-container {
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.responsive-feature-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Reviews Detailed Section */
.reviews-section {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.reviews-title {
    font-size: 20px;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
}

.rating-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.big-score {
    font-size: 48px;
    font-weight: 300;
    color: #3483fa;
    line-height: 1;
}

.stars-total-col {
    display: flex;
    flex-direction: column;
}

.stars.big {
    font-size: 18px;
    color: #3483fa;
}

.total-reviews-text {
    font-size: 13px;
    color: #999;
}

/* Bars */
.rating-bars {
    margin-bottom: 30px;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    color: #999;
}

.tiny-star {
    font-size: 10px;
    color: #ddd;
}

.progress-bg {
    flex: 1;
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
    max-width: 200px;
    /* Limit width */
}

.progress-fill {
    height: 100%;
    background: #333;
    /* Dark gray bars as in ML */
    border-radius: 2px;
}

/* Characteristics */
.char-ratings {
    margin-bottom: 30px;
}

.char-ratings h3 {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 16px;
}

.char-rating-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.char-rating-row span {
    font-size: 14px;
    color: #333;
}

.stars.small-blue {
    font-size: 12px;
    color: #3483fa;
}

/* Reviews with Photos Gallery */
.reviews-with-photos-section {
    margin-bottom: 30px;
}

.reviews-with-photos-section h3 {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 12px;
}

.photos-gallery-scroller {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.review-gallery-thumb {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f5;
}

/* Individual Review Styles */
.reviews-list {
    margin-top: 10px;
}

.review-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 24px 0;
}

.review-item:last-child {
    border-bottom: none;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.review-date {
    font-size: 12px;
    color: #999;
}

.review-photos-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.user-review-photo {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    background: #f5f5f5;
    cursor: pointer;
}

.review-content p {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 16px;
}

.review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.helpful-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.menu-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 80px;
    /* Above bottom nav */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    font-size: 14px;
    font-weight: 500;
    min-width: 250px;
    text-align: center;
}

.toast-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.toast-icon {
    color: #ff7733;
    /* Orange warning */
    font-size: 16px;
}

.toast-message {
    color: #fff;
}

/* =========================================================================
   RESPONSIVE (DESKTOP / TABLET TWEAKS)
   ========================================================================= */

@media (min-width: 768px) {

    /* Center the main content on larger screens */
    body {
        background-color: #eee;
        /* Light gray background for desktop */
    }

    .ml-header {
        display: flex;
        justify-content: center;
        background-color: var(--yellow-ml);
    }

    .header-main-row,
    .location-row {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Wrap the product container in a white card effect */
    .product-container {
        max-width: 1000px;
        /* Reduced specific product width */
        margin: 20px auto 80px auto;
        /* Center with margin, space for bottom nav */
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 30px;
    }

    /* Enhance grid layout for Desktop (Product Info + Gallery) */
    /* Note: To fully switch to ML's split desktop layout (Gallery left, Info right) would require significant HTML restructuring.
       For now, we optimize the current stacking to look good centered. */

    .gallery-section {
        max-width: 500px;
        margin: 0 auto 30px auto;
        /* Center gallery images */
    }

    .carousel-item {
        height: 450px;
        /* Larger images on desktop */
    }

    /* Adjust bottom nav or hide it? 
       Usually mobile apps have bottom nav, desktop has header links. 
       Let's keep it but ensure it doesn't look weirdly stretched. */
    .bottom-nav {
        justify-content: center;
        gap: 40px;
    }

    .nav-item {
        flex: 0 1 80px;
    }

    /* Adjust modal centering */
    .cep-modal {
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        /* Dimmed background */
    }

    .cep-content {
        background: white;
        width: 400px;
        max-width: 90%;
        border-radius: 8px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .cep-header {
        display: none;
        /* Hide mobile header in "modal" mode on desktop, or adjust styles */
    }

    /* Re-add a close button for desktop modal if we hide header? 
       Actually let's keep the header but round top corners */
    .cep-header {
        display: flex;
        width: 400px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
}