/* Target the specific section using its unique data-block-id */
section[data-block-id="ecommerce-categories"] {
    background-color: #d0d822 !important;
    
    /* This overrides the CSS variable visible in your screenshot */
    --block-ecommerce-categories-background-color: #d0d822 !important;
    
    background-image: none !important;
}

/* Ensure the inner padding and container don't block the color */
.tp-product-category.pt-60.pb-15 {
    background-color: transparent !important;
}

/* overried FONT system add new */

@font-face {
  font-family:'nunito';
  /* UPDATE THE FILENAME below to match your exact .otf file name */ 
  src:url('/themes/shofy/fonts/nunito.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
/* The rest remains the same */:root {
  --primary-font:'nunito',sans-serif !important;
  --tp-ff-body:'nunito',sans-serif !important;
  --tp-ff-heading:'nunito',sans-serif !important;
  --tp-ff-p:'nunito',sans-serif !important;
  --tp-ff-jost:'nunito',sans-serif !important;
}
body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, li, span, div {
  font-family: 'nunito', sans-serif !important;
}


/* 1. Main Container: Stack elements vertically */
#centered-tabs-section .row.align-items-center {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
}

/* 2. Force ALL columns to be full width (Catch-all selector) */
#centered-tabs-section .row.align-items-center > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
}

/* 3. Spacing below title */
#centered-tabs-section .tp-section-title-wrapper {
    margin-bottom: 20px !important;
    text-align: center !important;
}

/* 4. KEY FIX: Force the logical tab container to center
   Targeting specific classes seen in your screenshot */
#centered-tabs-section .tp-product-tab,
#centered-tabs-section .tp-product-tab-2,
#centered-tabs-section .tp-product-tab-3,
#centered-tabs-section .tp-product-tab-inner-3,
#centered-tabs-section .d-flex {
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 5. Ensure the Nav Tabs themselves are centered */
#centered-tabs-section .nav-tabs {
    display: inline-flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* Hide "You have a coupon code?" section on checkout */
.checkout-discount-section {
    display: none !important;
}

/* Optional: Also hide the coupon input wrapper if it's ever triggered */
.coupon-wrapper {
    display: none !important;
}


/* Custom arrows for product category slider */
.tp-product-category-slider-arrow button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border: none;
    color: var(--tp-common-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.tp-product-category-slider-arrow button:hover {
    background: var(--primary-color);
    color: #fff;
}
.tp-product-category-slider-button-prev {
    left: 20px;
}
.tp-product-category-slider-button-next {
    right: 20px;
}

/* Reduces height of shortcode */
.tp-product-category.pt-30 {
    padding-top: 30px !important;
}
.tp-product-category.pb-0 {
    padding-bottom: 0px !important;
}
.tp-product-category-item.mb-20 {
    margin-bottom: 20px !important;
}
.tp-product-category-thumb img {
    max-height: 150px;
    object-fit: contain;
}

/* Target the images inside the product gallery directly */
.bb-product-gallery-images img {
    transition: transform 0.2s ease-in-out;
    margin: 0 auto;
    display: block; /* Ensures smooth transforms */
}

.bb-product-gallery-images img:hover {
    transform: scale(1.6);
    /* Optional: Ensure the zoomed image stays on top of other elements */
    z-index: 10;
    position: relative;
    cursor: zoom-in;
}


/* Custom arrows for brand slider */
.tp-brand-slider-wrapper .tp-product-category-slider-arrow button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border: none;
    color: var(--tp-common-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.tp-brand-slider-wrapper .tp-product-category-slider-arrow button:hover {
    background: var(--primary-color);
    color: #fff;
}
.tp-brand-slider-wrapper .tp-product-category-slider-button-prev {
    left: 20px;
}
.tp-brand-slider-wrapper .tp-product-category-slider-button-next {
    right: 20px;
}

/* ==========================================================================
   LIGHTBOX CUSTOMIZATION (LightGallery)
   ========================================================================== */

/* 1. Remove Download Button */
#lg-download, 
.lg-download {
    display: none !important;
}

/* 2. White Background Theme (Instead of Black) */
.lg-backdrop {
    background-color: #ffffff !important;
    opacity: 1 !important; /* Ensure it's solid white */
}

/* Change icon colors to black so they are visible on white */
.lg-toolbar .lg-icon, 
.lg-actions .lg-next, 
.lg-actions .lg-prev,
.lg-close {
    color: #333333 !important;
    background-color: transparent !important;
}

.lg-toolbar .lg-icon:hover, 
.lg-actions .lg-next:hover, 
.lg-actions .lg-prev:hover {
    color: #000000 !important;
}

/* Page counter text color */
#lg-counter {
    color: #333333 !important;
}

/* 3. Zoom Effect on Hover inside Lightbox */
.lg-outer .lg-thumb-outer,
.lg-outer .lg-toggle-thumb {
    /* Optional: Adjust thumbnail background to match */
    background-color: #f5f5f5 !important;
}

/* The Zoom Logic */
.lg-outer .lg-img-wrap img.lg-object {
    transition: transform 0.3s ease-in-out !important;
    /* Ensure the image respects the container initially */
    transform-origin: center center;
}

/* Apply scale when hovering over the image in the lightbox */
.lg-outer .lg-img-wrap img.lg-object:hover {
    transform: scale(1.6) !important;
    cursor: zoom-in;
}

/* Optional: Clean up side backgrounds if using 'contain' mode */
.lg-outer .lg-inner {
    background-color: #ffffff;
}


/* Change background color for 'Select Options' & 'Add to Cart' buttons */
.tp-product-add-cart-btn-large {
    background-color: #8a8a8a !important; /* CHANGE THIS HEX CODE to your desired color */
    border-color: #8a8a8a !important;     /* Ideally match the background color */
    color: #ffffff !important;            /* Text color */
}

/* Hover effect - color when you move mouse over the button */
.tp-product-add-cart-btn-large:hover {
    background-color: #0b456e !important; /* A slightly darker shade for hover */
    border-color: #0b456e !important;
}


/* Hide the SKU, Category, and Tag metadata block */
.tp-product-details-query {
    display: none !important;
}

/* Hide the Share social buttons block */
.tp-product-details-social {
    display: none !important;
}