/*
Theme Name: Diza Child
Theme URI: https://elementor.thembay.com/diza/
Author: Thembay
Description: Kamel Pharmacy — Diza Child Theme
Version: 2.0
Author URI: https://thembay.com/
Template: diza
Text Domain: diza-child
*/

/* ================================================================
 * KAMEL PHARMACY — COMPLETE BRAND STYLESHEET
 * ================================================================
 *
 * Colour Tokens
 *   --kp-gold        #F5A800   Primary gold
 *   --kp-gold-dark   #C8830A   Dark gold (hover)
 *   --kp-gold-light  #FFD060   Light gold
 *   --kp-brown       #8B5E3C   Camel brown (secondary)
 *   --kp-brown-dark  #5C3D1E   Dark brown
 *   --kp-dark        #111111   Black / header / footer
 *   --kp-sand        #E8D5A3   Sand
 *   --kp-white       #FFFFFF   Page background
 *   --kp-body        #1a1a1a   Body text
 *
 * Fonts (enqueued via functions.php)
 *   Cinzel            — h1–h6, product titles, logos
 *   Cormorant Garamond — body copy
 *   Rajdhani          — UI labels, buttons, nav
 * ================================================================ */


/* ----------------------------------------------------------------
 * 0. CSS CUSTOM PROPERTIES (Design Tokens)
 * ---------------------------------------------------------------- */
:root {
    --kp-gold: #F5A800;
    --kp-gold-dark: #C8830A;
    --kp-gold-light: #FFD060;
    --kp-brown: #8B5E3C;
    --kp-brown-dark: #5C3D1E;
    --kp-dark: #111111;
    --kp-sand: #E8D5A3;
    --kp-white: #FFFFFF;
    --kp-body: #1a1a1a;
    --kp-border: rgba(245, 168, 0, 0.35);
    --kp-transition: 0.3s ease;
    --kp-font-head: 'Cinzel', Georgia, serif;
    --kp-font-body: 'Cormorant Garamond', 'Times New Roman', serif;
    --kp-font-ui: 'Rajdhani', Arial, sans-serif;
}


/* ----------------------------------------------------------------
 * 1. TYPOGRAPHY — Body & Headings
 * ---------------------------------------------------------------- */
body,
p,
li,
td,
label,
.woocommerce-loop-product__title,
.entry-content {
    font-family: var(--kp-font-body) !important;
    font-size: 18px;
    line-height: 1.8;
    color: var(--kp-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.woocommerce-loop-product__title,
.product_title,
.entry-title,
.widget-title,
.woocommerce-products-header__title,
.page-title,
.elementor-heading-title {
    font-family: var(--kp-font-head) !important;
    color: var(--kp-dark);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

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

h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--kp-brown);
}

h3 {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
}

h4 {
    font-size: 1.4rem;
}

h5 {
    font-size: 1.2rem;
}

h6 {
    font-size: 1rem;
}

/* Section headings with decorative gold underline */
h2.section-title,
.widget-title,
.woocommerce-loop-category__title,
.products-title,
.tbay-block-title,
.elementor-widget-heading .elementor-heading-title {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 24px;
}

h2.section-title::after,
.widget-title::after,
.tbay-block-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    background: var(--kp-gold);
    border-radius: 2px;
}


/* ----------------------------------------------------------------
 * 2. LINKS
 * ---------------------------------------------------------------- */
a {
    color: var(--kp-gold);
    text-decoration: none;
    transition: color var(--kp-transition), border-color var(--kp-transition);
}

a:hover,
a:focus {
    color: var(--kp-gold-dark);
    text-decoration: underline;
}


/* ----------------------------------------------------------------
 * 3. BUTTONS — All variants → gold
 * ---------------------------------------------------------------- */
.btn,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.wc-block-components-button,
.added_to_cart,
.checkout-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce .woocommerce-info a.button,
.tbay-button,
.elementor-button {
    font-family: var(--kp-font-ui) !important;
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border: 2px solid var(--kp-gold) !important;
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 13px;
    padding: 12px 28px;
    cursor: pointer;
    transition: background var(--kp-transition),
        border-color var(--kp-transition),
        color var(--kp-transition),
        box-shadow var(--kp-transition);
}

.btn:hover,
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.added_to_cart:hover,
.checkout-button:hover,
.tbay-button:hover,
.elementor-button:hover {
    background: var(--kp-gold-dark) !important;
    border-color: var(--kp-gold-dark) !important;
    color: var(--kp-dark) !important;
    box-shadow: 0 4px 18px rgba(245, 168, 0, 0.35);
}

/* Outline/ghost button style */
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--kp-dark) !important;
    color: var(--kp-gold) !important;
    border-color: var(--kp-gold) !important;
}

.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
}


/* ----------------------------------------------------------------
 * 4. NAVIGATION
 * ---------------------------------------------------------------- */
#tbay-header-main nav ul li a,
.main-navigation a,
.tbay-nav>ul>li>a,
.tbay-nav ul li a,
#tbay-navigation>ul>li>a,
.navbar-nav>li>a {
    font-family: var(--kp-font-ui) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 13px;
    color: #e8e8e8;
    transition: color var(--kp-transition);
}

#tbay-header-main nav ul li a:hover,
.tbay-nav>ul>li>a:hover,
#tbay-navigation>ul>li>a:hover,
.tbay-nav>ul>li.current-menu-item>a,
.tbay-nav>ul>li.current_page_item>a,
.tbay-nav>ul>li.current-menu-ancestor>a {
    color: var(--kp-gold) !important;
}

/* Dropdown menus */
.tbay-nav ul ul,
.main-navigation ul ul,
.dropdown-menu {
    border-top: 3px solid var(--kp-gold);
    background: var(--kp-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.tbay-nav ul ul li a,
.main-navigation ul ul a,
.dropdown-menu li a {
    color: #ccc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tbay-nav ul ul li a:hover,
.dropdown-menu li a:hover {
    color: var(--kp-gold) !important;
    background: rgba(245, 168, 0, 0.08) !important;
}

/* Mega menu accent */
.tbay-megamenu .mega-menu-title,
.tbay-megamenu .mega-title {
    font-family: var(--kp-font-ui);
    color: var(--kp-gold) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* ----------------------------------------------------------------
 * 5. HEADER
 * ---------------------------------------------------------------- */
#tbay-header,
#tbay-header-inner,
.tbay-header,
header.site-header,
.site-header {
    background: var(--kp-dark) !important;
    border-top: 3px solid var(--kp-gold);
}

/* Header actions (search, cart, wishlist icons) */
.tbay-header .tbay-header-action a,
.tbay-header-search .search-toggle,
.header-cart-link,
.mini-cart-icon,
.tbay-header .tbay-header-action .count {
    color: var(--kp-gold) !important;
}

/* Cart count badge */
.tbay-header .cart-count,
.header-cart-link .count {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    font-family: var(--kp-font-ui);
    font-weight: 700;
}

/* Search bar */
#tbay-header .search-form input[type="text"],
#tbay-header .search-field {
    border: 1px solid rgba(245, 168, 0, 0.4);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: 2px;
}

#tbay-header .search-form input[type="text"]::placeholder {
    color: #888;
}

#tbay-header .search-form button[type="submit"],
#tbay-header .search-submit {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border: none;
}


/* ----------------------------------------------------------------
 * 6. FOOTER
 * ---------------------------------------------------------------- */
#tbay-footer,
footer.site-footer,
.site-footer,
.footer-widgets,
.tbay-footer {
    background: var(--kp-dark) !important;
    color: #ccc;
    border-top: 3px solid var(--kp-gold);
}

#tbay-footer h1,
#tbay-footer h2,
#tbay-footer h3,
#tbay-footer h4,
#tbay-footer h5,
#tbay-footer h6,
.site-footer .widget-title,
.footer-widgets .widget-title,
#tbay-footer .widget-title {
    color: var(--kp-gold) !important;
    font-family: var(--kp-font-head) !important;
    letter-spacing: 0.06em;
}

#tbay-footer a,
.site-footer a,
.footer-widgets a {
    color: #bbb;
    transition: color var(--kp-transition);
}

#tbay-footer a:hover,
.site-footer a:hover,
.footer-widgets a:hover {
    color: var(--kp-gold) !important;
    text-decoration: none;
}

.footer-bottom,
#tbay-footer .footer-bottom {
    border-top: 1px solid rgba(245, 168, 0, 0.2);
    color: #666;
    font-family: var(--kp-font-ui);
    font-size: 12px;
    letter-spacing: 1px;
}


/* ----------------------------------------------------------------
 * 7. WOOCOMMERCE — PRICES
 * ---------------------------------------------------------------- */
.woocommerce .price,
.woocommerce-Price-amount,
.amount,
.price .woocommerce-Price-amount,
.product .price,
.summary .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--kp-gold) !important;
    font-family: var(--kp-font-ui);
    font-weight: 700;
    font-size: 1.1em;
}

del .woocommerce-Price-amount,
del .amount {
    color: #999 !important;
    opacity: 0.7;
}


/* ----------------------------------------------------------------
 * 8. WOOCOMMERCE — ADD TO CART BUTTONS
 * ---------------------------------------------------------------- */
.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.add_to_cart_button,
.single_add_to_cart_button,
.ajax_add_to_cart,
.product-btn-add-to-cart,
a.add_to_cart {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border: 2px solid var(--kp-gold) !important;
    font-family: var(--kp-font-ui) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 2px !important;
    transition: background var(--kp-transition),
        border-color var(--kp-transition),
        box-shadow var(--kp-transition);
}

.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.ajax_add_to_cart:hover,
a.add_to_cart:hover {
    background: var(--kp-gold-dark) !important;
    border-color: var(--kp-gold-dark) !important;
    color: var(--kp-dark) !important;
    box-shadow: 0 4px 18px rgba(245, 168, 0, 0.4);
}

/* "Added to Cart" / loading state */
.woocommerce a.button.loading,
.add_to_cart_button.loading {
    opacity: 0.75;
}


/* ----------------------------------------------------------------
 * 9. PRODUCT CARDS — Diza-correct selectors
 * ----------------------------------------------------------------
 *
 * Diza's real HTML structure (from loop-start.php + content-product.php):
 *
 *   <div class="display-products products products-grid">
 *     <div class="row" data-desktop="4" data-tablet="3" data-mobile="2">
 *       <div>                          ← flex column cell (THIS needs no extra padding)
 *         <div class="product ...">   ← the actual card (this gets the card styles)
 *           <div class="inner-v1">
 *             .product-thumb-wrap     ← image
 *             .product-info           ← title, price, button
 *
 * Previous overrides used `ul.products li.product` which Diza does NOT use.
 * ---------------------------------------------------------------- */

/* ── Row: NO negative margins — avoid triggering parent overflow:hidden clip ── */
.display-products.products-grid>.row,
.display-products.products>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    display: flex !important;
    gap: 0 !important;
}

/* ── Each flex column cell: padding creates the gutter ── */
.display-products.products-grid>.row>div,
.display-products.products>.row>div {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 0 !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    /* allow flex child to shrink below content size */
    overflow: visible !important;
    /* Do NOT override width/flex — Diza’s data-* JS sets those */
}

/* ── The card itself: fill the column cell ── */
.display-products .row>div>.product,
.display-products .row div.product,
.products-grid .row>div>.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    background: var(--kp-white);
    border: 1px solid #efefef;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    /* NEVER clip — was causing button/text cutoff */
    position: relative;
    transition: border-color var(--kp-transition),
        box-shadow var(--kp-transition),
        transform var(--kp-transition);
}

.display-products .row>div>.product:hover,
.products-grid .row>div>.product:hover {
    border-color: var(--kp-gold) !important;
    box-shadow: 0 6px 24px rgba(245, 168, 0, 0.18);
    transform: translateY(-2px);
}

/* ── Inner wrapper ── */
.display-products .row>div>.product .product-inner,
.display-products .row>div>.product .inner-v1,
.display-products .row>div>.product .inner-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Product image: overflow:hidden on the image wrapper ONLY, NOT the card ── */
.display-products .row>div>.product .product-thumb-wrap,
.display-products .row>div>.product .woocommerce-product-gallery,
.display-products .row>div>.product .product-thumbnail {
    overflow: hidden;
    /* clip image zoom-on-hover inside the thumb, not the card */
    background: #f9f9f9;
    border-radius: 4px 4px 0 0;
}

.display-products .row>div>.product .product-thumb-wrap img,
.display-products .row>div>.product .product-thumbnail img,
.display-products .row>div>.product a>img,
.display-products .row>div>.product .attachment-woocommerce_thumbnail {
    width: 100% !important;
    max-width: 100% !important;
    height: 110px !important;
    object-fit: contain !important;
    display: block;
    padding: 5px;
    background: #f9f9f9;
    transition: transform 0.35s ease;
}

