/* ==========================================================================
   NIKKY SHOP - Watches Store Minimalist Design V2
   Clean, airy, geometric aesthetic inspired by Shopkeeper Watches template
   ========================================================================== */

/* ==========================================================================
   1. Global Styles & Typography
   ========================================================================== */

body.nikky-theme {
    font-family: var(--nikky-font-body);
    background-color: var(--nikky-white);
    color: var(--nikky-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--nikky-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nikky-charcoal);
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 6vw, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
}

p,
body {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
}

::selection {
    background-color: var(--nikky-charcoal);
    color: var(--nikky-white);
}

a {
    transition: var(--nikky-transition);
    text-decoration: none;
}

/* ==========================================================================
   2. Header & Navigation - Clean Horizontal Layout
   ========================================================================== */

/* Header container - full width with proper spacing */
.nikky-theme .site-header,
.nikky-theme .top-headers-wrapper,
.nikky-theme #masthead {
    background-color: var(--nikky-white) !important;
    transition: all 0.4s ease;
    border-bottom: 1px solid #eee;
}

/* Scrolled header */
.nikky-theme.scrolled .site-header,
.nikky-theme.sticky_header.scrolled .site-header {
    background-color: var(--nikky-white) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Main header row - flex layout */
.nikky-theme .site-header .row,
.nikky-theme #masthead .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Logo area */
.nikky-theme .site-logo,
.nikky-theme .logo-wrapper {
    flex: 0 0 auto;
}

/* Navigation wrapper - centered */
.nikky-theme .primary-navigation,
.nikky-theme .main-navigation,
.nikky-theme #site-navigation-wrap {
    flex: 1;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Navigation menu - horizontal with spacing */
.nikky-theme .primary-navigation > ul,
.nikky-theme .main-navigation > ul,
.nikky-theme #site-navigation-wrap ul.menu,
.nikky-theme nav ul.menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Menu items - inline */
.nikky-theme .primary-navigation > ul > li,
.nikky-theme .main-navigation > ul > li,
.nikky-theme #site-navigation-wrap ul.menu > li,
.nikky-theme nav ul.menu > li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Navigation links - clean style */
.nikky-theme .primary-navigation > ul > li > a,
.nikky-theme .main-navigation > ul > li > a,
.nikky-theme #site-navigation-wrap ul li a,
.nikky-theme nav ul.menu > li > a {
    color: var(--nikky-charcoal) !important;
    font-family: var(--nikky-font-heading);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 20px 0;
    margin: 0 !important;
    position: relative;
    white-space: nowrap;
}

/* Underline on hover */
.nikky-theme .primary-navigation > ul > li > a::after,
.nikky-theme .main-navigation > ul > li > a::after,
.nikky-theme nav ul.menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--nikky-charcoal);
    transition: width 0.3s ease;
}

.nikky-theme .primary-navigation > ul > li > a:hover::after,
.nikky-theme .primary-navigation > ul > li.current-menu-item > a::after,
.nikky-theme nav ul.menu > li > a:hover::after,
.nikky-theme nav ul.menu > li.current-menu-item > a::after {
    width: 100%;
}

.nikky-theme .main-navigation > ul > li.current-menu-item > a {
    font-weight: 500 !important;
}

/* Header icons - minimalist */
.nikky-theme .site-tools,
.nikky-theme .header-icons {
    display: flex;
    gap: var(--nikky-spacing-md);
    align-items: center;
}

.nikky-theme .site-tools a,
.nikky-theme .header-icons a,
.nikky-theme .site-tools i,
.nikky-theme .header-icons i {
    color: var(--nikky-charcoal) !important;
    font-size: 18px;
    transition: opacity var(--nikky-transition);
}

.nikky-theme .site-tools a:hover,
.nikky-theme .header-icons a:hover {
    opacity: 0.6;
}

/* Cart count badge - simple */
.nikky-theme .shopping-bag-items-number,
.nikky-theme .cart-count {
    background-color: var(--nikky-charcoal) !important;
    color: var(--nikky-white) !important;
    font-size: 10px;
    font-weight: 500;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ==========================================================================
   3. Hero Section - High Contrast Layout
   ========================================================================== */

.nikky-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--nikky-charcoal);
    padding: var(--nikky-spacing-xl);
    overflow: hidden;
}

.nikky-hero__background {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
}

.nikky-hero__content {
    position: relative;
    z-index: 10;
    max-width: 600px;
}

