/* 1. THE HEADER */
header {
    background-color: #ffffff !important;
    border-bottom: 3px solid #c00000 !important; /* Carta Red */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* 2. THE CARD STYLING (We let the extension handle the width) */
#product-category .refine-tile {
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    
    /* We remove 'flex' and 'max-width' so the extension's settings can work */
    display: block !important; 
    min-height: 220px !important; 
    box-shadow: 0 3px 8px rgba(0,0,0,0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. THE 15px LIFT (Still the star of the show) */
#product-category .refine-tile:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
    border-color: #c00000 !important;
}

/* 4. IMAGE & HOVER TREATMENT */
#product-category .refine-tile img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 15px !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

#product-category .refine-tile:hover img {
    transform: scale(1.05) !important;
}

/* 5. TEXT STYLING */
#product-category .refine-tile .caption a {
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    display: block !important;
    text-decoration: none !important;
    margin-top: 10px !important;
}

#product-category .refine-tile:hover .caption a {
    color: #c00000 !important;
}

/* 1. THE HEADER - The New "Sport Grey" Background */
header {
    background-color: #f5f5f5 !important; /* A clean, professional light grey */
    border-bottom: 4px solid #c00000 !important; /* Bold Carta Red bottom border */
    padding: 15px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* 4. THE MAIN NAV BAR - Making it sit perfectly on the grey */
#menu {
    background: transparent !important;
    border: none !important;
    margin-bottom: 0 !important;
}

#menu .nav > li > a {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
/* 1. THE MAIN PAGE BACKGROUND */
body {
    background-color: #f5f5f5 !important;
}

/* 2. THE CONTENT WRAPPER */
/* We need to make sure the main container doesn't force a white background over our new grey */
#common-home, 
#product-category, 
#container {
    background-color: transparent !important;
}

/* 3. THE REFINEMENT */
/* Since the page is now grey, those white Category Cards will look even better and "pop" more */
#product-category .refine-tile {
    background: #ffffff !important; /* Keep the cards white for contrast */
}


/* 1. THE PRODUCT CARD - Creating the "Gallery" look */
.product-layout .product-thumb {
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    height: 100% !important; /* Forces all cards in a row to be equal height */
    display: flex !important;
    flex-direction: column !important;
}

/* 2. THE SMACK HOVER - Consistent with your Categories */
.product-layout .product-thumb:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
    border-color: #c00000 !important; /* Carta Red border */
}

/* 3. THE IMAGE - Keeping it centered and crisp */
.product-thumb .image {
    padding: 10px !important;
    margin-bottom: 15px !important;
}

.product-thumb .image img {
    max-height: 200px !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* 4. THE PRODUCT TITLE - Bold and Professional */
.product-thumb h4 {
    margin-top: auto !important; /* Pushes title/price to the bottom for alignment */
    min-height: 45px !important;
}

.product-thumb h4 a {
    color: #1a1a1a !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.product-thumb:hover h4 a {
    color: #c00000 !important;
}

/* 5. PRICE STYLING - Making the numbers stand out */
.product-thumb .price {
    color: #c00000 !important; /* Carta Red for prices */
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

/* 6. CLEANING UP THE BUTTON GROUP */
.product-thumb .button-group {
    border-top: 1px solid #eee !important;
    background: #fafafa !important;
    margin: 15px -20px -20px -20px !important; /* Extends to the edges of the card */
    border-radius: 0 0 12px 12px !important;
}
/* --- THE ACTION BAR --- */
.product-thumb .button-group {
    display: flex !important;
    border-top: 1px solid #eee !important;
    background: none !important;
    margin: auto -12px -12px -12px !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
}

/* Base style for both buttons */
.product-thumb .button-group button {
    height: 45px !important; /* LOCKED SYMMETRY */
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    transition: all 0.25s ease !important;
}

/* 1. ADD TO CART BUTTON (Pro Black) */
.product-thumb .button-group button:first-child {
    flex: 1 !important;
    background-color: #1a1a1a !important; 
    color: #ffffff !important;
    font-size: 11px !important;
}

/* Cart Hover (Snaps to Carta Red) */
.product-thumb .button-group button:first-child:hover {
    background-color: #c00000 !important;
}

/* 2. WISHLIST BUTTON (Light Grey Base) */
.product-thumb .button-group button:last-child {
    width: 45px !important;
    background-color: #f5f5f5 !important;
    color: #888888 !important; /* Subtle heart color before hover */
    border-left: 1px solid #eee !important;
}

/* THE "BLACKOUT" HOVER: Black background and Red heart */
.product-thumb .button-group button:last-child:hover {
    background-color: #a8a3a3 !important; /* Turns Black on hover */
}

.product-thumb .button-group button:last-child:hover i {
    color: #c00000 !important; /* Heart turns Red on hover */
}

/* Icon alignment */
.product-thumb .button-group button i {
    font-size: 14px !important;
    vertical-align: middle !important;
}

/* =========================================
   EXTENSION-DRIVEN PRODUCT CARDS
   ========================================= */

/* 1. Let the extension handle the widths, we just ensure equal heights in the row */
/* --- LASER TARGETED CENTERING --- */
/* Only applies to rows that actually contain a product card */
#product-category .row:has(.product-layout) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centers the whole group of cards */
}
#product-category .product-layout {
    display: flex !important;
    float: none !important; /* Stops the old Bootstrap stagger */
    margin-bottom: 20px !important;
	justify-content: center !important; /* ADD THIS LINE: Centers the narrower card */
    /* NO WIDTHS OR MAX-WIDTHS HERE - The extension handles it! */
}

