.wp-block-button__link {
    border-radius: 5px;
    width: 100% !important;
}
img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    width: 50%;
}
.wp-block-woocommerce-product-image {
    text-align: center;
}

.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
    width: 9.7%;
	  height: 400px;
}
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
    clear: none;
}
.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
    margin-right: 15px;
    margin: 0 3.8% 2.992em 0;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0 20px 20px 20px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    width: 100%;
    border-radius: 5px;
}
.woocommerce ul.products li.product .button {
    border-radius: 5px;
	padding: 10px 15px;
}

@media screen and (max-width:620px) and (min-width:320px) {
    .woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
        width: 36%;
        height: 400px;
    }
.woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    width: 100%;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px 5px;
}
	.woocommerce ul.products li.product .button {
    padding: 10px 8px;
    font-size: 12px;
}
}

@media screen and (max-width:768px) and (min-width:621px) {
    .woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
        width: 19%;
        height: 400px;
    }
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        clear: none;
    }
	.woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    width: 100%;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px 5px;
}
	.woocommerce ul.products li.product .button {
    padding: 10px 8px;
    font-size: 12px;
}
}
@media screen and (max-width:1199px) and (min-width:621px) {
	.woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
        width: 100%;
        border-radius: 5px;
        font-size: 12px;
        padding: 10px 5px;
    }
	.woocommerce ul.products li.product .button {
        padding: 10px 8px;
        font-size: 10px;
    }
}
/* FORCE HIDE on Desktop/Tablet - Use multiple known class names */
@media (min-width: 768px) {
    /* WP Bottom Menu Common Classes */
    .wp-bottom-menu-container,
    .wbm-container,
    .wp-bottom-menu,
    #wp-bottom-menu { 
        display: none !important;
    }
}/* Itago ang 'My Account' block sa Mobile View LAMANG (screen size 768px pababa) */

@media (max-width: 768px) {
    /* Ang .my-account-block ang tamang class na gagamitin, base sa iyong screenshot. */
    .my-account-block { 
        display: none !important; 
    }
}

/* Itago ang 'My Account' block sa Mobile View LAMANG (screen size 768px pababa) */

@media (max-width: 768px) {
    /* Ang .my-account-block ang tamang class na gagamitin, base sa iyong screenshot. */
    .my-account-block { 
        display: none !important; 
    }
}
/* Itago ang 'Wishlist' block sa Mobile View LAMANG */
@media (max-width: 768px) {
    .wishlist-block { 
        display: none !important; 
    }
}

/* Itago ang 'My Cart' block sa Mobile View LAMANG (screen size 768px pababa) */

