/* Container & Wrapper */
.pg-hero-slider-container {
    position: relative;
    padding: 0 15px;
}

.pg-hero-slide {
    height: auto;
    overflow: hidden;
}

.pg-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Image Styling */
.pg-hero-img-box {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* Optional: for a cleaner look */
    aspect-ratio: 3/4;
    /* Matches the portrait look of your inspo */
}

.pg-hero-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pg-hero-slide:hover .pg-hero-img-box img {
    transform: scale(1.05);
}

.pg-full-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Content & Button Overlay */
.pg-hero-content {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: calc(100% - 40px);
    display: flex;
    justify-content: center;
}

.pg-hero-btn {
    background: #fff;
    padding: 12px 25px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.pg-hero-btn:hover {
    background: #000;
    color: #fff;
}

/* Navigation & Pagination */
.pg-slider-btn {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    font-size: 24px; /* Reduced for better icon centering */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    z-index: 100;
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
}

.pg-slider-btn:hover {
    background: #000;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.pg-slider-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.pg-prev {
    left: 15px;
}

.pg-next {
    right: 15px;
}

@media (max-width: 768px) {
    .pg-slider-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .pg-prev {
        left: 8px;
    }
    .pg-next {
        right: 8px;
    }
}

.pg-dots .swiper-pagination-bullet-active {
    background: #000;
}

/* Trending at optics */
.pg-video-carousel-section {
    padding: 0 0 60px 0;
    background: #fff;
}

.pg-carousel-wrapper {
    overflow: hidden;
    position: relative;
}

.pg-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

.pg-video-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
}

.pg-video-box {
    position: relative;
    line-height: 0;
    font-size: 0;
    background: #000;
    aspect-ratio: 9/16;
}

.pg-video-box video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pg-video-content {
    padding: 12px 15px;
    background: #fff;
}

.pg-video-info {
    display: flex;
    justify-content: space-between;
    /* Pushes arrow to the far right */
    align-items: center;
}

/* Grouping Avatar + Text */
.pg-info-left-group {
    display: flex;
    align-items: center;
    gap: 10px;
    /* The 4px gap you requested */
}

.pg-corner-avatar {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    /* Slightly smaller radius for a square look */
    border: 1px solid #eee;
    overflow: hidden;
    flex-shrink: 0;
    /* Prevents image from squishing */
}

.pg-corner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pg-info-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Ensures text is left aligned */
}

.pg-product-title {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    line-height: 1.2;
}

.pg-product-price {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

/* The Arrow Icon on the right */
.pg-video-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: all 0.3s ease;
}

.pg-video-icon:hover {
    background: #000;
    color: #fff;
}

.pg-video-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: #111;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
}

