/* =====================================================
   TIBICO SHOP STYLESHEET - tibico-shop.css
   ===================================================== */

/* ── PAGE BG ── */
body.woocommerce-shop,
body.woocommerce-page,
body.tax-product_cat {
    background: #F8FAFC !important;
}
#primary, .content-area, #main, .site-main,
.woocommerce ul.products, .products {
    background: transparent !important;
}
.site-content, #content {
    background: #F8FAFC !important;
    padding: 40px 0 60px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Kill the 120px top-margin gap from Kitchor theme on shop pages and set standard luxury padding */
.woocommerce-shop .site-content,
.woocommerce-page .site-content,
.tax-product_cat .site-content {
    margin: 0 !important;
    padding: 40px 0 60px !important;
}

/* ══════════════════════════════════════════
   BREADCRUMB BANNER — Tall blue with pipe image
   ══════════════════════════════════════════ */
.breadcrumb-wrap {
    position: relative !important;
    overflow: hidden !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    background: linear-gradient(135deg, #001A4D 0%, #0F2460 40%, #1B3A8C 100%) !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
}

/* Disable the grey elementor-section background inside breadcrumb banner */
.breadcrumb-wrap .elementor-section {
    background-image: none !important;
    background: transparent !important;
}
.breadcrumb-wrap .elementor-background-overlay {
    display: none !important;
}

/* Hero splash pipe image on the right side */
.breadcrumb-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: -15% !important;
    right: 0 !important;
    width: 55% !important;
    height: 130% !important;
    background: url(z7842084452070_caaf7e8c351deac4a9c891206ad14255.jpg) right center / contain no-repeat !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
}

/* Dark-to-transparent left overlay so text is readable */
.breadcrumb-wrap::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 70% !important; height: 100% !important;
    background: linear-gradient(90deg, rgba(15,36,96,1) 0%, rgba(15,36,96,0.85) 60%, rgba(15,36,96,0) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.breadcrumb-wrap > * {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
}

/* Elementor widget wrap inside breadcrumb */
.breadcrumb-wrap .elementor-widget-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-left: 48px !important;
    gap: 6px !important;
}
.breadcrumb-wrap .elementor-widget-heading { order: 1 !important; }
.breadcrumb-wrap .elementor-widget-text-editor { order: 2 !important; }

/* BIG WHITE "SẢN PHẨM" TITLE */
.breadcrumb-wrap .kitchor-woocommerce-title,
.breadcrumb-wrap h2,
.breadcrumb-wrap h2 a,
.breadcrumb-wrap .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    max-width: 65% !important;
    white-space: normal !important;
}

/* Breadcrumb path: Trang chủ > Sản phẩm */
.breadcrumb-wrap .elementor-text-editor,
.breadcrumb-wrap .elementor-text-editor p,
.breadcrumb-wrap .elementor-text-editor a,
.breadcrumb-wrap .woocommerce-breadcrumb,
.breadcrumb-wrap nav.woocommerce-breadcrumb {
    font-family: 'Inter', sans-serif !important;
    color: rgba(255,255,255,0.75) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.breadcrumb-wrap .elementor-text-editor a:hover,
.breadcrumb-wrap nav.woocommerce-breadcrumb a:hover {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
#secondary, .widget-area {
    background: transparent !important;
    padding: 0 !important;
}
.widget {
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Redesigned Widget Title for Category Menu */
.widget-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0F2460 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #F1F5F9 !important;
    position: relative !important;
}
.widget-title::after {
    content: "";
    position: absolute; bottom: -2px; left: 0;
    width: 50px; height: 2px;
    background: #DC2626;
}

/* Rename widget title to DANH MỤC SẢN PHẨM exactly */
.widget_product_categories .widget-title {
    font-size: 0 !important;
}
.widget_product_categories .widget-title::before {
    content: "DANH MỤC SẢN PHẨM" !important;
    font-size: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #0F2460 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
}

/* ── CATEGORY LIST WITH ICONS ── */
.widget_product_categories ul {
    padding: 0 !important;
    margin: 0 !important;
}
.widget_product_categories li {
    list-style: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    transition: background 0.15s ease !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.widget_product_categories li:last-child { border-bottom: none !important; }
.widget_product_categories li:hover { background: #F8FAFC !important; }

/* Filter out non-matching categories from the mockup */
.widget_product_categories li {
    display: none !important;
}
.widget_product_categories li.cat-item-75,
.widget_product_categories li.cat-item-111,
.widget_product_categories li.cat-item-27,
.widget_product_categories li.cat-item-24,
.widget_product_categories li.cat-item-15,
.widget_product_categories li.cat-item-61 {
    display: flex !important;
}

/* Active Category */
.widget_product_categories li.current-cat {
    background: #EFF6FF !important;
    border-left: 3px solid #DC2626 !important;
}
.widget_product_categories li.current-cat a { color: #0F2460 !important; font-weight: 700 !important; }

/* ICON pseudo-element */
.widget_product_categories li::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-left: 12px !important;
    margin-right: 10px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

/* Water drop icon */
.widget_product_categories li.cat-item-75::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231073B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22a7 7 0 0 0 7-7c0-4.3-7-13-7-13S5 10.7 5 15a7 7 0 0 0 7 7z'/></svg>") !important;
}
/* Bottle icon */
.widget_product_categories li.cat-item-111::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231073B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 2v5.5a2.5 2.5 0 1 0 5 0V2'/><path d='M6 14a6 6 0 0 0 12 0V9.5A2.5 2.5 0 0 0 15.5 7h-7A2.5 2.5 0 0 0 6 9.5V14z'/></svg>") !important;
}
/* Faucet/tap icon */
.widget_product_categories li.cat-item-27::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231073B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12h7c0-2 1-3 3-3h3c1 0 2-1 2-2V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v4'/><path d='M18 12h4v2a2 2 0 0 1-2 2h-2v-4z'/><circle cx='12' cy='18' r='3'/></svg>") !important;
}
/* Filter icon for water filter */
.widget_product_categories li.cat-item-24::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231073B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-.293.707L13 13.414V21a1 1 0 0 1-1.447.894l-4-2A1 1 0 0 1 7 19v-5.586L3.293 6.707A1 1 0 0 1 3 6V4z'/></svg>") !important;
}
/* Gear icon */
.widget_product_categories li.cat-item-15::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231073B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>") !important;
}
/* Pipe coupling icon */
.widget_product_categories li.cat-item-61::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231073B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='8' rx='2'/><path d='M6 8V6M18 8V6M6 16v2M18 16v2'/><path d='M10 12h4'/></svg>") !important;
}