@media (max-width: 768px) {
    /* Ang .cart-block ang tamang class na gagamitin, base sa iyong screenshot. */
    .cart-block { 
        display: none !important; 
    }
}
/* *** MOBILE VIEW ONLY: Fixed Rounded Search Bar Styling *** */
@media (max-width: 768px) {
    
    /* Tinutukoy ang input field mismo gamit ang class mo: header-search-input */
    .header-search-input {
        
        /* 1. Rounded Corners (KAPAG ito ay may !important, dapat gumana) */
        border-radius: 50px !important; 
        
        /* 2. Background at Border */
        background-color: white !important;
        border: none !important; 
        
        /* 3. Shadow (Ito ang nagbibigay ng 3D effect) */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        
        /* 4. Padding at Width */
        padding: 10px 20px !important;
        width: 100% !important;
        margin: 0 !important;
        
        /* 5. Tiyakin na walang default appearance galing sa browser (lalo na sa mobile) */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    
    /* (Kung merong anumang box na bumabalot sa search bar, subukan din ito para sa rounding) */
    /* Kung ang search form wrapper ay may class na .product-search-form (halimbawa) */
    .product-search-form { 
        border-radius: 50px !important;
    }
}
/* *** MOBILE VIEW ONLY: Itago ang Category Dropdown at Search Button *** */
@media (max-width: 768px) {
    
    /* 1. Itago ang Category Dropdown (Select Field) */
    .header-search-select { 
        display: none !important; 
    }
    
    /* 2. Itago ang Search Submit Button */
    .header-search-button {
        display: none !important;
    }
}


/* *** MOBILE VIEW ONLY: Itago ang Top Bar *** */
@media (max-width: 768px) {
    
    /* Gagamitin ang class na .top-bar na nakita sa iyong screenshot */
    .top-bar { 
        display: none !important; 
    }
}


/* Target ang iyong logo gamit ang class na "custom-logo" */
.custom-logo {
  /* Mahalaga ito: Tiyakin na ang transition ay para lang sa 'transform' */
  transition: transform 0.4s ease-in-out; 
  
  /* Para mas madaling i-click o i-hover */
  cursor: pointer;
  
  /* Para maiwasan ang visual glitches (optional) */
  backface-visibility: hidden;
}

/* Ang mangyayari kapag ang mouse ay naka-hover sa logo */
.custom-logo:hover {
  /* Palakihin ang logo ng 8% (1.08) */
  transform: scale(1.08); 
  
  /* --- TINANGGAL NA ANG BOX-SHADOW LINE DITO --- */
}




/* Target ang iyong "All Categories" button gamit ang class na "button" */
/* Kung maraming element na may class na "button", pwede mong gawing mas specific: */
/* .categories-bar .button */
.button {
  /* Tiyakin na ang transition ay para lang sa 'transform' para sa smooth zoom */
  transition: transform 0.3s ease-in-out; 
  
  /* Para mas mukhang interactive */
  cursor: pointer;
  
  /* Kung may default border ito at gusto mong alisin, idagdag ito: */
  /* border: none; */ 
}

/* Ang mangyayari kapag ang mouse ay naka-hover sa button */
.button:hover {
  /* Palakihin ang button/text ng 5% (1.05) */
  transform: scale(1.05); 
  
  /* IMPORTANT: Para maiwasan ang default na outline na lumalabas sa buttons kapag naka-hover/focus */
  outline: none; 
}

/* Pwede mo ring i-target ang mismong categories-bar div kung ito ang lalabas na container */
.categories-bar:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}



/* I-apply ang rules na ito KAPAG ang screen width ay 767 pixels o mas mababa pa (Mobile/Tablet) */
@media (max-width: 767px) {
    
    /* Tinatarget ang container div na may dalawang Bootstrap column classes */
    .col-lg-2.col-8 {
        display: none !important; /* Ito ang nagtatago ng element */
    }
}


/* I-apply ang rules na ito KAPAG ang screen width ay 767 pixels o mas mababa pa (Mobile/Tablet) */
@media (max-width: 767px) {
    
    /* Tinatarget ang container ID na "open_nav" kasama ang 'body' */
    body #open_nav {
        display: none !important;
    }
    
    /* Kung sakaling hindi pa rin gumana ang container, itago din ang icon sa loob */
    body #open_nav .fas.fa-bars {
        display: none !important;
    }
}
/* I-try po muna natin ang code na ito. Siguraduhin na isa lang ang gagamitin sa tatlong selector. */

/* PINAKA-SAFE NA SELECTOR (Kung gumagamit ng Bootstrap row) */
/* .row-flex: Kung may idinagdag na flex class sa row */
.row-flex, 
/* .category-list: Kung ito ang container ng buong listahan */
.category-list,
/* .swiper-wrapper: Kung gumagamit ng slider/carousel */
.swiper-wrapper {
    display: flex; 
    align-items: stretch; /* Ito ang nagpapantay ng taas */
    flex-wrap: wrap; /* Kung gusto mong mag-wrap sa mobile */
}

/* Siguraduhin na ang card sa loob ay lalaking kasya sa taas */
.cat_img.media {
    flex-grow: 1; /* Para kuhanin ang buong taas ng parent container */
    height: 100%; /* Siguraduhin na walang fixed height ang card */
}

/* I-target din ang loob ng card para mag-stretch ang text body */
.cat_img.media .media-body {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Para ang text ay nasa ilalim */
}


/* 1. Base Styles at Transition (Walang !important dito) */
.header-search-input,
.header-search-select {
    transition: 
        box-shadow 0.3s ease-in-out, 
        border-color 0.3s ease-in-out !important; /* Nilagyan ng !important ang transition */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; /* !important */
    outline: none !important; 
    border: 1px solid #ccc !important; 
}

/* 2. Hover Effect (Mas agresibo) */
.header-search-input:hover,
.header-search-select:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important; 
    border-color: #aaa !important;
}

