/* §  FONTS */

/* Headings (Latin) — Baloo Bhaijaan, only ships one weight */
@font-face {
    font-family: 'Baloo Bhaijaan';
    src: url('/fonts/BalooBhaijaan-Regular.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Body / secondary (Latin) — DIN */
@font-face {
    font-family: 'DIN';
    src: url('/fonts/DIN-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN';
    src: url('/fonts/DIN-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN';
    src: url('/fonts/DIN-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Arabic (always) — Cairo, same family used across the admin panel */
@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo-Bold.ttf') format('truetype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}


/* §  VARIABLES */

:root {
    --kb-primary: #0063b0;
    --kb-primary-deep: #004a85;
    --kb-accent: #fd7812;
    --kb-accent-deep: #e06500;
    --kb-accent-light: #fde9d8;
    --kb-text-dark: #10233c;
    --kb-text-muted: var(--kb-text-dark);
    --kb-border: #e3e9f2;
    --kb-bg-soft: #f5f9fd;
    --kb-header-bg: #d3e3f7;
    --kb-success-light: #9ee6c4;
    --kb-danger: #dc3545;
    --kb-danger-light: #ff9b9b;
    /* WhatsApp's own brand green — deliberately not derived from the Koub
       palette, so the floating button reads as "WhatsApp" at a glance. */
    --kb-whatsapp: #25d366;
    --kb-whatsapp-rgb: 37, 211, 102;

    /* RGB triplets of the above, for rgba() — kept in sync with the hex values by hand. */
    --kb-primary-rgb: 0, 99, 176;
    --kb-primary-deep-rgb: 0, 74, 133;
    --kb-accent-rgb: 253, 120, 18;
    --kb-text-dark-rgb: 16, 35, 60;
    --kb-header-bg-rgb: 211, 227, 247;
    --kb-danger-rgb: 220, 53, 69;

    --kb-font-ar: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --kb-font-heading: 'Baloo Bhaijaan', var(--kb-font-ar);
    --kb-font-body: 'DIN', var(--kb-font-ar);
    --kb-radius: 14px;
    --kb-radius-lg: 24px;
    --kb-radius-btn: 10px;
    --kb-tabbar-h: 60px;
}


/* §  BASE */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Anchor-jump targets land clear of the fixed nav instead of tucking under it. */
.kb-scroll-anchor {
    scroll-margin-top: 7rem;
}

/* Brand mentions of "Koub"/"كوب", wrapped by koub-brand-tm.js. !important
   because these sit inside headings that are often already font-weight
   700-800 — the browser's default <strong> weight wouldn't read as any
   bolder than its surroundings there, so this forces a step up regardless
   of the ambient weight. */
.kb-tm-brand {
    font-weight: 900 !important;
}

.kb-tm-mark {
    font-size: .65em;
    vertical-align: super;
    margin-inline-start: 1px;
    font-weight: 700;
}

body {
    font-family: var(--kb-font-body);
    font-weight: 400;
    color: var(--kb-text-dark);
    background: #fff;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--kb-font-heading);
    font-weight: 700;
    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .15s, opacity .15s;
}

img {
    max-width: 100%;
    display: block;
}


/* §  PRELOADER */

.kb-preloader {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--kb-primary) 0%, var(--kb-primary-deep) 75%);
    transition: opacity .5s ease, visibility .5s ease;
}

/* Toggled via JS (koub-web.js) once window "load" fires */
.kb-preloader.kb-preloader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.kb-preloader-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-preloader-logo {
    width: 110px;
    height: auto;
    animation: kb-preloader-pulse 1.8s ease-in-out infinite;
}

.kb-preloader-ring {
    position: absolute;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: var(--kb-accent);
    animation: kb-preloader-spin 1s linear infinite;
}

@keyframes kb-preloader-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(.92);
        opacity: .85;
    }
}

@keyframes kb-preloader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .kb-preloader-logo,
    .kb-preloader-ring {
        animation: none;
    }
}


/* §  BUTTONS — base + modifiers, reused across nav / hero / cards / forms */

.kb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-width: 100%;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    padding: .9rem 1.9rem;
    border-radius: var(--kb-radius-btn);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

/* AJAX submit-in-progress state — button stays visible/readable, just
   clearly non-interactive while the request is in flight. */
.kb-btn-loading {
    opacity: .65;
    pointer-events: none;
}

.kb-btn svg {
    flex-shrink: 0;
}

/* Color modifiers */
.kb-btn-accent {
    background: var(--kb-accent);
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(var(--kb-accent-rgb), .35);
}

.kb-btn-accent:hover {
    background: var(--kb-accent-deep);
    transform: translateY(-2px);
    color: #fff;
}

.kb-btn-outline {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .7);
}

.kb-btn-outline:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.kb-btn-primary {
    background: var(--kb-primary);
    color: #fff !important;
}

.kb-btn-primary:hover {
    background: var(--kb-primary-deep);
    transform: translateY(-2px);
    color: #fff;
}

/* Size modifier */
.kb-btn-sm {
    padding: .6rem 1.4rem;
    font-size: .85rem;
}


/* §  UTILITIES */

.kb-section {
    padding: 3rem 10px;
}

.kb-section-title {
    font-size: 2rem;
    color: var(--kb-text-dark);
    margin-bottom: .75rem;
}

.kb-section-desc {
    color: var(--kb-text-muted);
    font-size: 1.02rem;
}

.kb-section-desc-sm {
    font-size: .9rem;
}

.kb-eyebrow {
    display: inline-block;
    color: var(--kb-accent);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .6rem;
}

/* Reusable outlined icon-circle (hero trust badges, contact info icons, etc.) */
.kb-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
}

/* Force LTR rendering for embedded Latin/numeric content inside RTL text (phone numbers, emails) */
.kb-ltr {
    direction: ltr;
    unicode-bidi: embed;
}

/* Accent-colored word/line within a heading (hero heading, split-section titles, ...) */
.kb-highlight {
    color: var(--kb-accent);
    display: block;
}

/* Modifier for headings where the accent word/phrase stays on the same
   line as the rest of the heading instead of wrapping to its own line. */
.kb-highlight-inline {
    display: inline;
}


/* §  NAV */

/* Fixed (stays put while scrolling) but transparent at the top of the page,
   same floating-over-the-hero look as before — .kb-nav-scrolled (added by
   JS past a small scroll offset, see koub-web.js) switches it to a shorter,
   solid bar. */
.kb-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.15rem 0;
    background: transparent;
    box-shadow: none;
    transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}

.kb-nav.kb-nav-scrolled {
    padding: .75rem 0;
    background: #fff;
    box-shadow: 0 2px 14px rgba(var(--kb-text-dark-rgb), .08);
}

.kb-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.kb-nav-logo img {
    height: 42px;
    width: auto;
}

/* Both logo images render; CSS picks the one to show (see nav.blade.php $navLogo). */
.kb-nav-logo-mobile {
    display: none;
}

.kb-nav-quick-link {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--kb-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kb-nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2.25rem;
    margin: 0;
    padding: 0;
}

.kb-nav-links li a {
    display: inline-block;
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
    font-size: .95rem;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: color .25s ease;
}

.kb-nav-links li.active a,
.kb-nav-links li a:hover {
    color: #fff;
    border-bottom-color: var(--kb-accent);
}

.kb-nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.kb-lang-sep {
    opacity: .5;
}

/* Language switcher — both languages shown side by side, current one bold */
.kb-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
}

.kb-lang-option {
    color: rgba(255, 255, 255, .7);
    font-weight: 500;
}

.kb-lang-option:hover {
    color: #fff;
}

.kb-lang-option.active {
    color: #fff;
    font-weight: 700;
}

.kb-toggler {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
}

.kb-bar {
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: background .25s ease;
}

/* Internal pages open on the light page-header, not the dark hero, so the transparent navbar needs dark-on-light here. */
.kb-nav-onlight .kb-nav-links li a {
    color: var(--kb-primary);
}

.kb-nav-onlight .kb-nav-links li.active a,
.kb-nav-onlight .kb-nav-links li a:hover {
    color: var(--kb-primary-deep);
}

.kb-nav-onlight .kb-lang-option {
    color: rgba(var(--kb-primary-rgb), .55);
}

.kb-nav-onlight .kb-lang-option:hover {
    color: var(--kb-primary);
}

.kb-nav-onlight .kb-lang-option.active {
    color: var(--kb-primary);
}

.kb-nav-onlight .kb-lang-sep {
    color: var(--kb-primary);
}

.kb-nav-onlight .kb-bar {
    background: var(--kb-primary);
}

/* Once scrolled the bar is always solid/white, so it always needs dark
   text/logo regardless of which page's onlight/light variant is active —
   same specificity as the rules above, so source order (this comes after)
   is what makes it win. */
.kb-nav-scrolled .kb-nav-links li a {
    color: var(--kb-primary);
}

.kb-nav-scrolled .kb-nav-links li.active a,
.kb-nav-scrolled .kb-nav-links li a:hover {
    color: var(--kb-primary-deep);
}

.kb-nav-scrolled .kb-lang-option {
    color: rgba(var(--kb-primary-rgb), .55);
}

.kb-nav-scrolled .kb-lang-option:hover {
    color: var(--kb-primary);
}

.kb-nav-scrolled .kb-lang-option.active {
    color: var(--kb-primary);
}

.kb-nav-scrolled .kb-lang-sep {
    color: var(--kb-primary);
}

.kb-nav-scrolled .kb-bar {
    background: var(--kb-primary);
}

.kb-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--kb-text-dark-rgb), .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s;
    z-index: 199;
}

.kb-nav-overlay.show {
    opacity: 1;
    visibility: visible;
}

.kb-nav-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: -320px;
    width: 300px;
    background: #fff;
    z-index: 200;
    padding: 1.5rem;
    transition: inset-inline-end .3s ease;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
}

.kb-nav-drawer.show {
    inset-inline-end: 0;
}

.kb-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.kb-drawer-logo img {
    height: 34px;
    width: auto;
}

.kb-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--kb-bg-soft);
    border: none;
    color: var(--kb-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
}

.kb-drawer-close:hover {
    background: var(--kb-border);
}

/* Drawer link list — full-width rows with dividers, chevron nudges on hover/active */
.kb-nav-drawer .kb-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 1.25rem;
}

.kb-nav-drawer .kb-nav-links li {
    border-bottom: 1px solid var(--kb-border);
}

.kb-nav-drawer .kb-nav-links li:last-child {
    border-bottom: none;
}

.kb-nav-drawer .kb-nav-links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .95rem .15rem;
    font-size: 1rem;
    color: var(--kb-text-dark);
    border-bottom: none;
}

.kb-nav-drawer .kb-nav-links li a i {
    font-size: 1.1rem;
    opacity: .35;
    transition: opacity .2s, transform .2s;
}

.kb-nav-drawer .kb-nav-links li.active a,
.kb-nav-drawer .kb-nav-links li a:hover {
    color: var(--kb-accent);
}

.kb-nav-drawer .kb-nav-links li.active a i,
.kb-nav-drawer .kb-nav-links li a:hover i {
    opacity: 1;
    color: var(--kb-accent);
    transform: translateX(3px);
}