.display-products .row>div>.product:hover .product-thumb-wrap img,
.display-products .row>div>.product:hover .attachment-woocommerce_thumbnail {
    transform: scale(1.04);
}

/* ── Product info area (title + price + button) ── */
.display-products .row>div>.product .product-info,
.display-products .row>div>.product .inner-v1 .product-content,
.display-products .row>div>.product .product-content-inner {
    padding: 4px 8px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ── Product title ── */
.display-products .row>div>.product .woocommerce-loop-product__title,
.display-products .row>div h2.woocommerce-loop-product__title,
.display-products .row>div h3.woocommerce-loop-product__title,
.display-products .row>div .product-title {
    font-family: var(--kp-font-head) !important;
    color: var(--kp-dark) !important;
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
    margin: 2px 0 3px !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    transition: color var(--kp-transition);
}

.display-products .row>div>.product:hover .woocommerce-loop-product__title,
.display-products .row>div>.product:hover .product-title {
    color: var(--kp-gold) !important;
}

/* ── Price ── */
.display-products .row>div>.product .price,
.display-products .row>div>.product .price .woocommerce-Price-amount {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 2px 0 8px !important;
}

/* ── Add to Cart: full-width, pinned to card bottom ── */
.display-products .row>div>.product .button.add_to_cart_button,
.display-products .row>div>.product a.button,
.display-products .row>div>.product .add_to_cart_button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: auto !important;
    font-size: 11px !important;
    padding: 9px 10px !important;
    letter-spacing: 1.5px;
    box-sizing: border-box !important;
}

/* ── Responsive: respect Diza's data-* JS but shrink gutter on small ── */
@media (max-width: 767px) {

    .display-products.products-grid>.row,
    .display-products.products>.row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .display-products.products-grid>.row>div,
    .display-products.products>.row>div {
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
    }

    .display-products .row>div>.product .product-thumb-wrap img,
    .display-products .row>div>.product .attachment-woocommerce_thumbnail {
        height: 160px !important;
    }
}

@media (max-width: 479px) {

    .display-products.products-grid>.row,
    .display-products.products>.row {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }

    .display-products.products-grid>.row>div,
    .display-products.products>.row>div {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }

    .display-products .row>div>.product .product-thumb-wrap img,
    .display-products .row>div>.product .attachment-woocommerce_thumbnail {
        height: 130px !important;
    }
}

/* ── All product grid ancestors must NOT clip ── */
.display-products,
.display-products.products-grid,
.display-products.products {
    overflow: visible !important;
    width: 100%;
}

/* ── Bootstrap row ancestors that could clip with overflow:hidden ── */
#tbay-main-content,
#tbay-main-content .row,
#tbay-main-content .container,
#tbay-main-content .container-fluid {
    overflow: visible !important;
}

/* ── Sidebar + content area: prevent Bootstrap pulling main column too narrow ── */
#tbay-main-content .content-area,
#primary.col-md-9,
#primary.col-md-8,
.woocommerce-page #primary {
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}


/* ── Fix: sidebar widget gap is too large — reduce sidebar gutter ── */
#sidebar-shop,
.sidebar-shop,
#secondary.col-md-3,
#secondary.col-md-4 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}


/* ── Also keep any legacy woocommerce ul.products working (widget areas etc.) ── */
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

.woocommerce ul.products li.product {
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    background: var(--kp-white);
    border: 1px solid #efefef;
    border-radius: 4px;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .woocommerce ul.products li.product {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
}

@media (max-width: 479px) {
    .woocommerce ul.products li.product {
        flex: 0 0 calc(50% - 4px);
        max-width: calc(50% - 4px);
    }
}

/* (old duplicate card CSS removed — see section 9 above for correct Diza selectors) */




/* ----------------------------------------------------------------
 * 10. SALE BADGES
 * ---------------------------------------------------------------- */
.woocommerce span.onsale,
.onsale,
.badge-sale,
.product-label.onsale,
.label-sale {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    font-family: var(--kp-font-ui) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px !important;
    border: none !important;
}

/* Any other badge / label override for teal/blue/green from Diza */
.label-hot,
.product-badge,
.badge-hot,
.badge-new {
    background: var(--kp-brown) !important;
    color: var(--kp-white) !important;
    font-family: var(--kp-font-ui) !important;
}


/* ----------------------------------------------------------------
 * 11. STAR RATINGS
 * ---------------------------------------------------------------- */
.star-rating span::before,
.star-rating::before,
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before,
.wc-block-grid__product-rating .star-rating span::before {
    color: var(--kp-gold) !important;
}

.woocommerce .star-rating {
    color: rgba(245, 168, 0, 0.25);
}


/* ----------------------------------------------------------------
 * 12. INPUT FIELDS
 * ---------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.woocommerce-input-wrapper input,
.woocommerce form .form-row input,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: border-color var(--kp-transition),
        box-shadow var(--kp-transition);
    font-family: var(--kp-font-body);
    font-size: 16px;
    color: var(--kp-body);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--kp-gold) !important;
    box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.18) !important;
    outline: none;
}


/* ----------------------------------------------------------------
 * 13. BREADCRUMBS
 * ---------------------------------------------------------------- */
/* Hide breadcrumbs on homepage only (body class set in functions.php) */
body.is-pharmacy-home #tbay-breadscrumb {
    display: none !important;
}

.woocommerce .woocommerce-breadcrumb,
.breadcrumbs,
.tbay-breadcrumb,
nav.breadcrumbs {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    letter-spacing: 1px;
    color: #888;
}

.woocommerce .woocommerce-breadcrumb a,
.breadcrumbs a,
.tbay-breadcrumb a {
    color: var(--kp-brown);
}

.woocommerce .woocommerce-breadcrumb a:hover,
.breadcrumbs a:hover {
    color: var(--kp-gold) !important;
}

/* Breadcrumb separator → gold */
.woocommerce .woocommerce-breadcrumb,
.breadcrumb-item+.breadcrumb-item::before,
.breadcrumbs .delimiter {
    color: var(--kp-gold);
}


/* ----------------------------------------------------------------
 * 14. PAGINATION
 * ---------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers a,
.page-numbers span,
.pagination .page-numbers {
    font-family: var(--kp-font-ui);
    border: 1px solid #ddd;
    color: var(--kp-body);
    transition: background var(--kp-transition),
        border-color var(--kp-transition),
        color var(--kp-transition);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.page-numbers a:hover {
    background: var(--kp-gold) !important;
    border-color: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers .current {
    background: var(--kp-gold) !important;
    border-color: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    font-weight: 700;
}


/* ----------------------------------------------------------------
 * 15. CATEGORY BADGES
 * ---------------------------------------------------------------- */
.product_cat a,
.woocommerce-loop-category__title,
.cat-badge,
.product-category-badge {
    border: 1px solid var(--kp-gold);
    color: var(--kp-brown);
    padding: 2px 10px;
    border-radius: 2px;
    font-family: var(--kp-font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background var(--kp-transition), color var(--kp-transition);
}

.product_cat a:hover,
.woocommerce-loop-category__title:hover {
    background: var(--kp-gold);
    color: var(--kp-dark) !important;
}


/* ----------------------------------------------------------------
 * 16. REPLACE DIZA DEFAULT TEAL / BLUE / GREEN ACCENTS
 * ---------------------------------------------------------------- */
/* Diza uses a teal/mint primary — nuclear-override to gold */
:root {
    --primary-color: #F5A800 !important;
    --color-primary: #F5A800 !important;
    --theme-color: #F5A800 !important;
}

/* Common Diza teal classes */
.tbay-color,
.text-color,
.primary-color {
    color: var(--kp-gold) !important;
}

.tbay-bg-color,
.background-color,
.primary-bg {
    background-color: var(--kp-gold) !important;
}

/* Any hardcoded teal/blue from Diza CSS */
.tbay-sticky-header.is-sticky,
.tbay-sticky-header.is-sticky #tbay-header-main {
    background: var(--kp-dark) !important;
    border-top: 3px solid var(--kp-gold);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Wishlist / compare icons hover */
.yith-wcwl-add-to-wishlist a:hover,
.compare-button a:hover,
.product-add-to-wishlist a:hover {
    color: var(--kp-gold) !important;
}


/* ----------------------------------------------------------------
 * 17. WOOCOMMERCE — NOTICES & BADGES
 * ---------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--kp-gold) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--kp-gold) !important;
}

.woocommerce-error {
    border-top-color: #c0392b !important;
}

/* Checkout secure lock badges */
#payment .payment_methods label img {
    filter: none;
}


/* ----------------------------------------------------------------
 * 18. WOOCOMMERCE — TABS (Single Product)
 * ---------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--kp-font-ui);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    color: #666;
    transition: color var(--kp-transition);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--kp-gold) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-top: 2px solid var(--kp-gold) !important;
    border-bottom-color: var(--kp-white);
}

/* ----------------------------------------------------------------
 * 19. MOBILE MENU
 * ---------------------------------------------------------------- */
.tbay-off-canvas,
.tbay-canvas-menu,
.mmenu__container {
    background: var(--kp-dark) !important;
}

.tbay-off-canvas .nav-mobile a,
.mmenu__container a,
.canvas-menu-item a {
    color: #ccc !important;
    font-family: var(--kp-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.tbay-off-canvas .nav-mobile a:hover,
.mmenu__container a:hover {
    color: var(--kp-gold) !important;
    background: rgba(245, 168, 0, 0.07) !important;
}

/* Hamburger icon */
.navbar-toggle .icon-bar,
.menu-toggle span {
    background: var(--kp-gold) !important;
}

/* ----------------------------------------------------------------
 * 20. MISCELLANEOUS — Transitions on interactive elements
 * ---------------------------------------------------------------- */
a,
button,
input,
select,
textarea,
.product-layout,
.woocommerce ul.products li.product,
.widget,
.tbay-button,
.star-rating,
img {
    transition: all var(--kp-transition);
}

/* Loading spinner */
.woocommerce-checkout-payment .blockUI.blockOverlay::before,
.blockUI.blockOverlay::before {
    border-top-color: var(--kp-gold) !important;
}

/* Back-to-top button */
#back-to-top,
#scroll-to-top {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border-radius: 2px;
}

#back-to-top:hover {
    background: var(--kp-gold-dark) !important;
}


/* ================================================================
 * UTILITY CLASSES
 * ================================================================ */

/* Gold button utility */
.kamel-gold-btn {
    display: inline-block;
    font-family: var(--kp-font-ui) !important;
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border: 2px solid var(--kp-gold);
    border-radius: 2px;
    padding: 13px 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--kp-transition),
        border-color var(--kp-transition),
        box-shadow var(--kp-transition);
}

.kamel-gold-btn:hover {
    background: var(--kp-gold-dark) !important;
    border-color: var(--kp-gold-dark) !important;
    color: var(--kp-dark) !important;
    box-shadow: 0 6px 20px rgba(245, 168, 0, 0.35);
    text-decoration: none;
}

/* Dark section utility */
.kamel-section-dark {
    background: var(--kp-dark) !important;
    color: #e0e0e0 !important;
}

.kamel-section-dark h1,
.kamel-section-dark h2,
.kamel-section-dark h3,
.kamel-section-dark h4,
.kamel-section-dark h5,
.kamel-section-dark h6 {
    color: var(--kp-gold) !important;
}

.kamel-section-dark p,
.kamel-section-dark li {
    color: #ccc;
}

.kamel-section-dark a {
    color: var(--kp-gold);
}

.kamel-section-dark a:hover {
    color: var(--kp-gold-dark);
}

.kamel-section-dark .kamel-gold-btn {
    color: var(--kp-dark) !important;
}

/* Divider with gold */
.kamel-divider {
    border: none;
    border-top: 2px solid var(--kp-gold);
    opacity: 0.4;
    margin: 2rem 0;
}

/* Gold text accent */
.kamel-gold {
    color: var(--kp-gold) !important;
}

.kamel-brown {
    color: var(--kp-brown) !important;
}

.kamel-bg-gold {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
}

.kamel-bg-dark {
    background: var(--kp-dark) !important;
}

.kamel-bg-brown {
    background: var(--kp-brown) !important;
    color: #fff !important;
}


/* ================================================================
 * KAMEL FRONT PAGE — HOME SECTIONS
 * ================================================================ */

.kamel-front-page {
    overflow-x: hidden;
}

/* Section title + subtitle (shared) */
.kamel-section-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--kp-dark);
    text-align: center;
    margin-bottom: 0.5rem;
    position: relative;
    padding-bottom: 14px;
}

.kamel-section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 52px;
    height: 3px;
    background: var(--kp-gold);
    border-radius: 2px;
}

.kamel-section-dark .kamel-section-title {
    color: var(--kp-gold) !important;
}