/* 3. Focus Effect (Mas agresibo) */
.header-search-input:focus,
.header-search-select:focus {
    box-shadow: 
        0 0 0 3px rgba(0, 150, 255, 0.25) !important, 
        0 5px 15px rgba(0, 0, 0, 0.2) !important;     
    border-color: #007bff !important;
}

==================
/* ========================================================= */
/* --- 1. BASE STYLING (Para sa tamang display at transitions) --- */
/* ========================================================= */
.sale-boxes-inner {
  /* Gawing smooth ang paghinto/pag-umpisa ng animation */
  transition: box-shadow 0.3s ease-out; 
}

/* Base style for elements with animation */
.sale-type, 
.sale-boxes-inner h5, 
.sale-text, 
.sale-boxes-inner img, 
.sale-btn {
  /* Gawing smooth ang paghinto/pag-umpisa ng animation */
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  /* Siguraduhin na may sariling layer ang bawat element para smooth ang transform */
  will-change: transform; 
}


/* ========================================================= */
/* --- 2. KEYFRAMES for Looping Animation (Floating/Pulsing) --- */
/* ========================================================= */

/* Para sa Text (PANTRY READY, 12% OFF, etc.) */
@keyframes textFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Para sa Images (Cans) */
@keyframes floating {
  0% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(-1deg); }
}

/* Para sa Button (Pulse/Glow) */
@keyframes buttonPulse {
  0% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
  100% {
    /* Mas lumaki at nag-glow ang shadow */
    box-shadow: 0 0 10px 5px rgba(76, 175, 80, 0.7), 0 4px 8px rgba(0, 0, 0, 0.2); 
  }
}

/* ========================================================= */
/* --- 3. HOVER TRIGGER (Ang nagpapagalaw sa lahat) --- */
/* ========================================================= */

/* Text: PANTRY READY */
.sale-boxes-inner:hover .sale-type {
  animation: textFloat 2s ease-in-out infinite alternate;
}

/* Text: 12% OFF */
.sale-boxes-inner:hover h5 {
  animation: textFloat 1.8s ease-in-out infinite alternate; 
}

/* Text: your go-to meals, now... */
.sale-boxes-inner:hover .sale-text {
  animation: textFloat 2.2s ease-in-out infinite alternate;
}

/* Images/Cans (Tiyakin na tama ang selector mo, o palitan ang 'img'!) */
.sale-boxes-inner:hover img {
  animation: floating 1.5s ease-in-out infinite alternate; 
}

/* Button */
.sale-boxes-inner
===================
/* --- New Keyframes for Text Floating (Tiyakin na active ito!) --- */
@keyframes textFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* --- HOVER TRIGGER para sa Text --- */

/* Text 1: SALE (class="sale-type") */
.sale-boxes-inner2:hover .sale-type {
  animation: textFloat 2s ease-in-out infinite alternate;
}

/* Text 2: COLD DRINKS, HOT DEALS (h5 tag) */
.sale-boxes-inner2:hover h5 {
  animation: textFloat 1.8s ease-in-out infinite alternate; 
}
.sale-btn .fas.fa-arrow-right { 
  margin-left: 8px; 
  transition: transform 0.3s ease-in-out; 
  display: inline-block; 
  vertical-align: middle; 
}
===========
/* KEYFRAMES para sa Green Neon Glow */
@keyframes green-neon-glow {
  0%, 100% {
    text-shadow: 0 0 4px #4CAF50, 0 0 8px #4CAF50; /* Green text glow */
    box-shadow: 0 0 4px #4CAF50, 0 0 8px #4CAF50 inset; /* Green inner glow */
  }
  50% {
    text-shadow: 0 0 8px #66BB6A, 0 0 16px #66BB6A; /* Mas matingkad na green glow */
    box-shadow: 0 0 8px #66BB6A, 0 0 16px #66BB6A inset;
  }
}

/* Styling para sa button/link container */
.sale-btn {
    /* Flexbox setup */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* GREEN NEON DESIGN - SLIM */
    background-color: transparent; /* Walang solid background */
    border: 2px solid #4CAF50; /* Manipis na berdeng border */
    color: white; /* Puting text (glowing) */
    
    /* Shape and Padding - GAWIN MONG MAS MALIIT */
    border-radius: 9999px; /* Bilog na hugis */
    padding: 8px 25px; /* Mas maliit na padding */

    /* Text Styling */
    font-size: 16px; /* Mas maliit na font size */
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    
    /* GREEN NEON GLOW animation */
    animation: green-neon-glow 1.8s infinite alternate; /* Medyo mas mabagal na glow */
    
    /* Transition para sa hover effect */
    transition: all 0.2s ease-out;
}

