/* §  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: #6b7a8d;
    --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;
}

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 */

.kb-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.75rem 0;
}

.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;
}

.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;
}

/* 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);
}

.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;
}

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

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

.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 — numbered process-step cards */
.kb-step-card {
    position: relative;
    background: var(--kb-bg-soft);
    border-radius: var(--kb-radius-lg);
    padding: 1.75rem;
    height: 100%;
    text-align: center;
}

.kb-step-number {
    position: absolute;
    top: -14px;
    inset-inline-start: 1.5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kb-accent);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-step-icon {
    width: 52px;
    height: 52px;
    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.5rem;
    margin: .5rem auto 1.1rem;
}

.kb-step-card h3 {
    font-size: 1.02rem;
    color: var(--kb-text-dark);
    margin-bottom: .5rem;
}

.kb-step-card p {
    font-size: .85rem;
    color: var(--kb-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* "Coming Soon" badge/icon — still used standalone inside
   .kb-design-preview-hero (see design-preview.blade.php). */
.kb-coming-soon-badge {
    display: inline-block;
    background: var(--kb-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .35rem .9rem;
    border-radius: 99px;
    margin-bottom: 1.25rem;
}

[dir="rtl"] .kb-coming-soon-badge {
    letter-spacing: normal;
    text-transform: none;
}

.kb-coming-soon-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.75rem;
}

/* This page has no breadcrumb/page-header above it, so — same as those —
   it needs its own clearance under the nav, which is position:absolute
   (floats over content) on tablet/desktop. Phones are fine as-is since the
   nav is sticky there and already pushes content down on its own. */
.kb-design-preview-section {
    padding-top: 2rem;
}

@media (min-width: 768px) {
    .kb-design-preview-section {
        padding-top: 9.5rem;
    }
}

/* Design Preview page — same visual language as .kb-coming-soon, scaled up
   as the whole page's centerpiece rather than a small inline card. */
.kb-design-preview-hero {
    text-align: center;
    background: linear-gradient(150deg, var(--kb-primary) 0%, var(--kb-primary-deep) 100%);
    border-radius: var(--kb-radius-lg);
    padding: 3.5rem 2rem;
    margin-bottom: 2.5rem;
}
.kb-design-preview-hero h1 {
    color: #fff;
    font-size: 1.9rem;
    margin-bottom: .9rem;
}

.kb-design-preview-hero p {
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .kb-design-preview-hero {
        padding: 2.5rem 1.5rem;
    }

    .kb-design-preview-hero h1 {
        font-size: 1.5rem;
    }
}


/* §  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 + solid, not absolute/transparent-over-hero. Logo is absolute-centered so hamburger/quick-link land at the flex ends. */
    .kb-nav {
        position: sticky;
        top: 0;
        background: #fff;
        box-shadow: 0 2px 14px rgba(var(--kb-text-dark-rgb), .08);
        padding: .65rem 0;
    }

    .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;
    }
}