.kamel-section-sub {
    text-align: center;
    font-family: var(--kp-font-body);
    font-size: 1.1rem;
    color: #555;
    max-width: 640px;
    margin: 0 auto 2rem;
}

.kamel-section-dark .kamel-section-sub {
    color: #bbb;
}

.kamel-section-cta {
    text-align: center;
    margin-top: 2rem;
}

/* Buttons (hero + CTAs) */
.kamel-btn {
    display: inline-block;
    font-family: var(--kp-font-ui) !important;
    padding: 14px 32px;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background var(--kp-transition), border-color var(--kp-transition), color var(--kp-transition), box-shadow var(--kp-transition);
}

.kamel-btn-gold {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border: 2px solid var(--kp-gold);
}

.kamel-btn-gold:hover {
    background: var(--kp-gold-dark) !important;
    border-color: var(--kp-gold-dark);
    color: var(--kp-dark) !important;
    box-shadow: 0 4px 18px rgba(245, 168, 0, 0.35);
}

.kamel-btn-outline {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.kamel-btn-outline:hover {
    border-color: var(--kp-gold);
    color: var(--kp-gold) !important;
}

.kamel-btn-dark {
    background: var(--kp-dark) !important;
    color: var(--kp-gold) !important;
    border: 2px solid var(--kp-dark);
}

.kamel-btn-dark:hover {
    background: #333 !important;
    border-color: #333;
    color: var(--kp-gold) !important;
}

/* ---------- FULL-WIDTH LAYOUT (override Diza boxed) ---------- */
/* Diza .wrapper-container.boxed-layout limits to 1320px; we force full viewport in child */
#wrapper-container.wrapper-container,
#wrapper-container.boxed-layout,
body.kamel-pharmacy-body #wrapper-container,
body #wrapper-container.wrapper-container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
}

#tbay-main-content {
    max-width: none !important;
    width: 100% !important;
}

.kamel-pharmacy-header,
.kamel-hero {
    width: 100%;
    max-width: none;
}

.kamel-hero-inner.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.kamel-header-topbar .container,
.kamel-header-main .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Diza .container is 1200px at min-width 1200px; keep inner content centred but wrapper full */
.kamel-front-page .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Diza offcanvas/mobile menu: hide globally — Kamel uses its own drawer only */
#tbay-mobile-smartmenu.tbay-mmenu,
#tbay-mobile-smartmenu,
.tbay-mobile-smartmenu,
.tbay-offcanvas-main,
.tbay-mobile-menu-btn,
.active-mobile,
[data-toggle="offcanvas"],
.btn-canvas-menu,
.navbar-toggle {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure Diza nav toggles and mobile menu stay hidden (even without body class) */
body.kamel-pharmacy-body #tbay-mobile-smartmenu,
body.kamel-pharmacy-body .navbar-toggle,
body.kamel-pharmacy-body .tbay-mobile-menu-btn,
body.kamel-pharmacy-body .btn-canvas-menu {
    display: none !important;
}

/* ---------- SECTION 1 — HERO ---------- */
.kamel-hero {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kp-dark);
    color: #fff;
    padding: 4rem 1rem;
    text-align: center;
}

.kamel-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(245, 168, 0, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.kamel-hero[style*="--kamel-hero-bg-image"] .kamel-hero-bg {
    background-image: var(--kamel-hero-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.kamel-hero[style*="--kamel-hero-bg-image"] .kamel-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.75);
}

.kamel-hero[style*="--kamel-hero-bg-image"] .kamel-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(245, 168, 0, 0.12) 0%, transparent 60%);
}

.kamel-hero-inner {
    position: relative;
    z-index: 1;
}

.kamel-hero-logo-wrap {
    margin-bottom: 1.5rem;
}

.kamel-hero-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--kp-gold);
    padding: 8px;
}

.kamel-hero-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.25;
}

.kamel-hero-title em {
    color: var(--kp-gold);
    font-style: normal;
}

.kamel-hero-sub {
    font-family: var(--kp-font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 560px;
    margin: 0 auto 2rem;
    color: #fff;
    opacity: 0.95;
    line-height: 1.7;
}

.kamel-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.kamel-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    font-family: var(--kp-font-ui);
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
}

.kamel-hero-trust span {
    white-space: nowrap;
}

/* ---------- SECTION 2 — QUICK SERVICES BAR ---------- */
.kamel-services-bar {
    padding: 3rem 1rem;
    background: var(--kp-white);
}

.kamel-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.kamel-service-card {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 4px;
    padding: 2rem 1.25rem;
    text-align: center;
    transition: border-color var(--kp-transition), box-shadow var(--kp-transition);
}

.kamel-service-card:hover {
    border-color: var(--kp-gold);
    box-shadow: 0 8px 24px rgba(245, 168, 0, 0.15);
}

.kamel-service-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
}

.kamel-service-title {
    font-family: var(--kp-font-ui) !important;
    font-size: 1.1rem;
    color: var(--kp-dark);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kamel-service-desc {
    font-family: var(--kp-font-body);
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ---------- SECTION 3 — FEATURED PRODUCTS (row / grid) ---------- */
.kamel-featured-products {
    padding: 3rem 1rem;
    background: #f9f9f9;
}

.kamel-products-wrap {
    margin-top: 1rem;
}

/* Product list: 4 columns on desktop, 2 on tablet, 1 on small screens */
.kamel-products-wrap ul.products,
.kamel-products-wrap .products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch !important;
}

.kamel-products-wrap ul.products li.product,
.kamel-products-wrap .products li.product {
    margin: 0;
    width: auto;
}

.kamel-products-wrap .kamel-product-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition);
}

.kamel-products-wrap .kamel-product-card-inner:hover {
    box-shadow: 0 6px 20px rgba(245, 168, 0, 0.15);
    border-color: var(--kp-gold);
}

.kamel-no-woo {
    text-align: center;
    color: #666;
    padding: 2rem;
}

.kamel-no-categories {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    padding: 2rem 1rem;
    grid-column: 1 / -1;
    font-family: var(--kp-font-body);
}

.kamel-no-categories a {
    color: var(--kp-gold);
    text-decoration: underline;
}

.kamel-no-categories a:hover {
    color: var(--kp-gold-light);
}

/* ---------- SECTION 4 — PRODUCT CATEGORIES ---------- */
.kamel-categories {
    padding: 3rem 1rem;
}

.kamel-categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.kamel-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(245, 168, 0, 0.35);
    border-radius: 4px;
    text-decoration: none;
    color: #e0e0e0;
    transition: background var(--kp-transition), border-color var(--kp-transition), color var(--kp-transition);
}

.kamel-cat-card:hover {
    background: rgba(245, 168, 0, 0.1);
    border-color: var(--kp-gold);
    color: var(--kp-gold);
}

.kamel-cat-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.kamel-cat-name {
    font-family: var(--kp-font-ui) !important;
    font-size: 0.95rem;
    margin: 0 0 0.25rem;
    text-align: center;
    color: inherit;
}

.kamel-cat-count {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.kamel-cat-link {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kp-gold);
}

/* ---------- SECTION 5 — WHY CHOOSE KAMEL ---------- */
.kamel-why {
    padding: 3rem 1rem;
    background: #fff;
}

.kamel-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.kamel-why-text .kamel-section-title {
    text-align: left;
}

.kamel-why-text .kamel-section-title::after {
    left: 0;
    transform: none;
}

.kamel-why-text p {
    font-family: var(--kp-font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--kp-body);
    margin: 0;
}

.kamel-why-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.kamel-why-tile {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 1.25rem;
    border-left: 4px solid var(--kp-gold);
}

.kamel-why-check {
    color: var(--kp-gold);
    font-weight: 700;
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.kamel-why-tile h4 {
    font-family: var(--kp-font-ui) !important;
    font-size: 1rem;
    margin: 0 0 0.35rem;
    color: var(--kp-dark);
}

.kamel-why-tile p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ---------- SECTION 6 — TESTIMONIALS ---------- */
.kamel-testimonials {
    padding: 3rem 1rem;
    background: #f5f5f5;
}

.kamel-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.kamel-testimonial-card {
    background: #fff;
    border-radius: 4px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.kamel-testimonial-stars {
    color: var(--kp-gold);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.kamel-testimonial-card blockquote {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    font-style: italic;
    color: var(--kp-body);
    margin: 0 0 1rem;
    line-height: 1.7;
    border: none;
    padding: 0;
}

.kamel-testimonial-card cite {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    color: var(--kp-brown);
    font-style: normal;
}

/* ---------- SECTION 7 — LOCATIONS ---------- */
.kamel-locations {
    padding: 3rem 1rem;
}

.kamel-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.kamel-location-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(245, 168, 0, 0.3);
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
}

.kamel-location-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.kamel-location-address {
    font-family: var(--kp-font-body);
    color: #ddd;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.kamel-location-link {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kp-gold);
    text-decoration: none;
}

.kamel-location-link:hover {
    text-decoration: underline;
    color: var(--kp-gold-light);
}

/* ---------- SECTION 8 — NEWSLETTER ---------- */
.kamel-newsletter {
    padding: 3rem 1rem;
    background: var(--kp-gold);
    text-align: center;
}

.kamel-newsletter-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--kp-dark) !important;
    margin-bottom: 0.5rem;
}

.kamel-newsletter-sub {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.75);
    max-width: 520px;
    margin: 0 auto 1.5rem;
}

.kamel-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
}

.kamel-newsletter-input {
    flex: 1;
    min-width: 200px;
    padding: 14px 18px;
    border: 2px solid var(--kp-dark);
    border-radius: 2px;
    font-family: var(--kp-font-body);
    font-size: 16px;
}

.kamel-newsletter-note {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 0.5rem;
}


/* ================================================================
 * KAMEL SHOP PAGE — WOOCOMMERCE ARCHIVE
 * ================================================================ */

/* ---------- Prescription notice bar ---------- */
.kamel-shop-rx-notice {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 10px 3rem 10px 1rem;
    background: var(--kp-gold);
    color: var(--kp-dark);
    font-family: var(--kp-font-ui);
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.5px;
}

.kamel-shop-rx-notice-dismiss {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--kp-dark);
    opacity: 0.8;
}

.kamel-shop-rx-notice-dismiss:hover {
    opacity: 1;
}

/* ---------- Shop header banner ---------- */
.kamel-shop-banner {
    background: var(--kp-dark);
    color: #fff;
    padding: 2rem 1rem;
    border-bottom: 3px solid var(--kp-gold);
}

.kamel-shop-banner-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.kamel-shop-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.kamel-shop-breadcrumb a {
    color: var(--kp-gold);
}

.kamel-shop-breadcrumb .breadcrumb-sep,
.kamel-shop-breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.7);
}

.kamel-shop-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 0.35rem;
}

.kamel-shop-subtitle {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* ---------- Category filter bar ---------- */
.kamel-shop-categories-bar {
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
    padding: 0.75rem 0;
    overflow: hidden;
}

.kamel-shop-categories-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.kamel-shop-categories-scroll::-webkit-scrollbar {
    height: 6px;
}

.kamel-shop-cat-pill {
    flex-shrink: 0;
    display: inline-block;
    padding: 8px 18px;
    font-family: var(--kp-font-ui) !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--kp-body);
    text-decoration: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color var(--kp-transition), color var(--kp-transition), background var(--kp-transition);
}

.kamel-shop-cat-pill:hover {
    border-color: var(--kp-gold);
    color: var(--kp-gold);
}

.kamel-shop-cat-pill.active {
    background: var(--kp-dark);
    border-color: var(--kp-dark);
    color: var(--kp-gold);
}

.kamel-shop-cat-pill.active::after {
    content: '';
    display: block;
    margin-top: 6px;
    border-bottom: 2px solid var(--kp-gold);
    border-radius: 1px;
}

/* ---------- Shop content: toolbar above products, no shared grid (fixes missing first product) ---------- */
.kamel-shop-content-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.kamel-shop-content-grid>.kamel-shop-toolbar-wrap {
    flex: 0 0 auto;
    width: 100%;
}

.kamel-shop-content-grid>ul.products {
    flex: 1 1 auto;
    width: 100% !important;
}

/* Prevent any parent from making toolbar + products share a 5-column grid */
.post-type-archive-product #main,
.archive-shop#main,
body.woocommerce.archive #main {
    display: block !important;
}

/* Placeholder for hidden products: no grid cell, so first visible product stays in first slot */
ul.products li.kamel-product-placeholder {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Shop toolbar ---------- */
.kamel-shop-toolbar-wrap {
    margin-bottom: 1.5rem;
}

.kamel-shop-wrapper .tbay-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px 0;
}

.kamel-shop-wrapper .woocommerce-result-count {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    color: #555;
}