/* Styling para sa arrow icon */
.sale-btn .fa-arrow-right {
    margin-left: 8px; /* Mas maliit na margin */
    font-size: 1.1em; /* Bahagyang mas maliit na arrow */
}

/* Hover Effect: FLASH/COLOR CHANGE to
 * 
 * 
 /* KEYFRAMES para sa SHINE Effect */
@keyframes shine {
  0% {
    /* Magsisimula sa labas ng kaliwa */
    transform: translateX(-100%) skewX(-20deg);
  }
  100% {
    /* Matatapos sa labas ng kanan */
    transform: translateX(200%) skewX(-20deg);
  }
}

/* Styling para sa button/link container */
.sale-btn {
    /* Flexbox setup */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Green Solid Base */
    background-color: #388E3C; /* Dark Green */
    border: 2px solid #66BB6A;
    color: white; 
    
    /* Shape and Padding (Slim) */
    border-radius: 9999px; 
    padding: 8px 25px; 
    font-size: 16px; 
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    
    /* Animation Properties */
    position: relative; /* Mahalaga para mapuwesto ang shine effect */
    overflow: hidden; /* Itago ang shine kapag nasa labas ng button */
    
    /* Smooth Transitions */
    transition: all 0.3s ease;
}

/* 💎 SHINE EFFECT - Ito ang mag-a-animate */
.sale-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%; /* Laki ng shine */
    height: 100%;
    /* Gradient Color: White na may transparency para sa shine look */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 1; /* Para nasa ibabaw ng background */
    
    /* IDAGDAG ITO: Permanenteng animation ng shine */
    animation: shine 3s infinite; /* Ulitin bawat 3 segundo */
}

/* Styling para sa arrow icon */
.sale-btn .fa-arrow-right {
    margin-left: 8px;
    font-size: 1.1em;
    z-index: 2; /* Siguraduhin na nasa ibabaw ng shine */
    transition: transform 0.3s;
}

/* HOVER Effect: SCALE */
.sale-btn:hover {
    background-color: #4CAF50; /* Mas matingkad na green */
    transform: scale(1.05); /* Bahagyang lumaki ang button */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Dagdag na anino */
    cursor: pointer;
}

/* Hover Effect: Arrow slide */
.sale-btn:hover .fa-arrow-right {
    transform: translateX(5px);
}

/* Container para sa lahat ng kategorya - Gumamit ng Flexbox para sa layout */
.category-container {
    display: flex;
    flex-wrap: wrap; /* Hayaan ang mga item na lumipat sa susunod na linya kung masyadong marami */
    gap: 20px; /* Space sa pagitan ng mga item */
    padding: 20px 0;
    justify-content: center; /* I-sentro ang mga item */
    align-items: center;
}

/* Estilo para sa bawat Category Button/Box */
.category-item {
    /* Sukat na base sa iyong imahe - 5 items sa isang linya */
    width: 150px; /* Maaari mong baguhin ito base sa iyong screen size */
    height: 90px;
    
    /* Disenyo ng Button */
    border: 2px solid #D6D6D6; /* Border na medyo kulay-abo */
    border-radius: 10px; /* Rounded corners */
    background-color: white;
    
    /* Shadow (Ito ang nagpapalutang ng box) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft, slight shadow */
    
    /* Flexbox para sa nilalaman sa loob (icon at pangalan) */
    display: flex;
    flex-direction: row;
    align-items: center; /* I-sentro nang patayo ang icon at text */
    padding: 10px; /* Panloob na espasyo */
    cursor: pointer; /* Ipakita na ito ay pwedeng i-click */
    
    /* Transition para sa hover effect */
    transition: all 0.2s ease-in-out;
}

/* Hover Effect (Para gumalaw/mag-iba kapag tinututukan ng mouse) */
.category-item:hover {
    border-color: #6AA84F; /* Baguhin ang kulay ng border (parang light green sa iyong image) */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Bahagyang mas malaking shadow */
    transform: translateY(-2px); /* Bahagyang iangat ang box */
}