/* 2. THE INNER UNIFORMITY (Making sure buttons line up) */
#product-category .product-thumb {
    width: 100% !important;
	max-width: 90% !important; /* ADD THIS LINE: The 'Squeeze' dial. Lower the number to make cards thinner */
    height: 100% !important; /* Stretches to fill the tallest card in the row */
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* 3. THE IMAGE LOCK (Stops images from growing/shrinking) */
#product-category .product-thumb .image {
    height: 200px !important; /* The 'Goldilocks' image height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
}

#product-category .product-thumb .image img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}

/* 4. THE CONTENT & BUTTON PUSH */
#product-category .product-thumb > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; 
}

#product-category .product-thumb .caption {
    padding: 10px 15px !important;
}

/* 5. Glues the Add to Cart buttons perfectly to the bottom */
#product-category .product-thumb .button-group {
    margin-top: auto !important; 
    display: flex !important;
}
/* 3. -------------------------------------------------------------------------- */

/* 1. -------------------------------------------------------------------------- */
/* 1. THE LAYOUT GRID */
.thumbnails {
    display: grid !important;
    /* Column 1: Takes the remaining space | Column 2: Takes exactly what the theme images need */
    grid-template-columns: 1fr auto !important; 
    gap: 15px !important; /* Just a small gap between the main photo and thumbs */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. THE MAIN IMAGE (Column 1) */
.thumbnails li:first-child {
    grid-column: 1 !important;
    /* This ensures it stays on the left while others stack next to it */
    grid-row: 1 / span 20 !important; 
}

/* 3. ADDITIONAL IMAGES (Column 2) */
.thumbnails li:not(:first-child) {
    grid-column: 2 !important;
    /* These will naturally stack one under the other in the second column */
    margin-bottom: 10px !important;
}
/* 1. THE DISABLED BUTTON STATE */
/* This targets the button when the system marks it as disabled */
.product-thumb .button-group button:first-child:disabled,
.product-thumb .button-group button:first-child.disabled {
    background-color: #d2d2d2 !important; /* Muted Grey */
    color: #888888 !important; /* Faded Text */
    cursor: not-allowed !important; /* Shows a 'No Entry' sign on hover */
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important; /* Kills the red hover effect completely */
}

/* 2. OPTIONAL: If the text changes to 'Out of Stock' */
/* We can make sure the text stays readable but clearly inactive */
.product-thumb .button-group button:first-child:disabled i {
    color: #888888 !important;
}
/* 2. -------------------------------------------------------------------------- */

/* 1. THE MAIN IMAGE FRAME */
/* This adds a subtle border and a very light grey tint behind the white image */
.thumbnails li:first-child img {
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    background-color: #f9f9f9 !important; /* Creates the separation from the white page */
    padding: 15px !important; /* This creates a nice 'matting' effect around the socks */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; /* A very soft shadow for depth */
    transition: all 0.3s ease !important;
}

/* 2. OPTIONAL: Subtle hover lift */
.thumbnails li:first-child img:hover {
    border-color: #c00000 !important; /* Carta Red border on hover */
    box-shadow: 0 8px 25px rgba(0,0,0,0.07) !important;
}

/* 3. ALIGN THE THUMBNAILS */
/* Making sure the small images match the new framed style */
.thumbnails li:not(:first-child) img {
    border: 1px solid #e2e2e2 !important;
    border-radius: 4px !important;
    background-color: #f9f9f9 !important;
    padding: 5px !important;
}
/* 2. -------------------------------------------------------------------------- */

/* X. -------------------------------------------------------------------------- */
/* --- LOCK THE PRODUCT CARD TYPOGRAPHY --- */

/* 1. The Product Title */
#product-category .product-thumb .caption h4,
#product-category .product-thumb .caption h4 a {
    font-size: 15px !important; /* Locks the title at a readable size */
    font-weight: 700 !important; /* Makes it nice and bold */
    line-height: 1.4 !important; /* Adds a little breathing room between lines */
    color: #333333 !important;
}

