/* 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;
}