:root { --bg-color: #ffffff; --text-color: #4d4d4d; --gridline-color: #000000; --accent-color: #a6a6a6; --font-body: 'Roboto', sans-serif; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background-color: var(--bg-color); color: var(--text-color); font-size: 15px; line-height: 1.2; overflow-x: hidden; scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
a:hover { color: var(--accent-color); }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

/* Announcement Bar & Header */
.announcement-bar { background: #000; color: #fff; text-align: center; padding: 12px 20px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--gridline-color); }
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: 25px 40px; }
.header-left, .header-right { flex: 1; }
.header-center { flex: 1; display: flex; justify-content: center; }
.header-right { display: flex; justify-content: flex-end; }
.desktop-nav { display: flex; gap: 20px; }
.desktop-nav a { font-size: 15px; text-transform: capitalize; transition: 0.2s; }
.desktop-nav a.active { text-decoration: underline; text-underline-offset: 4px; font-weight: bold; color: #000; }
.hidden-desktop { display: none; }
.nav-btn { display: flex; align-items: center; gap: 8px; font-size: 15px; }

/* Collection Bar & Grid */
.collection-filter-bar { padding: 15px 40px; border-bottom: 1px solid var(--gridline-color); display: flex; justify-content: space-between; font-size: 14px; text-transform: capitalize; }
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background-color: var(--gridline-color); border-bottom: 1px solid var(--gridline-color); list-style: none; }
@media (min-width: 1024px) { .collection-grid { grid-template-columns: repeat(4, 1fr); } }

/* Product Card */
.product-card { background: var(--bg-color); display: flex; flex-direction: column; position: relative; cursor: pointer; }
.product-image-wrapper { position: relative; padding-top: 125%; overflow: hidden; background: #f4f4f4; }
.product-image-wrapper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-image-wrapper img { transform: scale(1.04); }
.add-to-cart-hover { position: absolute; bottom: 0; width: 100%; background: #000; color: #fff; text-align: center; padding: 15px; font-size: 12px; font-weight: 700; transform: translateY(100%); transition: 0.3s ease; z-index: 10; }
.product-card:hover .add-to-cart-hover { transform: translateY(0); }
.product-info { padding: 20px; text-align: left; display: flex; justify-content: space-between; align-items: flex-start; }
.product-title { font-size: 14px; width: 70%; line-height: 1.4; pointer-events: none; color:#000; }
.product-price { font-size: 14px; font-weight: bold; text-align: right; width: 30%; pointer-events: none; color:#000;}

/* PDP MODAL */
.pdp-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -45%); width: 1000px; max-width: 95%; height: 80vh; background: #fff; z-index: 2000; opacity: 0; visibility: hidden; transition: 0.4s ease; display: flex; border: 1px solid #000; }
.pdp-modal.active { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }
.close-pdp { position: absolute; top: 20px; right: 20px; z-index: 10; background: #fff; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-weight:bold; }
.pdp-content { display: flex; width: 100%; height: 100%; }
.pdp-image { flex: 1.2; background: #f4f4f4; height: 100%; border-right: 1px solid #000; }
.pdp-image img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.pdp-info h2 { font-size: 28px; font-weight: 900; margin-bottom: 10px; line-height: 1.1; text-transform: uppercase; color:#000;}
.pdp-price { font-size: 20px; margin-bottom: 30px; font-weight:bold; color:#000;}
.pdp-desc { font-size: 14px; color: #555; margin-bottom: 30px; line-height: 1.5; }
.size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 30px;}
.size-btn { border: 1px solid #000; padding: 12px 0; font-size: 12px; transition: 0.2s; font-weight:bold; }
.size-btn.active, .size-btn:hover { background: #000; color: #fff; }
.btn-add-pdp { width: 100%; background: #000; color: #fff; padding: 20px; font-size: 15px; font-weight: 900; border: 1px solid #000; transition: 0.2s; }
.btn-add-pdp:hover { background: #fff; color: #000; }

/* Side Cart */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1500; }
.overlay.active { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: -450px; width: 450px; max-width: 100%; height: 100%; background: var(--bg-color); z-index: 2000; transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; border-left: 1px solid var(--gridline-color); }
.cart-drawer.active { right: 0; }
.cart-header { padding: 20px; border-bottom: 1px solid var(--gridline-color); display: flex; justify-content: space-between; align-items: center; }
.cart-items { flex: 1; overflow-y: auto; padding: 20px; }
.cart-item { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.cart-item img { width: 80px; height: 100px; object-fit: cover; }
.cart-item-details { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.cart-item-title { font-size: 14px; margin-bottom: 5px; color:#000; font-weight:bold;}
.cart-item-price { font-size: 14px; font-weight: 700; margin-bottom: 10px; color:#000;}
.cart-item-remove { font-size: 11px; text-decoration: underline; color: var(--accent-color); cursor: pointer; text-align: left; }
.cart-footer { padding: 20px; border-top: 1px solid var(--gridline-color); background: var(--bg-color); }
.cart-subtotal { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 10px; font-weight:bold; color:#000;}
.btn-checkout { width: 100%; background: #000; color: #fff; padding: 15px; font-size: 15px; border: 1px solid #000; transition: 0.2s; font-weight:bold;}
.btn-checkout:hover { background: #fff; color: #000; }

/* === PÁGINA DE CHECKOUT PHP === */
.checkout-page { display: flex; min-height: 100vh; background: #fff; }
.checkout-form-container { flex: 1.5; padding: 60px; border-right: 1px solid #000; }
.checkout-form-container h2 { font-size: 24px; margin-bottom: 30px; font-weight: 900; letter-spacing: -1px; color:#000;}
.checkout-form-container h3 { font-size: 12px; margin-bottom: 20px; text-transform: uppercase; color: #666; margin-top: 30px;}
.checkout-form-container input, .checkout-form-container select { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #ccc; font-family: var(--font-body); font-size: 14px; background: #fafafa; }
.checkout-form-container input:focus { outline: none; border-color: #000; background: #fff; }
.form-row { display: flex; gap: 15px; }
.btn-pay-now { width: 100%; background: #000; color: #fff; padding: 20px; font-size: 16px; font-weight: 900; margin-top: 20px; border: 1px solid #000; transition: 0.3s; cursor: pointer; }
.btn-pay-now:hover { background: #333; }
.error-msg { background: #000; color: #fff; padding: 15px; margin-bottom: 20px; font-size: 13px; font-weight: 700; text-align:center;}

.checkout-summary-container { flex: 1; background: #fafafa; padding: 60px; display: flex; flex-direction: column; }
.checkout-summary-container h3 { font-size: 12px; margin-bottom: 20px; text-transform: uppercase; color: #666; }
.checkout-items-list { flex: 1; overflow-y: auto; border-bottom: 1px solid #eee; margin-bottom: 20px; padding-bottom: 10px; }
.c-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 13px; color:#000; font-weight:bold;}
.c-item img { width: 50px; height: 65px; object-fit: cover; margin-right: 15px; border: 1px solid #eee; }
.c-item-left { display: flex; align-items: center; }
.checkout-totals .row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; color: #555; }
.checkout-totals .total { font-weight: 900; color: #000; font-size: 18px; margin-top: 15px; border-top: 1px solid #000; padding-top: 15px; }

/* Footer */
.site-footer { background: var(--bg-color); border-top: 1px solid var(--gridline-color); }
.footer-top { padding: 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gridline-color); background: #000; color: #fff; }
.newsletter { display: flex; gap: 10px; width: 50%; }
.newsletter input { flex: 1; background: transparent; border: none; border-bottom: 1px solid #fff; color: #fff; padding: 5px; font-family: var(--font-body); }
.newsletter button { text-decoration: underline; font-weight:bold;}

/* =======================================================
   RESPONSIVE (Móviles y Tablets) 
======================================================== */
@media (max-width: 900px) { 
    .checkout-page { flex-direction: column-reverse; } 
    .checkout-form-container { border-right: none; } 
    .pdp-content { flex-direction: column; } 
    .pdp-image { border-right: none; border-bottom: 1px solid #000; min-height: 300px; } 
    .pdp-info { padding: 30px; } 
}

@media (max-width: 768px) {
    /* Ajuste perfecto del Header (Logo y Carrito arriba, Menú abajo) */
    .header-inner { flex-wrap: wrap; padding: 15px; gap: 10px; justify-content: space-between; }
    .header-center { order: 1; flex: 1; justify-content: flex-start; }
    .header-center .logo-link { font-size: 18px !important; } /* Achicamos un poco el logo en cel */
    .header-right { order: 2; width: auto; }
    .header-left { order: 3; width: 100%; }
    
    /* Menú deslizable con el dedo súper fluido */
   .desktop-nav { 
    overflow-x: auto; 
    white-space: nowrap; 
    padding-bottom: 5px; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    gap: 15px; 
}

    .desktop-nav::-webkit-scrollbar { display: none; }
    .desktop-nav a { font-size: 14px; }
    
    /* Ventana del producto (Modal) adaptada al celular */
    .pdp-modal { height: 90vh; width: 95%; flex-direction: column; overflow-y: auto; }
    .pdp-image { height: 50%; min-height: 300px; border-right: none; border-bottom: 1px solid #000; }
    .pdp-info { padding: 25px; height: auto; }
    .pdp-info h2 { font-size: 22px; }
    .pdp-price { font-size: 18px; margin-bottom: 15px; }
    
    /* Ajuste del Footer */
    .footer-top { flex-direction: column; gap: 20px; text-align: center; }
    .newsletter { width: 100%; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; padding: 25px 15px; }
}