.pg-video-nav-btn:hover {
    background: #111;
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.pg-video-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

@media (max-width: 768px) {
    .pg-video-nav-btn {
        width: 36px;
        height: 36px;
    }
}

.pg-video-prev {
    left: 20px;
}

.pg-video-next {
    right: 20px;
}

/* Product Page */
/* Vertical Gallery Logic */
/* Product Page - Gallery Styling */
.product-gallery-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.product-gallery-vertical .product-single-swiper,
.product-gallery-vertical .product-single-swiper .swiper-wrapper,
.product-gallery-vertical .product-single-swiper .swiper-slide {
    height: 100%;
}

.product-gallery-vertical .product-single-swiper {
    width: 100%;
    max-width: 100%;
    order: 1;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

.product-gallery-vertical .product-image {
    margin: 0 !important;
    height: 100%;
    background: transparent;
}

.product-gallery-vertical .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}

/* Zoom container styling */
.product-gallery-vertical .product-image .zoomImg {
    background-color: #fff;
}

.product-gallery-vertical .product-thumbs-wrap {
    width: 100%;
    order: 2;
    overflow: hidden;
    padding: 2px 0;
}

.product-gallery-vertical .product-thumbs {
    display: flex !important;
    flex-direction: row !important;
}

.product-gallery-vertical .product-thumb {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    margin-right: 10px;
    margin-bottom: 0 !important;
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-gallery-vertical .product-thumb.swiper-slide-thumb-active {
    border-color: #ff6b00;
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-gallery-vertical .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop Gallery (Side Thumbnails) */
@media (min-width: 992px) {
    .product-gallery-vertical {
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }

    .product-gallery-vertical .product-single-swiper {
        flex: 1;
        order: 2;
        max-width: calc(100% - 90px);
        aspect-ratio: 1 / 1;
    }

    .product-gallery-vertical .product-single-swiper .swiper-wrapper {
        height: 100%;
    }

    .product-gallery-vertical .product-single-swiper .swiper-slide {
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-gallery-vertical .product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-gallery-vertical .product-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .product-gallery-vertical .product-thumbs-wrap {
        width: 80px;
        order: 1;
        overflow: hidden;
    }

    .product-gallery-vertical .product-thumbs {
        flex-direction: column !important;
    }

    .product-gallery-vertical .product-thumb {
        margin-right: 0;
        margin-bottom: 10px !important;
        width: 100%;
        height: auto !important;
    }
}

/* Metadata & Price */
.product-meta {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 0.3rem;
}

.product-categories,
.product-sku {
    margin-bottom: 0.1rem;
}

.product-category a {
    color: #333;
    font-weight: 500;
}

.product-price {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.old-price {
    font-size: 1.6rem;
    color: #999;
    text-decoration: line-through;
    margin-left: 1rem;
}

/* Swatches */
.size-tag {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0 8px 0 0;

    /* Default State */
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid transparent;
}

/* Hover State */
.size-tag:hover {
    background-color: #e0e0e0;
}

/* The "Double Ring" Active State */
.size-tag.active {
    background-color: #111;
    color: #fff;
    border: 2px solid #111;
    padding: 3px;
    background-clip: content-box;
    font-size: 11px;
}
.pg-standard-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    width: 100px;
    min-width: 100px;
    flex-shrink: 0;
    margin-right: 10px;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.color-filter.color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    margin-bottom: 4px;
    border: 1px solid #ddd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.color-filter.color:hover {
    transform: scale(1.1);
}

.color-filter.color.active {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #111;
}

/* Remove bottom sticky bar padding */
.main {
    padding-bottom: 10px;
}

/* Tighten divider spacing */
.product-divider {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Reduce spacing on variations */
.product-single .product-form {
    margin-bottom: 0.3rem;
    padding-bottom: 0;
}

.product-variation-form label {
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
}

/* Main Image Navigation and Additional UI */
.product-gallery-vertical .swiper-button-next,
.product-gallery-vertical .swiper-button-prev {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
}

.product-gallery-vertical:hover .swiper-button-next,
.product-gallery-vertical:hover .swiper-button-prev {
    opacity: 1;
}

.product-gallery-vertical .swiper-button-next:hover,
.product-gallery-vertical .swiper-button-prev:hover {
    background: #ff6b00;
    color: #fff;
}

.product-gallery-vertical .swiper-button-next::after,
.product-gallery-vertical .swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
}

/* Video Slide in Main */
.product-single-swiper .mm-video-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.video-container {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .product-gallery-inner {
        gap: 10px;
    }

    .vertical-thumbs {
        width: 60px;
        min-width: 60px;
    }

    .vertical-thumbs .product-thumb {
        width: 55px;
        height: 55px;
    }

    .product-main-image {
        max-width: calc(100% - 70px);
    }

    .product-main-image .product-image img {
        max-height: 450px;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .product-gallery-vertical {
        flex-direction: column !important; /* Main image on top, thumbs below */
        gap: 8px !important;
    }

    .product-gallery-vertical .product-single-swiper {
        width: 100%;
        max-width: 100%;
        order: 1;
        aspect-ratio: 8 / 9; /* Matches image ratio 800x900 */
    }

    .product-gallery-vertical .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-gallery-vertical .product-thumbs-wrap {
        width: 100%;
        order: 2;
        padding-top: 5px;
    }

    .product-gallery-vertical .product-thumb {
        width: 60px;
        height: 60px;
        margin-right: 8px;
    }
}

/* Logo Responsiveness */
.header .logo img {
    height: auto;
    /* Ensures aspect ratio is maintained when width changes */
}

@media (max-width: 991px) {
    .header-middle .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
    }

    .header-left {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .header-right {
        flex: 1;
        justify-content: flex-end;
        display: flex;
        align-items: center;
    }

    .header-left .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        z-index: 10;
    }
}

@media (max-width: 575px) {
    .header .logo img {
        width: 100px;
        height: auto;
    }
}

/* --- 4. Premium Mobile Search Overlay --- */
.premium-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10001;
    display: none;
    flex-direction: column;
    animation: slideInUp 0.3s ease-out;
    padding: 0 4px;
    box-sizing: border-box;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.search-overlay-header {
    width: 100%;
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.close-overlay-btn {
    border: none;
    background: none;
    font-size: 20px;
    margin-right: 15px;
    color: #333;
}

.overlay-search-input-wrap {
    flex: 1;
    position: relative;
}

.overlay-search-input-wrap input {
    width: 100%;
    border: 1px solid #e1e1e1;
    /* Added subtle border */
    background: #f4f4f4;
    padding: 10px 40px 10px 15px;
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.overlay-search-input-wrap input:focus {
    border-color: #ff6b00;
    background: #fff;
}

.overlay-search-submit {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #666;
}

.search-overlay-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.search-section {
    margin-bottom: 30px;
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-circle-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: none;
}

.category-circle-grid::-webkit-scrollbar {
    display: none;
}

.category-circle-item {
    text-align: center;
    flex-shrink: 0;
    width: 80px;
}

.category-circle-item .image-wrap {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 8px;
    border: 1px solid #eee;
    background: #f9f9f9;
}

.category-circle-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-circle-item span {
    font-size: 12px;
    color: #333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pill {
    padding: 8px 16px;
    background: #f0f2f5;
    border-radius: 50px;
    font-size: 13px;
    color: #444;
    transition: all 0.2s;
    text-decoration: none;
}

.pill:hover {
    background: #e4e6e9;
    color: #222;
}

/* Live Search Results */
.live-search-results .results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    text-decoration: none;
}

.search-result-item .item-img {
    width: 65px;
    height: 65px;
    border-radius: 8px;
    object-fit: contain;
    margin-right: 15px;
    background: #f9f9f9;
    padding: 5px;
}

.search-result-item .item-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
    color: #333;
    font-weight: 500;
}

.search-result-item .item-info .price {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

/* Horizontal Scroll Utilities */
.horizontal-scroll-wrap {
    margin: 0 -20px;
    /* Offset the parent padding */
    padding: 0 20px;
}

.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 12px;
    padding-bottom: 10px;
    scrollbar-width: none;
    /* Hide for Firefox */
}

.horizontal-scroll::-webkit-scrollbar {
    display: none;
    /* Hide for Chrome/Safari */
}

/* Recent Pill Styling */
.recent-pill {
    display: inline-flex;
    align-items: center;
    background: #f4f4f4;
    padding: 6px 14px;
    border-radius: 50px;
    text-decoration: none;
}

.recent-pill span {
    font-size: 13px;
    color: #333;
    margin-right: 8px;
}

.recent-pill .remove-recent {
    font-size: 10px;
    color: #999;
}

.discover-pills.horizontal-scroll {
    flex-wrap: nowrap;
    /* Force single line */
}

.header-search-mobile .search-input-group i {
    z-index: 11;
}

.header-search-mobile {
    width: 100%;
    /* Note: Sticky is handled by parent .header element on mobile */
    /* Do NOT set position: sticky here - it causes double-sticky issues */
    z-index: 1000;
    background: #fff;
    transition:
        transform 0.3s ease,
        top 0.3s ease;
    border-top: none;
}

/* Subtle shadow only around the input field when stuck */
.header-search-mobile.is-stuck .search-input-group {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-radius: 50px;
}

.header-search-mobile .container-fluid {
    width: 100%;
    max-width: none;
    padding: 0 10px;
    /* Give it some horizontal breathing room for floating feel */
}

.header-search-mobile .input-wrapper {
    width: 100%;
    max-width: none;
}

.header-search-mobile .search-input-group {
    width: 100%;
    background: #fff;
    /* White background for the field itself */
    border-radius: 50px;
    border: 1px solid #e1e1e1;
    /* Base subtle border */
    transition: all 0.3s ease;
}

/* Bright brand border when active or scrolling */
.header-search-mobile.is-stuck .search-input-group,
.header-search-mobile .search-input-group:focus-within {
    border-color: #ff6b00;
    /* Subtle orange brand color */
}

.header-search-mobile input {
    background: #fff;
    /* Force white background for floating field */
}

/* Container: Optimized spacing for a tighter layout */
.product-form.pg-product-form-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Form wrapper */
.pg-product-qty-form {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Label: Softened the color and refined typography */
.pg-label {
    font-size: 12px;
    color: #888;
    margin-right: 15px;
    margin-bottom: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Input Group: Explicit height to match button exactly */
.pg-input-group {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 25px;
    padding: 0 5px;
    gap: 10px;
    height: 44px;
    /* Matches .btn-cart height */
    border: 1px solid #e9ecef;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.pg-input-group:focus-within {
    border-color: #111;
}

/* Buttons: Minimalist approach with better hover states */
.pg-input-group button {
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 0;
    line-height: 1;
}

.pg-input-group button:hover {
    background-color: #111;
    color: #fff;
    border-color: #111;
}

/* Quantity Input: Clean typography */
.pg-quantity {
    width: 40px;
    background: transparent;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    outline: none;
    font-family: inherit;
    line-height: 44px;
    /* Ensure vertical centering */
}

/* Add to Cart Button: Made it feel more "actionable" and bold */
.pg-product-form-container .btn-cart {
    flex-grow: 1;
    max-width: 280px;
    height: 44px;
    padding: 0px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background-color: #ff6b00;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-sizing: border-box;
    margin: 0;
}

.pg-product-form-container .btn-cart:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pg-product-form-container .btn-cart:active {
    transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .product-form.pg-product-form-container {
        gap: 12px;
        flex-direction: row;
        /* Keeping it on one line as per your request */
    }

    .pg-label {
        display: none;
        /* Hide label on mobile for more space */
    }

    .pg-product-form-container .btn-cart {
        padding: 0px;
        font-size: 12px;
    }
}

/* Product Tabs Minimalist Refinement */
.product-tabs.tab {
    border: none !important;
}

.product-tabs .nav-tabs {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex;
    gap: 40px;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.product-tabs .nav-item {
    border: none !important;
}

.product-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    transition: color 0.3s ease;
}

.product-tabs .nav-link:hover {
    color: #111;
}

.product-tabs .nav-link.active {
    color: #111 !important;
}

.product-tabs .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ff6b00;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.product-tabs .nav-link.active::after {
    transform: scaleX(1);
}

.product-tabs .tab-content {
    border: none !important;
    padding: 20px 0 !important;
}

.hidden-slide,
#productImageGallery .swiper-slide.hidden-slide,
#productThumbGallery .swiper-slide.hidden-slide {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ========================================
   PRODUCT DETAILS & SPECIFICATIONS
   ======================================== */

/* Product Tabs Container */
.product-tabs {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Tab Navigation */
.product-tabs .nav-tabs {
    border-bottom: 1px solid #eee;
    padding: 0 20px;
    background: #fafafa;
    gap: 0;
}

.product-tabs .nav-tabs .nav-item {
    margin-bottom: 0;
}

.product-tabs .nav-tabs .nav-link {
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    transition: all 0.2s ease;
    border-radius: 0;
}

.product-tabs .nav-tabs .nav-link:hover {
    color: #ff6a00;
    background: transparent;
}

.product-tabs .nav-tabs .nav-link.active {
    color: #ff6a00;
    border-bottom-color: #ff6a00;
    background: transparent;
}

/* Tab Content */
.product-tabs .tab-content {
    padding: 30px;
}

.product-tabs .tab-pane {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Titles */
.product-tabs .title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
}

.product-tabs .title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #ff6a00;
}

/* Product Description */
.product-description {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}

.product-description p {
    margin-bottom: 15px;
}

.product-description ul,
.product-description ol {
    padding-left: 20px;
    margin-bottom: 15px;
}

.product-description li {
    margin-bottom: 8px;
    position: relative;
}

/* Technical Specifications */
.product-specifications {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;
}

.specifications-list {
    margin: 0;
    padding: 0;
}

.specifications-list li {
    padding: 12px 0;
    padding-left: 28px;
    border-bottom: 1px solid #eee;
    position: relative;
    font-size: 14px;
    color: #444;
}

.specifications-list li:last-child {
    border-bottom: none;
}

.specifications-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 12px;
    color: #ff6a00;
    font-weight: bold;
    font-size: 14px;
}

/* Specification Tables */
.product-description table,
.product-specifications table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.product-description table th,
.product-specifications table th {
    background: #333;
    color: #fff;
    font-weight: 600;
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-description table td,
.product-specifications table td {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #444;
}

.product-description table tr:nth-child(even),
.product-specifications table tr:nth-child(even) {
    background: #f8f8f8;
}

.product-description table tr:last-child td,
.product-specifications table tr:last-child td {
    border-bottom: none;
}

.product-description table td:first-child,
.product-specifications table td:first-child {
    font-weight: 600;
    color: #333;
    width: 35%;
    background: #fafafa;
}

/* Key Features List */
.product-description h4,
.product-description h5,
.product-description h6 {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 25px 0 15px 0;
}

.product-description strong {
    color: #333;
}

/* Product Features Card */
.product-features {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    padding: 25px !important;
    border: 1px solid #eee;
}

.product-features h5 {
    font-size: 16px;
    color: #222;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.product-features .feature-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.product-features .feature-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.product-features .feature-item i {
    width: 40px !important;
    height: 40px;
    background: #fff5f0;
    color: #ff6a00 !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px !important;
    font-size: 16px !important;
}

.product-features .feature-item strong {
    font-size: 14px;
    color: #333;
    display: block;
    margin-bottom: 2px;
}

.product-features .feature-item p {
    font-size: 12px;
    color: #888;
}

/* Responsive */
@media (max-width: 991px) {
    .product-tabs .tab-content {
        padding: 20px;
    }

    .product-tabs .nav-tabs .nav-link {
        padding: 12px 16px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .product-tabs .nav-tabs {
        padding: 0 10px;
    }

    .product-tabs .nav-tabs .nav-link {
        padding: 10px 12px;
        font-size: 12px;
    }

    .product-tabs .tab-content {
        padding: 15px;
    }

    .product-tabs .title {
        font-size: 16px;
    }

    .product-description table td,
    .product-specifications table td,
    .product-description table th,
    .product-specifications table th {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Size label - Only show "Size:" */
.product-size-swatch > label {
    font-size: 0 !important;
}

.product-size-swatch > label::before {
    content: "Size:";
    font-size: 14px;
    color: #333;
}

/* Full Width Add to Cart Button */
.btn-cart.w-100 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    background: #ff6a00;
    border: none;
    color: #fff;
    transition: all 0.25s ease;
}

.btn-cart.w-100:hover {
    background: #e55d00;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.3);
}

.btn-cart.w-100 i {
    font-size: 18px;
}

/* ========================================
   PRODUCT NAVIGATION (Inline with Breadcrumb)
   ======================================== */

/* Make breadcrumb nav a flex container */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.breadcrumb-nav .breadcrumb {
    margin: 0;
}

/* Product Nav - Inline style */
.product-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-nav-item {
    position: relative;
}

/* NAV BUTTON */
.nav-btn {
    width: 34px;
    height: 34px;
    background: #f0f0f0;
    color: #999;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
}

.nav-btn:hover {
    background: #ff6a00;
    color: #fff;
}

.nav-btn i {
    line-height: 1;
}

/* POPUP CARD - Vertical Layout like reference */
.product-nav-popup {
    position: absolute;
    top: calc(100% + 15px);
    width: 140px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}

/* Arrow pointer pointing to button - Triangle at top */
.product-nav-popup::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.06));
}

/* POPUP POSITIONING */
.product-nav-item.prev .product-nav-popup {
    left: 50%;
    transform: translateX(-50%);
}

.product-nav-item.next .product-nav-popup {
    right: 50%;
    transform: translateX(50%);
}

.product-nav-item.next .product-nav-popup::before {
    left: 50%;
    right: auto;
}

/* IMAGE - Larger and centered */
.product-nav-popup img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #fafafa;
}

/* TEXT */
.product-nav-popup .product-name {
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* SHOW ON HOVER */
.product-nav-item:hover .product-nav-popup {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 12px);
}

/* MOBILE */
@media (max-width: 576px) {
    .breadcrumb-nav {
        justify-content: center;
    }

    .breadcrumb-nav .breadcrumb {
        width: 100%;
        justify-content: center;
    }

    .product-nav {
        width: 100%;
        justify-content: center;
    }

    .product-nav-popup {
        display: none !important;
    }

    .nav-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* --- 5. Horizontal Scroll Carousel (New Home Sections) --- */
/* --- 5. Horizontal Scroll Carousel (REFACTORED for 4-item Full Width Grid) --- */
.pg-scroll-area {
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
    /* Disable scroll */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.pg-scroll-area::-webkit-scrollbar {
    display: none;
}

.pg-reveal-items {
    width: 100%;
}

.pg-product-list {
    display: flex;
    flex-wrap: nowrap;
    /* Keep them in one line if possible, or wrap on mobile if needed */
    gap: 15px;
    width: 100%;
}

.pg-product-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background: #fff;
    border-radius: 8px;
    min-width: 0;
}

/* Larger card variant for Men's section - handled same as others now */
.pg-product-card--large {
    flex: 1;
}

/* Mobile Responsiveness for Grid */
@media (max-width: 767px) {
    .pg-product-list {
        flex-wrap: wrap;
        /* Wrap on mobile for visibility? Or grid 2x2? */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 Grid on Mobile */
    }

    .pg-product-card {
        width: 100%;
        /* Fill grid cell */
    }
}

@media (min-width: 768px) {
    .pg-product-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 4 Columns on Desktop */
    }
}

@media (min-width: 576px) {
    .pg-product-card--large {
        flex: 0 0 400px;
    }
}

@media (min-width: 992px) {
    .pg-product-card--large {
        flex: 0 0 450px;
    }
}

/* Wide Scroll Area Helper */
.pg-scroll-area--wide {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    width: calc(100% + 30px);
}

/* Card Image Area */
.pg-product-card__figure {
    position: relative;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f4f4f4;
    aspect-ratio: 1 / 1;
    /* Square images like inspo */
}

.pg-product-card__figure a {
    display: block;
    width: 100%;
    height: 100%;
}

.pg-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Secondary Image Hover Effect */
.pg-product-card--show-secondary-media .pg-product-card__image--secondary {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
}

.pg-product-card:hover .pg-product-card__image--secondary {
    opacity: 1;
}

/* Wishlist / Action Icons (Optional overlay) */
.pg-product-action-horizontal {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-product-card:hover .pg-product-action-horizontal {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pg-product-action-horizontal .btn-wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 50%;
    color: #000;
    font-size: 17px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    border: none;
    outline: none;
}

.pg-product-action-horizontal .btn-wishlist:hover {
    transform: scale(1.2);
    background-color: #fff;
    color: #000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.pg-product-action-horizontal .btn-wishlist:active {
    transform: scale(0.85);
    color: #e86c45; /* Orange theme color */
    transition-duration: 0.1s;
}

/* Card Info */
.pg-product-card__info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
    text-align: left;
}

.pg-product-card__title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.pg-product-card__title a {
    color: #000;
    font-weight: 600;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pg-price-list {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.pg-text-on-sale {
    color: #000;
    font-weight: 700;
}

.pg-text-subdued {
    color: #888;
    text-decoration: line-through;
    font-size: 13px;
}

/* EMI Widget Mockup */
.pg-snap-widget {
    margin-top: 6px;
    font-size: 11px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.pg-snap-logo {
    width: 14px;
    height: 14px;
}

.pg-snap-blue {
    color: #000;
    font-weight: 700;
}

.pg-snap-link {
    color: #7000ff;
    font-size: 9px;
    margin-left: 4px;
}

/* Add To Cart Button */
.pg-product-card__add-to-cart {
    margin-top: auto;
}

.pg-atc-button {
    width: 100%;
    padding: 10px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
}

.pg-atc-button:hover {
    background: #333;
}

/* Section Title Wrapper */
.pg-section-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pg-section-title {
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.pg-view-all-btn {
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    color: #000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pg-product-card {
        flex: 0 0 200px;
    }

    .pg-scroll-area {
        padding: 0 15px;
        /* Add padding to sides so first/last items aren't flush */
    }
}

/* --- 6. Mobile Sticky Header --- */
@media (max-width: 991px) {
    /* 
     * Sticky header wrapper - uses the entire header as the sticky element
     * This ensures both the logo bar and search bar stick together
     * Using -webkit-sticky for iOS Safari compatibility
     */
    .header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0;
        z-index: 9999;
        background: #fff;
        width: 100%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        /* Ensure no overflow issues that can break sticky */
        overflow: visible;
    }

    /* Children should use static positioning relative to sticky parent */
    .header-middle {
        position: relative;
        background: #fff;
        z-index: 2;
    }

    .header-search-mobile {
        position: relative;
        background: #fff;
        z-index: 1;
        /* Reset any conflicting sticky positioning */
        top: auto;
    }

    /* Ensure the header-bottom (navigation) is hidden on mobile */
    .header-bottom {
        display: none;
    }
}

/* Fix for iOS Safari: Ensure page-wrapper doesn't break sticky */
@supports (-webkit-touch-callout: none) {
    .page-wrapper {
        overflow: visible !important;
    }

    .header {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Universal mobile sticky fix - addresses body overflow-x: hidden breaking sticky */
@media (max-width: 991px) {
    /* 
     * The body has overflow-x: hidden which can break position: sticky in some browsers.
     * We use clip + overflow: clip as an alternative that doesn't break sticky.
     * Fallback: overflow-x: clip if supported, else leave hidden for horizontal scroll prevention
     */
    body {
        /* Modern browsers: overflow: clip doesn't break sticky */
        overflow-x: clip;
        /* Ensure vertical overflow scrolls normally */
        overflow-y: visible;
    }

    html {
        /* Ensure html element doesn't create a scroll container that breaks sticky */
        overflow-x: clip;
        overflow-y: visible;
    }

    /* Ensure main content area scrolls properly */
    .main {
        overflow: visible;
    }
}

/* --- 7. Mobile Menu Z-Index Fix --- */
.mobile-menu-wrapper {
    position: fixed !important;
    z-index: 20000 !important;
    left: 0;
    top: 0;
    width: 0;
    /* Default width 0 to not block clicks */
    height: 100%;
}

.mmenu-active .mobile-menu-wrapper {
    width: 100% !important;
    /* Expansion when active */
}

/* Container needs to be higher */
.mobile-menu-container {
    z-index: 20002 !important;
    position: relative !important;
    /* Relative to wrapper if wrapper is fixed */
}

.mobile-menu-overlay {
    z-index: 20001 !important;
}

.mobile-menu-close {
    z-index: 20003 !important;
}

/* --- Image Links Grid (User Request - Refactored V2) --- */
.top-categories-wrapper .title {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.image-links__grid {
    display: flex;
    gap: 15px;
    padding: 10px 15px 30px 15px;
    /* Side padding for content */
    margin-bottom: 0px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    flex-wrap: nowrap;

    /* Edge-to-edge scrolling reset if inside a container with padding */
    margin-left: -15px;
    margin-right: -15px;
}

/* Hide scrollbar for Chrome/Safari/Opera */
.image-links__grid::-webkit-scrollbar {
    display: none;
}

.link-tile {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    /* Mobile: Reduced size to show partial next item (peek effect) */
    flex: 0 0 130px;
    max-width: 130px;
}

@media (min-width: 400px) {
    .link-tile {
        flex: 0 0 150px;
        max-width: 150px;
    }
}

@media (min-width: 576px) {
    .link-tile {
        flex: 0 0 180px;
        max-width: 180px;
    }
}

@media (min-width: 768px) {
    .image-links__grid {
        justify-content: center;
        gap: 20px;
        overflow-x: hidden;
        /* Disable scrolling on desktop */
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
        padding: 0 5px;
    }

    .link-tile {
        flex: 1;
        /* Distribute evenly */
        max-width: none;
    }
}

/* Removed hover zoom as per user request */
.link-tile .link-tile__image {
    transition: none;
}

.link-tile__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0) 50%
    );
    z-index: 2;
    transition: background 0.3s ease;
}

/* Removed hover background overlay as per user request */
.link-tile:hover .link-tile__content {
    background: transparent;
}

.link-tile__title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateY(5px);
    transition: transform 0.3s ease;
}

.link-tile:hover .link-tile__title {
    transform: translateY(0);
}

.link-tile__subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.link-tile:hover .link-tile__subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* --- Safety: Ensure Categories Section is Visible --- */
.top-categories-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Sticky Footer Mobile Fix --- */
@media (max-width: 767px) {
    .sticky-footer.sticky-content.fix-bottom {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        display: flex !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        padding-bottom: env(safe-area-inset-bottom);
        /* Safe area for iPhone X+ */
    }
}

/* --- Sticky Footer Badge Positioning --- */
.sticky-footer .sticky-link i {
    position: relative;
    overflow: visible !important;
    /* Ensure badge can go outside */
}

.sticky-footer .sticky-link .image-count {
    position: absolute;
    top: -8px;
    right: -12px;
    background: #ff6b00;
    /* Theme Orange */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    padding: 0 2px;
    display: flex;
    /* Centering text */
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Brand Grid Banner Section --- */
.pg-brand-banner-section {
    padding: 60px 0;
    background-color: #f8fbff;
    /* Very light blue background to match inspo */
}

.pg-brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1300px;
    margin: 0 auto;
}

.pg-brand-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    transition: transform 0.4s ease;
}

.pg-brand-card:hover {
    transform: translateY(-5px);
}

/* Left Large Column */
.pg-brand-left {
    height: 100%;
}

.pg-brand-left .pg-card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.pg-vertical-text {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 60px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.1);
    letter-spacing: 15px;
    pointer-events: none;
    text-transform: uppercase;
}

/* Right Column */
.pg-brand-right-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Deal Card (Top Right) */
.pg-deal-card {
    background: #2d3440;
    /* Dark navy from inspo */
    color: #fff;
    display: flex;
    min-height: 400px;
}

.pg-deal-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.pg-deal-badge {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 5px;
}

.pg-deal-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
    color: #fff;
}

.pg-deal-text {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 300px;
    margin-bottom: 30px;
}

.pg-deal-btn {
    background: #fff;
    color: #2d3440;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    transition: all 0.3s ease;
}

.pg-deal-btn:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.pg-deal-img-box {
    flex: 1;
    position: relative;
}

.pg-deal-img-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.pg-zigzag-arrow {
    position: absolute;
    top: 25%;
    left: -20px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.8);
}

.pg-faint-text {
    position: absolute;
    bottom: 30px;
    left: 40px;
    font-size: 50px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 10px;
}

/* Glasses Card (Bottom Right) */
.pg-glasses-card {
    min-height: 250px;
}

.pg-glasses-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsiveness */
@media (max-width: 992px) {
    .pg-brand-grid {
        grid-template-columns: 1fr;
    }

    .pg-vertical-text {
        font-size: 40px;
        right: 15px;
    }
}

@media (max-width: 576px) {
    .pg-brand-grid {
        gap: 16px;
    }

    /* 1. Instagram Story Style for Left Banner */
    .pg-brand-left {
        aspect-ratio: 9/16;
        height: auto;
        max-height: 550px;
        margin: 0 auto;
        width: 100%;
        border: 2px solid #fff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        border-radius: 12px;
    }

    .pg-vertical-text {
        font-size: 30px;
        right: 10px;
        letter-spacing: 10px;
    }

    /* 2. Overlaid Men's Deal Card */
    .pg-deal-card {
        display: flex;
        flex-direction: column;
        min-height: 450px;
        position: relative;
    }

    .pg-deal-img-box {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    .pg-deal-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        padding: 40px 20px 30px;
        text-align: left !important;
        align-items: flex-start !important;
        background: linear-gradient(
            to top,
            rgba(45, 52, 64, 0.9) 0%,
            rgba(45, 52, 64, 0.4) 60%,
            transparent 100%
        );
    }

    .pg-deal-badge {
        display: block !important;
        font-size: 20px;
        /* Slightly smaller for overlay */
        font-weight: 700;
        margin-bottom: 5px;
        color: #fff;
    }

    .pg-deal-title {
        font-size: 32px;
        margin-bottom: 25px;
        text-align: left;
    }

    /* Hide extra elements */
    .pg-deal-text,
    .pg-zigzag-arrow,
    .pg-faint-text {
        display: none !important;
    }

    .pg-deal-btn {
        width: fit-content !important;
        /* Button should fit text when left aligned */
        min-width: 160px;
        padding: 12px 25px;
        font-size: 14px;
        text-align: center;
    }

    /* 3. Third image (Perfect as is) */
    .pg-glasses-card {
        min-height: 200px;
    }
}

/* =====================================   RS OFFER SECTION – FULL CSS ===================================== */
.rs-offer-section {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

/* ---------- ROW LAYOUT ---------- */
.rs-offer-section .rs-offer-row {
    display: flex;
    gap: 24px;
    align-items: stretch; /* 👈 ensures same height */
}

/* ---------- LEFT & RIGHT WIDTH ---------- */
.rs-offer-section .rs-offer-left {
    width: 55%;
}

.rs-offer-section .rs-offer-right {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ---------- COMMON BANNER ---------- */
.rs-offer-section .rs-offer-banner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #eaeaea;
}

/* ---------- IMAGE RESET ---------- */
.rs-offer-section .rs-offer-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =====================================   LEFT IMAGE – 9 : 16 RATIO ===================================== */
.rs-offer-section .rs-banner-left {
    width: 100%;
    aspect-ratio: 9 / 16; /* 🔥 KEY */
}

/* =====================================   RIGHT IMAGES – HEIGHT SYNC ===================================== */
/* Top image = 60% of left height */
.rs-offer-section .rs-banner-top {
    height: 60%;
    margin-bottom: 24px;
}

/* Bottom image = 40% of left height */
.rs-offer-section .rs-banner-bottom {
    height: 40%;
}

/* ---------- OPTIONAL BACKGROUNDS ---------- */
.rs-offer-section .rs-banner-top {
    background: #2e3642;
}

.rs-offer-section .rs-banner-bottom {
    background: #f4f4f4;
}

/* =====================================   RESPONSIVE ===================================== */
@media (max-width: 1199px) {
    .rs-offer-section .rs-offer-left {
        width: 52%;
    }
    .rs-offer-section .rs-offer-right {
        width: 48%;
    }
}

@media (max-width: 991px) {
    .rs-offer-section .rs-offer-row {
        flex-direction: column;
    }
    .rs-offer-section .rs-offer-left,
    .rs-offer-section .rs-offer-right {
        width: 100%;
    }
    .rs-offer-section .rs-offer-right {
        height: auto;
    }
    .rs-offer-section .rs-banner-top,
    .rs-offer-section .rs-banner-bottom {
        height: auto;
        margin-bottom: 16px;
    }
    .rs-offer-section .rs-banner-bottom {
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .rs-offer-section {
        padding: 10px 0;
    }
    .rs-offer-section .rs-offer-row {
        gap: 16px;
    }
    .rs-offer-section .rs-offer-banner {
        border-radius: 12px;
    }
}

/* Hide Swiper Pagination on Mobile/Tablet, show on Desktop */
.swiper-pagination,
.swiper-pagination-bullets,
.pg-dots,
.pg-video-dots {
    display: none !important;
}

@media (min-width: 992px) {
    .swiper-pagination,
    .swiper-pagination-bullets,
    .pg-dots,
    .pg-video-dots {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .banner-fashion {
        min-height: 250px; /* Increased height in mobile */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .banner-fashion .banner-content {
        padding: 20px !important;
        width: 100%;
    }

    .banner-fashion .content-right {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .banner-fashion .banner-info {
        margin-right: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 15px;
    }

    .banner-fashion .banner-title {
        font-size: 20px !important;
    }

    .banner-fashion p {
        font-size: 14px;
        white-space: normal !important; /* Allow wrapping on mobile */
    }

    .banner-fashion .btn {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0 !important;
    }
}
/* ========================================
   HEADER & STICKY FOOTER CUSTOMIZATIONS
   ======================================== */

/* Cart Count Badge Color Update */
.cart-count {
    background-color: #ec7a5c !important;
}