/* 3. The 'Add to Cart' Button Text */
#product-category .product-thumb .button-group button {
    font-size: 13px !important; /* Keeps the button text sharp */
    font-weight: 700 !important;
    text-transform: uppercase !important; /* Adds that premium 'Elite' feel */
}

/* --- STATIC & CENTERED SIDEBAR TITLE --- */

/* 1. Target the Title itself */
.btn-group .product-title {
    display: block !important;       /* Forces it to be its own block */
    width: 100% !important;         /* Spans the full width of the panel */
    text-align: center !important;  /* Centers the text */
    
    /* 'Static' Styles: Locking the look */
    font-size: 24px !important;     /* Fixed size so it won't 'shrink' */
    font-weight: 800 !important;    /* Heavy 'Elite' weight */
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: #333 !important;
    
    /* Spacing & The Red Accent */
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #c00000 !important; /* Centered red line */
}

/* 2. Force the Parent container to allow centering */
.btn-group:has(.product-title) {
    display: block !important;
    width: 100% !important;
    float: none !important;
    text-align: center !important;
}
/* RELATED PRODUCTS */
/* 1. Center the Related Products Title and make it bigger */
.mp_relatedproducts h3.related-title {
    display: block;             /* Changed from inline-block to take full width */
    text-align: center;         /* Centers the text */
    font-size: 24px;            /* Increased size */
    font-weight: 700;           /* Makes it nice and bold */
   /* background-color: #eeeeee !important;  /* Matches your description tab */ */
    padding: 15px;
    border: 1px solid #dddddd;
    margin-bottom: 10px;        /* Adds space between title and products */
    text-transform: uppercase;
    letter-spacing: 1px;        /* Modern touch for readability */
}

/* 2. Center the Product Name and Price */
.mp_relatedproducts .caption {
    text-align: center;         /* Centers the name and price text */
}

/* 3. Ensure the Price stands out */
.mp_relatedproducts .price {
    font-size: 18px;            /* Makes the price a bit more readable */
    font-weight: bold;
    color: green !important;             /* Matches the red in your logo */
}

/* 4. Optional: Clean up the thumb border */
.mp_relatedproducts .product-thumb {
    border: 1px solid #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
}
/* Make the product cards shorter and tighter */
.mp_relatedproducts .product-thumb {
    padding: 5px;             /* Reduced from the default 15px/20px */
    margin-bottom: 5px;
    height: auto !important;  /* Allows the box to shrink to its content */
}

/* Tighten up the space around the image */
.mp_relatedproducts .image {
    padding: 5px;
    margin-bottom: 0px;
}

