/* site/css/style.css */

/* Reset básico e estilos globais */
:root {
    --primary-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* */ /* */
    --secondary-font: 'Georgia', serif; /* */ /* */
    --text-color: #1d1d1d; /* */ /* */
    --background-color: #e1e1e1; /* */ /* */
    --card-background-color: #ffffff; /* */ /* */
    --header-bg: #ffffff; /* Base header background, can be overridden by theme */ /* */ /* */
    --border-color: #ababab; /* */ /* */
    --link-color: #030404; /* */ /* */
    --link-hover-color: #0056b3; /* */ /* */
    --button-primary-bg: #007bff; /* Default button color, can be overridden by theme */ /* */ /* */
    --button-primary-text: #fff; /* */ /* */
    --price-color: #03ff3d; /* Default price color */ /* */ /* */
    --old-price-color: #6c757d; /* */ /* */
    --discount-badge-bg: #dc3545; /* */ /* */
    --discount-badge-text: #fff; /* */ /* */

    --container-max-width: 1200px; /* */ /* */
    --header-height: 70px; /* Default height for desktop */ /* */ /* */
    --header-height_mobile: 120px; /* User-defined mobile header height */ /* */ /* */
}

* {
    box-sizing: border-box; /* */ /* */
    margin: 0; /* */ /* */
    padding: 0; /* */ /* */
}

body {
    font-family: var(--primary-font); /* */ /* */
    line-height: 1.6; /* */ /* */
    color: var(--text-color); /* */ /* */
    background-color: var(--background-color); /* */ /* */
    display: flex; /* */ /* */
    flex-direction: column; /* */ /* */
    min-height: 100vh; /* */ /* */
}

.container {
    width: 90%; /* */ /* */
    max-width: var(--container-max-width); /* */ /* */
    margin: 0 auto; /* */ /* */
    padding: 0 15px; /* Default horizontal padding */ /* */ /* */
}

/* Header */
header {
    background-color: var(--header-bg); /* theme default.css sets this to #000 */ /* */ /* */
    padding: 0.5rem 0; /* */ /* */
    border-bottom: 1px solid var(--border-color); /* */ /* */
    position: sticky; /* */ /* */
    top: 0; /* */ /* */
    z-index: 1000; /* */ /* */
    height: var(--header-height); /* Desktop header height */ /* */ /* */
}

.header-content {
    display: flex; /* */ /* */
    align-items: center; /* */ /* */
    height: 100%; /* */ /* */
    width: 100%; 
    /* justify-content for desktop will be flex-start, search is pushed by margin-left: auto */
    /* For mobile, we will manage spacing more directly */
}

header .logo { /* This is the <a> tag wrapping the logo image */
    max-height: calc(var(--header-height) - 20px); /* For Desktop */ /* */ /* */
    display: flex;  /* */
    align-items: center; /* */
    justify-content: flex-start; /* Default for desktop: logo content aligns left in its container */
    width: auto; /* */ /* */
    flex-shrink: 0;  /* */
    margin-right: 15px;  /* Desktop: Space after logo */ /* */
    text-decoration: none;  /* */
}
header .logo img { /* Actual <img> tag */
    max-height: 100%;  /* */
    width: auto; /* */
}

.search-container {
    display: flex; /* */ /* */
    /* flex-grow: 0.5; /* Desktop: Allows it to take some space */ /* */
    margin-left: auto; /* Desktop: Pushes search container to the far right */ /* */
    flex-shrink: 0; /* Ensure search doesn't get overly squished on desktop if logo area is large */
}
#search-bar {
    padding: 0.75rem; /* */ /* */
    border: 1px solid var(--border-color); /* */ /* */
    border-radius: 4px 0 0 4px; /* */ /* */
    flex-grow: 1; /* */ /* */
}
#search-button {
    padding: 0.75rem 1rem; /* */ /* */
    border: 1px solid var(--button-primary-bg); /* */ /* */
    background-color: var(--button-primary-bg); /* */ /* */
    color: var(--button-primary-text); /* */ /* */
    border-radius: 0 4px 4px 0; /* */ /* */
    cursor: pointer; /* */ /* */
    transition: background-color 0.2s; /* */ /* */
}
#search-button:hover {
    background-color: var(--link-hover-color); /* */ /* */
    border-color: var(--link-hover-color); /* */ /* */
}

