/* Base Styles - Foundation styles and resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Amazon Ember", Arial, sans-serif;
    background-color: #ffffff;
    color: #0f1111;
    font-size: 14px;
    line-height: 20px;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
    width: 100%;
}

/* Ensure no element can cause horizontal overflow */
* {
    max-width: 100%;
}

/* Additional overflow prevention */
body, html {
    width: 100%;
    overflow-x: hidden !important;
}

/* Prevent specific elements from causing overflow */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Ensure containers don't overflow */
.container, .nav-container, .sub-nav-container, .breadcrumb-container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent text from causing overflow */
pre, code {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Amazon Color Variables */
:root {
    --amazon-dark-blue: #131921;
    --amazon-light-blue: #232f3e;
    --amazon-orange: #ff9900;
    --amazon-orange-hover: #e47911;
    --amazon-link-blue: #007185;
    --amazon-link-hover: #c7511f;
    --amazon-text-primary: #0f1111;
    --amazon-text-secondary: #565959;
    --amazon-border-light: #d5d9d9;
    --amazon-border-medium: #e7e7e7;
    --amazon-background-light: #f7f8f8;
    --amazon-success-green: #007600;
    --amazon-price-red: #b12704;
    --amazon-rating-orange: #ffa41c;
    --amazon-savings-red: #cc0c39;
}

/* Typography */
.text-primary {
    color: var(--amazon-text-primary);
}

.text-secondary {
    color: var(--amazon-text-secondary);
}

.text-link {
    color: var(--amazon-link-blue);
    text-decoration: none;
}

.text-link:hover {
    color: var(--amazon-link-hover);
    text-decoration: underline;
}

/* Container */
.container {
    max-width: 1464px;
    margin: 0 auto;
    padding: 0 14px;
}

/* Mobile-first responsive breakpoints */
@media (max-width: 320px) {
    .container {
        padding: 0 8px;
    }
    
    body {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 12px;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets for mobile */
    button, a, input, select {
        min-height: 44px;
    }
    
    /* Improve button spacing */
    button + button {
        margin-top: 8px;
    }
    
    /* Better tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* Prevent zoom on input focus for iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Smooth scrolling for mobile */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
    
    /* Improve scroll performance */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile-specific utility classes */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-visible {
        display: block !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
}