/* Shrink the text area */
.mp_relatedproducts .caption {
    padding: 5px 10px;        /* Less space on top/bottom */
    min-height: 60px !important; /* Just enough for 2 lines of text + price */
}

/* Bring the price closer to the title */
.mp_relatedproducts .caption h4 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 16px;          /* Slightly smaller font to save vertical space */
}

.mp_relatedproducts .price {
    margin-bottom: 5px;
    font-size: 16px;
}
/* 1. The Main Background of the entire related products section */
.mp_relatedproducts {
    background-color: #eeeeee !important; /* This lets the site's natural background show through */
    padding: 20px 0;
    border-top: none; /* Removes the line if you want it to flow naturally */
}

/* 2. The Title Bar background - Matching your Description Tab (#eeeeee) */
.mp_relatedproducts h3.related-title {
    background-color: #eeeeee !important; 
    color: #333333;
    border: 1px solid #dddddd;
    margin-bottom: 10px;
}

/* 3. The Individual Product Cards */
.mp_relatedproducts .product-thumb {
    background-color: #ffffff; /* Keeps the product boxes crisp white */
    border: 1px solid #e2e2e2;  /* A very faint border to define the 'card' */
    border-radius: 6px;        /* Slightly rounded corners for a modern look */
}

/* 1. The Main Section Background (The Grey Area) */
.mp_relatedproducts {
    background-color: #eeeeee !important; /* The grey background you requested */
    padding: 30px 15px;                   /* Adds breathing room around the cards */
    margin-top: 20px;
    border: 1px solid #dddddd;            /* Matches your tab borders */
}

/* 2. The Title (Keep it clean on the grey background) */
.mp_relatedproducts h3.related-title {
    background: none !important;          /* Removes the redundant title bar */
    border: none !important;              /* Removes the title border */
    text-align: center;
    font-size: 24px;
    margin-bottom: 25px;
    color: #333;
}
/* Add a bold red underline to the Related Products heading */
.mp_relatedproducts h3.related-title {
    border-bottom: 4px solid #e31e24 !important; /* Thick red line */
    display: inline-block;                      /* Makes the line only as wide as the text */
    padding-bottom: 5px;                        /* Space between text and the line */
    margin-bottom: 20px;                        /* Space between the line and the products */
    width: auto;                                /* Ensures it doesn't stretch full width */
}

/* This centers the heading now that it's 'inline-block' */
.mp_relatedproducts {
    text-align: center; 
}

/* 3. The White Cards */
.mp_relatedproducts .product-thumb {
    background-color: #ffffff !important; /* The white card */
    border: 1px solid #e2e2e2 !important;  /* Subtle border to define the card */
    padding: 15px;
    border-radius: 4px;                   /* Softens the corners */
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Adds a tiny "lift" off the grey */
}

/* 4. Swiper Navigation Arrows */
/* Making them darker so they are visible on the grey */
.mprelatedproducts.swiper-button-next, 
.mprelatedproducts.swiper-button-prev {
    color: #333 !important;
}
/* 1. Make the swiper containers transparent so the main grey shows through */
.mp_relatedproducts .swiper-viewport,
.mp_relatedproducts #mp-relatedproducts,
.mp_relatedproducts .swiper-container {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
}

/* 2. Ensure the main container has the grey background */
.mp_relatedproducts {
    background-color: #eeeeee !important;
    padding: 20px;
    border-radius: 5px; /* Optional: rounds the corners of the grey area */
}

/* 3. Keep the cards themselves white */
.mp_relatedproducts .product-thumb {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
}
/*=======================================================================================*/
/* 1. Fix the color mismatch - Makes the whole product container area white */
#product-product .container {
    background-color: #ffffff !important;
    border-radius: 0 0 4px 4px; /* Rounds only the bottom corners */
}

/* 2. Remove the 'Gap' by tightening the breadcrumb and container spacing */
#product-product ul.breadcrumb {
    background-color: #f5f5f5; /* Matches your breadcrumb bar color */
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding: 15px 5px;
}

/* 3. Target the specific content wrapper to remove the top empty space */
#product-product #content {
    padding-top: 15px !important; /* Small, clean gap so the image isn't touching the line */
    margin-top: 0 !important;
}

