/**
 * responsive.css
 *
 * @package templateSystem
 * @copyright Copyright 2003-2016 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @author ZCAdditions.com, ZCA Responsive Template Default
 * @version $Id: picaflor-azul Wed Jan 13 18:44:28 2016 -0500 New in v1.5.5 $
 */

/* This is used to re-size images */
img{max-width:100%;height:auto;border:0;}

/* Added for responsive view () */
.leftBoxContainer, .rightBoxContainer {width:auto !important;
}

/* No reason to edit the below pixel calculations */
[class*="col"]{float:left;margin-left:5px;}
.col10{width:10px;}.col20{width:25px;}.col30{width:40px;}.col40{width:55px;}.col50{width:70px;}.col60{width:85px;}.col70{width:100px;}.col80{width:115px;}.col90{width:130px;}.col100{width:145px;}.col110{width:160px;}.col120{width:175px;}.col130{width:190px;}.col140{width:205px;}.col150{width:220px;}.col160{width:235px;}.col170{width:250px;}.col180{width:265px;}.col190{width:280px;}.col200{width:295px;}.col210{width:310px;}.col220{width:325px;}.col230{width:340px;}.col240{width:355px;}.col250{width:370px;}.col260{width:385px;}.col270{width:400px;}.col280{width:415px;}.col290{width:430px;}.col300{width:445px;}.col310{width:460px;}.col320{width:475px;}.col330{width:490px;}.col340{width:505px;}.col350{width:520px;}.col360{width:535px;}.col370{width:550px;}.col380{width:565px;}.col390{width:580px;}.col400{width:595px;}.col410{width:610px;}.col420{width:625px;}.col430{width:640px;}.col440{width:655px;}.col450{width:670px;}.col460{width:685px;}.col470{width:700px;}.col480{width:715px;}.col490{width:730px;}.col500{width:745px;}.col510{width:760px;}.col520{width:775px;}.col530{width:790px;}.col540{width:805px;}.col550{width:820px;}.col560{width:835px;}.col570{width:850px;}.col580{width:865px;}.col590{width:880px;}.col600{width:895px;}.col610{width:910px;}.col620{width:925px;}.col630{width:940px;}.col640{width:955px;}.col650{width:970px;}.col660{width:985px;}.col670{width:1000px;}.col680{width:1015px;}.col690{width:1030px;}.col700{width:1045px;}.col710{width:1060px;}.col720{width:1075px;}.col730{width:1090px;}.col740{width:1105px;}.col750{width:1120px;}.col760{width:1135px;}.col770{width:1150px;}.col780{width:1165px;}.col790{width:1180px;}.col800{width:1195px;}.col810{width:1210px;}.col820{width:1225px;}.col830{width:1240px;}.col840{width:1255px;}.col850{width:1270px;}.col860{width:1285px;}.col870{width:1300px;}.col880{width:1315px;}.col890{width:1330px;}.col900{width:1345px;}.col910{width:1360px;}.col920{width:1375px;}.col930{width:1390px;}.col940{width:1405px;}.col950{width:1420px;}.col960{width:1435px;}.col970{width:1450px;}.col980{width:1465px;}