.kamel-shop-wrapper .main-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.kamel-shop-wrapper .woocommerce-ordering select,
.kamel-shop-wrapper .orderby {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 2px;
    min-width: 180px;
}

.kamel-shop-wrapper .display-mode-warpper {
    display: flex;
    gap: 4px;
}

.kamel-shop-wrapper .display-mode-btn {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 2px;
    color: #666;
}

.kamel-shop-wrapper .display-mode-btn:hover,
.kamel-shop-wrapper .display-mode-btn.active {
    border-color: var(--kp-gold);
    color: var(--kp-gold);
}

/* ---------- Product grid (cards) — shop page & product archives ---------- */
/* Diza uses .display-products.products > .row (not ul.products) for the shop loop; force that row to grid */
/* Include .products-list so list view also displays as grid (parent forces width:100% per item otherwise) */
.display-products.products .row,
.display-products.products.products-grid .row,
.display-products.products.products-list .row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    grid-auto-rows: auto !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
    list-style: none !important;
}

.display-products.products .row>*,
.display-products.products .row>li.product,
.display-products.products .row>div,
.display-products.products.products-grid .row>*,
.display-products.products.products-list .row>*,
.display-products.products.products-list .row>div {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 6px !important;
}

/* Clearfix ::before/::after on ul.products become grid items and steal the first cell — disable them */
/* Matches every selector WooCommerce / Diza theme injects (including woocommerce-page variants) */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce-page .products ul::before,
.woocommerce-page .products ul::after,
ul.products::before,
ul.products::after {
    content: "" !important;
    /* keep content so specificity isn't thrown off */
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Shop page (/shop/) — ensure clearfix is disabled (body classes: woocommerce, post-type-archive-product, archive) */
body.woocommerce.post-type-archive-product .woocommerce ul.products::before,
body.woocommerce.post-type-archive-product .woocommerce ul.products::after,
body.woocommerce.post-type-archive-product ul.products::before,
body.woocommerce.post-type-archive-product ul.products::after,
body.woocommerce.post-type-archive-product .kamel-shop-content-grid ul.products::before,
body.woocommerce.post-type-archive-product .kamel-shop-content-grid ul.products::after,
body.woocommerce.archive .woocommerce .products ul::before,
body.woocommerce.archive .woocommerce .products ul::after {
    content: "" !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Standard WooCommerce ul.products (Kamel loop; shop, archive, home) — 5 columns, compact cards */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
.post-type-archive-product ul.products,
body.woocommerce ul.products,
#tbay-main-content ul.products,
.kamel-shop-wrapper ul.products,
.kamel-shop-wrapper .products,
#main ul.products,
#main .products,
.kamel-products-wrap ul.products,
.kamel-products-wrap .products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    list-style: none !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
    align-items: stretch !important;
    grid-auto-rows: auto !important;
}

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.post-type-archive-product ul.products li.product,
body.woocommerce ul.products li.product,
#tbay-main-content ul.products li.product,
.kamel-shop-wrapper ul.products li.product,
.kamel-shop-wrapper .products li.product,
#main ul.products li.product,
.kamel-products-wrap ul.products li.product,
.kamel-products-wrap .products li.product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
}

.kamel-product-card {
    margin: 0 !important;
    display: flex !important;
    min-height: 0;
}

.kamel-product-card-inner {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition), transform var(--kp-transition);
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.kamel-product-card:hover .kamel-product-card-inner {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    border-color: var(--kp-gold);
    transform: translateY(-3px);
}

/* Image: square but capped height — compact cards */
.kamel-product-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    overflow: hidden;
    background: #f9f9f9;
    min-height: 50px;
    max-height: 70px;
}

.kamel-product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kamel-product-card-image .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--kp-gold);
    color: var(--kp-dark);
    font-family: var(--kp-font-ui);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2px;
    text-transform: uppercase;
}

.kamel-product-badge.rx-required {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #c0392b;
    color: #fff;
    font-family: var(--kp-font-ui);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kamel-product-card-body {
    padding: 0.4rem 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.kamel-product-cat-label {
    font-family: var(--kp-font-ui);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kp-gold);
    text-decoration: none;
    margin-bottom: 0.2rem;
    display: inline-block;
}

.kamel-product-cat-label:hover {
    color: var(--kp-gold-dark);
}

.kamel-product-title {
    font-family: var(--kp-font-head) !important;
    font-size: 0.68rem;
    margin: 0 0 0.15rem;
    line-height: 1.2;
}

.kamel-product-title a {
    color: var(--kp-dark);
    text-decoration: none;
}

.kamel-product-title a:hover {
    color: var(--kp-gold);
}

.kamel-product-excerpt {
    font-family: var(--kp-font-body);
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kamel-product-price-wrap {
    margin-bottom: 0.15rem;
}

.kamel-product-price-wrap .price,
.kamel-product-price-wrap .amount {
    color: var(--kp-gold) !important;
    font-family: var(--kp-font-ui);
    font-weight: 700;
    font-size: 0.95rem;
}

.kamel-product-stock {
    font-family: var(--kp-font-ui);
    font-size: 10px;
    margin-bottom: 0.25rem;
}

.kamel-product-stock .in-stock {
    color: #27ae60;
}

.kamel-product-stock .out-of-stock {
    color: #c0392b;
}

.kamel-product-card .button,
.kamel-product-card .add_to_cart_button {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border: 2px solid var(--kp-gold) !important;
    font-family: var(--kp-font-ui) !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 2px;
    margin-top: auto;
}

.kamel-product-card .button:hover,
.kamel-product-card .add_to_cart_button:hover {
    background: var(--kp-gold-dark) !important;
    border-color: var(--kp-gold-dark) !important;
    color: var(--kp-dark) !important;
}

/* ---------- Sidebar ---------- */
.kamel-shop-sidebar {
    font-family: var(--kp-font-body);
}

.kamel-shop-sidebar .widget {
    margin-bottom: 1.5rem;
}

.kamel-shop-sidebar .widget-title {
    font-family: var(--kp-font-head) !important;
    color: var(--kp-dark);
    font-size: 1rem;
    border-bottom: 2px solid var(--kp-gold);
    padding-bottom: 8px;
}

.kamel-shop-need-help {
    background: var(--kp-dark);
    color: #fff;
    padding: 1.25rem;
    border-radius: 4px;
    margin-top: 1.5rem;
    border: 1px solid rgba(245, 168, 0, 0.3);
}

.kamel-shop-need-help-title {
    font-family: var(--kp-font-head) !important;
    font-size: 1rem;
    color: var(--kp-gold);
    margin: 0 0 0.5rem;
}

.kamel-shop-need-help p {
    margin: 0 0 0.5rem;
    font-size: 14px;
    color: #ddd;
}

.kamel-shop-need-help-phone {
    display: inline-block;
    font-family: var(--kp-font-ui);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--kp-gold);
    text-decoration: none;
}

.kamel-shop-need-help-phone:hover {
    color: var(--kp-gold-light);
}

/* ---------- Pagination ---------- */
.kamel-shop-wrapper .woocommerce-pagination {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.kamel-shop-wrapper .woocommerce-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kamel-shop-wrapper .woocommerce-pagination .page-numbers li a,
.kamel-shop-wrapper .woocommerce-pagination .page-numbers li span {
    font-family: var(--kp-font-ui);
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 2px;
    color: var(--kp-body);
    text-decoration: none;
    background: #fff;
    transition: background var(--kp-transition), border-color var(--kp-transition), color var(--kp-transition);
}

.kamel-shop-wrapper .woocommerce-pagination .page-numbers li a:hover {
    background: var(--kp-gold);
    border-color: var(--kp-gold);
    color: var(--kp-dark);
}

.kamel-shop-wrapper .woocommerce-pagination .page-numbers li span.current {
    background: var(--kp-gold);
    border-color: var(--kp-gold);
    color: var(--kp-dark);
    font-weight: 700;
}

/* Shop responsive — product grid columns */
@media (max-width: 991px) {

    .display-products.products .row,
    .display-products.products.products-grid .row,
    .display-products.products.products-list .row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    ul.products,
    ul.products,
    .kamel-products-wrap ul.products,
    .kamel-products-wrap .products,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .post-type-archive-product ul.products,
    body.woocommerce ul.products,
    #tbay-main-content ul.products,
    .kamel-shop-wrapper ul.products,
    .kamel-shop-wrapper .products,
    #main ul.products,
    #main .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {

    .display-products.products .row,
    .display-products.products.products-grid .row,
    .display-products.products.products-list .row {
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    }

    ul.products,
    .kamel-products-wrap ul.products,
    .kamel-products-wrap .products,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .post-type-archive-product ul.products,
    body.woocommerce ul.products,
    #tbay-main-content ul.products,
    .kamel-shop-wrapper ul.products,
    .kamel-shop-wrapper .products,
    #main ul.products,
    #main .products {
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    }

    .kamel-shop-rx-notice {
        padding-right: 2.5rem;
        font-size: 12px;
    }
}


/* ================================================================
 * KAMEL SINGLE PRODUCT PAGE
 * ================================================================ */

/* Breadcrumb */
.kamel-single-breadcrumb-wrap {
    padding: 0.75rem 15px;
}

.kamel-single-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kamel-single-breadcrumb a {
    color: var(--kp-gold);
}

.kamel-single-breadcrumb .breadcrumb-sep {
    color: #999;
    margin: 0 4px;
}

/* Prescription alert */
.kamel-single-rx-alert {
    margin-bottom: 1rem;
}

.kamel-single-rx-alert-text {
    background: var(--kp-gold);
    color: var(--kp-dark);
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 1rem;
    margin: 0;
    border-radius: 2px;
}

/* Product hero 2-column */
.kamel-single-main .row {
    align-items: flex-start;
}

.kamel-single-images {
    position: relative;
}

.kamel-single-trust-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(17, 17, 17, 0.85);
    color: var(--kp-gold);
    font-family: var(--kp-font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 12px;
    text-align: center;
    border-radius: 2px;
}

.kamel-single-info .summary {
    padding-left: 0;
}

/* Right column: category, title */
.kamel-single-summary .kamel-product-cat-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: var(--kp-font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--kp-gold);
}

.kamel-single-summary .kamel-product-cat-label:hover {
    color: var(--kp-gold-dark);
}

.kamel-single-summary .product_title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--kp-dark);
    margin-bottom: 0.5rem;
}

.kamel-single-summary .woocommerce-product-rating {
    margin-bottom: 0.75rem;
}

.kamel-single-summary .star-rating {
    color: var(--kp-gold);
}

.kamel-single-summary .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kp-gold) !important;
    margin-bottom: 1rem;
}

.kamel-single-summary .woocommerce-product-details__short-description {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.kamel-single-summary .stock {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    margin-bottom: 1rem;
}

.kamel-single-summary .stock.in-stock {
    color: #27ae60;
}

.kamel-single-summary .stock.out-of-stock {
    color: #c0392b;
}

/* Quantity + Add to Cart */
.kamel-single-summary .quantity input {
    border: 2px solid rgba(245, 168, 0, 0.5);
    border-radius: 2px;
    padding: 10px 14px;
    font-size: 16px;
    width: 80px;
}

.kamel-single-summary .single_add_to_cart_button {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    border: 2px solid var(--kp-gold) !important;
    font-family: var(--kp-font-ui) !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 14px 24px;
    width: 100%;
    max-width: 320px;
    border-radius: 2px;
    margin-top: 0.5rem;
}

.kamel-single-summary .single_add_to_cart_button:hover {
    background: var(--kp-gold-dark) !important;
    border-color: var(--kp-gold-dark) !important;
}

.kamel-buy-now-wrap {
    margin: 1rem 0 0 !important;
}

.kamel-btn-buy-now {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid var(--kp-gold);
    background: transparent !important;
    color: var(--kp-gold) !important;
    font-family: var(--kp-font-ui) !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 2px;
    text-decoration: none;
}

.kamel-btn-buy-now:hover {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
}

/* Divider, meta, share */
.kamel-single-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 1.5rem 0;
}

.kamel-single-summary .product_meta {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    color: #666;
}

.kamel-single-summary .product_meta a {
    color: var(--kp-gold);
}

.kamel-single-share {
    margin: 1rem 0;
}

.kamel-share-whatsapp {
    display: inline-block;
    padding: 8px 16px;
    background: #25D366;
    color: #fff !important;
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
}

.kamel-share-whatsapp:hover {
    background: #20bd5a;
    color: #fff !important;
}

.kamel-single-have-question {
    font-family: var(--kp-font-ui);
    font-size: 14px;
    margin: 1rem 0 0 !important;
}

.kamel-single-have-question a {
    color: var(--kp-gold);
    font-weight: 700;
}

.kamel-have-question-icon {
    margin-right: 6px;
}