/* 4. Ensure the body background is your solid #eeeeee grey */
body {
    background-color: #eeeeee !important;
}
/* 1. Reduce space after the Related Products module */
.mp_relatedproducts {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
}

/* 2. Target the main content wrapper's bottom margin */
#content, .container {
    margin-bottom: 0 !important;
}

/* 3. Reduce the top padding of the footer if it's too large */
footer {
    margin-top: 0 !important;
    padding-top: 10px !important;
}
/* 1. Move Thumbnails to the left and Main Image to the right */
#product-product .col-sm-8 .row {
    display: flex;
    flex-direction: row-reverse; /* This flips the order of the inner columns */
}

/* 2. Adjust thumbnail spacing */
#product-product .thumbnails {
    margin-bottom: 20px;
}

#product-product .thumbnails .image-additional {
    margin-left: 0 !important;
    margin-right: 90px; /* Adds a gap between thumbnails and main image */
    float: left;        /* Ensures they stack properly on the left */
    clear: both;        /* Forces them to stack vertically like your image */
}
/* 1. Un-cage the list item */
#product-product .image-additional {
    width: 160px !important; /* Slightly wider than the 200px image -----=====-----*/
    max-width: none !important;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* 2. Fix the 'thumbnail' border box */
#product-product .image-additional .thumbnail {
    display: block;
    padding: 4px;
    line-height: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    width: 100% !important; /* Forces link to match 210px width */
}

/* 3. Make the image fill the link */
#product-product .image-additional img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 4. Ensure the main big image stays big */
#product-product .thumbnails > li:first-child {
    width: 100%;
    margin-bottom: 20px;
}
/* ----------===============================================================================----------*/
/* Nuke the sneaky divider lines attached to the Related Products and Content */
div#content::before,
div#content::after,
.mp_relatedproducts::before,
.mp_relatedproducts::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    height: 0 !important;
}
/* Strip ALL borders from the related products wrapper just in case it's projecting a line */
.mp_relatedproducts,
.mp_relatedproducts::before,
.mp_relatedproducts::after {
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* One last nuke to the row wrapping the main product, just to be safe */
div#content > .row {
    border-top: none !important;
}

/*====================================================================================================*/

/* --- CARTA SPORT HEADER-MATCH FOOTER (V2) --- */

footer {
    background-color: #111111 !important; 
    color: #999999;
    padding: 20px 0 10px 0; 
    margin-top: 0;
    font-size: 12px;
    border-top: 2px solid #e31e24; 
}

/* 1. The Logo - Centered in its column */
.footer-logo-section {
    text-align: center; /* Centering the logo and tagline */
    padding-right: 12px;
}
.footer-logo {
    max-width: 150px; 
    margin: 0 auto 5px auto; /* Ensures centering */
    display: inline-block;
}
.footer-tagline {
    font-size: 10px;
    color: #777;
    margin-top: 0;
    display: block;
}

/* 2. Slim Headers */
footer h5 {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 5px;
    text-transform: uppercase;
}

/* 3. Vertical Dividers */
.footer-col, .footer-address-section {
    border-left: 2px solid Red; 
    padding-left: 15px;
    padding-right: 10px;
    min-height: 80px; 
}

/* 4. Link Styling & Red Hovers */
footer ul li a, .footer-email {
    color: White !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

footer ul li a:hover, .footer-email:hover {
    color: #e31e24 !important;
}

/* 5. Address Styling */
address {
    line-height: 1.4;
    color: #999999;
    font-style: normal;
    margin-bottom: 0;
}

/* 6. Copyright */
.footer-divider {
    border-color: Black;
    margin: 10px 0; 
}
.copyright p {
    color: silver;
    font-size: 10px;
    margin-bottom: 5px;
}
.footer-tagline {
    font-size: 10px;
    color: #777;
    margin-top: 5px; /* Added a tiny bit of breathing room */
    display: block;
    text-transform: uppercase; /* Makes it look extra 'corporate' */
    letter-spacing: 0.5px;
}
/*====================================================================================================*/
#success-modal h3 { font-size: 32px !important; }