/*
 * Brand Upsell Section Styles
 * Design philosophy:
 * - Card-based layout with subtle shadows for visual hierarchy
 * - Mobile-first responsive design with breakpoints at 768px and 480px
 * - Flexbox for efficient product row layout (image, price, button)
 * - Minimalist white cards against varied backgrounds
 * - Consistent spacing and typography for readability
 */

/* Reset margins for consistent spacing */
.woocommerce div.product div.summary .upsell-section p,
.upsell-section p { margin: 0; }

/* Upsell Section */
.upsell-section {
    clear: both;
    margin: 0 auto;
    max-width: var(--global-content-narrow-width);
}
.upsell-title { font-size: 1.25rem; color: #333; margin: 0 0 1rem 0 !important; }

/* Product Cards */
.upsell-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
}

/* Product Title */
.upsell-product-title {
    font-size: 1rem;
    color: #333;
    margin: 0 0 0.75rem 0 !important;
    line-height: 1.3;
}
.upsell-product-title a { color: inherit; text-decoration: none; }
.upsell-product-title a:hover { color: #333; text-decoration: underline; }

/* Product Row (Image + Price + Button) */
.upsell-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

/* Product Image */
.upsell-image {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
}
.upsell-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* Product Price */
.upsell-price {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    flex: 1;
}

/* Add to Cart Button */
.upsell-add-to-cart {
    flex-shrink: 0;
    margin-left: auto;
}
.upsell-add-to-cart * { white-space: nowrap; }

/* Brand Section */
.brand-title {
    font-size: 1.125rem;
    color: #333;
    margin: 0 0 0.75rem 0;
}
.brand-section p:not(.brand-title) {
    color: #666;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.read-more {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}
.read-more:hover { text-decoration: underline; }

/* Tablet Responsive (768px and below)
 * Reduces font sizes and spacing for medium screens
 * Maintains readability while optimizing screen real estate
 */
@media (max-width: 768px) {
    .upsell-title { font-size: 1.125rem; margin-bottom: 0.875rem; }
    .upsell-card { margin-bottom: 0.875rem; }
    .upsell-row { gap: 0.75rem; flex-wrap: wrap; }
    .upsell-image { width: 4.375rem; height: 4.375rem; }
    .upsell-product-title { font-size: 0.875rem; margin-bottom: 0.625rem; }
    .upsell-price { font-size: 0.875rem; }
    .brand-title { font-size: 1rem; }
    .upsell-add-to-cart { width: 100%; margin-left: 0; margin-top: 0.5rem; }
}

/* Mobile Responsive (480px and below)
 * Further reduces sizes for small mobile devices
 * Ensures all content remains accessible and tappable on small screens
 */
@media (max-width: 480px) {
    .upsell-row { gap: 0.625rem; }
    .upsell-image { width: 3.75rem; height: 3.75rem; }
    .upsell-product-title { font-size: 0.8125rem; }
    .upsell-price { font-size: 0.8125rem; }
    .brand-title { font-size: 0.875rem; }
    .upsell-add-to-cart form { width: 100%; }
    .upsell-add-to-cart .form-add-to-cart-submit { width: 100% !important; margin: 0 !important; }
}