/* No reason to edit below percentage calculations */
.onerow-fluid{margin:0 auto !important;width:100%;}
.onerow-fluid:before,
.onerow-fluid:after{display:table;content:"";}
.onerow-fluid:after{clear:both;}
.onerow-fluid>[class*="col"]{float:left;margin-left:0.5208%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0%;margin-right: 0.4208%;}
.onerow-fluid>[class*="col"]:nth-child(3){float:right;margin-right:0;}
.onerow-fluid>.col10{width:0.6826%;}.onerow-fluid>.col20{width:1.7065%;}.onerow-fluid>.col30{width:2.7304%;}.onerow-fluid>.col40{width:3.7543%;}.onerow-fluid>.col50{width:4.7782%;}.onerow-fluid>.col60{width:5.802%;}.onerow-fluid>.col70{width:6.8259%;}.onerow-fluid>.col80{width:7.8498%;}.onerow-fluid>.col90{width:8.8737%;}.onerow-fluid>.col100{width:9.8976%;}.onerow-fluid>.col110{width:10.9215%;}.onerow-fluid>.col120{width:11.9454%;}.onerow-fluid>.col130{width:12.9693%;}.onerow-fluid>.col140{width:13.9932%;}.onerow-fluid>.col150{width:15.0171%;}.onerow-fluid>.col160{width:16.041%;}.onerow-fluid>.col170{width:17.0648%;}.onerow-fluid>.col180{width:18.0887%;}.onerow-fluid>.col190{width:19.1126%;}.onerow-fluid>.col200{width:20.1365%;}.onerow-fluid>.col210{width:21.1604%;}.onerow-fluid>.col220{width:22.1843%;}.onerow-fluid>.col230{width:23.2082%;}.onerow-fluid>.col240{width:24.2321%;}.onerow-fluid>.col250{width:25.256%;}.onerow-fluid>.col260{width:26.2799%;}.onerow-fluid>.col270{width:27.3038%;}.onerow-fluid>.col280{width:28.3276%;}.onerow-fluid>.col290{width:29.3515%;}.onerow-fluid>.col300{width:30.3754%;}.onerow-fluid>.col310{width:31.3993%;}.onerow-fluid>.col320{width:32.4232%;}.onerow-fluid>.col330{width:33.4471%;}.onerow-fluid>.col340{width:34.471%;}.onerow-fluid>.col350{width:35.4949%;}.onerow-fluid>.col360{width:36.5188%;}.onerow-fluid>.col370{width:37.5427%;}.onerow-fluid>.col380{width:38.5666%;}.onerow-fluid>.col390{width:39.5904%;}.onerow-fluid>.col400{width:40.6143%;}.onerow-fluid>.col410{width:41.6382%;}.onerow-fluid>.col420{width:42.6621%;}.onerow-fluid>.col430{width:43.686%;}.onerow-fluid>.col440{width:44.7099%;}.onerow-fluid>.col450{width:45.7338%;}.onerow-fluid>.col460{width:46.7577%;}.onerow-fluid>.col470{width:47.7816%;}.onerow-fluid>.col480{width:48.8055%;}.onerow-fluid>.col490{width:49.8294%;}.onerow-fluid>.col500{width:50.8532%;}.onerow-fluid>.col510{width:51.8771%;}.onerow-fluid>.col520{width:52.901%;}.onerow-fluid>.col530{width:53.9249%;}.onerow-fluid>.col540{width:54.9488%;}.onerow-fluid>.col550{width:55.9727%;}.onerow-fluid>.col560{width:56.9966%;}.onerow-fluid>.col570{width:58.0205%;}.onerow-fluid>.col580{width:59.0444%;}.onerow-fluid>.col590{width:60.0683%;}.onerow-fluid>.col600{width:61.0922%;}.onerow-fluid>.col610{width:62.116%;}.onerow-fluid>.col620{width:63.1399%;}.onerow-fluid>.col630{width:64.1638%;}.onerow-fluid>.col640{width:65.1877%;}.onerow-fluid>.col650{width:66.2116%;}.onerow-fluid>.col660{width:67.2355%;}.onerow-fluid>.col670{width:68.2594%;}.onerow-fluid>.col680{width:69.2833%;}.onerow-fluid>.col690{width:70.3072%;}.onerow-fluid>.col700{width:71.3311%;}.onerow-fluid>.col710{width:72.3549%;}.onerow-fluid>.col720{width:73.3788%;}.onerow-fluid>.col730{width:74.4027%;}.onerow-fluid>.col740{width:75.4266%;}.onerow-fluid>.col750{width:76.4505%;}.onerow-fluid>.col760{width:77.4744%;}.onerow-fluid>.col770{width:78.4983%;}.onerow-fluid>.col780{width:79.5222%;}.onerow-fluid>.col790{width:80.5461%;}.onerow-fluid>.col800{width:81.57%;}.onerow-fluid>.col810{width:82.5939%;}.onerow-fluid>.col820{width:83.6177%;}.onerow-fluid>.col830{width:84.6416%;}.onerow-fluid>.col840{width:85.6655%;}.onerow-fluid>.col850{width:86.6894%;}.onerow-fluid>.col860{width:87.7133%;}.onerow-fluid>.col870{width:88.7372%;}.onerow-fluid>.col880{width:89.7611%;}.onerow-fluid>.col890{width:90.785%;}.onerow-fluid>.col900{width:91.8089%;}.onerow-fluid>.col910{width:92.8328%;}.onerow-fluid>.col920{width:93.8567%;}.onerow-fluid>.col930{width:94.8805%;}.onerow-fluid>.col940{width:95.9044%;}.onerow-fluid>.col950{width:96.9283%;}.onerow-fluid>.col960{width:97.9522%;}.onerow-fluid>.col970{width:98.9761%;}.onerow-fluid>.col980{width:100%;}
/* Pull the main product content up tightly beneath your new grey category menu banner */
#contentMainWrapper, 
.contentMainWrapper {
    margin-top: 0 !important; /* Strips away any huge legacy top margins pushing items down */
    padding-top: 5px !important; /* Replaces the massive gap with a clean, tight 5px breathing space */
}