.nikky-hero__tagline {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--nikky-spacing-sm);
}

.nikky-hero__title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--nikky-white);
    margin-bottom: var(--nikky-spacing-md);
}

.nikky-hero__title span {
    font-size: clamp(3.5rem, 10vw, 7rem);
    display: block;
}

.nikky-hero__subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--nikky-spacing-lg);
    line-height: 1.6;
}

.nikky-hero__buttons {
    display: flex;
    gap: var(--nikky-spacing-md);
    flex-wrap: wrap;
}

/* ==========================================================================
   4. Buttons - Minimalist Rectangular
   ========================================================================== */

.nikky-btn,
.nikky-theme .button,
.nikky-theme button[type="submit"],
.nikky-theme input[type="submit"],
.nikky-theme .add_to_cart_button,
.nikky-theme .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    font-family: var(--nikky-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--nikky-transition);
}

/* Primary button - solid */
.nikky-btn--primary,
.nikky-theme .single_add_to_cart_button {
    background-color: var(--nikky-white);
    color: var(--nikky-charcoal) !important;
}

.nikky-btn--primary:hover,
.nikky-theme .single_add_to_cart_button:hover {
    background-color: var(--nikky-light-grey);
}

/* Secondary button - outlined */
.nikky-btn--secondary {
    background-color: transparent;
    color: var(--nikky-white) !important;
    border: 1px solid var(--nikky-white);
}

.nikky-btn--secondary:hover {
    background-color: var(--nikky-white);
    color: var(--nikky-charcoal) !important;
}

/* Dark variant */
.nikky-btn--dark {
    background-color: var(--nikky-charcoal);
    color: var(--nikky-white) !important;
}

.nikky-btn--dark:hover {
    background-color: var(--nikky-accent);
}

/* ==========================================================================
   5. Product Cards - Custom Nikky Design
   ========================================================================== */

/* Product Grid Container */
.nikky-theme .products,
.nikky-theme ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 40px 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.related.products ul.products {
    display: flex !important;
}

/* Individual Product Card */
.nikky-theme .products .product,
.nikky-theme ul.products li.product,
.nikky-theme .nikky-product-card,
body.archive #products-grid li,
.related.products #products-grid li {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: transform 0.3s ease;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.nikky-theme .products .product:hover,
.nikky-theme ul.products li.product:hover,
.nikky-theme .nikky-product-card:hover {
    transform: translateY(-5px);
}

/* Product Card Inner Wrapper */
.nikky-product-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nikky-product-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Product Image Wrapper - Fixed Aspect Ratio */
.nikky-product-card__image-wrapper,
.nikky-theme .product .product_thumbnail_wrapper,
.nikky-theme .product .product-image-wrapper,
.nikky-theme .product .attachment-woocommerce_thumbnail,
.nikky-theme .products .product .product_thumbnail_wrapper,
.nikky-theme ul.products li.product .product_thumbnail_wrapper {
    position: relative;
    width: 100% !important;
    aspect-ratio: 1 !important;
    overflow: hidden;
    background-color: #f5f5f5;
    margin-bottom: 15px !important;
}

.nikky-product-card__image-wrapper img,
.nikky-theme .product .product_thumbnail_wrapper img,
.nikky-theme .product .product-image-wrapper img,
.nikky-theme .product .attachment-woocommerce_thumbnail,
.nikky-theme .products .product img,
.nikky-theme ul.products li.product img,
.nikky-theme .products .product .wp-post-image,
.nikky-theme ul.products li.product .wp-post-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    transition: opacity 0.3s ease;
    display: block !important;
}

.nikky-theme .product:hover .product_thumbnail_wrapper img,
.nikky-theme .product:hover .product-image-wrapper img,
.nikky-product-card:hover .nikky-product-card__image-wrapper img {
    opacity: 0.85;
}

/* Product Content Area */
.nikky-product-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Product Title - Proper Width Control */
.nikky-product-card__title,
.nikky-theme .product .woocommerce-loop-product__title,
.nikky-theme .product h3,
.nikky-theme .product .product-title,
.nikky-theme .product h2 {
    color: var(--nikky-charcoal) !important;
    font-family: var(--nikky-font-heading);
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
}