/* Tabs */
.kamel-single-product .woocommerce-tabs {
    margin-top: 2rem;
}

.kamel-single-product .wc-tabs-wrapper .tabs {
    border-bottom: 2px solid #eee;
    margin-bottom: 0;
    padding: 0;
}

.kamel-single-product .wc-tabs-wrapper .tabs li {
    margin: 0;
}

.kamel-single-product .wc-tabs-wrapper .tabs li a {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    padding: 12px 20px;
    display: block;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.kamel-single-product .wc-tabs-wrapper .tabs li.active a,
.kamel-single-product .wc-tabs-wrapper .tabs li a:hover {
    color: var(--kp-gold);
    border-bottom-color: var(--kp-gold);
}

.kamel-tab-content {
    font-family: var(--kp-font-body);
    line-height: 1.8;
    padding: 1.5rem 0;
}

/* Trust badges row */
.kamel-single-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
    padding: 1.5rem 1rem;
    background: #f9f9f9;
    border-radius: 4px;
    margin: 1.5rem 0;
}

.kamel-trust-badge {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--kp-dark);
}

/* Related products — "You May Also Need" (full-width grid, no shrinking to thin strips) */
.single-product .kamel-related-products-wrapper,
.single-product .related.products,
.woocommerce .kamel-related-products-wrapper,
#product-related {
    grid-column: 1 / -1 !important;
    /* span all columns if parent is grid */
}

.kamel-related-products-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    clear: both;
    display: block !important;
}

.kamel-related-products {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    display: block !important;
}

.kamel-related-title {
    font-family: var(--kp-font-head) !important;
    font-size: 1.5rem;
    color: var(--kp-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--kp-gold);
    display: inline-block;
}

/* Grid: minmax prevents columns shrinking to "tiny lines"; 4 equal columns */
.kamel-single-product .related.products ul.products,
.related.products.kamel-related-products ul.products,
#product-related ul.products,
.kamel-related-products-wrapper ul.products {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
    gap: 0.75rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0;
}

/* Each product card: fill grid cell, ensure minimum width so no "tiny line" */
.related.products.kamel-related-products li.product,
.kamel-related-products li.product,
#product-related li.product,
.kamel-related-products-wrapper li.product {
    width: auto !important;
    max-width: none !important;
    min-width: 140px !important;
    /* prevent shrinking to sliver */
    margin: 0 !important;
    padding: 0 !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    box-sizing: border-box;
}

.related.products.kamel-related-products .kamel-product-card-inner,
.kamel-related-products .kamel-product-card-inner {
    min-width: 0;
    /* allow flex shrink within cell */
}

.related.products.kamel-related-products .kamel-product-card-inner,
.kamel-related-products .kamel-product-card-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
}

.related.products.kamel-related-products .kamel-product-card-body,
.kamel-related-products .kamel-product-card-body {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 1.25rem !important;
    writing-mode: horizontal-tb !important;
}

.woocommerce-loop-product__title kamel-product-title {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.related.products.kamel-related-products .kamel-product-title,
.related.products.kamel-related-products h2.woocommerce-loop-product__title,
.related.products.kamel-related-products .woocommerce-loop-product__title a,
.kamel-related-products .kamel-product-title,
.kamel-related-products h2.woocommerce-loop-product__title {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin: 0 0 0.5rem !important;
}

.related.products.kamel-related-products .kamel-product-card .button,
.related.products.kamel-related-products .add_to_cart_button,
.kamel-related-products .kamel-product-card .button,
.kamel-related-products .add_to_cart_button {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
}

.related.products.kamel-related-products .kamel-product-card-image,
.kamel-related-products .kamel-product-card-image {
    width: 100% !important;
    aspect-ratio: 1 !important;
    min-height: 0 !important;
}

.related.products.kamel-related-products .kamel-product-card-image img,
.kamel-related-products .kamel-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Placeholder when no image: keep aspect ratio, subtle background */
.related.products.kamel-related-products .kamel-product-card-image .woocommerce-placeholder,
.kamel-related-products .kamel-product-card-image .attachment-woocommerce_thumbnail {
    background: #f0f0f0;
    min-height: 140px;
}

@media (max-width: 991px) {

    .kamel-single-product .related.products ul.products,
    .related.products.kamel-related-products ul.products,
    #product-related ul.products,
    .kamel-related-products-wrapper ul.products {
        grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    }
}

/* Related products: mobile stays 2 per row (no single column) */
@media (max-width: 576px) {

    .kamel-single-product .related.products ul.products,
    .related.products.kamel-related-products ul.products,
    #product-related ul.products,
    .kamel-related-products-wrapper ul.products {
        grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    }
}

/* Recently viewed (if theme outputs it) */
.kamel-single-product .recently-viewed,
.kamel-single-product .woocommerce-recently-viewed {
    margin-top: 2rem;
}


/* ================================================================
 * KAMEL ABOUT US PAGE
 * ================================================================ */

.kamel-about-page {
    overflow-x: hidden;
}

/* Section title (shared on About page) */
.kamel-about-section-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    color: var(--kp-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 12px;
    position: relative;
    display: inline-block;
}

.kamel-about-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    background: var(--kp-gold);
    border-radius: 2px;
}

/* ---------- SECTION 1 — HERO ---------- */
.kamel-about-hero {
    padding: 3rem 1rem;
    text-align: center;
    position: relative;
}

.kamel-about-hero[style*="--kamel-page-hero-bg"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--kamel-page-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.kamel-about-hero[style*="--kamel-page-hero-bg"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 0.8);
    z-index: 0;
}

.kamel-about-hero[style*="--kamel-page-hero-bg"] .container {
    position: relative;
    z-index: 1;
}

.kamel-about-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.kamel-about-breadcrumb a {
    color: var(--kp-gold);
}

.kamel-about-breadcrumb .breadcrumb-sep,
.kamel-about-breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.75);
}

.kamel-about-hero-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #fff;
    margin: 0 0 0.5rem;
}

.kamel-about-hero-sub {
    font-family: var(--kp-font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.kamel-about-hero-line {
    display: block;
    width: 60px;
    height: 3px;
    background: var(--kp-gold);
    margin: 0 auto;
    border-radius: 2px;
}

/* ---------- SECTION 2 — OUR STORY ---------- */
.kamel-about-story {
    padding: 3rem 1rem;
    background: #fff;
}

.kamel-about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.kamel-about-main-text {
    font-family: var(--kp-font-body);
    font-size: 19px;
    line-height: 1.85;
    color: var(--kp-body);
}

.kamel-about-main-text p {
    margin-bottom: 1.25rem;
    font-family: var(--kp-font-body);
    font-size: 19px;
    line-height: 1.85;
}

.kamel-about-main-text p:last-child {
    margin-bottom: 0;
}

.kamel-about-story-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.kamel-about-stat {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-left: 4px solid var(--kp-gold);
    padding: 1.5rem;
    text-align: center;
    border-radius: 4px;
}

.kamel-about-stat-number {
    display: block;
    font-family: var(--kp-font-head) !important;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--kp-gold);
    line-height: 1.2;
}

.kamel-about-stat-label {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    margin-top: 0.35rem;
    display: block;
}

/* ---------- SECTION 3 — MISSION STRIP ---------- */
.kamel-about-mission {
    padding: 3rem 1rem;
}

.kamel-about-mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.kamel-about-mission-col {
    padding: 1rem;
}

.kamel-about-mission-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 8px rgba(245, 168, 0, 0.4));
}

.kamel-about-mission-title {
    font-family: var(--kp-font-head) !important;
    font-size: 1.15rem;
    color: var(--kp-gold);
    margin: 0 0 0.75rem;
}

.kamel-about-mission-col p {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    color: #ccc;
    margin: 0;
    line-height: 1.6;
}

/* ---------- SECTION 4 — WHY TRUST US ---------- */
.kamel-about-trust {
    padding: 3rem 1rem;
    background: #f9f9f9;
}

.kamel-about-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.kamel-about-trust-card {
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid var(--kp-gold);
    padding: 1.5rem;
    border-radius: 4px;
    transition: box-shadow var(--kp-transition);
}

.kamel-about-trust-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.kamel-about-trust-icon {
    font-size: 1.75rem;
    color: var(--kp-gold);
    display: block;
    margin-bottom: 0.75rem;
}

.kamel-about-trust-card h3 {
    font-family: var(--kp-font-ui) !important;
    font-size: 1rem;
    color: var(--kp-dark);
    margin: 0 0 0.5rem;
}

.kamel-about-trust-card p {
    font-family: var(--kp-font-body);
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* ---------- SECTION 5 — LOCATIONS ---------- */
.kamel-about-locations {
    padding: 3rem 1rem;
    background: #fff;
}

.kamel-about-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.kamel-about-location-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 1.5rem;
    text-align: center;
    border-radius: 4px;
    transition: border-color var(--kp-transition);
}

.kamel-about-location-card:hover {
    border-color: var(--kp-gold);
}

.kamel-about-location-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.kamel-about-location-address {
    font-family: var(--kp-font-body);
    color: var(--kp-body);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.kamel-about-location-link {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kp-gold);
    text-decoration: none;
}

.kamel-about-location-link:hover {
    text-decoration: underline;
    color: var(--kp-gold-dark);
}

/* ---------- SECTION 6 — CTA ---------- */
.kamel-about-cta {
    padding: 3rem 1rem;
    background: var(--kp-gold);
    text-align: center;
}

.kamel-about-cta-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    color: var(--kp-dark) !important;
    margin: 0 0 1.5rem;
}

.kamel-about-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.kamel-btn-outline-dark {
    background: transparent !important;
    color: var(--kp-dark) !important;
    border: 2px solid var(--kp-dark);
}

.kamel-btn-outline-dark:hover {
    background: var(--kp-dark) !important;
    color: var(--kp-gold) !important;
    border-color: var(--kp-dark);
}

/* About page responsive */
@media (max-width: 991px) {
    .kamel-about-story-grid {
        grid-template-columns: 1fr;
    }

    .kamel-about-mission-grid {
        grid-template-columns: 1fr;
    }

    .kamel-about-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kamel-about-locations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .kamel-about-story-stats {
        grid-template-columns: 1fr;
    }

    .kamel-about-trust-grid {
        grid-template-columns: 1fr;
    }

    .kamel-about-cta-btns {
        flex-direction: column;
    }
}


/* ================================================================
 * KAMEL SERVICES PAGE
 * ================================================================ */

.kamel-services-page {
    overflow-x: hidden;
}

/* ---------- SECTION 1 — HERO ---------- */
.kamel-services-hero {
    padding: 3rem 1rem;
    text-align: center;
    position: relative;
}

.kamel-services-hero[style*="--kamel-page-hero-bg"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--kamel-page-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.kamel-services-hero[style*="--kamel-page-hero-bg"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 0.8);
    z-index: 0;
}

.kamel-services-hero[style*="--kamel-page-hero-bg"] .container {
    position: relative;
    z-index: 1;
}

.kamel-services-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.kamel-services-breadcrumb a {
    color: var(--kp-gold);
}

.kamel-services-breadcrumb .breadcrumb-sep,
.kamel-services-breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.75);
}

.kamel-services-hero-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #fff;
    margin: 0 0 0.5rem;
}

.kamel-services-hero-sub {
    font-family: var(--kp-font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.kamel-services-hero-line {
    display: block;
    width: 60px;
    height: 3px;
    background: var(--kp-gold);
    margin: 0 auto;
    border-radius: 2px;
}

/* ---------- SECTION 2 — SERVICES GRID ---------- */
.kamel-services-grid-section {
    padding: 3rem 1rem;
    background: #fff;
}

.kamel-services-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.kamel-service-card-large {
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid var(--kp-gold);
    padding: 2rem 1.5rem;
    border-radius: 4px;
    position: relative;
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition);
}

.kamel-service-card-large:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    border-left-color: var(--kp-gold-dark);
}

.kamel-service-card-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    line-height: 1;
}

.kamel-service-card-title {
    font-family: var(--kp-font-head) !important;
    font-size: 1.25rem;
    color: var(--kp-dark);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.kamel-service-card-desc {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--kp-body);
    margin: 0 0 1.25rem;
}

.kamel-service-card-link {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kp-gold);
    text-decoration: none;
}

.kamel-service-card-link:hover {
    color: var(--kp-gold-dark);
    text-decoration: underline;
}

/* Service details (anchor targets for Learn more) */
.kamel-services-details-section {
    padding: 2rem 1rem 3rem;
    background: #fff;
    border-top: 1px solid #eee;
}

.kamel-services-details-heading {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--kp-dark);
    margin: 0 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--kp-gold);
}

.kamel-services-details-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.kamel-service-detail {
    padding: 1.25rem;
    background: #fafafa;
    border-radius: 4px;
    border-left: 4px solid var(--kp-gold);
}