/* Clear any legacy margins on the primary index grid container */
#indexDefault, 
.centerColumn {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Flatten the master container padding that is creating matching top and bottom gaps */
#mainWrapper, 
.mainWrapper, 
#pageWrapper,
.container {
    padding-top: 0 !important;   /* Destroys the hidden top padding shelf */
    padding-bottom: 0 !important; /* Destroys the hidden bottom padding floor */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure the main body container doesn't force a vertical padding push */
body, html {
    padding: 0 !important;
    margin: 0 !important;
}
/* Camouflage the New Products heading banner to blend into the white background */
.centerBoxHeading, 
#productListHeading,
#indexDefault .centerBoxHeading {
    background-color: #ffffff !important; /* Turns the box background pure white */
    background-image: none !important;    /* Destroys any default template gradients */
    border: none !important;              /* Completely wipes out the surrounding box borders */
    padding-left: 0 !important;           /* Aligns the text flush without box padding */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    text-align: center !important;        /* Keeps the text beautifully centered */
}

/* ==========================================================================
   UNIVERSAL CATEGORY GRID CENTERING OVERRIDE
   ========================================================================== */

/* Force the outer listing box and any template tables to center align */
#productListing,
.productListing,
#productListing table,
.productListing table,
.categoryListPage table,
#indexProductList table {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: table !important; /* Forces the browser to calculate auto-margins on table elements */
    width: auto !important; /* Breaks the 100% left-hugging layout stretch */
    text-align: center !important;
}

/* Ensure all row wrappers inside the listing grid center their content */
#productListing tr,
.productListing tr,
.productListing-row {
    text-align: center !important;
    display: table-row !important;
}

/* Ensure individual product cards and text cells align cleanly in the middle */
#productListing td,
.productListing td,
.productListing-data,
.centerBoxContentsProducts,
.centerBoxContentsListing {
    text-align: center !important;
    vertical-align: top !important;
    float: none !important; /* Kills any legacy left-floats pushing cards to the wall */
}

/* Ensure the main heading title for the category centers nicely as well */
.categoryListPage h1, 
#productListHeading,
.centerColumn h1 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}
/* ==========================================================================
   GNS STORE OVERRIDES - MASTER PROGRESS RESTORATION
   ========================================================================== */

/* 1. Category Banner Menu Links Formatting */
#topCategoryTabs a {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #000000 !important; /* Bold Black links */
    padding: 5px 18px !important;
    text-decoration: none !important;
    display: inline-block !important;
}
#topCategoryTabs a:hover {
    color: #cc0000 !important; /* Sharp Red Hover text */
    text-decoration: underline !important;
}

/* 2. Universal Product Grid Centering Override (Desktop & Mobile Home/Category Pages) */
.centerBoxContents,
.centerBoxContentsListing,
.productListing-data,
#productListing td {
    float: none !important; /* Overrides the legacy classic left magnet safely */
    display: inline-block !important; /* Keeps product cards 3-wide while allowing center alignment */
    vertical-align: top !important;
    text-align: center !important;
    margin: 10px !important; /* Balanced breathing room around each card */
}
#productListing, #indexProductList, .centerColumn, .centerBoxWrapper {
    text-align: center !important; /* Pulls the rows cleanly down the center line of the monitor */
    width: 100% !important;
    display: block !important;
}