/* Product Price */
.nikky-theme .product .price,
.nikky-theme .product .woocommerce-Price-amount {
    color: #666 !important;
    font-family: var(--nikky-font-heading);
    font-weight: 400 !important;
    font-size: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

.nikky-theme .product .price del {
    color: #999 !important;
    opacity: 0.7;
    margin-right: 8px;
}

.nikky-theme .product .price ins {
    color: var(--nikky-charcoal) !important;
    text-decoration: none;
    font-weight: 500;
}

/* Star Rating */
.nikky-theme .product .star-rating {
    font-size: 12px !important;
    margin: 0 0 8px 0 !important;
}

/* Product Actions Area */
.nikky-product-card__actions {
    margin-top: 12px;
}

/* Add to Cart Button - Always Visible */
.nikky-theme .products .product .add_to_cart_button,
.nikky-theme ul.products li.product .add_to_cart_button,
.nikky-theme .product .button.add_to_cart_button,
.nikky-theme .woocommerce .products .product .button {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    background-color: var(--nikky-charcoal) !important;
    color: var(--nikky-white) !important;
    border: 1px solid var(--nikky-charcoal) !important;
    padding: 12px 24px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    width: 100% !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    margin: 8px 0 0 0 !important;
    border-radius: 0 !important;
}

.nikky-theme .products .product .add_to_cart_button:hover,
.nikky-theme ul.products li.product .add_to_cart_button:hover,
.nikky-theme .product .button.add_to_cart_button:hover {
    background-color: var(--nikky-white) !important;
    color: var(--nikky-charcoal) !important;
    border-color: var(--nikky-charcoal) !important;
}

/* Product badges - minimal */
.nikky-badge,
.nikky-theme .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    padding: 6px 12px;
    font-family: var(--nikky-font-heading);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: var(--nikky-white);
    color: var(--nikky-charcoal);
    border-radius: 0;
}

/* ==========================================================================
   6. Single Product Page
   ========================================================================== */

.nikky-theme.woocommerce div.product .product_title {
    font-family: var(--nikky-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--nikky-charcoal);
    letter-spacing: -0.01em;
}

.nikky-theme.woocommerce div.product p.price {
    color: var(--nikky-charcoal) !important;
    font-family: var(--nikky-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
}

.nikky-theme.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--nikky-medium-grey);
    font-size: 15px;
    line-height: 1.7;
}

/* Quantity input */
.nikky-theme .quantity .qty {
    border: 1px solid var(--nikky-charcoal);
    border-radius: 0;
    font-family: var(--nikky-font-heading);
    font-weight: 400;
}

.nikky-theme .quantity .qty:focus {
    border-color: var(--nikky-charcoal);
    outline: none;
}

/* ==========================================================================
   7. Section Headers
   ========================================================================== */

.nikky-section-header {
    text-align: center;
    margin-bottom: var(--nikky-spacing-xl);
    padding: var(--nikky-spacing-xl) 0;
}

.nikky-section-header__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--nikky-charcoal);
    margin-bottom: 0;
}

.nikky-section-header__tagline {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nikky-medium-grey);
    margin-bottom: var(--nikky-spacing-sm);
}

/* ==========================================================================
   8. Footer - Centered & Minimal
   ========================================================================== */

.nikky-theme #site-footer,
.nikky-theme footer,
.nikky-theme .site-footer {
    background-color: var(--nikky-charcoal);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: 50px;
    padding: 0px 0 30px;
}

body.home #site-footer {
    margin-top: 0 !important;
}

.nikky-theme .site-footer-widget-area {
    background-color: var(--nikky-charcoal);
    padding: var(--nikky-spacing-xxl) 0 var(--nikky-spacing-xl);
}

.nikky-theme .site-footer-copyright-area {
    background-color: var(--nikky-charcoal);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--nikky-spacing-md) 0;
}

.nikky-theme .copyright_text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    letter-spacing: 0.05em;
}

/* Footer navigation - pipe separated */
.nikky-theme #site-footer .footer-navigation a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 var(--nikky-spacing-sm);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.nikky-theme #site-footer .footer-navigation a:last-child {
    border-right: none;
}

.nikky-theme #site-footer .footer-navigation a:hover {
    color: var(--nikky-white);
}

/* Social icons */
.nikky-theme .footer_socials_wrapper,
.nikky-theme .social-icons {
    display: flex;
    justify-content: center;
    gap: var(--nikky-spacing-md);
    margin-bottom: var(--nikky-spacing-md);
}

.nikky-theme .footer_socials_wrapper a,
.nikky-theme .social-icons a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    transition: var(--nikky-transition);
}