/* Estilo para sa Category Icons */
.category-icon {
    width: 50px; /* Sukat ng icon */
    height: auto;
    margin-right: 10px; /* Space sa pagitan ng icon at pangalan */
    /* Gawing "fit" ang image sa container, pero base sa iyong image, mukhang mas gusto mo ang actual size: */
    object-fit: contain; 
}

/* Estilo para sa Pangalan ng Kategorya */
.category-name {
    font-family: Arial, sans-serif; /* Gumamit ng malinaw na font */
    font-size: 14px;
    font-weight: bold;
    color: #333; /* Dark gray/black text */
    /* Hayaan ang text na mag-adjust base sa space na natitira */
    flex-grow: 1; 
}

/* *Optional: Kung gagamit ka ng mga custom 'sticker' tulad ng 'Best Selling' * /
/* Maaari mong i-position ang mga ito ng 'absolute' sa loob ng category-item, 
   na dapat may 'position: relative;' */

.category-item.best-selling {
    position: relative;
    overflow: hidden; /* Para hindi lumabas ang label kung masyadong malaki */
}

/* Ito ay para sa pulang sticker (Best Selling) */
.best-selling-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    background-color: #E06666; /* Kulay Pula */
    border-radius: 50%;
    transform: rotate(45deg);
    /* At kailangan mo ng 'span' sa loob nito para sa text na 'Best Selling' at iposition iyon. */
}

===========
.view-all-container {
    /* Nagbibigay ng espasyo sa paligid at ina-align sa gitna */
    padding: 20px 0; 
    text-align: center;
}

.view-all-link {
    /* Ginagawang parang button */
    display: inline-block;
    padding: 10px 25px;
    
    /* Style */
    background-color: #007bff; /* Kulay Asul */
    color: white;
    border-radius: 5px; 
    text-decoration: none; 
    font-size: 16px;
    font-weight: bold;
    
    /* Para sa smooth na transition kapag hinover */
    transition: background-color 0.3s ease;
}

.view-all-link:hover {
    background-color: #0056b3; /* Mas matingkad na kulay kapag hinover */
}
===============
/* --- Base Card Styling (Ibalik sa default state) --- */
/* Palitan ang .owl-item ng actual card class kung alam mo. */
#services .services-box .owl-item {
    /* Base Transition (KEEP) */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Base Shadow (KEEP) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); 
    border-radius: 12px; 
    cursor: pointer;
    
    /* >>> REMOVE/TANGGALIN ANG MGA ITO PARA HINDI MAWALA ANG IMAGE <<< */
    /* REMOVED: opacity: 0; */
    /* REMOVED: transform: translateY(30px); */
    /* REMOVED: animation: fadeInUpAndStagger 0.8s ease-out forwards; */
}

/* --- HOVER EFFECT (Ito ang magpapa-animate sa hover) --- */
#services .services-box .owl-item:hover {
    /* Lift up at Scale (KEEP) */
    transform: translateY(-15px) scale(1.04); 
    
    /* Matingkad na Shadow (KEEP) */
    box-shadow: 0 25px 50px rgba(255, 100, 0, 0.35); 
    z-index: 10;
}

/* Karaniwang mobile breakpoint */
@media (max-width: 768px) {

    /* Targetin natin ang mga Owl Carousel item */
    .owl-carousel .owl-item {
        /* Ito ang magpapabagal at magpapasmooth ng anumang pagbabago sa item */
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; 
    }

    /* Tiyakin na mabilis at smooth ang mismong paglipat ng carousel */
    .owl-carousel .owl-stage {
        /* Ito ang mahalaga para smooth ang pag-slide */
        transition: all 0.5s ease-in-out !important; 
    }

    /* Optional: Kung may opacity effect ka rin, dagdag smoothness */
    .owl-carousel .owl-item.active {
        opacity: 1;
    }

    .owl-carousel .owl-item:not(.active) {
        opacity: 0.7; /* Bahagyang dim ang inactive items */
    }
}
/* ================================================================= */
/* === AGGRESSIVE FIX: Smooth Carousel Transitions for Mobile View === */
/* ================================================================= */