/* 3. Mobile Device View Optimization (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Mobile Category Menu Contrast Fix */
    #topCategoryTabs a, .category-top-menu a, #topCategoryTabs ul li a {
        color: #000000 !important; /* Bold black text against the grey bar on phones */
        background-color: transparent !important;
        display: inline-block !important; /* Keeps them flowing side-by-side */
        padding: 6px 12px !important;
    }
    
    /* Mobile Product Detail Page Text-Wrapping Rescue (Stack Image & Description) */
    #productGeneral .back, #productInfoDisplay .back, #productMainImage .back {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px auto !important; /* Centers product graphic with clean bottom gap */
        text-align: center !important;
        width: 100% !important;
        max-width: 280px !important; /* Keeps product photo looking neat on compact phone screens */
    }
    #productDescription, .productDescription {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        float: none !important;
        text-align: center !important; /* Full width fluid text flows cleanly under the image */
        padding: 10px 0 !important;
    }
	}
/* ==========================================================================
   UNIFORM PRODUCT ROW RESCUE (DESTROY CHESS BOARD COLLISION)
   ========================================================================== */

/* Strip alternating legacy row backgrounds from fracturing your category pages */
#productListing tr, 
.productListing-row, 
.productListing-even, 
.productListing-odd {
    display: inline-block !important; /* Converts rigid row layers into a continuous fluid row wrap */
    width: 100% !important;
    background: transparent !important; /* Erases the black/white chessboard grid tint rules */
    border: none !important;
    text-align: center !important;
}

/* Ensure individual product table card data cells behave like independent centered cards */
#productListing td, 
.productListing-data {
    display: inline-block !important;
    float: none !important;
    width: 30% !important; /* Safely accommodates a modern 3-wide desktop column grid pattern */
    min-width: 250px !important; /* Prevents text elements from collapsing on medium layout monitors */
    margin: 15px !important;
    background-color: #ffffff !important; /* Keeps every individual product card on a clean white canvas */
    vertical-align: top !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
/* ==========================================================================
   PRODUCT TEXT WRAPPING & IMAGE BALANCING OVERRIDE
   ========================================================================== */

/* 1. Force all text inside the product listings to wrap inside its box bounds */
.productListing-data,
.centerBoxContentsListing,
.centerBoxContentsProducts,
#productListing td {
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important; /* Smashes the long rigid text strings */
    width: 30% !important; /* Strictly locks each card to 1/3 of the widescreen view */
    min-width: 260px !important; /* Keeps boxes uniform on medium desktop screens */
    max-width: 380px !important; /* Prevents text from stretching too wide */
    display: inline-block !important;
    vertical-align: top !important; /* Keeps the top edges perfectly level */
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* 2. Fix the tiny icon/thumbnail issue by scaling them to a modern retail size */
.productListing-data img,
.centerBoxContentsListing img,
.centerBoxContentsProducts img,
#productListing td img {
    width: 200% !important; /* Forces the small icon to expand to the width of its container */
    max-width: 260px !important; /* Caps the image at a crisp, sharp thumbnail size */
    height: auto !important;
    display: block !important;
    margin: 0 auto 12px auto !important; /* Centers the image over the text with a clean gap */
}

/* 3. Strip any un-wrapped loose text boundaries from spilling out */
.productListing-data a,
.productListing-data span,
.productListing-description {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 4px 0 !important;
}
/* ==========================================================================
   BLUE THEME OBLITERATION & CONTRAST CLEANUP
   ========================================================================== */

/* Turn any default blue background headers, mobile menus, or search bars to clean off-black */
#navMainWrapper, 
.navMainWrapper,
.mobile-menu-button, 
#navColumnLeft .leftBoxHeading, 
#navColumnRight .rightBoxHeading, 
.centerBoxHeading,
#tpl_footer,
footer,
#footerWrapper {
    background-color: #1a1a1a !important; /* Premium modern charcoal */
    background-image: none !important;
    border: none !important;
    color: #ffffff !important;
}

/* Ensure all link text elements inside the footer or upper headers render in clean black/white, NOT blue */
#navMainWrapper a, 
.account-nav-links a {
    color: #000000 !important; /* Utility links default to crisp black text */
    text-decoration: none !important;
}

#navMainWrapper a:hover, 
.account-nav-links a:hover,
#topCategoryTabs a:hover {
    color: #cc0000 !important; /* Sharp red hovers */
}

/* Ensure footer links stand out clearly against the new charcoal footer strip */
#footerWrapper a, 
footer a, 
.legal-links a {
    color: #ffffff !important;
    text-decoration: none !important;
}
#footerWrapper a:hover, 
footer a:hover {
    color: #ff3333 !important;
    text-decoration: underline !important;
}
/* ==========================================================================
   PRODUCT LANDING PAGE: MASTER 2-COLUMN LUXURY GRID RESET
   ========================================================================== */