nav.main-nav { /* Hides any old traditional nav if hamburger is primary now */
    display: none; /* */ /* */
}

/* Hamburger Menu Styles (Global) */
#hamburger-container { 
    display: block; 
    order: -1; /* Ensures it's visually first in flex layout */ 
    margin-right: 10px; /* Space between hamburger and logo */ 
    flex-shrink: 0; /* Prevent hamburger from shrinking */
}
#hamburger-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 10px; 
    display: inline-block; 
    z-index: 1002; 
}
#hamburger-btn span { 
    display: block; 
    width: 25px; 
    height: 3px; 
    background-color: #ffffff; /* White icon lines */ 
    margin: 5px 0; 
    transition: all 0.3s ease-in-out; 
}
#hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* Main Content ... (Keep existing styles) */
main { padding: 2rem 0; flex-grow: 1; } /* */
#hero-banner img { border-radius: 8px; margin-bottom: 2rem; } /* */
h1, h2, h3 { margin-bottom: 1rem; color: var(--text-color); } /* */
h1 { font-size: 2.2rem; } /* */
h2 { font-size: 1.8rem; margin-top: 1.5rem; } /* */
h3 { font-size: 1.3rem; } /* */

/* Product Grid & Cards - DESKTOP first styling ... (Keep existing styles) */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; } /* */
.product-card { background: var(--card-background-color); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease; display: flex; flex-direction: column; } /* */
.product-card:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.1); } /* */
.product-card .product-image-link-mobile { display: block; text-decoration: none; color: inherit; position: relative; } /* */
.product-card .product-image-container { position: relative; width: 100%; padding-top: 100%; overflow: hidden; } /* */
.product-card .product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } /* */
.product-card:hover .product-image { transform: scale(1.05); } /* */
.product-card .discount-badge { position: absolute; top: 10px; right: 10px; background-color: var(--discount-badge-bg); color: var(--discount-badge-text); padding: 4px 8px; font-size: 0.75rem; font-weight: bold; border-radius: 4px; z-index: 1; } /* */
.product-card .product-details-column-mobile { display: flex; flex-direction: column; flex-grow: 1; padding: 15px; } /* */
.product-card .product-details-column-mobile .product-info { display: flex; flex-direction: column; flex-grow: 1; } /* */
.product-card .product-details-column-mobile .product-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; min-height: 2.6em; } /* */
.product-card .product-details-column-mobile .product-title a { color: var(--text-color); text-decoration: none; } /* */
.product-card .product-details-column-mobile .product-title a:hover { text-decoration: underline; color: var(--link-hover-color); } /* */
.product-card .product-details-column-mobile .product-old-price { text-decoration: line-through; color: var(--old-price-color); font-size: 0.85rem; margin-bottom: 0.25rem; } /* */
.product-card .product-details-column-mobile .product-price { font-size: 1.25rem; font-weight: bold; color: var(--price-color); margin-bottom: 0.5rem; } /* */
.product-card .product-details-column-mobile .product-store { font-size: 0.8rem; color: #777; margin-top: auto; padding-top: 0.5rem; } /* */
.product-card .product-details-column-mobile .product-action-button { display: block; background-color: var(--button-primary-bg); color: var(--button-primary-text); text-align: center; padding: 10px 15px; text-decoration: none; border-radius: 4px; font-weight: 600; transition: background-color 0.2s ease; margin-top: auto; padding-top: 10px; } /* */
.product-card .product-details-column-mobile .product-action-button:hover { background-color: var(--link-hover-color); } /* */

/* Product Detail Page ... (Keep existing styles) */
#breadcrumb-container { margin-bottom: 1.5rem; font-size: 0.9rem; color: #6c757d; } /* */
#breadcrumb-container a { color: var(--link-color); text-decoration: none; } /* */
#breadcrumb-container a:hover { text-decoration: underline; } /* */
#product-detail-container { background: var(--card-background-color); padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 2rem; } /* */
.product-main-info { display: flex; gap: 30px; margin-bottom: 2rem; } /* */
.product-gallery { flex: 1 1 40%; max-width: 400px; } /* */
.product-image-large { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border-color); } /* */
.product-summary { flex: 1 1 60%; } /* */
.product-summary .old-price { font-size: 1.1rem; color: var(--old-price-color); text-decoration: line-through; } /* */
.product-summary .current-price { font-size: 2rem; font-weight: bold; color: var(--price-color); margin-bottom: 1rem; } /* */
.product-summary .product-store { font-size: 0.9rem; margin-bottom: 1.5rem; } /* */
.button-primary { display: inline-block; padding: 12px 25px; background-color: var(--button-primary-bg); color: var(--button-primary-text); text-decoration: none; border-radius: 5px; font-size: 1.1rem; font-weight: 600; text-align: center; transition: background-color 0.2s ease; border: none; cursor: pointer; } /* */
.button-primary:hover { background-color: var(--link-hover-color); } /* */
.share-buttons { margin-top: 1.5rem; } /* */
.share-buttons button { padding: 8px 12px; margin-right: 10px; border: 1px solid var(--border-color); background-color: #f0f0f0; border-radius: 4px; cursor: pointer; } /* */
#product-description-section h2 { border-bottom: 2px solid var(--button-primary-bg); padding-bottom: 0.5rem; display: inline-block; } /* */
#product-description p { margin-bottom: 1rem; line-height: 1.7; } /* */
#related-offers-section {
    margin-bottom: 2rem; /* Ou 30px, 2.5rem, etc. Escolha o valor que achar melhor */
}