/* "Need Help?" support box — phone + hours, pulled from ContactDetail */
.kb-drawer-help {
    display: flex;
    gap: .85rem;
    background: var(--kb-bg-soft);
    border-radius: var(--kb-radius);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.kb-drawer-help-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--kb-accent-rgb), .12);
    color: var(--kb-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.kb-drawer-help-body strong {
    display: block;
    color: var(--kb-primary);
    font-size: .92rem;
    margin-bottom: .2rem;
}

.kb-drawer-help-body p {
    color: var(--kb-text-muted);
    font-size: .8rem;
    line-height: 1.4;
    margin: 0 0 .6rem;
}

.kb-drawer-help-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--kb-primary);
    font-size: .82rem;
    font-weight: 500;
}

.kb-drawer-help-row+.kb-drawer-help-row {
    margin-top: .35rem;
}

.kb-drawer-help-row i {
    color: var(--kb-accent);
    font-size: 1rem;
}

/* Social row */
.kb-drawer-social {
    margin-bottom: 1.25rem;
}

.kb-drawer-social-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--kb-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .6rem;
}

.kb-drawer-social-icons {
    display: flex;
    gap: .6rem;
}

.kb-drawer-social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--kb-bg-soft);
    color: var(--kb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .2s, color .2s;
}

.kb-drawer-social-icons a:hover {
    background: var(--kb-accent);
    color: #fff;
}

[dir="rtl"] .kb-drawer-social-label {
    letter-spacing: normal;
    text-transform: none;
}

.kb-drawer-foot {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kb-border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
}

.kb-drawer-foot .kb-btn {
    width: 100%;
}

/* Language switcher — styled as an outline button, both languages shown */
.kb-drawer-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem 1.4rem;
    border: 1.5px solid var(--kb-border);
    border-radius: var(--kb-radius-btn);
    font-size: .85rem;
    font-weight: 600;
    transition: border-color .2s, background .2s;
}

.kb-drawer-lang:hover {
    border-color: var(--kb-primary);
    background: var(--kb-bg-soft);
}

.kb-drawer-lang-option {
    color: var(--kb-text-muted);
}

.kb-drawer-lang-option.active {
    color: var(--kb-primary);
}

.kb-drawer-lang-sep {
    color: var(--kb-primary);
    opacity: .4;
}

/* Bottom tab bar — phone-only primary nav, floating glass pill (see nav.blade.php). */
.kb-tabbar {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 190;
    height: var(--kb-tabbar-h);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 12px 32px rgba(var(--kb-text-dark-rgb), .16), 0 2px 8px rgba(var(--kb-text-dark-rgb), .06);
}

.kb-tabbar-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    color: var(--kb-text-muted);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.kb-tabbar-item i {
    font-size: 1.3rem;
}

.kb-tabbar-item.active {
    color: var(--kb-accent);
}


/* §  HERO */

.kb-hero {
    position: relative;
    /* Fallback gradient — used whenever no hero image has been uploaded yet */
    background: linear-gradient(150deg, var(--kb-primary) 0%, var(--kb-primary-deep) 75%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* min-height (not height) so short screens grow instead of clipping; dvh falls back to vh. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5.5rem 0 2.5rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* 100vh leaves dead space on large monitors — cap it with a fixed floor instead. */
@media (min-width: 992px) {
    .kb-hero {
        min-height: 780px;
    }
}

/* Crop biased right so the cups (right-of-center in the photo) stay in frame on wide screens. */
.kb-hero.has-bg {
    background-position: right center;
    /* Angle set inline per-locale (--kb-hero-scrim-angle); colors stay tied to the root palette. */
    --kb-hero-scrim: linear-gradient(var(--kb-hero-scrim-angle, 100deg),
            rgba(var(--kb-primary-deep-rgb), .93) 0%,
            rgba(var(--kb-primary-deep-rgb), .80) 40%,
            rgba(var(--kb-primary-deep-rgb), .35) 100%);
}

.kb-hero .container {
    position: relative;
    z-index: 2;
}

.kb-hero-heading {
    color: #fff;
    font-size: 3.1rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}

.kb-hero-desc {
    color: rgba(255, 255, 255, .85);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 75%;
    margin-bottom: 1.5rem;
}

.kb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.kb-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.kb-hero-badge {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.kb-hero-badge-icon {
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 1.2rem;
}

.kb-hero-badge span:not(.kb-hero-badge-icon) {
    color: rgba(255, 255, 255, .92);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.3;
}


/* §  FEATURE STRIP */

.kb-feature-strip-wrap {
    margin-top: -6rem;
    position: relative;
    z-index: 10;
}

.kb-feature-strip {
    background: #fff;
    border-radius: var(--kb-radius-lg);
    box-shadow: 0 20px 60px rgba(var(--kb-text-dark-rgb), .14);
    padding: 2.75rem 2.5rem;
}

.kb-feature-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform .2s ease;
}

/* Footer feature-strip items are CTA links (see footer.blade.php) — give
   them a visible hover/focus state so they read as clickable. */
.kb-feature-item:hover,
.kb-feature-item:focus-visible {
    transform: translateY(-3px);
}

.kb-feature-item:hover .kb-feature-icon,
.kb-feature-item:focus-visible .kb-feature-icon {
    background: var(--kb-accent);
    color: #fff;
}

.kb-feature-item:hover .kb-feature-title,
.kb-feature-item:focus-visible .kb-feature-title {
    color: var(--kb-accent-deep);
}

.kb-feature-icon {
    width: 52px;
    height: 52px;
    background: var(--kb-accent-light);
    color: var(--kb-accent);
    font-size: 1.4rem;
    transition: background .2s ease, color .2s ease;
}

.kb-feature-title {
    font-size: 1.02rem;
    color: var(--kb-primary);
    margin-bottom: .2rem;
    transition: color .2s ease;
}

.kb-feature-desc {
    font-size: .85rem;
    color: var(--kb-text-muted);
    line-height: 1.5;
}

/* Vertical separators between items, sized to content not full row height. */
.kb-feature-item::before {
    content: '';
    position: absolute;
    /* Half the gutter — lands dead center on the column boundary. */
    inset-inline-start: calc(var(--bs-gutter-x, 1.5rem) / -2);
    top: 50%;
    transform: translateY(-50%);
    height: 85%;
    width: 1px;
    background: var(--kb-border);
    display: none;
}

/* 2 per row (col-6, <768px) — divider before the 2nd item in each pair */
.kb-feature-strip .row>div:nth-child(2n) .kb-feature-item::before {
    display: block;
}

/* 4 per row (col-md-3, ≥768px) — divider before every item except the first */
@media (min-width: 768px) {
    .kb-feature-strip .row>div:nth-child(2n) .kb-feature-item::before {
        display: none;
    }

    .kb-feature-strip .row>div:not(:first-child) .kb-feature-item::before {
        display: block;
    }
}


/* §  SPLIT SECTIONS — Products Preview + Brand ("Your Brand, Our Cups") */

/* Shared text-column intro reused by both the Products Preview and Brand sections. */
.kb-split-intro-title {
    font-size: 2.1rem;
    color: var(--kb-primary);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.kb-split-intro-bar {
    display: block;
    width: 52px;
    height: 3px;
    background: var(--kb-accent);
    border-radius: 2px;
    margin-bottom: 1.25rem;
}

.kb-split-intro-desc {
    color: var(--kb-text-dark);
    font-size: .98rem;
    line-height: 1.7;
    margin-bottom: 1.75rem;
    max-width: 340px;
}

/* overflow-x:hidden is a safety net so the mobile slider's intentional edge-bleed never causes page scroll. */
.kb-products-preview {
    overflow-x: hidden;
}

.kb-products-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.kb-products-row-item {
    flex: 1 1 140px;
    max-width: 200px;
    text-align: center;
}

.kb-products-row-img {
    aspect-ratio: 1 / 1;
    background: var(--kb-bg-soft);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 10px 24px rgba(var(--kb-text-dark-rgb), .06);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.kb-products-row-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--kb-radius);
}

.kb-products-row-item:hover .kb-products-row-img {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(var(--kb-text-dark-rgb), .14);
    border-color: transparent;
}

.kb-products-row-label {
    font-weight: 700;
    color: var(--kb-primary);
    font-size: .95rem;
}

/* Same photo+scrim technique as the hero, but light since this section is dark-on-light. */
.kb-brand-section {
    position: relative;
    overflow-x: hidden;
    background: var(--kb-bg-soft);
}

.kb-brand-section.has-bg {
    background-size: cover;
    background-position: right center;
    --kb-brand-scrim: linear-gradient(var(--kb-brand-scrim-angle, 100deg),
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, .35) 40%,
            rgba(255, 255, 255, .08) 100%);
}

.kb-brand-section .container {
    position: relative;
    z-index: 1;
}


/* §  PRODUCTS */

.kb-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius-lg);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    height: 100%;
}

.kb-product-card:hover {
    box-shadow: 0 20px 44px rgba(var(--kb-text-dark-rgb), .12);
    transform: translateY(-6px);
    border-color: transparent;
}

.kb-product-img {
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, var(--kb-bg-soft) 0%, #fff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kb-product-img img {
    max-height: 82%;
    max-width: 82%;
    object-fit: contain;
    border-radius: var(--kb-radius);
    transition: transform .3s;
}

.kb-product-card:hover .kb-product-img img {
    transform: scale(1.06);
}

.kb-product-body {
    padding: 1.1rem 1.25rem;
    flex: 1;
}

.kb-product-cat {
    display: inline-block;
    background: rgba(var(--kb-accent-rgb), .1);
    color: var(--kb-accent-deep);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .6rem;
    border-radius: 99px;
    margin-bottom: .55rem;
}

.kb-product-title {
    font-size: 1.05rem;
    margin: 0;
}

/* Card footer — pinned to the bottom regardless of title length via the
   card's own flex-column + .kb-product-body's flex:1 above, so footers
   still line up across a row of cards with uneven title lengths. */
.kb-product-footer {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--kb-border);
}

/* Styled as a button (not a literal <button> — the whole card/row is already
   the clickable <a>, so this is a span dressed up to look like one). Shared
   by both the grid card and the list-view row; outline by default, fills
   solid on hover. */
.kb-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: transparent;
    border: 1.5px solid var(--kb-primary);
    color: var(--kb-primary);
    font-weight: 700;
    font-size: .8rem;
    padding: .45rem 1.1rem;
    border-radius: 99px;
    transition: background .2s, color .2s;
}

.kb-product-footer .kb-product-link {
    width: 100%;
}

.kb-product-link svg {
    transition: transform .2s;
}

.kb-product-card:hover .kb-product-link,
.kb-products-list-item:hover .kb-product-link {
    background: var(--kb-primary);
    color: #fff;
}

.kb-product-card:hover .kb-product-link svg,
.kb-products-list-item:hover .kb-product-link svg {
    transform: translateX(3px);
}

/* Product detail page */
/* Nav is position:absolute (floats over whatever's below it) everywhere
   except phones, where it's sticky and already pushes content down on its
   own — so only tablet/desktop need extra top clearance here to keep the
   breadcrumb from sitting underneath it. */
.kb-breadcrumb {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--kb-border);
    font-size: .85rem;
}

@media (min-width: 768px) {
    .kb-breadcrumb {
        padding-top: 8.5rem;
    }
}

.kb-breadcrumb a {
    color: var(--kb-text-muted);
    font-weight: 600;
}

.kb-breadcrumb a:hover {
    color: var(--kb-primary);
}