.nikky-theme .footer_socials_wrapper a:hover,
.nikky-theme .social-icons a:hover {
    color: var(--nikky-white);
}

/* ==========================================================================
   9. Forms - Clean Minimal Style
   ========================================================================== */

.nikky-theme input[type="text"],
.nikky-theme input[type="email"],
.nikky-theme input[type="password"],
.nikky-theme input[type="search"],
.nikky-theme input[type="tel"],
.nikky-theme input[type="url"],
.nikky-theme textarea,
.nikky-theme select {
    border: 1px solid var(--nikky-light-grey);
    border-radius: 0;
    padding: 12px 16px;
    font-family: var(--nikky-font-body);
    font-size: 14px;
    transition: var(--nikky-transition);
}

.nikky-theme input:focus,
.nikky-theme textarea:focus,
.nikky-theme select:focus {
    border-color: var(--nikky-charcoal);
    outline: none;
}

/* ==========================================================================
   10. Responsive Design
   ========================================================================== */

/* ==========================================================================
   10.1 Mobile Header - Clean & Modern
   ========================================================================== */
@media (max-width: 800px) {
    /* 1023 */

    .nikky-theme .primary-navigation > ul > li > a::after {
        background-color: transparent;
    }
    
    /* Hide desktop navigation on mobile */
    .main-navigation.show-for-large,
    .primary-navigation.show-for-large,
    #site-navigation-wrap {
        display: none !important;
    }

    .site-tools.offset {
        margin-right: -36px;
    }
    
    /* Mobile header container - FIX HEIGHT CUTOFF */
    .top-headers-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: var(--nikky-white) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
        height: auto !important;
        min-height: 60px !important;
        overflow: visible !important;
    }
    
    #page_wrapper {
        padding-top: 70px !important;
    }
    
    /* Header inner - ensure proper height */
    #masthead,
    .site-header {
        padding: 15px 0 !important;
        background: var(--nikky-white) !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Mobile header layout - flexbox */
    .site-header-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Logo - VISIBLE and properly sized */
    .site-branding {
        flex: 0 0 auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: 140px !important;
        height: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .site-branding a {
        display: block !important;
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }
    
    .site-branding img.site-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Hide sticky logo on mobile - prevent duplicate */
    .site-branding img.sticky-logo {
        display: none !important;
    }
    
    .site-branding .site-title {
        display: block !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    
    /* Site tools - icons on right */
    .site-tools {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        float: none !important;
        margin-left: auto !important;
        height: auto !important;
        line-height: normal !important;
    }
    
    .site-tools ul {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .site-tools ul li {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    .site-tools .tools_button {
        margin: 0 !important;
        position: relative !important;
        display: block !important;
    }
    
    .site-tools .tools_button_icon {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    .site-tools .tools_button_icon i {
        font-size: 20px !important;
        margin: 0 !important;
        color: var(--nikky-charcoal) !important;
    }
    
    /* Cart badge - properly positioned */
    .site-tools .shopping_bag_items_number,
    .site-tools .wishlist_items_number {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        background: var(--nikky-charcoal) !important;
        color: var(--nikky-white) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        border-radius: 50% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .site-tools .shopping-bag-button,
    .site-tools .wishlist-button {
        position: relative !important;
    }
}

/* ==========================================================================
   10.2 Mobile Off-Canvas Menu - Modern Slide-in Design
   ========================================================================== */

/* Off-canvas container */
.off-canvas.position-right,
#offCanvasRight1 {
    background: var(--nikky-white) !important;
    width: 320px !important;
    max-width: 85vw !important;
    padding: 0 !important;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15) !important;
}

/* Close button - modern X */
.off-canvas .menu-close,
#offCanvasRight1 .menu-close {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.off-canvas .close-button,
#offCanvasRight1 .close-button {
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    color: var(--nikky-charcoal) !important;
    cursor: pointer !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background 0.2s ease !important;
}

.off-canvas .close-button:hover {
    background: #f5f5f5 !important;
}

/* Scrollable content area */
.off-canvas .nano,
#offCanvasRight1 .nano {
    height: calc(100vh - 80px) !important;
}

.off-canvas .nano .content,
#offCanvasRight1 .nano .content {
    padding: 0 !important;
}

.offcanvas_content_right {
    padding: 0 !important;
}

#mobiles-menu-offcanvas {
    padding: 20px 0 !important;
}