.kamel-service-detail-title {
    font-family: var(--kp-font-head) !important;
    font-size: 1.1rem;
    color: var(--kp-dark);
    margin: 0 0 0.5rem;
}

.kamel-service-detail p {
    margin: 0 0 0.75rem;
    font-family: var(--kp-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
}

.kamel-service-detail-shop {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--kp-gold);
    text-decoration: none;
}

.kamel-service-detail-shop:hover {
    color: var(--kp-gold-dark);
    text-decoration: underline;
}

/* Upload Prescription page */
.kamel-upload-prescription-hero {
    padding: 2rem 1rem;
}

.kamel-upload-prescription-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 13px;
}

.kamel-upload-prescription-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
}

.kamel-upload-prescription-breadcrumb .breadcrumb-current {
    color: var(--kp-gold);
}

.kamel-upload-prescription-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 0.5rem;
    color: #fff;
}

.kamel-upload-prescription-sub {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 600px;
}

.kamel-upload-prescription-content {
    padding: 2rem 1rem 3rem;
}

.kamel-upload-prescription-order-note {
    padding: 1rem;
    background: #e8f5e9;
    border-left: 4px solid var(--kp-gold);
    margin-bottom: 1.5rem;
    font-family: var(--kp-font-body);
}

.kamel-upload-prescription-heading {
    font-family: var(--kp-font-head) !important;
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: var(--kp-dark);
}

.kamel-upload-prescription-list {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    font-family: var(--kp-font-body);
    line-height: 1.6;
}

.kamel-upload-prescription-form-wrap {
    margin: 2rem 0;
}

.kamel-upload-prescription-no-form {
    color: #666;
    margin-bottom: 1rem;
}

.kamel-upload-prescription-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    font-family: var(--kp-font-body);
    color: #555;
}

.kamel-upload-prescription-cta a {
    color: var(--kp-gold);
}

.kamel-upload-prescription-cta a:hover {
    color: var(--kp-gold-dark);
}

.kamel-service-card-badge {
    display: inline-block;
    background: var(--kp-gold);
    color: var(--kp-dark);
    font-family: var(--kp-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 2px;
}

/* ---------- SECTION 3 — HOW IT WORKS ---------- */
.kamel-services-process {
    padding: 3rem 1rem;
    background: #f9f9f9;
}

.kamel-services-process-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    color: var(--kp-dark);
    text-align: center;
    margin-bottom: 2rem;
}

.kamel-services-process-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.kamel-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
}

.kamel-process-num {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kp-gold);
    color: var(--kp-dark);
    font-family: var(--kp-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.kamel-process-label {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kp-body);
    margin: 0;
    max-width: 140px;
    line-height: 1.3;
}

.kamel-process-connector {
    flex: 0 0 24px;
    height: 2px;
    background: var(--kp-gold);
    opacity: 0.6;
}

@media (max-width: 768px) {
    .kamel-process-connector {
        flex: 0 0 16px;
    }

    .kamel-process-label {
        font-size: 11px;
        max-width: 100px;
    }
}

/* ---------- SECTION 4 — FREE SERVICES ---------- */
.kamel-services-free {
    padding: 2rem 1rem;
    text-align: center;
}

.kamel-services-free-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--kp-gold);
    margin: 0 0 1rem;
}

.kamel-services-free-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
}

.kamel-services-free-item {
    font-family: var(--kp-font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

/* ---------- SECTION 5 — CTA ---------- */
.kamel-services-cta {
    padding: 3rem 1rem;
    background: #fff;
    text-align: center;
    border-top: 1px solid #eee;
}

.kamel-services-cta-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    color: var(--kp-dark);
    margin: 0 0 0.5rem;
}

.kamel-services-cta-phone {
    margin: 0 0 1.5rem;
}

.kamel-services-cta-phone a {
    font-family: var(--kp-font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--kp-gold);
}

.kamel-services-cta-icon {
    margin-right: 8px;
}

.kamel-services-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.kamel-btn-whatsapp {
    background: #25D366 !important;
    color: #fff !important;
    border: 2px solid #25D366 !important;
}

.kamel-btn-whatsapp:hover {
    background: #20bd5a !important;
    border-color: #20bd5a !important;
    color: #fff !important;
}

/* Services page responsive */
@media (max-width: 991px) {
    .kamel-services-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kamel-services-cards {
        grid-template-columns: 1fr;
    }

    .kamel-services-process-steps {
        flex-direction: column;
        gap: 1rem;
    }

    .kamel-process-connector {
        width: 2px;
        height: 24px;
        flex: none;
    }

    .kamel-services-free-list {
        flex-direction: column;
    }

    .kamel-services-cta-btns {
        flex-direction: column;
    }
}


/* ================================================================
 * KAMEL LOCATIONS PAGE
 * ================================================================ */

.kamel-locations-page {
    overflow-x: hidden;
}

.kamel-locations-page .container-wide {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- SECTION 1 — HERO ---------- */
.kamel-locations-hero {
    padding: 3rem 1rem;
    text-align: center;
}

.kamel-locations-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.kamel-locations-breadcrumb a {
    color: var(--kp-gold);
}

.kamel-locations-breadcrumb .breadcrumb-sep,
.kamel-locations-breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.75);
}

.kamel-locations-hero-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #fff;
    margin: 0 0 0.5rem;
}

.kamel-locations-hero-sub {
    font-family: var(--kp-font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;
}

.kamel-locations-hero-line {
    display: block;
    width: 60px;
    height: 3px;
    background: var(--kp-gold);
    margin: 0 auto;
    border-radius: 2px;
}

/* ---------- SECTION 2 — LOCATION CARDS ---------- */
.kamel-locations-cards-section {
    padding: 3rem 1rem;
    background: #f9f9f9;
}

.kamel-locations-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.kamel-location-card-full {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition);
}

.kamel-location-card-full:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(245, 168, 0, 0.4);
}

.kamel-location-card-name {
    font-family: var(--kp-font-head) !important;
    font-size: 1.15rem;
    color: var(--kp-dark);
    margin: 0;
    padding: 1.25rem 1.25rem 0.5rem;
    border-bottom: 2px solid var(--kp-gold);
    margin-bottom: 0;
}

.kamel-location-card-address {
    font-family: var(--kp-font-body);
    font-size: 0.95rem;
    color: var(--kp-body);
    margin: 0;
    padding: 0.75rem 1.25rem;
    line-height: 1.5;
}

.kamel-location-card-map-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #eee;
}

.kamel-location-card-map {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
}

.kamel-location-card-phone {
    margin: 0;
    padding: 0.75rem 1.25rem 0;
    font-family: var(--kp-font-ui);
    font-size: 14px;
}

.kamel-location-card-phone a {
    color: var(--kp-gold);
    font-weight: 600;
}

.kamel-location-icon {
    margin-right: 6px;
}

.kamel-location-card-hours {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    color: #666;
    margin: 0;
    padding: 0.25rem 1.25rem 1rem;
}

.kamel-location-card-btn {
    display: block;
    text-align: center;
    margin: 0 1.25rem 1.25rem;
}

/* ---------- SECTION 3 — CONTACT STRIP ---------- */
.kamel-locations-contact-strip {
    padding: 2rem 1rem;
    text-align: center;
}

.kamel-locations-contact-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--kp-gold);
    margin: 0 0 1rem;
}

.kamel-locations-contact-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
    margin-bottom: 1rem;
}

.kamel-locations-contact-details p {
    margin: 0;
    font-family: var(--kp-font-ui);
    font-size: 1rem;
    color: #ddd;
}

.kamel-locations-contact-details a {
    color: var(--kp-gold);
    font-weight: 600;
}

.kamel-locations-social {
    font-family: var(--kp-font-ui);
    font-size: 0.95rem;
    color: #ccc;
}

.kamel-locations-social a {
    color: var(--kp-gold);
}

.kamel-locations-social-sep {
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ---------- SECTION 4 — DELIVERY ---------- */
.kamel-locations-delivery {
    padding: 2rem 1rem;
    background: var(--kp-gold);
    text-align: center;
}

.kamel-locations-delivery-text {
    font-family: var(--kp-font-body);
    font-size: 1.1rem;
    color: var(--kp-dark);
    margin: 0;
}

.kamel-locations-delivery-link {
    font-family: var(--kp-font-ui);
    font-weight: 700;
    color: var(--kp-dark);
    text-decoration: underline;
    margin-left: 0.35rem;
}

.kamel-locations-delivery-link:hover {
    color: #333;
}

/* Locations page responsive */
@media (max-width: 991px) {
    .kamel-locations-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .kamel-locations-contact-details {
        flex-direction: column;
    }

    .kamel-locations-social {
        font-size: 0.9rem;
    }
}


/* ================================================================
 * KAMEL CONTACT PAGE
 * ================================================================ */

.kamel-contact-page {
    overflow-x: hidden;
}

/* ---------- SECTION 1 — HERO ---------- */
.kamel-contact-hero {
    padding: 3rem 1rem;
    text-align: center;
}

.kamel-contact-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.kamel-contact-breadcrumb a {
    color: var(--kp-gold);
}

.kamel-contact-breadcrumb .breadcrumb-sep,
.kamel-contact-breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.75);
}

.kamel-contact-hero-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #fff;
    margin: 0 0 0.5rem;
}

.kamel-contact-hero-sub {
    font-family: var(--kp-font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;
}

.kamel-contact-hero-line {
    display: block;
    width: 60px;
    height: 3px;
    background: var(--kp-gold);
    margin: 0 auto;
    border-radius: 2px;
}

/* ---------- SECTION 2 — CONTACT CARDS ROW ---------- */
.kamel-contact-cards-section {
    padding: 2rem 1rem;
    background: #f9f9f9;
}

.kamel-contact-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.kamel-contact-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition);
}

.kamel-contact-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--kp-gold);
}

.kamel-contact-card-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.kamel-contact-card-label {
    display: block;
    font-family: var(--kp-font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 0.35rem;
}

.kamel-contact-card-detail {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    color: var(--kp-dark);
    font-weight: 600;
    display: inline-block;
}

.kamel-contact-card-detail:hover {
    color: var(--kp-gold);
}

.kamel-contact-wa-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    font-size: 13px;
}

/* ---------- SECTION 3 — 2-COLUMN (INFO 40% + FORM 60%) ---------- */
.kamel-contact-two-col-section {
    padding: 3rem 1rem;
    background: #fff;
}

.kamel-contact-two-col {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.kamel-contact-info-col {
    padding-right: 1rem;
}

.kamel-contact-info-title,
.kamel-contact-form-title {
    font-family: var(--kp-font-head) !important;
    font-size: 1.35rem;
    color: var(--kp-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--kp-gold);
}

.kamel-contact-info-subtitle {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kp-gold);
    margin: 0 0 0.5rem;
}

.kamel-contact-addresses {
    margin-bottom: 1.25rem;
}

.kamel-contact-address-line {
    font-family: var(--kp-font-body);
    font-size: 0.95rem;
    color: var(--kp-body);
    margin: 0 0 0.35rem;
    line-height: 1.5;
}

.kamel-contact-hours,
.kamel-contact-phone-wa,
.kamel-contact-social-links {
    font-family: var(--kp-font-body);
    font-size: 0.95rem;
    color: var(--kp-body);
    margin: 0 0 1rem;
    line-height: 1.6;
}

.kamel-contact-hours strong,
.kamel-contact-phone-wa strong,
.kamel-contact-social-links strong {
    font-family: var(--kp-font-ui);
    color: var(--kp-dark);
}

.kamel-contact-phone-wa a,
.kamel-contact-social-links a {
    color: var(--kp-gold);
}

.kamel-contact-phone-wa a:hover,
.kamel-contact-social-links a:hover {
    text-decoration: underline;
}

.kamel-contact-sep {
    margin: 0 0.35rem;
    color: #999;
}

/* Contact form column — style CF7 / WPForms to match brand */
.kamel-contact-form-wrap {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 1.5rem;
}

.kamel-contact-form-wrap .wpcf7-form-control-wrap,
.kamel-contact-form-wrap input[type="text"],
.kamel-contact-form-wrap input[type="email"],
.kamel-contact-form-wrap input[type="tel"],
.kamel-contact-form-wrap select,
.kamel-contact-form-wrap textarea {
    width: 100%;
    max-width: 100%;
    font-family: var(--kp-font-body);
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.kamel-contact-form-wrap input:focus,
.kamel-contact-form-wrap select:focus,
.kamel-contact-form-wrap textarea:focus {
    border-color: var(--kp-gold);
    outline: none;
}

.kamel-contact-form-wrap label {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kp-dark);
    display: block;
    margin-bottom: 0.35rem;
}