.kb-breadcrumb i {
    font-size: .9rem;
    color: var(--kb-border);
    margin: 0 .3rem;
    vertical-align: -1px;
}

[dir="rtl"] .kb-breadcrumb i {
    transform: scaleX(-1);
}

.kb-breadcrumb span {
    color: var(--kb-text-dark);
    font-weight: 700;
}

/* On phones, drop the "Home >" crumb and just show "Products > Title" —
   reads closer to a native app's back trail than a full desktop breadcrumb. */
@media (max-width: 767.98px) {
    .kb-breadcrumb {
        font-size: .8rem;
    }

    .kb-breadcrumb a:first-child,
    .kb-breadcrumb i:first-of-type {
        display: none;
    }

    .kb-breadcrumb span {
        display: inline-block;
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

/* Sticky bottom action bar — phones/tablets only (the inline CTA box in the
   panel is desktop-only, see d-none/d-lg-flex in the Blade template). This
   is the "tap to request" pattern users expect from a mobile shopping app. */
.kb-mobile-cta-bar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--kb-border);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(var(--kb-text-dark-rgb), .1);
}

/* Soft-tinted backdrop the elevated white panel sits on, giving the whole
   top section depth without any extra imagery. */
.kb-product-hero-section {
    background: var(--kb-bg-soft);
}

.kb-product-panel {
    background: #fff;
    border-radius: var(--kb-radius-lg);
    box-shadow: 0 20px 60px rgba(var(--kb-text-dark-rgb), .08);
    padding: 2.5rem;
}

@media (max-width: 767.98px) {
    .kb-product-panel {
        padding: 1.5rem;
        border-radius: var(--kb-radius);
    }
}

/* Main photo — one plain image, shown/hidden via .d-none from thumbnail
   clicks (see product-gallery JS). No slide/transform here on purpose;
   swapping visibility between pre-loaded images avoids the flicker/blank
   frame that swapping a single <img>'s src caused before. */
.kb-product-gallery {
    position: relative;
}

.kb-product-main-img {
    height: 500px;
    border-radius: var(--kb-radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, var(--kb-bg-soft) 0%, #fff 100%);
    box-shadow: 0 12px 32px rgba(var(--kb-text-dark-rgb), .07);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
}

@media (max-width: 767.98px) {
    .kb-product-main-img {
        height: 320px;
    }
}

.kb-product-main-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--kb-radius);
}

/* Arrows belong to the thumbnail strip (the actual slider), not the main
   photo. .kb-product-thumbs-wrap is their own positioning context sized to
   just the thumbnail row, so top:50% centers on the small images instead of
   the big picture above them. No button chrome (circle/shadow), just the
   glyph with a soft white halo so it stays legible over any thumb photo. */
.kb-product-thumbs-wrap {
    position: relative;
}

.kb-thumb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--kb-primary);
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .9)) drop-shadow(0 0 6px rgba(255, 255, 255, .7));
    font-size: 1.5rem;
    line-height: 1;
    padding: .35rem;
    cursor: pointer;
    transition: transform .2s;
}

.kb-thumb-arrow:hover {
    color: var(--kb-accent);
}

.kb-thumb-arrow-prev {
    inset-inline-start: -1.25rem;
}

@media (max-width: 767.98px) {
    .kb-thumb-arrow-prev {
        inset-inline-start: -.5rem;
    }
}

.kb-thumb-arrow-prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.kb-thumb-arrow-next {
    inset-inline-end: -1.25rem;
}

@media (max-width: 767.98px) {
    .kb-thumb-arrow-next {
        inset-inline-end: -.5rem;
    }
}

.kb-thumb-arrow-next:hover {
    transform: translateY(-50%) translateX(3px);
}

[dir="rtl"] .kb-thumb-arrow-prev:hover {
    transform: translateY(-50%) translateX(3px);
}

[dir="rtl"] .kb-thumb-arrow-next:hover {
    transform: translateY(-50%) translateX(-3px);
}

[dir="rtl"] .kb-thumb-arrow i {
    transform: scaleX(-1);
}

/* Thumbnail row — the actual slider, one line, no wrap, scrollable. */
.kb-product-thumbs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: .6rem;
    margin-top: 1rem;
}

.kb-product-thumbs::-webkit-scrollbar {
    display: none;
}

.kb-product-thumb-btn {
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 2px solid var(--kb-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s;
    line-height: 0;
}

.kb-product-thumb-btn:hover {
    border-color: var(--kb-primary);
}

.kb-product-thumb-btn.active {
    border-color: var(--kb-primary);
}

.kb-product-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

/* Related products — horizontal cards (same shape as the products-page list
   view) on tablet/desktop; on phones they switch to vertical app-style
   tiles (2 per row) since a 68px thumbnail in a half-width column reads
   as cramped rather than compact. */
.kb-product-related-section {
    margin-top: 2rem;
}

@media (max-width: 767.98px) {
    .kb-product-related-section {
        margin-top: 1.25rem;
    }
}

.kb-related-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    padding: .6rem;
    height: 100%;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.kb-related-card:hover {
    box-shadow: 0 12px 32px rgba(var(--kb-text-dark-rgb), .08);
    transform: translateY(-2px);
    border-color: transparent;
}

.kb-related-card-img {
    width: 68px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    border-radius: var(--kb-radius);
    background: linear-gradient(160deg, var(--kb-bg-soft) 0%, #fff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kb-related-card-img img {
    max-height: 85%;
    max-width: 85%;
    object-fit: contain;
}

.kb-related-card-body {
    flex: 1;
    min-width: 0;
}

.kb-related-card-body .kb-product-cat {
    font-size: .58rem;
    padding: .15rem .4rem;
    margin-bottom: .3rem;
}

.kb-related-card-body .kb-product-title {
    font-size: .85rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .kb-related-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: .75rem;
        gap: .5rem;
    }

    .kb-related-card-img {
        width: 100%;
    }

    .kb-related-card-body .kb-product-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* "No photo yet" fallback icon shown in place of a product image */
.kb-img-placeholder {
    font-size: 3rem;
    color: var(--kb-text-muted);
    opacity: .35;
}

.kb-img-placeholder-sm {
    font-size: 2.5rem;
}

.kb-img-placeholder-lg {
    font-size: 4rem;
}

.kb-product-detail-title {
    font-size: 2.35rem;
    font-weight: 800;
    color: var(--kb-text-dark);
    margin: .9rem 0 1.1rem;
    line-height: 1.2;
}

.kb-product-detail-desc {
    color: var(--kb-text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.75rem;
}

@media (max-width: 767.98px) {
    .kb-product-detail-title {
        font-size: 1.5rem;
        margin: .7rem 0 .75rem;
    }

    .kb-product-detail-desc {
        font-size: .95rem;
        line-height: 1.75;
        margin-bottom: 1.25rem;
    }
}

.kb-product-options {
    margin-bottom: 1.75rem;
}

.kb-product-options-group {
    margin-bottom: 1rem;
}

.kb-product-options-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--kb-text-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .55rem;
}

[dir="rtl"] .kb-product-options-label {
    letter-spacing: normal;
    text-transform: none;
}

.kb-product-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Variant option pill (e.g. "12oz") on the product detail page */
.kb-variant-badge {
    display: inline-block;
    background: var(--kb-bg-soft);
    color: var(--kb-primary);
    font-weight: 700;
    font-size: .85rem;
    padding: .45rem 1rem;
    border-radius: 99px;
    border: 1.5px solid var(--kb-border);
}

/* Always stacked (button, then hint text below) — as a row they only
   wrapped once the text overflowed available width, so shorter Arabic
   copy kept sitting flush beside the button while English wrapped. */
.kb-product-cta-box {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--kb-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
}

.kb-product-cta svg {
    transition: transform .2s;
}

.kb-product-cta:hover svg {
    transform: translateX(3px);
}

[dir="rtl"] .kb-product-cta:hover svg {
    transform: translateX(-3px);
}

.kb-product-cta-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--kb-text-muted);
    font-size: .88rem;
    margin: 0;
}

.kb-product-cta-hint i {
    font-size: 1.15rem;
    color: var(--kb-primary);
    flex-shrink: 0;
}

.kb-product-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .kb-product-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .kb-product-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* White boxes — this grid sits directly on the section's soft-tinted
   background (outside the white .kb-product-panel above), so a matching
   soft-bg card used to blend invisibly into it. White + a light border +
   shadow gives each card real definition against that backdrop. */
.kb-product-info-card {
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius-lg);
    padding: 1.75rem;
    box-shadow: 0 8px 24px rgba(var(--kb-text-dark-rgb), .05);
    transition: box-shadow .2s, transform .2s;
}

.kb-product-info-card:hover {
    box-shadow: 0 16px 36px rgba(var(--kb-text-dark-rgb), .09);
    transform: translateY(-3px);
}

@media (max-width: 767.98px) {
    .kb-product-info-grid {
        gap: 1rem;
        margin-top: 2rem;
    }

    .kb-product-info-card {
        padding: 1.25rem;
    }
}