/* Mobile navigation styling - VERTICAL LIST */
/* Override all parent theme horizontal styles */
#offCanvasRight1 .mobile-navigation,
.off-canvas .mobile-navigation,
.offcanvas_content_right .mobile-navigation,
#mobiles-menu-offcanvas .mobile-navigation,
.mobile-navigation {
    padding: 0 !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
}

#offCanvasRight1 .mobile-navigation ul,
.off-canvas .mobile-navigation ul,
.offcanvas_content_right .mobile-navigation ul,
#mobiles-menu-offcanvas .mobile-navigation ul,
.mobile-navigation ul,
.mobile-navigation > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    width: 100% !important;
    flex-direction: column !important;
}

#offCanvasRight1 .mobile-navigation > ul > li,
.off-canvas .mobile-navigation > ul > li,
#mobiles-menu-offcanvas .mobile-navigation > ul > li,
.mobile-navigation > ul > li {
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#offCanvasRight1 .mobile-navigation ul li,
.off-canvas .mobile-navigation ul li,
#mobiles-menu-offcanvas .mobile-navigation ul li,
.mobile-navigation ul li {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
}

#offCanvasRight1 .mobile-navigation ul li a,
.off-canvas .mobile-navigation ul li a,
#mobiles-menu-offcanvas .mobile-navigation ul li a,
.mobile-navigation ul li a {
    display: block !important;
    width: 100% !important;
    padding: 18px 25px !important;
    font-family: var(--nikky-font-heading) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--nikky-charcoal) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.mobile-navigation ul li a:hover,
.mobile-navigation ul li a:focus {
    background: #f8f8f8 !important;
    color: var(--nikky-charcoal) !important;
    padding-left: 30px !important;
}

.mobile-navigation ul li.current-menu-item > a {
    color: var(--nikky-charcoal) !important;
    font-weight: 600 !important;
    background: #f5f5f5 !important;
}

/* Submenu toggle button */
.mobile-navigation .more {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
}

.mobile-navigation .more span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
    color: #888 !important;
    transition: transform 0.3s ease !important;
}

/* Rotate caret when submenu is open */
.mobile-navigation .menu-item-has-children.open .more span,
.mobile-navigation .menu-item-has-children.current .more span {
    transform: rotate(180deg) !important;
}

/* Submenus */
.mobile-navigation .sub-menu, .mobile-navigation ul.sub-menu {
    display: none !important;
    background: #fafafa !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-navigation .sub-menu.open {
    display: block !important;
}

.mobile-navigation .sub-menu li {
    border-bottom: 1px solid #eee !important;
}

.mobile-navigation .sub-menu li:last-child {
    border-bottom: none !important;
}

.mobile-navigation .sub-menu li a {
    padding: 14px 25px 14px 40px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555 !important;
}

.mobile-navigation .sub-menu li a:hover {
    padding-left: 45px !important;
    color: var(--nikky-charcoal) !important;
}

/* Nested submenus */
.mobile-navigation .sub-menu .sub-menu li a {
    padding-left: 55px !important;
}

/* Off-canvas widgets area */
.off-canvas .shop_sidebar,
#offCanvasRight1 .shop_sidebar {
    padding: 30px 25px !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: 20px !important;
}

/* ==========================================================================
   10.3 General Mobile Responsive
   ========================================================================== */
@media (max-width: 991px) {

    .site-header .row {
        padding: 0 20px;
    }

    .nikky-hero {
        min-height: 70vh;
    }

    .nikky-hero__background {
        width: 100%;
        opacity: 0.3;
    }

    .products,
    ul.products {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }
}

@media (max-width: 767px) {

    .products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--nikky-spacing-md) !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .site-branding {
        max-width: 120px !important;
    }
    
    .site-branding img {
        max-height: 35px !important;
    }
    
    .site-tools ul {
        gap: 12px !important;
    }
    
    .site-tools .tools_button_icon i {
        font-size: 18px !important;
    }
    
    .off-canvas.position-right,
    #offCanvasRight1 {
        width: 280px !important;
    }
    
    .mobile-navigation ul li a {
        padding: 16px 20px !important;
        font-size: 14px !important;
    }
}

/* Lookbook styles */
.vc_custom_1768940610489, #LookbookCover {
    margin-bottom: 75px !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

#tab-description .entry-title,
.woocommerce-product-details__short-description .entry-title {
    font-size: 14px !important;
}