/* 1. Setup the Outer Master Container Wrapper to hold floats safely */
#productGeneral, 
#productInfoDisplay {
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

/* 2. The Left Column: Image, Cart Button, and Ask a Question Box */
#productMainImage,
.productMainImage {
    float: left !important;
    width: 32% !important;        /* Uses 1/3 of the widescreen view */
    min-width: 280px !important;
    text-align: center !important;
    margin-right: 4% !important;  /* Creates the gutter space */
    display: block !important;
}

/* Force the Cart Box and Custom Action buttons to stack perfectly under the image */
#cart-box, 
#cartAdd, 
.cartAdd,
#productQuestions,
.productQuestions,
div[id*="productQuestions"] {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px 0 !important;
}

/* 3. The Right Column: Flawless Product Description Flow & Parent Reset */
#pinfo-right,
#productDescription,
.productDescription {
    float: left !important;       /* Pulls both the helper wrapper and text to the upper shelf */
    width: 64% !important;        /* Consumes the remaining 2/3 space on widescreen */
    clear: none !important;       /* Explicitly destroys any grid row clearing behaviors */
    display: inline-block !important;
    text-align: left !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}


/* 4. The Action Anchor: Tame the Review Button & Supplemental Links */
#productReviewLink,
.productReviewLink,
#productReviewsWrite,
.buttonRow.back {
    clear: both !important;       /* Forces reviews to wait until description text finishes */
    display: block !important;
    float: left !important;       /* Restricts it to normal layout block tracking */
    width: auto !important;       /* Smashes the 50% widescreen stretch */
    max-width: 250px !important;  /* Caps the button width to a neat, clean button profile */
    margin: 20px 0 !important;    /* Clean breathing room */
}

/* 5. Mobile Device View Optimization (Stops overlap and stacks neatly on phone glass) */
@media screen and (max-width: 768px) {
    #productMainImage,
    #cart-box,
    #cartAdd,
    #productQuestions,
    #productDescription {
        float: none !important;   /* Drops side-by-side splits entirely */
        width: 100% !important;   /* Stacks everything into a clean 1-column reading line */
        max-width: 100% !important;
        margin: 15px auto !important;
        text-align: center !important;
    }
    
    #productReviewLink,
    .productReviewLink,
    #productReviewsWrite,
    .buttonRow.back {
        float: none !important;
        margin: 15px auto !important;
        text-align: center !important;
        width: 100% !important;   /* Allows full width button sizing on mobile for easy thumb-tapping */
        max-width: 100% !important;
    }
}
/* ==========================================================================
   FINAL MOBILE LINK RECOVERY & FOOTER BALANCING
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Rescue the Category Navigation Tabs wrapper from any mobile hidden states */
    #topCategoryTabs,
    #navCatTabsWrapper, 
    #navCatTabs {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
    
    #navCatTabs ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 5px !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* 2. Break the footer wrappers free from the main product content push */
    #footerWrapper, 
    footer, 
    #tpl_footer,
    .footer-container,
    #navSuppWrapper,
    #navSupp {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        clear: both !important;        /* Smashing through any stuck description text floats */
        width: 100% !important;
        height: auto !important;
        padding: 20px 10px !important; /* Generous thumb-tapping space for links */
        text-align: center !important;
    }

    /* 3. Force your About Us, Contact Us, and EZ-Pages links to align cleanly on phones */
    #footerWrapper a, 
    footer a, 
    #navSupp a,
    .legal-links a {
        display: inline-block !important;
        visibility: visible !important;
        width: auto !important;
        padding: 8px 15px !important;   /* Makes the links easy to press on phone screens */
        margin: 5px !important;
        font-size: 14px !important;     /* Clean, readable mobile typography */
    }
}
/* ==========================================================================
   MOBILE TOP NAVIGATION TYPOGRAPHY SLIMMING
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Shrink and un-bold the category menu text on mobile screens */
    #topCategoryTabs a, 
    #navCatTabs ul li a {
        font-weight: normal !important; /* Strips away the heavy bold styling */
        font-size: 14px !important;     /* Drops from 18px to a crisp, mobile-friendly size */
        padding: 8px 10px !important;   /* Tightens left/right gaps so more links fit on one line */
    }
}