/* Icon + title share one row (not icon-above-title stacked) */
.kb-product-info-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.kb-product-info-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(var(--kb-primary-rgb), .1);
    color: var(--kb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.kb-product-info-card h6 {
    font-size: 1rem;
    color: var(--kb-text-dark);
    margin: 0;
}

@media (max-width: 767.98px) {
    .kb-product-info-head {
        gap: .6rem;
        margin-bottom: .75rem;
    }

    .kb-product-info-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

/* Uses/Features/Additional Info are free-form rich text (TinyMCE) — the box
   is the card itself (.kb-product-info-card); the list inside it stays a
   plain, readable bullet list rather than boxing every single item. */
.kb-product-info-list ul {
    margin: .5rem 0 0;
    padding-inline-start: 1.1rem;
}

.kb-product-info-list li {
    margin-bottom: .35rem;
}

.kb-product-info-list p {
    margin: 0 0 .25rem;
}

/* §  CUSTOM DESIGN PAGE */

/* White "Why Choose Koub" card — a plain separate block on phones/tablets,
   but on desktop it overlaps up into the page-header banner above it (the
   "half in the header, half in the page" effect) via negative margin. */
.kb-why-koub-card {
    position: relative;
    background: #fff;
    border-radius: var(--kb-radius-lg);
    box-shadow: 0 20px 50px rgba(var(--kb-text-dark-rgb), .08);
    padding: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

@media (max-width: 767.98px) {
    .kb-why-koub-card {
        padding: 1.5rem;
        margin-top: 2rem;
        border-radius: var(--kb-radius);
    }
}

@media (min-width: 992px) {
    .kb-why-koub-card {
        z-index: 2;
        margin-top: -5rem;
        box-shadow: 0 24px 60px rgba(var(--kb-primary-deep-rgb), .18);
    }
}

.kb-why-koub-head h2 {
    color: var(--kb-primary);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.kb-why-koub-head .kb-split-intro-bar {
    margin-bottom: 1rem;
}

.kb-why-koub-head p {
    color: var(--kb-text-muted);
    font-size: .92rem;
    line-height: 1.6;
}

/* "Who We Are" — narrow heading/sizes columns (col-lg-2) flank the wide
   description column (col-lg-8), each divided by a vertical rule on
   desktop where they sit side by side; collapses to a horizontal divider
   once they stack on mobile. */
.kb-who-heading-col {
    border-inline-end: 1px solid var(--kb-border);
    padding-inline-end: 1.5rem;
}

.kb-who-heading-col h2 {
    font-size: 1.3rem;
}

@media (max-width: 991.98px) {
    .kb-who-heading-col {
        border-inline-end: none;
        padding-inline-end: 0;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--kb-border);
    }
}

.kb-who-sizes-col {
    border-inline-start: 1px solid var(--kb-border);
    padding-inline-start: 1.75rem;
}

@media (max-width: 991.98px) {
    .kb-who-sizes-col {
        border-inline-start: none;
        padding-inline-start: 0;
        padding-top: 1.5rem;
        border-top: 1px solid var(--kb-border);
    }
}

.kb-who-sizes-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

/* 4-item grid — 2 columns until there's enough room for all 4 side by
   side (tablet's col-md-8 half is too narrow to fit 4 comfortably); phones
   switch to a swipeable horizontal slider instead of stacking 4 tall rows. */
.kb-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .kb-why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.kb-why-item {
    text-align: center;
}

.kb-why-item-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(var(--kb-accent-rgb), .12);
    color: var(--kb-accent-deep);
}

.kb-why-item h3 {
    color: var(--kb-primary);
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.kb-why-item p {
    color: var(--kb-text-muted);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767.98px) {
    .kb-why-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 1rem;
        margin: 0 -1.5rem;
        padding: 0 1.5rem;
    }

    .kb-why-grid::-webkit-scrollbar {
        display: none;
    }

    .kb-why-item {
        flex: 0 0 42vw;
        scroll-snap-align: start;
    }
}

/* Shared light-gray content panel — used by both "Our Design Process" and
   "See Our Work" for a consistent look. An inner wrapper (like
   .kb-design-way-panel), not applied to the outer <section>, so it doesn't
   fight with the section's own kb-section/pt-0 spacing utilities. */
.kb-content-panel {
    background: var(--kb-bg-soft);
    border-radius: var(--kb-radius-lg);
    padding: 2.5rem;
}

@media (max-width: 767.98px) {
    .kb-content-panel {
        padding: 1.5rem;
        border-radius: var(--kb-radius);
    }
}

/* Orange ring decoration — same technique as the form-hero's circles, just
   lighter/fewer since this sits on a soft light background instead of the
   dark blue hero. background-color (set on .kb-content-panel) shows through
   the transparent gaps, so only the rings themselves need declaring here. */
.kb-content-panel-circles {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 94% 12%, transparent 110px, rgba(var(--kb-accent-rgb), .16) 112px, rgba(var(--kb-accent-rgb), .16) 116px, transparent 118px),
        radial-gradient(circle at 4% 88%, transparent 90px, rgba(var(--kb-accent-rgb), .14) 92px, rgba(var(--kb-accent-rgb), .14) 96px, transparent 98px),
        radial-gradient(circle at 90% 85%, transparent 60px, rgba(var(--kb-accent-rgb), .12) 62px, rgba(var(--kb-accent-rgb), .12) 65px, transparent 67px);
}

.kb-panel-heading {
    color: var(--kb-primary);
    font-weight: 800;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 0;
}

[dir="rtl"] .kb-panel-heading {
    letter-spacing: normal;
    text-transform: none;
}

.kb-process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}

.kb-process-step {
    position: relative;
    text-align: center;
}

.kb-process-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 16px;
    inset-inline-start: calc(50% + 40px);
    width: calc(100% - 80px);
    border-top: 2px dashed rgba(var(--kb-primary-rgb), .3);
}

[dir="rtl"] .kb-process-step:not(:last-child)::before {
    transform: scaleX(-1);
}

.kb-process-step-num {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--kb-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    box-shadow: 0 0 0 4px var(--kb-bg-soft);
}

.kb-process-step-icon {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    margin: -14px auto 1rem;
    border-radius: 50%;
    background: rgba(var(--kb-primary-rgb), .08);
    color: var(--kb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kb-process-step h4 {
    color: var(--kb-primary);
    font-size: .92rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.kb-process-step p {
    color: var(--kb-text-muted);
    font-size: .8rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767.98px) {
    .kb-process-steps {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 1.5rem;
        margin: 2rem -1.5rem 0;
        padding: 0 1.5rem;
    }

    .kb-process-steps::-webkit-scrollbar {
        display: none;
    }

    .kb-process-step {
        flex: 0 0 34vw;
        scroll-snap-align: start;
    }

    .kb-process-step::before {
        display: none;
    }
}

/* Design It Your Way — checklist + CTA on one side, 3 reference images on
   the other (desktop grid, mobile swipeable slider). */
.kb-design-way-panel {
    background: var(--kb-bg-soft);
    border-radius: var(--kb-radius-lg);
    padding: 2.5rem;
}

@media (max-width: 767.98px) {
    .kb-design-way-panel {
        padding: 1.5rem;
        border-radius: var(--kb-radius);
    }
}

.kb-design-way-panel h2 {
    color: var(--kb-primary);
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.kb-design-way-panel p {
    color: var(--kb-text-muted);
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.kb-design-way-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.kb-design-way-checklist li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--kb-text-dark);
    font-weight: 600;
    font-size: .9rem;
}

.kb-design-way-checklist i {
    color: #fff;
    background: var(--kb-primary);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
}

.kb-design-way-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.kb-design-way-image-card {
    background: #fff;
    border-radius: var(--kb-radius);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(var(--kb-text-dark-rgb), .06);
    line-height: 0;
}

.kb-design-way-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Below lg the text column stacks above this one full-width, which is
   actually more room than the desktop 8/12 column — stays a plain 3-across
   grid the whole way down instead of becoming a slider. */
@media (max-width: 991.98px) {
    .kb-design-way-images {
        margin-top: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .kb-design-way-images {
        gap: .5rem;
    }
}

/* See Our Work — a real slider (not just a mobile fallback), arrows +
   scroll-snap track, same bare-icon arrow language as the product gallery.
   Each slide is a pressable <button> (square image) that opens the
   full-screen lightbox below. */
.kb-examples-wrap {
    position: relative;
    margin-top: 1.5rem;
}

.kb-examples-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: .25rem .25rem .5rem;
}

.kb-examples-track::-webkit-scrollbar {
    display: none;
}

.kb-examples-slide {
    position: relative;
    /* 6 per row exactly (5 gaps between 6 items) — any beyond that scroll
       into view via the slider instead of wrapping or shrinking further. */
    flex: 0 0 calc((100% - 5 * 1.25rem) / 6);
    aspect-ratio: 1/1;
    scroll-snap-align: start;
    border-radius: var(--kb-radius-lg);
    overflow: hidden;
    background: var(--kb-bg-soft);
    line-height: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(var(--kb-text-dark-rgb), .08);
    transition: box-shadow .25s, transform .25s;
}

.kb-examples-slide:hover {
    box-shadow: 0 20px 44px rgba(var(--kb-text-dark-rgb), .16);
    transform: translateY(-4px);
}

@media (max-width: 991.98px) {
    .kb-examples-slide {
        flex-basis: calc((100% - 3 * 1.25rem) / 4);
    }
}

@media (max-width: 767.98px) {
    .kb-examples-track {
        gap: .75rem;
    }

    .kb-examples-slide {
        flex-basis: calc((100% - .75rem) / 2);
    }
}

.kb-examples-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.kb-examples-slide:hover img {
    transform: scale(1.06);
}

.kb-examples-slide-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    background: rgba(var(--kb-text-dark-rgb), 0);
    opacity: 0;
    transition: background .25s, opacity .25s;
}

.kb-examples-slide:hover .kb-examples-slide-zoom,
.kb-examples-slide:focus-visible .kb-examples-slide-zoom {
    background: rgba(var(--kb-text-dark-rgb), .35);
    opacity: 1;
}

/* Full-screen lightbox — plain vanilla overlay, no library. */
.kb-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .92);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.kb-lightbox.show {
    display: flex;
}

.kb-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--kb-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.kb-lightbox-close {
    position: absolute;
    top: 1.5rem;
    inset-inline-end: 1.5rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
}

.kb-lightbox-close:hover {
    background: rgba(255, 255, 255, .2);
}

.kb-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--kb-border);
    color: var(--kb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--kb-text-dark-rgb), .12);
    transition: background .2s, color .2s;
}

.kb-slider-arrow:hover {
    background: var(--kb-primary);
    color: #fff;
}

.kb-slider-arrow-prev {
    inset-inline-start: -1.25rem;
}

.kb-slider-arrow-next {
    inset-inline-end: -1.25rem;
}

[dir="rtl"] .kb-slider-arrow i {
    transform: scaleX(-1);
}

@media (max-width: 767.98px) {
    .kb-slider-arrow {
        display: none;
    }
}

/* CTA banner — primary/accent gradient with one decorative ring, same
   language as the hero sections above. */
.kb-custom-cta-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--kb-primary) 0%, var(--kb-primary-deep) 100%);
    border-radius: var(--kb-radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.kb-custom-cta-banner::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border: 10px solid rgba(var(--kb-accent-rgb), .5);
    border-radius: 50%;
    inset-inline-end: -110px;
    bottom: -110px;
    pointer-events: none;
}

.kb-custom-cta-banner-text {
    position: relative;
    z-index: 1;
}

.kb-custom-cta-banner h2 {
    color: #fff;
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: .4rem;
}

.kb-custom-cta-banner h2 .kb-highlight {
    font-size: inherit;
    font-weight: inherit;
}

.kb-custom-cta-banner p {
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    margin: 0;
}

.kb-custom-cta-banner-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (max-width: 767.98px) {
    .kb-custom-cta-banner {
        padding: 1.75rem;
        text-align: center;
        justify-content: center;
    }

    .kb-custom-cta-banner-actions {
        width: 100%;
        justify-content: center;
    }
}



/* Small referral banner linking one page to a related one (e.g. Order Form → Custom Design) */
.kb-inline-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(var(--kb-accent-rgb), .08);
    border: 1px solid var(--kb-accent-light);
    border-radius: var(--kb-radius);
    padding: .9rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--kb-text-dark);
    font-weight: 600;
    font-size: .9rem;
    transition: background .2s, border-color .2s;
}

.kb-inline-banner:hover {
    background: var(--kb-accent-light);
    border-color: var(--kb-accent);
}

.kb-inline-banner-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(var(--kb-accent-rgb), .15);
    color: var(--kb-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.kb-inline-banner-arrow {
    margin-inline-start: auto;
    color: var(--kb-text-muted);
}

[dir="rtl"] .kb-inline-banner-arrow {
    transform: scaleX(-1);
}

/* Light-on-dark variant — sits directly on the blue form-hero background
   (Order Form page) instead of the white form card, so the default
   dark-on-light colors would be near-illegible there. */
.kb-inline-banner-onhero {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    margin-bottom: 0;
    margin-top: 1.5rem;
}

.kb-inline-banner-onhero:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
}

.kb-inline-banner-onhero .kb-inline-banner-icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.kb-inline-banner-onhero .kb-inline-banner-arrow {
    color: rgba(255, 255, 255, .7);
}

/* Category pill row — mobile-only quick select (desktop keeps the sidebar's
   category radios). One scrollable row instead of wrapping to a second line. */
.kb-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.kb-pills::-webkit-scrollbar {
    display: none;
}

.kb-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: none;
    box-shadow: 0 1px 3px rgba(var(--kb-text-dark-rgb), .08);
    border-radius: var(--kb-radius-btn);
    padding: .6rem 1.15rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--kb-text-dark);
    transition: background .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.kb-pill i {
    font-size: 1.1rem;
    color: var(--kb-text-muted);
    transition: color .2s;
}