.kamel-contact-form-wrap .wpcf7-submit,
.kamel-contact-form-wrap input[type="submit"],
.kamel-contact-form-wrap button[type="submit"] {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    font-family: var(--kp-font-ui) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    width: 100%;
    max-width: 280px;
}

.kamel-contact-form-wrap .wpcf7-submit:hover,
.kamel-contact-form-wrap input[type="submit"]:hover,
.kamel-contact-form-wrap button[type="submit"]:hover {
    background: var(--kp-gold-dark) !important;
    color: #fff !important;
}

/* WPForms overrides */
.kamel-contact-form-wrap .wpforms-field-label {
    font-family: var(--kp-font-ui) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.kamel-contact-form-wrap .wpforms-field input,
.kamel-contact-form-wrap .wpforms-field select,
.kamel-contact-form-wrap .wpforms-field textarea {
    border-color: #ddd !important;
}

.kamel-contact-form-wrap .wpforms-field input:focus,
.kamel-contact-form-wrap .wpforms-field textarea:focus {
    border-color: var(--kp-gold) !important;
}

.kamel-contact-form-wrap .wpforms-submit-container button {
    background: var(--kp-gold) !important;
    color: var(--kp-dark) !important;
    font-family: var(--kp-font-ui) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ---------- SECTION 4 — FULL-WIDTH MAP ---------- */
.kamel-contact-map-section {
    padding: 0;
}

.kamel-contact-map-wrap {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.kamel-contact-map-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* Contact page responsive */
@media (max-width: 991px) {
    .kamel-contact-two-col {
        grid-template-columns: 1fr;
    }

    .kamel-contact-info-col {
        padding-right: 0;
    }

    .kamel-contact-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kamel-contact-cards-row {
        grid-template-columns: 1fr;
    }

    .kamel-contact-map-wrap,
    .kamel-contact-map-iframe {
        height: 300px;
        min-height: 300px;
    }
}


/* ================================================================
 * KAMEL FAQ PAGE
 * ================================================================ */

.kamel-faq-page {
    overflow-x: hidden;
}

/* ---------- HERO ---------- */
.kamel-faq-hero {
    padding: 3rem 1rem;
    text-align: center;
}

.kamel-faq-breadcrumb {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.kamel-faq-breadcrumb a {
    color: var(--kp-gold);
}

.kamel-faq-breadcrumb .breadcrumb-sep,
.kamel-faq-breadcrumb .breadcrumb-current {
    color: rgba(255, 255, 255, 0.75);
}

.kamel-faq-hero-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #fff !important;
    margin: 0 0 1rem;
}

.kamel-faq-hero-line {
    display: block;
    width: 60px;
    height: 3px;
    background: var(--kp-gold);
    margin: 0 auto;
    border-radius: 2px;
}

/* ---------- INTRO + SEARCH ---------- */
.kamel-faq-content-section {
    padding: 2rem 1rem 3rem;
    background: #fff;
}

.kamel-faq-intro {
    font-family: var(--kp-font-body);
    font-size: 1.1rem;
    color: var(--kp-body);
    text-align: center;
    max-width: 640px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.kamel-faq-search-wrap {
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

.kamel-faq-search {
    width: 100%;
    font-family: var(--kp-font-ui);
    font-size: 1rem;
    padding: 0.65rem 1rem 0.65rem 2.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px 50%;
    background-size: 18px;
    transition: border-color var(--kp-transition);
}

.kamel-faq-search:focus {
    border-color: var(--kp-gold);
    outline: none;
    background-color: #fff;
}

.kamel-faq-search::placeholder {
    color: #999;
}

/* ---------- CATEGORY TABS ---------- */
.kamel-faq-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.kamel-faq-tab {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: var(--kp-dark);
    cursor: pointer;
    transition: border-color var(--kp-transition), background var(--kp-transition), color var(--kp-transition);
}

.kamel-faq-tab:hover {
    border-color: var(--kp-gold);
    color: var(--kp-gold);
}

.kamel-faq-tab.active {
    border-color: var(--kp-gold);
    background: var(--kp-gold);
    color: var(--kp-dark);
}

/* ---------- ACCORDION ---------- */
.kamel-faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.kamel-faq-item {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: border-color var(--kp-transition);
}

.kamel-faq-item:hover {
    border-color: rgba(245, 168, 0, 0.4);
}

.kamel-faq-item[open] {
    border-color: var(--kp-gold);
}

.kamel-faq-item.kamel-faq-hidden {
    display: none !important;
}

.kamel-faq-question {
    font-family: var(--kp-font-head) !important;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kp-dark);
    list-style: none;
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    background: #fff;
    transition: background var(--kp-transition);
}

.kamel-faq-question::-webkit-details-marker,
.kamel-faq-question::marker {
    display: none;
}

.kamel-faq-question:hover {
    background: #fafafa;
}

.kamel-faq-question-text {
    flex: 1;
}

.kamel-faq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kp-font-ui);
    font-size: 0;
    font-weight: 700;
    color: var(--kp-gold);
    border: 2px solid var(--kp-gold);
    border-radius: 50%;
    line-height: 1;
    transition: border-color var(--kp-transition), color var(--kp-transition);
}

.kamel-faq-icon::before {
    content: "+";
    font-size: 1.25rem;
    line-height: 1;
}

.kamel-faq-item[open] .kamel-faq-icon::before {
    content: "−";
    font-size: 1.5rem;
    line-height: 0.75;
}

.kamel-faq-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.kamel-faq-item[open] .kamel-faq-answer-wrap {
    max-height: 800px;
}

.kamel-faq-answer {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--kp-body);
    padding: 0 1.25rem 1.25rem;
    border-left: 4px solid var(--kp-gold);
    margin-left: 1.25rem;
    background: #fafafa;
    padding-left: 1rem;
    margin-left: 0;
}

.kamel-faq-no-results {
    font-family: var(--kp-font-body);
    font-size: 1rem;
    color: #666;
    text-align: center;
    padding: 2rem 1rem;
    margin: 0;
}

/* ---------- CTA ---------- */
.kamel-faq-cta {
    padding: 2rem 1rem;
    text-align: center;
}

.kamel-faq-cta-title {
    font-family: var(--kp-font-head) !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--kp-gold) !important;
    margin: 0 0 1rem;
}

.kamel-faq-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.kamel-faq-cta-phone {
    font-family: var(--kp-font-ui);
    font-size: 1rem;
    color: #ccc;
}

.kamel-faq-cta-phone a {
    color: var(--kp-gold);
    font-weight: 600;
}

.kamel-faq-cta-phone a:hover {
    text-decoration: underline;
}

/* FAQ page responsive */
@media (max-width: 576px) {
    .kamel-faq-tabs {
        gap: 0.35rem;
    }

    .kamel-faq-tab {
        font-size: 12px;
        padding: 0.4rem 0.75rem;
    }

    .kamel-faq-question {
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
    }

    .kamel-faq-answer {
        padding: 0.85rem 1rem 1rem;
    }
}


/* Front page responsive */
@media (max-width: 991px) {
    .kamel-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kamel-categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .kamel-why-grid {
        grid-template-columns: 1fr;
    }

    .kamel-products-wrap .products {
        grid-template-columns: repeat(2, 1fr);
    }

    .kamel-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .kamel-locations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .kamel-hero-btns {
        flex-direction: column;
    }

    .kamel-hero-trust {
        flex-direction: column;
        gap: 0.5rem;
    }

    .kamel-services-grid {
        grid-template-columns: 1fr;
    }

    .kamel-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kamel-why-tiles {
        grid-template-columns: 1fr;
    }

    .kamel-products-wrap .products {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .kamel-newsletter-form {
        flex-direction: column;
    }

    .kamel-newsletter-input {
        min-width: 100%;
    }
}


/* ================================================================
 * HIDE HEADER CATEGORY DROPDOWN — .category-inside.vertical-menu
 * ================================================================
 * Diza renders this as a "All Departments" hover menu in the header.
 * Removing it via CSS (cleanest, no template override needed).
 * ================================================================ */

.category-inside,
.category-inside.vertical-menu,
.category-inside-title,
.category-inside-content,
.tbay-menu-category.tbay-vertical,
/* also hide any Elementor widget that wraps it */
.elementor-widget-tbay-nav-menu .category-inside {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ================================================================
 * HERO / DARK-SECTION TEXT — force white

 * ================================================================
 * The tagline "Trusted pharmaceutical care in Calabar since 1987…"
 * sits on a dark background but was inheriting the dark body colour.
 * These rules target every common pattern (Elementor dark rows,
 * .kamel-section-dark utility, and any element with a dark bg).
 * ================================================================ */

/* Elementor: any section/column with a dark background colour */
.elementor-section[style*="background-color: rgb(17"],
.elementor-section[style*="background-color:#111"],
.elementor-section[style*="background-color: #111"],
.elementor-section[style*="background-color:rgb(0,0,0)"],
.elementor-section[style*="background-color: rgb(0, 0, 0)"],
.elementor-column[style*="background-color: rgb(17"],
.elementor-column[style*="background-color:#111"] {
    color: #ffffff !important;
}

.elementor-section[style*="background-color: rgb(17"] p,
.elementor-section[style*="background-color: rgb(17"] span,
.elementor-section[style*="background-color: rgb(17"] li,
.elementor-section[style*="background-color:#111"] p,
.elementor-section[style*="background-color:#111"] span,
.elementor-section[style*="background-color: #111"] p,
.elementor-section[style*="background-color: #111"] span,
.elementor-section[style*="background-color:rgb(0,0,0)"] p,
.elementor-section[style*="background-color: rgb(0, 0, 0)"] p {
    color: #ffffff !important;
}

/* Elementor "dark" skin / overlay sections */
.elementor-section.elementor-section-stretched+.kamel-hero-text,
.e-con[style*="background-color: rgb(17"] p,
.e-con[style*="background-color:#111"] p,
.e-con[style*="background-color: #111"] p {
    color: #ffffff !important;
}

/* Only target the brand/logo zone — NOT the nav links or cart area */
.site-header .site-description,
.site-header p.site-description {
    color: #ffffff;
}

/* .kamel-section-dark utility (already in utility classes, this adds p/span) */
.kamel-section-dark p,
.kamel-section-dark span,
.kamel-section-dark li,
.kamel-section-dark label {
    color: #cccccc !important;
}


/* Generic: any Elementor text widget that the editor placed on a
   dark row — Diza often wraps the pharmacy tagline in a plain
   .elementor-widget-text-editor widget */
.elementor-widget-text-editor p,
.elementor-widget-text-editor span {
    /* Inherit from parent so the dark-section rules above take effect */
    color: inherit;
}

/* Direct override for the specific hero tagline text on dark bg.
   If you gave that section a custom CSS class in Elementor (e.g. "kamel-hero"),
   these rules ensure white text regardless of body colour inheritance. */
.kamel-hero p,
.kamel-hero span,
.kamel-hero-text p,
.kamel-hero-text span,
.kamel-hero .elementor-widget-container p,
.kamel-hero .elementor-widget-container span {
    color: #ffffff !important;
}

/* ================================================================
 * RESPONSIVE OVERRIDES
 * ================================================================ */

@media (max-width: 991px) {

    body,
    p {
        font-size: 16px;
    }

    h1 {
        font-size: 1.9rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Mobile nav burger icon */
    .navbar-toggle {
        border-color: var(--kp-gold) !important;
    }
}

@media (max-width: 576px) {

    body,
    p {
        font-size: 15px;
    }

    .kamel-gold-btn {
        padding: 11px 22px;
        letter-spacing: 1.5px;
    }

    .woocommerce a.button.add_to_cart_button,
    .add_to_cart_button {
        padding: 10px 16px;
        font-size: 11px;
    }
}


/* ================================================================
 * KAMEL PHARMACY HEADER (top bar, main nav, dropdown, mobile, search, sticky)
 * ================================================================ */

.kamel-pharmacy-header {
    position: relative;
    z-index: 1000;
}

/* ----- TOP BAR ----- */
.kamel-header-topbar {
    height: 36px;
    background: #111111;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--kp-font-ui);
    font-size: 12px;
    display: flex;
    align-items: center;
}

.kamel-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.kamel-topbar-left,
.kamel-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.kamel-topbar-left a,
.kamel-topbar-right a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--kp-transition);
}

.kamel-topbar-left a:hover,
.kamel-topbar-right a:hover {
    color: var(--kp-gold);
}

.kamel-topbar-icon {
    color: var(--kp-gold);
    margin-right: 2px;
}

.kamel-topbar-sep {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0.25rem;
}

.kamel-social-icon {
    font-weight: 600;
}

/* ----- MAIN NAV ----- */
.kamel-header-main {
    background: #ffffff;
    border-top: 3px solid var(--kp-gold);
    padding: 0.75rem 0;
    transition: padding var(--kp-transition), box-shadow var(--kp-transition);
}

.kamel-pharmacy-header.kamel-header-sticky .kamel-header-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    z-index: 1001;
}