/* Category link */
.widget_product_categories li a {
    font-size: 13px !important;
    color: #334155 !important;
    text-decoration: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    width: 100% !important;
    padding: 10px 12px 10px 0 !important;
}

/* Rewrite category names to match mockup exactly */
.widget_product_categories li.cat-item-75 a { font-size: 0 !important; }
.widget_product_categories li.cat-item-75 a::before {
    content: "Dẫn xử lý nước tại công ty" !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    color: #334155 !important;
}
.widget_product_categories li.cat-item-24 a { font-size: 0 !important; }
.widget_product_categories li.cat-item-24 a::before {
    content: "Nước thô" !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    color: #334155 !important;
}

/* Count badge */
.widget_product_categories .count {
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.widget_product_categories li.current-cat .count {
    background: #DBEAFE !important;
    color: #1D4ED8 !important;
}

/* ── CONSULT BOX ── */
.tibico-consult-box {
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    display: none !important; /* Hide initially to prevent flashing */
    gap: 16px !important;
    align-items: flex-start !important;
}
#secondary .tibico-consult-box {
    display: flex !important;
}
/* Left round icon - match mockup exactly */
.tibico-consult-box .consult-icon {
    display: inline-block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background-color: #0F2460 !important; /* Dark blue circle */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>") !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 !important;
}

.tibico-consult-box .consult-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tibico-consult-box .consult-content > * {
    margin: 0 !important;
}
.tibico-consult-box h4 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    color: #0F2460 !important;
}
.tibico-consult-box p {
    font-size: 12.5px !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin-bottom: 14px !important;
}

.tibico-consult-box .btn-call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    color: #0056D2 !important;
    border: 1.5px solid #0056D2 !important;
    padding: 9px 24px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.tibico-consult-box .btn-call::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 2px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230056D2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.tibico-consult-box .btn-call:hover {
    background: #0056D2 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

/* ── CATALOG BOX ── */
.tibico-catalog-box {
    display: none !important; /* Hide initially to prevent flashing */
    align-items: center !important;
    gap: 14px !important;
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    margin-bottom: 16px !important;
}
#secondary .tibico-catalog-box {
    display: flex !important;
}
.tibico-catalog-box:hover {
    border-color: #0056D2 !important;
    box-shadow: 0 4px 16px rgba(0,86,210,0.08) !important;
    transform: translateY(-1px) !important;
}