.kb-pill:hover {
    color: var(--kb-primary);
    box-shadow: 0 2px 8px rgba(var(--kb-text-dark-rgb), .12);
}

.kb-pill:hover i {
    color: var(--kb-primary);
}

.kb-pill.active {
    background: var(--kb-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(var(--kb-primary-rgb), .3);
}

.kb-pill.active i {
    color: #fff;
}

@media (min-width: 992px) {
    .kb-pills {
        display: none;
    }
}

/* Filter sidebar card — same .kb-filter-form markup is reused unstyled in the mobile drawer. */
.kb-filter-sidebar-col>.kb-filter-form {
    background: var(--kb-bg-soft);
    box-shadow: 0 1px 3px rgba(var(--kb-text-dark-rgb), .08);
    border-radius: var(--kb-radius-lg);
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
}

.kb-filter-group {
    border-bottom: 1px solid var(--kb-border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}

.kb-filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.kb-filter-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 .9rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--kb-text-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
}

.kb-filter-group-head i {
    font-size: 1.1rem;
    color: var(--kb-text-muted);
    transition: transform .2s;
}

.kb-filter-group-head.collapsed i {
    transform: rotate(180deg);
}

.kb-filter-group-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.kb-filter-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--kb-text-dark);
    transition: color .15s;
}

.kb-filter-check:hover {
    color: var(--kb-primary);
}

.kb-filter-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--kb-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.kb-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--kb-accent);
    font-weight: 700;
    font-size: .85rem;
    margin-top: 1.25rem;
}

.kb-filter-clear:hover {
    color: var(--kb-accent-deep);
}

/* Mobile "Filters" button that opens the drawer — the inline sidebar column
   is hidden below lg, this is what replaces it (see RESPONSIVE). Sits inside
   the .kb-products-toolbar bar, so it's a plain white pill with a shadow
   rather than an outlined one — the bar's own soft background is the border. */
.kb-filter-toggle-btn {
    display: none;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: none;
    box-shadow: 0 1px 3px rgba(var(--kb-text-dark-rgb), .08);
    border-radius: 99px;
    padding: .6rem 1.1rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--kb-text-dark);
    cursor: pointer;
    transition: color .2s, box-shadow .2s;
}

.kb-filter-toggle-btn:hover {
    color: var(--kb-primary);
    box-shadow: 0 2px 8px rgba(var(--kb-text-dark-rgb), .12);
}

.kb-filter-toggle-btn i {
    font-size: 1.1rem;
}

.kb-filter-toggle-badge {
    background: var(--kb-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Filter drawer — closed by default, same structural pattern as .kb-nav-drawer
   (fixed panel + overlay, slid in from the end). */
.kb-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--kb-text-dark-rgb), .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s;
    z-index: 199;
}

.kb-filter-overlay.show {
    opacity: 1;
    visibility: visible;
}

.kb-filter-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: -340px;
    width: 320px;
    max-width: 88vw;
    background: #fff;
    z-index: 200;
    transition: inset-inline-end .3s ease;
    overflow-y: auto;
}

.kb-filter-drawer.show {
    inset-inline-end: 0;
}

.kb-filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--kb-border);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.kb-filter-drawer-head h6 {
    margin: 0;
    font-size: 1rem;
    color: var(--kb-text-dark);
}

.kb-filter-drawer-body {
    padding: 1.5rem;
}

.kb-filter-drawer .kb-filter-clear {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
}

/* Active filter chips — size selections only now (category has its own pill state). */
.kb-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.kb-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--kb-bg-soft);
    border: 1px solid var(--kb-border);
    border-radius: 99px;
    padding: .4rem .7rem .4rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--kb-primary);
    transition: background .2s, border-color .2s;
}

[dir="rtl"] .kb-filter-chip {
    padding: .4rem 1rem .4rem .7rem;
}

.kb-filter-chip:hover {
    background: var(--kb-accent-light);
    border-color: var(--kb-accent);
    color: var(--kb-accent-deep);
}

.kb-filter-chip i {
    font-size: 1rem;
}

/* Toolbar — one unified bar (soft-tinted strip) holding the filter button,
   sort dropdown, and grid/list toggle as plain white pills inside it, rather
   than three separately-outlined controls floating on the page background. */
.kb-products-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--kb-bg-soft);
    border-radius: 18px;
    padding: .75rem .9rem;
    margin-bottom: 1.5rem;
}

/* Filters + Sort grouped on the start side; .kb-view-toggle (a direct
   sibling below) sits on the end side via the toolbar's space-between —
   Sort and View toggle land on opposite ends instead of bunched together. */
.kb-products-toolbar-start {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kb-products-count {
    color: var(--kb-text-dark);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

.kb-products-count span {
    color: var(--kb-text-muted);
    font-weight: 500;
    font-size: 1rem;
}

.kb-sort-select {
    border: none;
    box-shadow: 0 1px 3px rgba(var(--kb-text-dark-rgb), .08);
    border-radius: 99px;
    /* Logical (not left/right) so the native dropdown arrow's side — which
       browsers flip to match dir="rtl" — always gets the bigger padding. */
    padding-block: .6rem;
    padding-inline-end: 2.2rem;
    padding-inline-start: 1.1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--kb-text-dark);
    background: #fff;
    cursor: pointer;
    transition: box-shadow .2s;
}

.kb-sort-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--kb-primary-rgb), .15);
}

.kb-view-toggle {
    display: flex;
    gap: .35rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(var(--kb-text-dark-rgb), .08);
    border-radius: var(--kb-radius-btn);
    padding: 4px;
}

.kb-view-toggle-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--kb-text-muted);
    font-size: 1.05rem;
    transition: background .2s, color .2s;
}

.kb-view-toggle-btn:hover {
    color: var(--kb-primary);
}

.kb-view-toggle-btn.active {
    background: var(--kb-primary);
    color: #fff;
}

/* Loading state — dims the results while an AJAX request is in flight */
.kb-products-results.kb-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s;
}

/* Empty state */
.kb-products-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--kb-text-muted);
}

.kb-products-empty i {
    font-size: 2.75rem;
    color: var(--kb-border);
    margin-bottom: 1rem;
    display: block;
}

.kb-products-empty p {
    margin: 0;
    font-size: .95rem;
}

/* List view — horizontal row per product, alternative to the grid */
.kb-products-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kb-products-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    padding: .65rem;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.kb-products-list-item:hover {
    box-shadow: 0 12px 32px rgba(var(--kb-text-dark-rgb), .08);
    transform: translateY(-2px);
    border-color: transparent;
}

.kb-products-list-item .kb-product-img {
    width: 90px;
    flex-shrink: 0;
    border-radius: var(--kb-radius);
}

.kb-products-list-body {
    flex: 1;
    min-width: 0;
}

.kb-products-list-body .kb-product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-products-list-item .kb-product-link {
    margin-top: 0;
    flex-shrink: 0;
}

/* Pagination */
.kb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem;
}

.kb-pagination-btn {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    border-radius: var(--kb-radius-btn);
    border: 1.5px solid var(--kb-border);
    color: var(--kb-text-dark);
    font-size: .88rem;
    font-weight: 600;
    transition: background .2s, border-color .2s, color .2s;
}

.kb-pagination-btn:hover {
    border-color: var(--kb-primary);
    color: var(--kb-primary);
}

.kb-pagination-btn.active {
    background: var(--kb-accent);
    border-color: var(--kb-accent);
    color: #fff;
}

.kb-pagination-btn.disabled {
    opacity: .4;
    pointer-events: none;
}


/* §  PAGE HEADER — shared banner for About / Products / Contact / ... */

/* Same photo+scrim technique as the hero and brand section, but light
   (dark-on-light text) — the eyebrow/accent screenshots were a copy/content
   reference only, not a style reference, so this stays the site's plain
   light banner rather than the hero's deep-blue gradient. */
.kb-page-header {
    position: relative;
    margin-inline: auto;
    background: var(--kb-header-bg);
    background-size: cover;
    background-position: center;
    min-height: 46dvh;
    padding: 7.5rem 0 3rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

@media (min-width: 992px) {
    .kb-page-header {
        min-height: 540px;
    }
}

.kb-page-header.has-bg {
    background-position: right center;
    --kb-page-header-scrim: linear-gradient(var(--kb-page-header-scrim-angle, 100deg),
            rgba(var(--kb-header-bg-rgb), .95) 0%,
            rgba(var(--kb-header-bg-rgb), .78) 45%,
            rgba(var(--kb-header-bg-rgb), .15) 100%);
}

.kb-page-header .container {
    position: relative;
    z-index: 1;
}

.kb-page-header .kb-eyebrow {
    color: var(--kb-accent);
}

.kb-page-header h1 {
    font-size: clamp(2.4rem, 3.4vw + 1rem, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--kb-primary);
    margin-bottom: 1rem;
}

.kb-page-header h1 .kb-highlight {
    font-size: inherit;
    font-weight: inherit;
}

.kb-page-header p {
    color: var(--kb-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 480px;
    margin: 0;
}


/* §  LEGAL — rich-text content from the admin editor (legal pages) */

.kb-legal-hero-section {
    background: var(--kb-bg-soft);
}

/* Sticky sidebar table of contents — built client-side from the content's
   own headings, see public/js/koub-legal.js. Desktop only; on phones/
   tablets there isn't enough width to spare so it's just hidden. */
.kb-legal-toc {
    position: sticky;
    top: 7rem;
}

.kb-legal-toc-title {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kb-text-muted);
    margin-bottom: 1rem;
}

[dir="rtl"] .kb-legal-toc-title {
    letter-spacing: normal;
    text-transform: none;
}

.kb-legal-toc-list {
    display: flex;
    flex-direction: column;
    border-inline-start: 2px solid var(--kb-border);
}

.kb-legal-toc-link {
    padding: .5rem 0 .5rem 1rem;
    margin-inline-start: -2px;
    border-inline-start: 2px solid transparent;
    color: var(--kb-text-muted);
    font-size: .85rem;
    line-height: 1.4;
    transition: color .2s, border-color .2s;
}

[dir="rtl"] .kb-legal-toc-link {
    padding: .5rem 1rem .5rem 0;
}

.kb-legal-toc-link:hover {
    color: var(--kb-text-dark);
}

.kb-legal-toc-link.active {
    color: var(--kb-primary);
    border-inline-start-color: var(--kb-primary);
    font-weight: 700;
}

/* Content panel — white card on the section's soft-tinted background,
   matching the elevated-panel pattern used on the product detail page. */
.kb-legal-panel {
    background: #fff;
    border-radius: var(--kb-radius-lg);
    box-shadow: 0 20px 60px rgba(var(--kb-text-dark-rgb), .08);
    padding: 2.5rem;
}

@media (max-width: 767.98px) {
    .kb-legal-panel {
        padding: 1.5rem;
        border-radius: var(--kb-radius);
    }
}

.kb-legal-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--kb-text-muted);
    font-size: .82rem;
    font-weight: 600;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--kb-border);
}

.kb-legal-meta-icon {
    color: var(--kb-primary);
    font-size: 1.1rem;
    display: flex;
}

.kb-legal-content {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--kb-text-dark);
}

.kb-legal-content > p:first-child {
    font-size: 1.05rem;
    color: var(--kb-text-muted);
}