/* Footer ... (Keep existing styles) */
footer { background: #343a40; color: #f8f9fa; text-align: center; padding: 2rem 0; margin-top: auto; } /* */
footer ul { list-style: none; padding: 0; margin-top: 0.5rem; } /* */
footer ul li { display: inline; margin: 0 10px; } /* */
footer ul li a { color: #f8f9fa; text-decoration: none; } /* */
footer ul li a:hover { text-decoration: underline; } /* */

/* Pagination ... (Keep existing styles) */
.pagination-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 10px; margin-bottom: 10px; padding: 15px 0; border-top: 1px solid var(--border-color, #eee); } /* */
.pagination-button { background-color: var(--card-background-color, #fff); border: 1px solid var(--border-color, #ddd); color: var(--link-color, #007bff); padding: 10px 20px; margin: 0 5px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s, color 0.2s, border-color 0.2s; font-size: 1rem; font-weight: 500; } /* */
.pagination-button:hover:not(:disabled) { background-color: var(--link-color, #007bff); color: var(--button-primary-text, #fff); border-color: var(--link-color, #007bff); } /* */
.pagination-button:disabled { color: #aaa; cursor: not-allowed; background-color: #f0f0f0; border-color: #e0e0e0; } /* */
.page-indicator { font-size: 1rem; color: var(--text-color, #333); font-weight: 500; padding: 0 10px; margin: 0 5px; } /* */

/* Responsive adjustments */
@media (max-width: 992px) { /* Larger tablets */
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* */
    .product-main-info { flex-direction: column; } /* Product Detail Page */ /* */
    .product-gallery, .product-summary { max-width: 100%; } /* Product Detail Page */ /* */
}

@media (max-width: 768px) { /* Tablets and smaller mobiles */
    .container {
        padding: 0 10px; /* Reduced horizontal padding */ /* */
    }
    header {
        height: var(--header-height_mobile); /* */
        padding: 0.2rem 0; /* */ /* */
    }
    .header-content {
        /* MODIFIED for robust logo centering */
        justify-content: flex-start; /* Remove space-between, direct flex control */
    }
    #hamburger-container {
        flex: 0 0 auto; /* Hamburger takes its content width */
        /* order: -1; is global */
        /* margin-right: 10px; is global */
    }
    header .logo {
        max-height: 50px; /* Reduced logo size */ /* */
        /* MODIFIED for robust centering: */
        flex: 1 1 auto; /* Logo link takes all available middle space and can shrink/grow */
        justify-content: center; /* Centers the <img> within the expanded <a> tag */
        margin-left: 0; 
        margin-right: 0; 
        /* overflow: hidden; /* Prevents logo from pushing others if image is too wide */
    }
    .search-container {
        flex: 0 0 auto; /* Search takes its content width */
        margin-left: 10px; /* Space from logo area, adjust if needed */
        /* flex-grow: 0; /* Ensure it does not grow */
        /* flex-shrink: 0; /* Ensure it does not shrink excessively */
    }
    
    #search-bar { font-size: 0.9rem; } /* */
    #search-button { padding-left: 0.8rem; padding-right: 0.8rem; font-size: 0.9rem; } /* */
    h1 { font-size: 1.8rem; } /* */
    h2 { font-size: 1.5rem; } /* */
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; } /* */
    .product-card .product-details-column-mobile .product-title { font-size: 0.9rem; min-height: 2.4em; } /* */
    .product-card .product-details-column-mobile .product-price { font-size: 1.1rem; } /* */
    .pagination-container { padding: 10px 0; } /* */
    .pagination-button { padding: 8px 15px; font-size: 0.9rem; } /* */
    .page-indicator { font-size: 0.9rem; } /* */
}

@media (max-width: 480px) { /* Very Small Mobile Screens */
    .container {
        padding: 0 8px; /* Further reduced horizontal padding */ /* */
    }
    header {
        height: var(--header-height_mobile); /* Ensure mobile header height is used */ /* */
    }
    .header-content {
        flex-wrap: wrap; /* Allow header items to wrap */ /* */
        justify-content: flex-start; /* Align first line items to start */
    }
    /* Hamburger is already order: -1, display: block */
    header .logo {
        max-height: 45px; /* Further reduced logo size */ /* */
        flex: 1 1 auto; /* Logo link takes available space on the first line */
        justify-content: center; /* Centers the <img> in that space */
        margin-left: 5px;  /* Minimal space from hamburger */ /* */
        margin-right: 5px; /* Minimal space from potential right edge (if search not there) */ /* */
        min-width: 0; /* Allow logo to shrink if necessary if space is extremely tight with hamburger */
    }
    .search-container {
        width: 100%; /* Make search take full width when it wraps */ /* */
        margin-left: 0; /* Reset margin */ /* */
        margin-top: 8px; /* Add space if it wraps below hamburger/logo */ /* */
        order: 1; /* Ensure it wraps below hamburger and logo */ /* */
        flex-grow: 0; /* It should not grow when wrapped */
        flex-shrink: 1; /* Allow it to shrink if needed, though width 100% is dominant */
    }

    #search-bar { font-size: 0.85rem; padding-top: 0.7rem; padding-bottom: 0.7rem; } /* */
    #search-button { font-size: 0.85rem; padding-left: 0.6rem; padding-right: 0.6rem; padding-top: 0.7rem; padding-bottom: 0.7rem; } /* */

    /* MOBILE PRODUCT CARD SPECIFIC STYLES */
    .product-grid { grid-template-columns: 1fr; gap: 15px; } /* */
    .product-card { flex-direction: row; align-items: flex-start; padding: 10px; gap: 10px; } /* */
    .product-card:hover .product-image { transform: none; } /* */
    .product-card .product-image-link-mobile { flex: 0 0 35%; display: block; text-decoration: none; position: relative; } /* */
    .product-card .product-image-container { border-radius: 4px; } /* */
    .product-card .discount-badge { top: 5px; right: 5px; font-size: 0.65rem; padding: 2px 4px; } /* */
    .product-card .product-details-column-mobile { flex: 1; display: flex; flex-direction: column; padding: 0; /* justify-content: space-between; */ } /* */
    .product-card .product-details-column-mobile .product-info { padding: 0; flex-grow: 1; display: flex; flex-direction: column; } /* */
    .product-card .product-details-column-mobile .product-title { font-size: 0.8rem; line-height: 1.3; margin-bottom: 4px; min-height: auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* */
    .product-card .product-details-column-mobile .product-title a { color: var(--text-color); text-decoration: none; } /* */
    .product-card .product-details-column-mobile .product-title a:hover { text-decoration: underline; color: var(--link-hover-color); } /* */
    .product-card .product-details-column-mobile .product-old-price { font-size: 0.7rem; margin-bottom: 2px; } /* */
    .product-card .product-details-column-mobile .product-price { font-size: 0.95rem; margin-bottom: 4px; } /* */
    .product-card .product-details-column-mobile .product-store { font-size: 0.7rem; margin-bottom: 6px; margin-top: auto; padding-top: 4px; } /* */
    .product-card .product-details-column-mobile .product-action-button { width: 100%; padding: 6px 8px; font-size: 0.75rem; margin-top: auto; padding-top: 6px; } /* */
    
    .pagination-container { flex-direction: column; } /* */
    .pagination-button { width: 80%; margin: 5px 0; text-align: center; } /* */
    .page-indicator { margin: 10px 0; } /* */
}


/* Store Grid & Cards */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; padding: 20px 0; padding-bottom: 20px; } /* */
.store-card { background: var(--card-background-color); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease, transform 0.2s ease; display: flex; flex-direction: column; align-items: center; padding: 20px 15px; text-align: center; } /* */
.store-card:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.1); transform: translateY(-3px); } /* */
.store-card-image-link { display: inline-block; cursor: pointer; margin-bottom: 15px; width: 100%; } /* */
.store-card img { max-width: 100%; height: 80px; object-fit: contain; display: block; margin-left: auto; margin-right: auto; } /* */
.store-card .store-name { font-size: 1rem; font-weight: 600; color: var(--text-color); line-height: 1.3; margin-top: auto; } /* */

@media (max-width: 600px) {
    .store-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } /* */
    .store-card img { height: 70px; } /* */
}
@media (max-width: 480px) {
    .store-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } /* */
    .store-card img { height: 60px; } /* */
}


/* Side Navigation Panel */
.side-nav {
    position: fixed; top: 0; left: -280px; width: 280px; max-width: 80%; height: 100%; /* */
    background-color: var(--header-bg, #fff); box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* */
    padding-top: var(--header-height); /* Default for desktop */ /* */
    transition: left 0.3s ease-in-out; z-index: 1001; overflow-y: auto;  /* */
}
@media (max-width: 768px) { 
    .side-nav {
        padding-top: var(--header-height_mobile); /* Use mobile header height for padding */ /* */
    }
}

.side-nav[aria-hidden="false"] { left: 0; } /* */
.side-nav ul { list-style: none; padding: 0; margin: 0; } /* */
.side-nav ul li a { display: block; padding: 15px 20px; text-decoration: none; color: var(--link-color); border-bottom: 1px solid var(--border-color, #eee); transition: background-color 0.2s; font-size: 0.9rem; } /* */
.side-nav ul li a:hover { background-color: rgba(0,0,0,0.05); color: var(--link-hover-color); } /* */
body.nav-open { overflow: hidden; } /* */