.kamel-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.kamel-header-logo {
    flex-shrink: 0;
}

.kamel-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--kp-dark);
}

.kamel-logo-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--kp-gold);
}

.kamel-pharmacy-header.kamel-header-sticky .kamel-logo-img {
    width: 40px;
    height: 40px;
}

.kamel-logo-text {
    font-family: var(--kp-font-head);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--kp-dark);
}

.kamel-logo-link:hover .kamel-logo-text {
    color: var(--kp-gold);
}

/* ----- NAV MENU ----- */
.kamel-header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.kamel-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kamel-nav-menu li {
    margin: 0;
}

.kamel-nav-menu li a {
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1a1a1a;
    text-decoration: none;
    padding: 0.5rem 0.6rem;
    display: block;
    transition: color var(--kp-transition);
}

.kamel-nav-menu li a:hover,
.kamel-nav-menu li.current-menu-item a {
    color: var(--kp-gold);
}

.kamel-nav-menu li.current-menu-item a {
    border-bottom: 2px solid var(--kp-gold);
    padding-bottom: 2px;
}

.kamel-nav-menu li.kamel-shop-link {
    position: relative;
}

/* No dropdowns on header nav — categories are on Shop page; sub-menus hidden */
.kamel-header-nav .kamel-nav-menu ul.sub-menu,
.kamel-header-nav .kamel-nav-menu .children,
.kamel-shop-dropdown {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ----- HEADER ACTIONS (search, cart, Shop Now) ----- */
.kamel-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.kamel-btn-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: color var(--kp-transition);
}

.kamel-btn-icon:hover {
    color: var(--kp-gold);
}

/* Search and cart icons: inline SVG (same approach for both so icon always shows) */
.kamel-btn-icon .kamel-icon-svg {
    flex-shrink: 0;
    display: block;
}

.kamel-btn-icon .kamel-icon-svg,
.kamel-btn-icon:hover .kamel-icon-svg {
    color: inherit;
}

.kamel-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--kp-gold);
    color: #111;
    font-family: var(--kp-font-ui);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kamel-btn-shop-now {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--kp-gold);
    color: #111;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background var(--kp-transition), color var(--kp-transition);
}

.kamel-btn-shop-now:hover {
    background: var(--kp-gold-dark);
    color: #fff;
}

/* ----- MOBILE TOGGLE (hidden on desktop) ----- */
.kamel-mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.kamel-hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--kp-gold);
    border-radius: 1px;
    transition: transform var(--kp-transition), opacity var(--kp-transition);
}

/* ----- MOBILE MENU (Kamel custom drawer — dark theme, gold accents) ----- */
.kamel-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility var(--kp-transition);
}

.kamel-mobile-menu.kamel-mobile-menu-open {
    visibility: visible;
    pointer-events: auto;
}

.kamel-mobile-menu-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: var(--kp-dark);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    padding: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 10001;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.kamel-mobile-menu-open .kamel-mobile-menu-inner {
    transform: translateX(0);
}

/* Drawer header: gold bar + close */
.kamel-mobile-menu-inner .kamel-mobile-drawer-header {
    background: var(--kp-dark);
    border-bottom: 3px solid var(--kp-gold);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.kamel-mobile-close {
    position: relative;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--kp-transition);
}

.kamel-mobile-close:hover {
    color: var(--kp-gold);
}

.kamel-mobile-logo {
    margin-bottom: 0;
    padding-top: 0;
    flex: 1;
}

.kamel-mobile-logo a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #fff;
    font-family: var(--kp-font-head);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.kamel-mobile-logo a:hover {
    color: var(--kp-gold);
}

.kamel-mobile-logo img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--kp-gold);
    border: 2px solid rgba(245, 168, 0, 0.4);
}

.kamel-mobile-nav {
    flex: 1;
    padding: 1rem 0;
}

.kamel-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kamel-mobile-nav-list li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kamel-mobile-nav-list li a {
    display: block;
    padding: 1rem 1.25rem;
    font-family: var(--kp-font-ui);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: background var(--kp-transition), color var(--kp-transition);
}

.kamel-mobile-nav-list li a:hover {
    color: var(--kp-gold);
    background: rgba(245, 168, 0, 0.08);
}

.kamel-mobile-footer {
    margin-top: auto;
    padding: 1.25rem 1.25rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.2);
}

.kamel-mobile-footer a {
    color: var(--kp-gold);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--kp-font-ui);
}

.kamel-mobile-footer a:hover {
    color: var(--kp-gold-light);
}

.kamel-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10000;
    pointer-events: none;
}

.kamel-mobile-menu-open .kamel-mobile-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ----- SEARCH OVERLAY ----- */
.kamel-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 17, 17, 0.95);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.kamel-search-overlay.kamel-search-overlay-open {
    opacity: 1;
    visibility: visible;
}

.kamel-search-overlay-inner {
    width: 100%;
    max-width: 600px;
    position: relative;
}

.kamel-search-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.kamel-search-close:hover {
    color: var(--kp-gold);
}

.kamel-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.kamel-search-input {
    flex: 1;
    min-width: 200px;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    font-family: var(--kp-font-ui);
    border: 2px solid var(--kp-gold);
    border-radius: 4px;
    background: #fff;
    color: #111;
}

.kamel-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.3);
}

.kamel-search-submit {
    padding: 1rem 1.5rem;
    font-family: var(--kp-font-ui);
    font-weight: 600;
    text-transform: uppercase;
    background: var(--kp-gold);
    color: #111;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.kamel-search-results {
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 4px;
    padding: 0.5rem;
}

.kamel-search-results a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    text-decoration: none;
    color: #1a1a1a;
    border-radius: 4px;
    transition: background var(--kp-transition);
}

.kamel-search-results a:hover {
    background: rgba(245, 168, 0, 0.1);
}

.kamel-search-results img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

/* ----- STICKY: spacer when main bar is fixed so content doesn't jump ----- */
.kamel-header-sticky-spacer {
    display: block;
    height: 0;
    transition: height 0.2s ease;
}

#tbay-header.kamel-header-sticky+.kamel-header-sticky-spacer {
    height: 56px;
}

/* ----- HEADER RESPONSIVE (Kamel mobile: only logo + hamburger; rest in drawer) ----- */
@media (max-width: 991px) {

    /* Hide entire top bar on mobile — locations, phone, social, account live in drawer */
    .kamel-header-topbar {
        display: none !important;
    }

    .kamel-header-topbar .kamel-topbar-left span.kamel-topbar-sep,
    .kamel-header-topbar .kamel-topbar-right .kamel-topbar-sep {
        display: none;
    }

    /* Hide nav and all its contents on mobile — menu only in side drawer (all pages) */
    #tbay-header .kamel-header-nav,
    #tbay-header .kamel-header-main .kamel-nav-menu,
    #tbay-header .kamel-header-main #kamel-primary-menu,
    #tbay-header .kamel-header-main .kamel-shop-dropdown,
    #tbay-header .navbar-collapse,
    #tbay-header .collapse.navbar-collapse,
    #tbay-header .navbar-offcanvas,
    #tbay-header .tbay_custom_menu .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        overflow: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    #tbay-header .kamel-header-nav *,
    #tbay-header .kamel-header-main .kamel-nav-menu *,
    #tbay-header .kamel-header-main #kamel-primary-menu * {
        display: none !important;
    }

    /* On mobile: keep cart + search icons, hide shop-now and nav */
    .kamel-header-actions {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    .kamel-header-actions .kamel-btn-shop-now {
        display: none !important;
    }

    .kamel-mobile-toggle {
        display: flex !important;
    }

    .kamel-header-logo {
        flex: 1;
        justify-content: flex-start;
    }

    .kamel-logo-text {
        font-size: 0.95rem;
        font-family: var(--kp-font-head);
        letter-spacing: 1px;
    }

    /* Keep Kamel main bar styling on mobile: gold border, white bar */
    .kamel-header-main {
        border-top: 3px solid var(--kp-gold);
        padding: 0.6rem 0;
    }

    .kamel-pharmacy-header.kamel-header-sticky .kamel-header-main {
        border-top-color: var(--kp-gold);
    }
}

@media (max-width: 576px) {
    .kamel-header-topbar {
        font-size: 11px;
    }

    .kamel-topbar-right .kamel-social-icon {
        display: none;
    }

    .kamel-logo-text {
        font-size: 0.85rem;
    }
}


/* ================================================================
 * KAMEL PHARMACY FOOTER (newsletter strip, 4 columns, bottom bar)
 * ================================================================ */

/* ----- NEWSLETTER STRIP (above footer) ----- */
.kamel-footer-newsletter-strip {
    background: #F5A800;
    padding: 1.5rem 1rem;
    text-align: center;
}

.kamel-footer-newsletter-text {
    font-family: var(--kp-font-head);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    letter-spacing: 0.5px;
}

.kamel-footer-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
}

.kamel-footer-newsletter-input {
    flex: 1;
    min-width: 200px;
    padding: 0.65rem 1rem;
    font-family: var(--kp-font-ui);
    font-size: 1rem;
    border: 2px solid #111;
    border-radius: 4px;
    background: #fff;
    color: #111;
}

.kamel-footer-newsletter-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.kamel-footer-newsletter-btn {
    padding: 0.65rem 1.25rem;
    font-family: var(--kp-font-ui);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--kp-transition), color var(--kp-transition);
}

.kamel-footer-newsletter-btn:hover {
    background: #333;
    color: #fff;
}

.kamel-footer-newsletter-message {
    margin: 0.5rem 0 0;
    font-family: var(--kp-font-ui);
    font-size: 13px;
    color: #111;
    min-height: 1.5em;
}

/* ----- FOOTER (4 columns) ----- */
.kamel-pharmacy-footer {
    background: #080808;
    color: rgba(255, 255, 255, 0.55);
}

.kamel-footer-columns {
    padding: 3rem 1rem 2rem;
}

.kamel-footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1.25fr;
    gap: 2rem;
}

.kamel-footer-col {
    min-width: 0;
}

.kamel-footer-heading {
    font-family: var(--kp-font-head) !important;
    font-size: 13px;
    font-weight: 700;
    color: #F5A800 !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(245, 168, 0, 0.4);
    display: inline-block;
}

.kamel-footer-links,
.kamel-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kamel-footer-links li,
.kamel-footer-contact li {
    margin: 0 0 0.5rem;
    font-family: var(--kp-font-body);
    font-size: 14px;
    line-height: 1.5;
}

.kamel-footer-links a,
.kamel-footer-contact a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--kp-transition);
}

.kamel-footer-links a:hover,
.kamel-footer-contact a:hover {
    color: #F5A800;
}

.kamel-footer-icon {
    color: #F5A800;
    margin-right: 6px;
}

/* COLUMN 1 — BRAND */
.kamel-footer-brand .kamel-footer-logo-link {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.kamel-footer-logo-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--kp-gold);
    border: 2px solid rgba(245, 168, 0, 0.5);
    display: block;
}

.kamel-footer-tagline {
    font-family: var(--kp-font-head);
    font-size: 14px;
    font-weight: 700;
    color: #F5A800;
    margin: 0 0 0.5rem;
    letter-spacing: 0.5px;
}

.kamel-footer-desc {
    font-family: var(--kp-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 1rem;
}

.kamel-footer-social {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kamel-footer-social-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kp-font-ui);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border: 2px solid var(--kp-gold);
    border-radius: 50%;
    text-decoration: none;
    transition: background var(--kp-transition), color var(--kp-transition), border-color var(--kp-transition);
}

.kamel-footer-social-icon:hover {
    background: var(--kp-gold);
    color: #111;
    border-color: var(--kp-gold);
}

/* ----- BOTTOM BAR ----- */
.kamel-footer-bottom {
    border-top: 1px solid rgba(245, 168, 0, 0.2);
    padding: 1rem;
}

.kamel-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.kamel-footer-copyright {
    font-family: var(--kp-font-ui);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.kamel-footer-bottom-logo {
    flex-shrink: 0;
}

.kamel-footer-mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--kp-gold);
    border: 1px solid rgba(245, 168, 0, 0.4);
    display: block;
    opacity: 0.8;
}

.kamel-footer-legal {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

.kamel-footer-legal a {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: color var(--kp-transition);
}

.kamel-footer-legal a:hover {
    color: #F5A800;
}

.kamel-footer-legal-sep {
    margin: 0 0.35rem;
    opacity: 0.6;
}

/* Footer responsive */
@media (max-width: 991px) {
    .kamel-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kamel-footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .kamel-footer-newsletter-form {
        flex-direction: column;
    }

    .kamel-footer-newsletter-input {
        min-width: 100%;
    }

    .kamel-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}