.kb-legal-content h2,
.kb-legal-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kb-text-dark);
    margin: 2.25rem 0 1rem;
    padding-inline-start: .9rem;
    border-inline-start: 3px solid var(--kb-accent);
    scroll-margin-top: 6rem;
}

.kb-legal-content h2:first-child,
.kb-legal-content h3:first-child {
    margin-top: 0;
}

.kb-legal-content p {
    margin-bottom: 1rem;
}

.kb-legal-content ul,
.kb-legal-content ol {
    margin-bottom: 1rem;
    padding-inline-start: 1.5rem;
}

.kb-legal-content li {
    margin-bottom: .4rem;
}

.kb-legal-content a {
    color: var(--kb-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-legal-content a:hover {
    color: var(--kb-primary-deep);
}


/* §  ABOUT */

/* Sustainability section (About + Custom Design) — each paragraph as its
   own white card inside the soft outer panel, with the closing tagline
   ("Koub... Quality that Lasts...") set apart as a pill badge below them. */
.kb-sustainability-para {
    background: #fff;
    border-radius: var(--kb-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    color: var(--kb-text-muted);
    font-size: 1rem;
    line-height: 1.7;
    box-shadow: 0 8px 24px rgba(var(--kb-text-dark-rgb), .06);
    height: 100%;
}

.kb-sustainability-para:last-of-type {
    margin-bottom: 0;
}

.kb-sustainability-badge-wrap {
    text-align: center;
    margin-top: 1.5rem;
}

.kb-sustainability-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--kb-accent-rgb), .12);
    color: var(--kb-accent-deep);
    border-radius: 999px;
    padding: .75rem 1.75rem;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.4;
}

/* Service Scope / Vision / Mission — 3 boxes, each a different tint of the
   Koub palette with its own layered organic-circle decoration (same ring
   technique used elsewhere), so they read as distinct cards at a glance. */
.kb-scope-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--kb-radius-lg);
    padding: 2rem;
    height: 100%;
}

.kb-scope-card h3 {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: .75rem;
}

.kb-scope-card p {
    position: relative;
    z-index: 1;
    color: var(--kb-text-muted);
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767.98px) {
    .kb-scope-card {
        padding: 1.5rem;
    }
}

.kb-scope-card-service {
    background-color: rgba(var(--kb-primary-rgb), .08);
    background-image:
        radial-gradient(circle at 92% 8%, transparent 70px, rgba(var(--kb-primary-rgb), .18) 72px, rgba(var(--kb-primary-rgb), .18) 75px, transparent 77px),
        radial-gradient(circle at 102% 102%, transparent 90px, rgba(var(--kb-primary-rgb), .12) 92px, rgba(var(--kb-primary-rgb), .12) 95px, transparent 97px);
}

.kb-scope-card-service h3 {
    color: var(--kb-primary);
}

.kb-scope-card-vision {
    background-color: rgba(var(--kb-accent-rgb), .08);
    background-image:
        radial-gradient(circle at 92% 8%, transparent 70px, rgba(var(--kb-accent-rgb), .22) 72px, rgba(var(--kb-accent-rgb), .22) 75px, transparent 77px),
        radial-gradient(circle at 102% 102%, transparent 90px, rgba(var(--kb-accent-rgb), .16) 92px, rgba(var(--kb-accent-rgb), .16) 95px, transparent 97px);
}

.kb-scope-card-vision h3 {
    color: var(--kb-accent-deep);
}

.kb-scope-card-mission {
    background-color: rgba(var(--kb-primary-deep-rgb), .06);
    background-image:
        radial-gradient(circle at 92% 8%, transparent 70px, rgba(var(--kb-primary-deep-rgb), .16) 72px, rgba(var(--kb-primary-deep-rgb), .16) 75px, transparent 77px),
        radial-gradient(circle at 102% 102%, transparent 90px, rgba(var(--kb-primary-deep-rgb), .1) 92px, rgba(var(--kb-primary-deep-rgb), .1) 95px, transparent 97px);
}

.kb-scope-card-mission h3 {
    color: var(--kb-primary-deep);
}


/* §  CONTACT / FORM PAGES (Contact, Order Form, Become a Distributor) */

/* Full-bleed deep-blue hero replacing the plain page-header banner on these
   3 form pages — it absorbs the heading AND the form into one section, so
   it needs its own nav clearance (nav is position:absolute on tablet/
   desktop) the same way the page-header banner used to provide. The ring
   outlines are pure CSS (no image asset) so they scale/mirror for free. */
.kb-form-hero {
    position: relative;
    /* Solid color as its own layer (not folded into the gradient shorthand)
       so it still shows through if the uploaded header image has
       transparent areas — the inline background-image only overrides the
       image layer, this color stays underneath it either way. */
    background-color: var(--kb-primary);
    background-image: linear-gradient(150deg, var(--kb-primary) 0%, var(--kb-primary-deep) 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* Mobile nav is sticky/in-flow (not overlaid), so the hero doesn't need
       the desktop's extra top clearance for the absolute-positioned nav. */
    padding: 1.75rem 0 2.5rem;
}

@media (min-width: 768px) {
    .kb-form-hero {
        padding: 8rem 0 5rem;
    }
}

/* Fallback pure-CSS ring decoration — only shown when no real background
   image is set (admin-uploaded photos already carry their own artwork).
   Layered as radial-gradient rings on the section's own background instead
   of ::before/::after, since CSS only gives 2 pseudo-elements but this
   needs more rings than that, spread wider across the whole hero, not
   clustered in one corner — each "at X% Y%" position scales with the
   section's width, so the spread holds at any viewport size. */
.kb-form-hero:not(.has-bg) {
    background-image:
        radial-gradient(circle at 94% 20%, transparent 210px, rgba(var(--kb-accent-rgb), .3) 213px, rgba(var(--kb-accent-rgb), .3) 217px, transparent 220px),
        radial-gradient(circle at 74% 65%, transparent 150px, rgba(var(--kb-accent-rgb), .26) 153px, rgba(var(--kb-accent-rgb), .26) 158px, transparent 161px),
        radial-gradient(circle at 100% 88%, transparent 260px, rgba(var(--kb-accent-rgb), .22) 263px, rgba(var(--kb-accent-rgb), .22) 269px, transparent 272px),
        radial-gradient(circle at 40% 12%, transparent 110px, rgba(var(--kb-accent-rgb), .2) 112px, rgba(var(--kb-accent-rgb), .2) 116px, transparent 119px),
        radial-gradient(circle at 8% 60%, transparent 170px, rgba(var(--kb-accent-rgb), .16) 173px, rgba(var(--kb-accent-rgb), .16) 178px, transparent 181px),
        linear-gradient(150deg, var(--kb-primary) 0%, var(--kb-primary-deep) 100%);
}

@media (max-width: 767.98px) {
    .kb-form-hero:not(.has-bg) {
        background-image: linear-gradient(150deg, var(--kb-primary) 0%, var(--kb-primary-deep) 100%);
    }
}

.kb-form-hero .container {
    position: relative;
    z-index: 1;
}

/* Request/Distributor put the shared examples-slider section (pt-0, since
   it usually follows a section that already has its own bottom padding)
   directly after this hero — the hero's own bottom padding isn't enough on
   its own once pt-0 zeroes the following section's top, so restore it here.
   Scoped to the adjacent-sibling case only, so Contact/Custom Design (where
   pt-0 already sits after a section that's already spaced) are unaffected. */
.kb-form-hero + .kb-section.pt-0 {
    padding-top: 3rem !important;
}

.kb-form-hero-intro h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.kb-form-hero-intro h1 .kb-highlight {
    font-size: inherit;
    font-weight: inherit;
}

.kb-form-hero-desc {
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 420px;
    margin-bottom: 2rem;
}

/* Centered intro variant (Order Form page) — desc and banner shrink to
   content width so text-center on the column can actually center them,
   instead of stretching full-width like the default left-aligned intro. */
.kb-form-hero-intro.text-center .kb-form-hero-desc {
    margin-left: auto;
    margin-right: auto;
}

.kb-form-hero-intro.text-center .kb-inline-banner {
    display: inline-flex;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Contact detail rows — outlined circle icons (white stroke on the blue
   bg) rather than the filled soft-bg style used elsewhere on the site,
   since a filled light circle would disappear against this background. */
.kb-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kb-contact-row-icon {
    width: 46px;
    height: 46px;
    border: 1.5px solid rgba(255, 255, 255, .4);
    color: #fff;
    font-size: 1.15rem;
}

.kb-contact-row h6 {
    color: rgba(255, 255, 255, .65);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .3rem;
}

[dir="rtl"] .kb-contact-row h6 {
    letter-spacing: normal;
    text-transform: none;
}

.kb-contact-row p,
.kb-contact-row a {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
}

.kb-contact-row a:hover {
    color: var(--kb-accent);
}

/* Form card — the white panel floating on the blue hero. */
.kb-form-card {
    background: #fff;
    border-radius: var(--kb-radius-lg);
    box-shadow: 0 24px 60px rgba(var(--kb-primary-deep-rgb), .35);
    padding: 1.75rem;
}

.kb-form-card hr {
    margin: .5rem 0;
}

@media (max-width: 767.98px) {
    .kb-form-card {
        padding: 1.25rem;
        border-radius: var(--kb-radius);
    }
}

.kb-form-card-title {
    color: var(--kb-primary);
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .75rem;
}

[dir="rtl"] .kb-form-card-title {
    letter-spacing: normal;
    text-transform: none;
}

.kb-form-card-bar {
    display: block;
    width: 42px;
    height: 3px;
    background: var(--kb-accent);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.kb-form-control {
    border: 1.5px solid var(--kb-border);
    border-radius: 10px;
    padding: .55rem 1rem;
    font-size: .92rem;
    width: 100%;
}

.kb-form-control:focus {
    outline: none;
    border-color: var(--kb-primary);
    box-shadow: 0 0 0 3px rgba(var(--kb-primary-rgb), .12);
}

.kb-form-control.is-invalid,
.kb-form-file.is-invalid {
    border-color: var(--kb-danger);
}

.kb-form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(var(--kb-danger-rgb), .15);
}

.kb-field-error {
    color: var(--kb-danger);
    font-size: .8rem;
    margin-top: .35rem;
}

/* Top-of-form banner listing that some fields need fixing — sits above the
   fields themselves so it's visible even if the invalid field is scrolled
   out of view. Bootstrap's .alert-danger handles the box; this just ties
   the accent stripe to our palette instead of Bootstrap's own red. */
.kb-form-error-summary {
    border-inline-start: 4px solid var(--kb-danger);
}

.kb-form-label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--kb-text-dark);
    margin-bottom: .3rem;
    display: block;
}

select.kb-form-control {
    cursor: pointer;
}

.kb-form-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    font-size: .92rem;
    color: var(--kb-text-dark);
}

.kb-form-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--kb-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.kb-form-check a {
    color: var(--kb-primary);
    font-weight: 700;
    text-decoration: underline;
}

/* File input (design upload) — same box/border language as .kb-form-control. */
.kb-form-file {
    border: 1.5px dashed var(--kb-border);
    border-radius: 10px;
    padding: .65rem 1rem;
    font-size: .88rem;
    width: 100%;
    color: var(--kb-text-muted);
    background: var(--kb-bg-soft);
    cursor: pointer;
}

