/* Takeef.com identity + UX layer (loaded after style.css / media.css) */
:root {
    --tk-primary: #0A6C9C;
    --tk-primary-dark: #064a6b;
    --tk-navy: #003090;
    --tk-accent: #12a1c9;
    --tk-wa: #25d366;
}

/* Bootstrap defaults -> brand */
.text-primary { color: var(--tk-primary) !important; }
.btn-primary { --bs-btn-bg: var(--tk-primary); --bs-btn-border-color: var(--tk-primary);
    --bs-btn-hover-bg: var(--tk-primary-dark); --bs-btn-hover-border-color: var(--tk-primary-dark);
    --bs-btn-active-bg: var(--tk-primary-dark); --bs-btn-active-border-color: var(--tk-primary-dark);
    --bs-btn-disabled-bg: var(--tk-primary); --bs-btn-disabled-border-color: var(--tk-primary); }
.btn-outline-primary { --bs-btn-color: var(--tk-primary); --bs-btn-border-color: var(--tk-primary);
    --bs-btn-hover-bg: var(--tk-primary); --bs-btn-hover-border-color: var(--tk-primary); }
a { color: var(--tk-primary); }
:focus-visible { outline: 3px solid rgba(18, 161, 201, .55); outline-offset: 2px; }

/* Accessibility */
.skip-link { position: absolute; top: 0; right: 0; background: #fff; padding: 8px 14px; z-index: 2000; }

/* Top bar + header */
.topbar { background: var(--tk-primary-dark); padding: 6px 0; }
nav .img-brand { width: 170px; height: auto; max-width: none; }
.mobile-links { flex: 0 0 auto; }
.cart-badge { background: var(--tk-primary); font-size: 11px; }
nav.nav-bottom { border-top: 1px solid #eef1f4; border-bottom: 1px solid #eef1f4; }
nav.nav-bottom .nav-link { color: #333; font-weight: 600; border-bottom: 2px solid transparent; }
nav.nav-bottom .nav-link:hover, nav.nav-bottom .nav-link.active { color: var(--tk-primary); border-bottom-color: var(--tk-primary); }
@media (min-width: 992px) { .navbar { position: relative; } }
@media (max-width: 991.98px) {
    .mobile-links { padding: 6px 0; }
    nav.nav-bottom .navbar-nav { width: 100%; }
    nav.nav-bottom .nav-link { padding: 10px 4px; border-bottom: 1px solid #f1f3f5; }
    nav.nav-bottom .filter { margin-bottom: 8px; }
}

/* Footer (logo artwork is dark -> render white on the blue footer) */
footer { background: var(--tk-primary); }
footer .footer-logo { filter: brightness(0) invert(1); max-width: 190px; height: auto; }
footer a:hover { text-decoration: underline !important; }

/* Floating WhatsApp / call */
.floating-contact { position: fixed; bottom: 18px; left: 16px; z-index: 1030; display: flex; flex-direction: column; gap: 10px; }
.fc-btn { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 26px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); text-decoration: none; transition: transform .15s; }
.fc-btn:hover { transform: scale(1.08); color: #fff; }
.fc-wa { background: var(--tk-wa); }
.fc-call { background: var(--tk-primary); }

/* Brand logos: keep every logo inside a uniform, centred box */
.categories .card__image { background: #fff; border: 1px solid #e9eef2; border-radius: 14px; }
.categories .card__img, .categories .card__image img { object-fit: contain; max-height: 90px; width: 100%; padding: 6px; }

/* Product cards */
.product-card .product-image { background: #f4f7f9; object-fit: contain !important; }
.product-card .title a { color: #1b2a35 !important; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(10, 108, 156, .18) !important; }
.product-card { transition: transform .2s, box-shadow .2s; }

/* Hero */
.slider-title { text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }

/* Cart / checkout */
.cart_page .card, .cart_page_ .card { border-radius: 14px; }
.pay-option { border: 2px solid #e3e9ee; border-radius: 12px; padding: 12px 14px; cursor: pointer; display: block; height: 100%; transition: border-color .15s, background .15s; }
.pay-option:hover { border-color: var(--tk-accent); }
input[type=radio]:checked + .pay-option, .pay-option.active { border-color: var(--tk-primary); background: #eef7fb; }
.pay-option small { display: block; color: #6b7a86; }
.summary-sticky { position: sticky; top: 12px; }

.bg-primary { background-color: var(--tk-primary) !important; }
@media (max-width: 575.98px) {
    .floating-contact { bottom: 14px; left: 10px; }
    .fc-btn { width: 44px; height: 44px; font-size: 22px; opacity: .92; }
    .fc-call { display: none; } /* phone is one tap away in the top bar */
}

/* ===== Home: category tiles (AC louvres open on hover/focus) ===== */
@property --tk-bar { syntax: '<length>'; inherits: false; initial-value: 8px; }

.tk-cats__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.tk-cats__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2; margin: 0; color: #063b57; }
.tk-cats__sub { margin: 6px 0 0; color: #5d7482; font-size: 1rem; }
.tk-cats__all { white-space: nowrap; font-weight: 700; color: var(--tk-primary); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid var(--tk-accent); }
.tk-cats__all:hover { color: var(--tk-primary-dark); }

.tk-cats__grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .tk-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px)  { .tk-cats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .tk-cats__grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

.tk-cat { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px 6px 22px 6px;
    background: #cfe3ec; isolation: isolate; text-decoration: none; color: #fff; }
.tk-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
    transform: scale(1.04); transition: transform .5s ease; }

/* the louvre slats: deep-sea bars that swing open */
.tk-cat__louvre { --tk-bar: 8px; position: absolute; inset: 0; z-index: -1;
    background: repeating-linear-gradient(to bottom, rgba(6, 59, 87, .78) 0, rgba(6, 59, 87, .78) var(--tk-bar), transparent var(--tk-bar), transparent 22px);
    transition: --tk-bar .45s cubic-bezier(.3, .7, .2, 1); }
.tk-cat::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(4, 40, 60, .94) 0%, rgba(4, 40, 60, .55) 32%, transparent 58%); }

.tk-cat__label { position: absolute; inset-inline: 0; bottom: 0; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 2px; }
.tk-cat__name { font-size: 1.25rem; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.tk-cat__count { font-size: .875rem; color: #bfe9f6; }

.tk-cat:hover .tk-cat__louvre, .tk-cat:focus-visible .tk-cat__louvre { --tk-bar: 0px; }
.tk-cat:hover .tk-cat__img, .tk-cat:focus-visible .tk-cat__img { transform: scale(1); }
.tk-cat:hover { color: #fff; }
.tk-cat:focus-visible { outline: 3px solid var(--tk-accent); outline-offset: 3px; }

/* touch screens have no hover: rest half-open so photos stay readable */
@media (hover: none) { .tk-cat__louvre { --tk-bar: 5px; } }
@media (prefers-reduced-motion: reduce) { .tk-cat__louvre, .tk-cat__img { transition: none; } }
@media (max-width: 575.98px) {
    .tk-cats__head { flex-direction: column; align-items: flex-start; }
    .tk-cat__name { font-size: 1.05rem; }
}