/* Replace yellow twemoji image with beautiful red SVG outline doc icon */
.tibico-catalog-box div[style*="font-size:28px"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
}
.tibico-catalog-box div[style*="font-size:28px"] img {
    display: none !important;
}
.tibico-catalog-box div[style*="font-size:28px"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 28px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.tibico-catalog-box h4 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0F2460 !important;
    margin: 0 0 3px !important;
    font-family: 'Outfit', sans-serif !important;
}
.tibico-catalog-box p {
    font-size: 11.5px !important;
    color: #64748B !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Style the existing HTML catalog span arrow */
.tibico-catalog-box span {
    margin-left: auto !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}
.tibico-catalog-box:hover span {
    transform: translateX(3px) !important;
    color: #0056D2 !important;
}

/* ── SORT / FILTER BAR ── */
.woocommerce-notices-wrapper { display: none !important; }
.woocommerce-result-count {
    font-size: 13px !important;
    color: #64748B !important;
    font-family: 'Inter', sans-serif !important;
}
.woocommerce-ordering select {
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    background: #fff !important;
    color: #475569 !important;
    font-family: 'Inter', sans-serif !important;
    outline: none !important;
}
.kitchor-products-view a {
    color: #94A3B8 !important;
    font-size: 16px !important;
    margin-right: 8px !important;
    transition: color 0.2s !important;
}
.kitchor-products-view a.active { color: #DC2626 !important; }

/* ══════════════════════════════════════════
   PRODUCT GRID — 3 columns, tight gap
   ══════════════════════════════════════════ */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important; /* Spacious and elegant gap between columns */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}
@media (max-width: 991px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* ── PRODUCT CARD ── */
.woocommerce ul.products li.product {
    transform-style: preserve-3d !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    border: 1px solid #E8EDF5 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    position: relative !important;
    /* Force full-cell width, override Kitchor half-width bug */
    flex: 1 1 auto !important;
    max-width: 100% !important;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(15,36,96,0.10) !important;
    border-color: #BFDBFE !important;
}
.woocommerce ul.products li.product .product-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ── PRODUCT IMAGE — Enlarged, uniform square ── */
.woocommerce ul.products li.product .product-transition {
    transform: translateZ(40px) !important;
    height: 220px !important;
    width: 100% !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    border-bottom: 1px solid #F1F5F9 !important;
    flex-shrink: 0 !important;
}
.woocommerce ul.products li.product .product-transition a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}
.woocommerce ul.products li.product .product-transition img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 20px !important; /* Beautiful, uniform breathing room for images */
    background: transparent !important;
    transition: transform 0.4s ease !important;
    display: block !important;
}
.woocommerce ul.products li.product:hover .product-transition img {
    transform: scale(1.06) !important;
}

/* Hide unwanted elements */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .product-caption-bottom,
.woocommerce ul.products li.product .product-caption-top,
.woocommerce ul.products li.product .count-review,
.woocommerce ul.products li.product .woosc-btn,
.woocommerce ul.products li.product .quick-view,
.woocommerce ul.products li.product .woosc-bar-btn,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product button.add_to_cart_button {
    display: none !important;
}

/* ── CARD CAPTION ── */
.woocommerce ul.products li.product .product-caption {
    padding: 12px 14px 6px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* PRODUCT TITLE — single line, bold navy */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0F2460 !important;
    padding: 0 !important;
    margin: 0 0 5px !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: #0F2460 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
    transition: color 0.2s !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #DC2626 !important;
}

/* SHORT DESCRIPTION — exactly 2 lines */
.woocommerce ul.products li.product .product-excerpt {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    max-height: 36px !important;
}

/* "Xem chi tiết →" BUTTON */
.tibico-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 10px 14px 14px !important;
    padding: 7px 16px !important;
    border: 1.5px solid #1073B4 !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1073B4 !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    align-self: flex-start !important;
}
.tibico-card-btn:hover {
    background: #1073B4 !important;
    color: #fff !important;
    border-color: #1073B4 !important;
}

/* ── GLOBAL FOOTER / HEADER OVERRIDES ── */
.home .breadcrumb-wrap,
.page-template-page-custom-home-php .breadcrumb-wrap { display: none !important; }
.hfe-site-logo-img img, .custom-logo { max-width: 100px !important; }
.elementor-menu-toggle { display: none !important; }
footer#colophon { display: none !important; }
.tibico-footer { display: block !important; }

/* ── ZALO & HOTLINE RIGHT-SIDE FLOATING REPOSITION ──
   Shift Zalo/Hotline from left to right on shop pages so they don't cover the left sidebar! */
.zalo-ring-wrap,
.hotline-phone-ring-wrap {
    left: auto !important;
    right: 20px !important;
}

/* Ensure bars slide out to the left of the button! */
.zalo-ring-wrap .zalo-bar {
    left: auto !important;
    right: 33px !important;
    padding-left: 20px !important;
    padding-right: 50px !important;
    background-color: #0084FF !important; /* Premium Zalo blue */
    border-radius: 9999px !important;
}
.zalo-ring-wrap .zalo-bar a {
    text-align: right !important;
}

.hotline-phone-ring-wrap .hotline-bar {
    left: auto !important;
    right: 33px !important;
    padding-left: 20px !important;
    padding-right: 50px !important;
    border-radius: 9999px !important;
}
.hotline-phone-ring-wrap .hotline-bar a {
    text-align: right !important;
}

/* Add slight top separation to Zalo widget so they stack elegantly */
.zalo-ring-wrap {
    bottom: 80px !important; /* Stacked right above Hotline */
}
.hotline-phone-ring-wrap {
    bottom: 10px !important;
}

/* Hide floating Zalo and Hotline on homepage since we have the main Hotline button */
.home .zalo-ring-wrap,
.home .hotline-phone-ring-wrap,
.page-template-page-custom-home-php .zalo-ring-wrap,
.page-template-page-custom-home-php .hotline-phone-ring-wrap {
    display: none !important;
}