.kb-form-file:hover {
    border-color: var(--kb-primary);
}

.kb-form-hint {
    font-size: .78rem;
    color: var(--kb-text-muted);
    margin-top: .35rem;
}

/* Submit row — button + small reassurance note, stacked on mobile. */
.kb-form-submit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: .5rem;
    text-align: center;
}

.kb-form-trust {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--kb-text-muted);
    font-size: .82rem;
    line-height: 1.4;
    margin: 0;
}

.kb-form-trust i {
    font-size: 1.3rem;
    color: var(--kb-primary);
    flex-shrink: 0;
}

/* Trust bar — 4 items on a soft-tinted pill, sits right under the hero.
   Dividers between items via border-inline-start on all but the first. */
.kb-trust-bar {
    background: var(--kb-bg-soft);
    border-radius: var(--kb-radius-lg);
    box-shadow: 0 10px 28px rgba(var(--kb-text-dark-rgb), .06);
    display: flex;
    flex-wrap: wrap;
}

.kb-trust-item {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.5rem;
    border-inline-start: 1px solid var(--kb-border);
}

.kb-trust-item:first-child {
    border-inline-start: none;
}

.kb-trust-item-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 1.5px solid rgba(var(--kb-primary-rgb), .35);
    color: var(--kb-primary);
    font-size: 1.2rem;
}

.kb-trust-item h6 {
    color: var(--kb-primary);
    font-size: .92rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.kb-trust-item p {
    color: var(--kb-text-muted);
    font-size: .8rem;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 991.98px) {
    .kb-trust-item {
        flex: 1 1 45%;
        border-inline-start: none;
        border-top: 1px solid var(--kb-border);
    }

    .kb-trust-item:nth-child(1),
    .kb-trust-item:nth-child(2) {
        border-top: none;
    }
}

@media (max-width: 575.98px) {
    .kb-trust-item {
        flex: 1 1 100%;
    }

    .kb-trust-item:nth-child(2) {
        border-top: 1px solid var(--kb-border);
    }
}

/* FAQ accordion — fixed height for ~5 rows, the rest scroll inside it
   instead of growing the page. */
.kb-faq-accordion {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius-lg);
}

.kb-faq-item {
    border-bottom: 1px solid var(--kb-border);
}

.kb-faq-item:last-child {
    border-bottom: none;
}

.kb-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: none;
    border: none;
    padding: 1rem 1.25rem;
    text-align: start;
    font-weight: 600;
    font-size: .9rem;
    color: var(--kb-text-dark);
}

.kb-faq-question i {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--kb-primary);
    transition: transform .2s;
}

.kb-faq-question.collapsed i {
    transform: rotate(-90deg);
}

[dir="rtl"] .kb-faq-question.collapsed i {
    transform: rotate(90deg);
}

.kb-faq-answer-body {
    padding: 0 1.25rem 1rem;
    color: var(--kb-text-muted);
    font-size: .85rem;
    line-height: 1.65;
}

/* "Ready to start your custom design?" mini CTA card — soft accent tint,
   image on the start side. Image is optional/admin-uploaded — the layout
   holds up fine without one (text just takes the full width). */
.kb-cta-mini-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(var(--kb-accent-rgb), .1);
    border-radius: var(--kb-radius-lg);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.kb-cta-mini-card img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
}

.kb-cta-mini-card h3 {
    color: var(--kb-text-dark);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.kb-cta-mini-card p {
    color: var(--kb-text-muted);
    font-size: .85rem;
    margin-bottom: .9rem;
}

@media (max-width: 575.98px) {
    .kb-cta-mini-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Map — sits below the hero on the Contact page, same card language
   (rounded, shadowed) as the rest of the site, with a floating pin card
   overlaid on top showing the address + a link out to Google Maps. */
.kb-map-card {
    position: relative;
    border-radius: var(--kb-radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(var(--kb-text-dark-rgb), .1);
    line-height: 0;
}

.kb-map-card iframe {
    width: 100%;
    height: 405px;
    border: 0;
    display: block;
}

@media (max-width: 767.98px) {
    .kb-map-card iframe {
        height: 320px;
    }
}

.kb-map-pin-card {
    position: absolute;
    bottom: 1rem;
    inset-inline-start: 1rem;
    max-width: 240px;
    background: #fff;
    border-radius: var(--kb-radius);
    box-shadow: 0 12px 28px rgba(var(--kb-text-dark-rgb), .18);
    padding: 1rem 1.1rem;
    line-height: 1.5;
}

.kb-map-pin-card strong {
    display: block;
    color: var(--kb-text-dark);
    font-size: .88rem;
    margin-bottom: .2rem;
}

.kb-map-pin-card p {
    color: var(--kb-text-muted);
    font-size: .78rem;
    margin: 0 0 .5rem;
}

.kb-map-pin-card a {
    color: var(--kb-primary);
    font-weight: 700;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Connect With Us — social icons on a soft-tinted card. */
.kb-connect-card {
    background: var(--kb-bg-soft);
    border-radius: var(--kb-radius-lg);
    padding: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
}

.kb-connect-card h3 {
    color: var(--kb-primary);
    font-weight: 800;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 1rem;
}

[dir="rtl"] .kb-connect-card h3 {
    letter-spacing: normal;
    text-transform: none;
}

.kb-connect-icons {
    display: flex;
    justify-content: center;
    gap: .75rem;
}

.kb-connect-icons a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--kb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(var(--kb-text-dark-rgb), .1);
    transition: background .2s, color .2s;
}

.kb-connect-icons a:hover {
    background: var(--kb-primary);
    color: #fff;
}


/* §  FOOTER */

.kb-footer {
    position: relative;
    background: var(--kb-primary-deep);
    color: rgba(255, 255, 255, .75);
    /* Extra top padding reserves room for .kb-footer-features-wrap, which
       floats down over this edge on every page (not just Home anymore). */
    padding: 8.5rem 10px 0;
    overflow: hidden;
}

/* Straddles the page/footer boundary: negative margin pulls the footer up under it, z-index keeps it on top. */
.kb-footer-features-wrap {
    margin-top: 3rem;
    margin-bottom: -4rem;
    position: relative;
    z-index: 10;
}

/* White card against the dark footer background, so primary-blue icons
   instead of .kb-feature-icon's usual orange (see BUTTONS/UTILITIES). */
.kb-footer-features .kb-feature-icon {
    background: rgba(var(--kb-primary-rgb), .12);
    color: var(--kb-primary);
}

/* Thin accent stripe at the very top edge, echoing the hero's brand-gold rule */
.kb-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kb-accent), rgba(var(--kb-accent-rgb), .55), var(--kb-accent));
}

/* Decorative orange ring pattern — same circular motif as the hero swirl,
   kept subtle and behind all content. */
.kb-footer::after {
    content: '';
    position: absolute;
    top: -140px;
    inset-inline-end: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 28px solid rgba(var(--kb-accent-rgb), .45);
    pointer-events: none;
}

.kb-footer-ring-2 {
    position: absolute;
    bottom: -90px;
    inset-inline-start: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 18px solid rgba(var(--kb-accent-rgb), .35);
    pointer-events: none;
}

.kb-footer>.container {
    position: relative;
    z-index: 1;
}

.kb-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.kb-footer-logo {
    height: 40px;
    width: auto;
    margin-bottom: 1rem;
}

.kb-footer-desc {
    font-size: .9rem;
    line-height: 1.7;
    max-width: 320px;
    margin-bottom: 1.25rem;
}

.kb-footer-social {
    display: flex;
    gap: .75rem;
}

.kb-footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s, border-color .2s, transform .2s;
}

.kb-footer-social a:hover {
    background: var(--kb-accent);
    border-color: var(--kb-accent);
    transform: translateY(-2px);
}

.kb-footer-title {
    color: #fff;
    font-size: .95rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid rgba(var(--kb-accent-rgb), .4);
    display: inline-block;
}

.kb-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.kb-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    transition: color .2s, padding-inline-start .2s;
}

.kb-footer-links a i {
    font-size: 1rem;
    flex-shrink: 0;
}

.kb-footer-links a:hover {
    color: var(--kb-accent);
    padding-inline-start: 4px;
}

/* Newsletter subscribe — one seamless pill-shaped frame holding the input + button */
.kb-footer-subscribe-desc {
    font-size: .82rem;
    color: rgba(255, 255, 255, .6);
    line-height: 1.6;
    margin-bottom: 1.1rem;
}

.kb-footer-subscribe {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: var(--kb-radius-btn);
    padding: 4px;
    margin-bottom: .75rem;
    transition: border-color .2s, background .2s;
}

.kb-footer-subscribe:focus-within {
    border-color: var(--kb-accent);
    background: rgba(255, 255, 255, .13);
}

.kb-footer-subscribe-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: .65rem .9rem;
    color: #fff;
    font-size: .85rem;
}

.kb-footer-subscribe-input:focus {
    outline: none;
}

.kb-footer-subscribe-input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.kb-footer-subscribe-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--kb-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.kb-footer-subscribe-btn:hover {
    background: var(--kb-accent-deep);
    transform: scale(1.06);
}

.kb-footer-subscribe-msg {
    font-size: .8rem;
    color: var(--kb-success-light);
    margin-bottom: 1rem;
}

.kb-footer-subscribe-msg-error {
    color: var(--kb-danger-light);
}

/* Bottom bar — rights (start) / legal links (center) / HiTech credit (end) */
.kb-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: .9rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .82rem;
}

.kb-footer-rights {
    margin: 0;
    color: rgba(255, 255, 255, .6);
}

.kb-footer-legal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.kb-footer-legal li {
    display: flex;
    align-items: center;
}

.kb-footer-legal a {
    font-size: .76rem;
    color: rgba(255, 255, 255, .6);
    padding: 0 .85rem;
}

.kb-footer-legal a:hover {
    color: var(--kb-accent);
}

.kb-footer-legal li:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .22);
}

.kb-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
}

.kb-footer-credit:hover {
    color: #fff;
}

.kb-footer-credit img {
    height: 16px;
    width: auto;
}


/* §  WHATSAPP */

.kb-whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 150;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kb-whatsapp);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(var(--kb-whatsapp-rgb), .4);
    transition: transform .2s;
}

.kb-whatsapp-float:hover {
    transform: scale(1.08);
}

/* Back-to-top — mirrors the WhatsApp float on the opposite corner, hidden
   until the page is scrolled (toggled via .show, see koub-web.js). */
.kb-scroll-top {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 24px;
    z-index: 150;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kb-accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 6px 20px rgba(var(--kb-accent-rgb), .4);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s, visibility .25s, transform .25s, background .2s;
}

.kb-scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kb-scroll-top:hover {
    background: var(--kb-accent-deep);
}


/* §  RTL OVERRIDES */

/* Arabic renders in Cairo, not the Latin-only Baloo Bhaijaan/DIN, and needs more line-height. */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: var(--kb-font-ar);
}

[dir="rtl"] body {
    line-height: 1.9;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.2;
}

/* Positive letter-spacing + uppercase are Latin tricks that break Arabic's cursive letter-joining. */
[dir="rtl"] .kb-eyebrow,
[dir="rtl"] .kb-hero-heading,
[dir="rtl"] .kb-product-cat,
[dir="rtl"] .kb-filter-group-head {
    letter-spacing: normal;
    text-transform: none;
}