@media (max-width: 768px) {

    /* HAKBANG 1: Pilitin ang Transition sa Stage (Ang mismong nagpapa-slide) */
    .owl-carousel .owl-stage-outer .owl-stage {
        /* I-set ang transition duration sa 0.6 seconds */
        -webkit-transition: all 0.6s ease-in-out !important;
        -moz-transition: all 0.6s ease-in-out !important;
        -ms-transition: all 0.6s ease-in-out !important;
        -o-transition: all 0.6s ease-in-out !important;
        transition: all 0.6s ease-in-out !important; 
    }

    /* HAKBANG 2: Pilitin ang Transition sa Transform Property (Kung ito ang gumagalaw) */
    /* Karaniwan, ito ang gumagalaw sa stage, pero minsan, sa item din */
    .owl-carousel .owl-item {
        -webkit-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        -moz-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        -ms-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        -o-transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; 
    }

    /* HAKBANG 3: I-disable ang Default Animation ng Owl (Kung naka-on) */
    /* Ito ay kailangan lang kung may conflict, pero mas safe i-try */
    .owl-carousel.owl-drag .owl-stage {
        /* Dapat naka-smooth na ngayon, pero baka kailangan i-disable ang "snap" effect */
        -webkit-transition: all 0.6s ease-in-out !important;
        -moz-transition: all 0.6s ease-in-out !important;
        -ms-transition: all 0.6s ease-in-out !important;
        -o-transition: all 0.6s ease-in-out !important;
        transition: all 0.6s ease-in-out !important;
    }

    /* *Optional Aesthetics (gaya ng dati) * */
    .owl-carousel .owl-item:not(.active) { opacity: 0.7 !important; }
    .owl-carousel .owl-item.active { opacity: 1 !important; }
    
    .owl-item .services-img-inner .fas {
        transform: translateY(10px); 
        opacity: 0;
        transition: transform 0.7s ease-out, opacity 0.7s ease-out;
    }

    .owl-item.active .services-img-inner .fas {
        transform: translateY(0); 
        opacity: 1;
    }

}

=====================
/* ------------------------------------------- */
/* 1. Paliitin ang Product Width sa Carousel */
/* Ginagamit ang custom class na inilagay sa PHP file */
/* ------------------------------------------- */

/* Para sa Desktop at mas malalaking screen (Palilitin ang bawat item para magkasya ang 4-5 items sa screen) */
@media (min-width: 1024px) {
    /* Ang lapad ng bawat item sa carousel ay ginawang 25% (para sa 4 na item sa isang view) */
    #best-seller .best-seller-carousel-item {
        width: 25% !important; 
    }
}

/* Para sa mga tablet na may mas malaking screen (Magiging 3 items sa isang view) */
@media (min-width: 768px) and (max-width: 1023px) {
    #best-seller .best-seller-carousel-item {
        width: 33.33% !important; /* Para sa 3 items bawat view */
    }
}


/* ------------------------------------------- */
/* 2. Paliitin ang Spacing (Margins/Paddings) */
/* ------------------------------------------- */

/* Paliitin ang padding ng buong section */
#best-seller {
    padding-top: 30px; 
    padding-bottom: 30px;
}

/* Paliitin ang space sa paligid ng content ng produkto */
#best-seller .best_seller-col {
    padding: 10px; /* Bawasan ang padding sa loob ng box */
}

/* Paliitin ang space sa ibaba ng image box */
#best-seller .product_img_box {
    margin-bottom: 10px; 
}

/* Paliitin ang vertical padding ng title/price area */
#best-seller .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Paliitin ang top margin ng button sa baba ng section */
#best-seller .product-btn.mt-3 {
    margin-top: 1rem !important; /* Mula sa 1.5rem default */
}

================
/* Styling para sa Cart Item Count Bubble */
.cart-items-count {
    background-color: #ff0000; /* Pula ang background */
    color: #ffffff; /* Puti ang text */
    border-radius: 50%; /* Gawing bilog */
    padding: 2px 6px; /* Space sa loob */
    font-size: 10px; /* Maliit na font */
    font-weight: bold;
    position: absolute; /* Para lumutang sa ibabaw ng icon */
    top: -5px; /* Ayusin ang position */
    right: -10px; /* Ayusin ang position */
    line-height: 1;
}

/* Kailangan din ng position: relative sa parent element para gumana ang position: absolute */
.menu-item-cart-link {
    position: relative;
    display: inline-block;
}


.cart-icon {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    font-size: 12px;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
}

======