/* These three set their own tighter line-height for Latin copy — loosen for Arabic too. */
[dir="rtl"] .kb-hero-desc,
[dir="rtl"] .kb-feature-desc,
[dir="rtl"] .kb-footer-desc {
    line-height: 1.9;
}

[dir="rtl"] .kb-legal-content {
    line-height: 2;
}

[dir="rtl"] .kb-hero-heading,
[dir="rtl"] .kb-hero-desc {
    text-align: right;
}

/* The generic h1-h6 RTL line-height (1.5) is too loose at the hero's large
   3.5rem size across 3 stacked lines — tighten it back down. */
[dir="rtl"] .kb-hero-heading {
    line-height: 1.25;
}

/* Arabic badge labels run longer than their English counterparts and were
   wrapping onto their own line at the same gap — give them more room to fit. */
[dir="rtl"] .kb-hero-badges {
    gap: 1.25rem;
}

/* Mirror the LTR crop bias since the text column flips to the "start" side in RTL. */
[dir="rtl"] .kb-hero.has-bg {
    background-position: left center;
}

[dir="rtl"] .kb-brand-section.has-bg {
    background-position: left center;
}

[dir="rtl"] .kb-page-header.has-bg {
    background-position: left center;
}

[dir="rtl"] .kb-nav-drawer {
    inset-inline-start: -320px;
    inset-inline-end: auto;
}

[dir="rtl"] .kb-nav-drawer.show {
    inset-inline-start: 0;
}

[dir="rtl"] .kb-filter-drawer {
    inset-inline-start: -340px;
    inset-inline-end: auto;
}

[dir="rtl"] .kb-filter-drawer.show {
    inset-inline-start: 0;
}

/* Forward-pointing arrow icons flip in RTL, scoped to the component classes not one-off containers. */
[dir="rtl"] .kb-btn svg,
[dir="rtl"] .kb-product-link svg,
[dir="rtl"] .kb-footer-subscribe-btn svg,
[dir="rtl"] .kb-pagination-arrow svg {
    transform: scaleX(-1);
}

/* Drawer chevrons mirror too; hover/active nudge is re-applied on top so it still moves toward "start". */
[dir="rtl"] .kb-nav-drawer .kb-nav-links li a i {
    transform: scaleX(-1);
}

[dir="rtl"] .kb-nav-drawer .kb-nav-links li.active a i,
[dir="rtl"] .kb-nav-drawer .kb-nav-links li a:hover i {
    transform: translateX(-3px) scaleX(-1);
}

[dir="rtl"] .kb-product-card:hover .kb-product-link svg,
[dir="rtl"] .kb-products-list-item:hover .kb-product-link svg {
    transform: translateX(-3px) scaleX(-1);
}


/* §  RESPONSIVE */

@media (max-width: 991.98px) {

    /* Scoped to .kb-nav-inner's own <ul> — the drawer has an identically-classed one that must stay visible. */
    .kb-nav-inner>.kb-nav-links {
        display: none;
    }

    /* Language switcher + Order Now move into the drawer (see kb-drawer-foot). */
    .kb-nav-actions>.kb-lang-switch,
    .kb-nav-actions>.kb-btn {
        display: none;
    }

    .kb-toggler {
        display: flex;
    }

    .kb-hero-heading {
        font-size: 2.7rem;
    }

    .kb-feature-strip {
        padding: 2.25rem 1.5rem;
    }

    .kb-feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    /* Split sections stack below lg — center the text column now it's not beside the visual.
       Scoped to .kb-split-intro specifically — the bare class names used to leak into every
       other .kb-split-intro-bar on the site (custom-design/contact page headings), centering
       their underline bar under a heading that itself stayed start-aligned at this width. */
    .kb-split-intro {
        text-align: center;
    }

    .kb-split-intro .kb-split-intro-bar,
    .kb-split-intro .kb-split-intro-desc {
        margin-left: auto;
        margin-right: auto;
    }

    /* Footer — 6 / 6 / 6 / 6: even 2x2 grid. */
    .kb-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* Inline filter sidebar gives way to the "Filters" button + off-canvas drawer below lg. */
    .kb-filter-sidebar-col {
        display: none;
    }

    .kb-filter-toggle-btn {
        display: inline-flex;
    }
}

@media (max-width: 767.98px) {

    /* Sticky (not fixed) on phones — stays in normal document flow so it
       pushes the first section down on its own, instead of floating over it
       like the desktop's fixed bar (which relies on each section's own
       top-padding for clearance, not needed here). Always solid too — not
       transparent-over-hero like desktop, since a floating transparent
       state doesn't read well at this size. Logo is absolute-centered so
       hamburger/quick-link land at the flex ends. */
    .kb-nav {
        position: sticky;
        top: 0;
        padding: .65rem 0;
        background: #fff;
        box-shadow: 0 2px 14px rgba(var(--kb-text-dark-rgb), .08);
    }

    .kb-nav-inner {
        position: relative;
    }

    .kb-nav-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .kb-nav-quick-link {
        display: flex;
    }

    .kb-bar {
        background: var(--kb-primary);
    }

    .kb-nav-logo-desktop {
        display: none;
    }

    .kb-nav-logo-mobile {
        display: block;
    }

    /* Tab bar clearance so it never covers the two corner buttons. */
    .kb-tabbar {
        display: flex;
    }

    .kb-whatsapp-float,
    .kb-scroll-top {
        bottom: calc(var(--kb-tabbar-h) + 28px);
    }

    /* Filters / sort / view-toggle stay on one line instead of wrapping —
       shrink the pills and let the sort text clip instead of forcing a
       second row. */
    .kb-products-toolbar {
        flex-wrap: nowrap;
        padding: .6rem;
        gap: .5rem;
    }

    .kb-filter-toggle-btn {
        flex-shrink: 0;
        padding: .6rem;
    }

    .kb-filter-toggle-label {
        display: none;
    }

    .kb-products-toolbar-start {
        flex: 1 1 auto;
        min-width: 0;
        gap: .5rem;
    }

    .kb-sort-select {
        flex: 1 1 auto;
        min-width: 0;
        padding-block: .55rem;
        padding-inline-end: 1.8rem;
        padding-inline-start: .8rem;
        font-size: .8rem;
    }

    .kb-view-toggle {
        flex-shrink: 0;
    }

    /* Smaller type on the product cards — the 2-per-row grid on mobile
       leaves less room per card than desktop's 3-up layout. */
    .kb-product-body {
        padding: .85rem .65rem;
    }

    .kb-product-cat {
        font-size: .52rem;
        padding: .15rem .45rem;
        margin-bottom: .4rem;
    }

    .kb-product-title {
        font-size: .92rem;
    }

    .kb-product-footer {
        padding: .7rem .65rem;
    }

    .kb-product-link {
        font-size: .65rem;
        padding: .35rem .8rem;
    }

    /* Inset rounded "banner" card instead of full-bleed/full-viewport — shorter, badges dropped, kept start-aligned. */
    .kb-hero {
        margin: 1rem 1rem 1.5rem;
        border-radius: var(--kb-radius-lg);
        min-height: 0;
        padding: 2.25rem 1.5rem;
        box-shadow: 0 14px 34px rgba(var(--kb-text-dark-rgb), .18);
    }

    .kb-hero.has-bg {
        background-position: center;
    }

    [dir="rtl"] .kb-hero.has-bg {
        background-position: right center;
    }

    .kb-hero-heading {
        font-size: 1.7rem;
    }

    .kb-hero-badges {
        display: none;
    }

    /* Single primary CTA on mobile — avoids two buttons competing for a narrow row. */
    .kb-hero-actions .kb-btn-outline {
        display: none;
    }

    /* Overlap trick assumed a full-bleed hero — now it's an inset card, so give normal room instead. */
    .kb-feature-strip-wrap {
        margin-top: 1.5rem;
    }

    .kb-footer-features-wrap {
        margin-bottom: -3rem;
    }

    .kb-feature-item {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: start;
    }

    /* Same inset rounded "banner" card treatment as the mobile hero above —
       margin instead of full-bleed, shorter, shadowed, start-aligned text
       swapped to centered. */
    .kb-page-header {
        margin: 1rem 1rem 1.5rem;
        border-radius: var(--kb-radius-lg);
        min-height: 0;
        padding: 2.25rem 1.5rem;
        box-shadow: 0 14px 34px rgba(var(--kb-text-dark-rgb), .18);
        text-align: center;
    }

    .kb-page-header p {
        margin-left: auto;
        margin-right: auto;
        color: var(--kb-primary);
    }

    /* The scrim's angle assumes desktop's left-text/right-photo split — on
       mobile the text is centered over the whole photo instead, so the same
       angled gradient just washes diagonally across it. Flatten it to one
       uniform tint instead. */
    .kb-page-header.has-bg {
        background-position: center;
        --kb-page-header-scrim: linear-gradient(rgba(var(--kb-header-bg-rgb), .82), rgba(var(--kb-header-bg-rgb), .82));
    }

    /* Clears the floating tab bar so it never covers the footer's last row. */
    .kb-footer-bottom {
        justify-content: center;
        text-align: center;
        padding-bottom: 80px;
    }

    /* Products preview becomes a swipeable, snap-to-tile slider instead of wrapping. */
    .kb-products-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: .25rem .25rem 1rem;
        margin: 0 -.25rem;
        scrollbar-width: none;
    }

    .kb-products-row::-webkit-scrollbar {
        display: none;
    }

    .kb-products-row-item {
        flex: 0 0 62%;
        max-width: 62%;
        scroll-snap-align: start;
    }

    /* Footer 12/6/6/12 on phones — logo/newsletter take full rows, Quick Links + Get in Touch sit side by side. */
    .kb-footer-grid>.kb-footer-col:nth-child(1),
    .kb-footer-grid>.kb-footer-col:nth-child(4) {
        grid-column: 1 / -1;
        text-align: center;
    }

    .kb-footer-grid>.kb-footer-col:nth-child(1) .kb-footer-logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .kb-footer-grid>.kb-footer-col:nth-child(1) .kb-footer-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .kb-footer-grid>.kb-footer-col:nth-child(1) .kb-footer-social {
        justify-content: center;
    }

    .kb-footer-grid>.kb-footer-col:nth-child(4) .kb-footer-subscribe {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 479.98px) {
    .kb-hero {
        margin: .75rem .75rem 1.25rem;
        padding: 1.75rem 1.25rem;
    }

    .kb-hero-heading {
        font-size: 1.45rem;
    }

    .kb-hero-desc {
        font-size: 1rem;
    }

    .kb-page-header {
        margin: .75rem .75rem 1.25rem;
        padding: 1.75rem 1.25rem;
    }

    .kb-page-header h1 {
        font-size: 1.75rem;
    }

    .kb-footer-features-wrap {
        margin-bottom: -2rem;
    }

    .kb-products-row-item {
        flex-basis: 72%;
        max-width: 72%;
    }

    .kb-feature-strip {
        padding: 2rem 1.25rem;
    }

    .kb-feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .kb-btn {
        padding: .7rem 1.3rem;
        font-size: .88rem;
    }

    /* List-view rows are too tight for a fixed 90px image + full "View
       Details" label at this width — shrink the image and drop to an
       icon-only link so the title keeps enough room to stay legible. */
    .kb-products-list-item .kb-product-img {
        width: 60px;
    }

    .kb-products-list-item .kb-product-link-label {
        display: none;
    }
}