/* Kitchen Pros Specific Styles */
:root {
    --kp-primary: #333333;
    --kp-accent: #E31E24;
    /* Red from logo/buttons */
    --kp-secondary: #f4f4f4;
}

/* .relative {
    position: relative;
} */

.kp-form__bg.absolute {
    position: absolute;
    top: 0;
}

.kp-form.relative {
    position: relative;
}

.kp-form .container.relative {
    position: relative;
    z-index: 10;
}

.kp-announcement {
    background-color: #45556C;
    /* User Requested Color */
    color: #fff;
    padding: 10px 0;
    overflow: hidden;
}

.kp-announcement svg {
    display: inline-block;
    vertical-align: middle;
}

.kp-announcement .text-xs {
    font-size: 14px;
}

.kp-header {
    background: #fff;
    /* padding: 20px 0; */
    box-shadow: none;
    /* Removed shadow per mockup usually cleaner */
    border-bottom: 1px solid #f0f0f0;
}

.kp-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kp-header__logo img {
    height: 114px;
    width: auto;
}

@media(max-width: 991px) {
    /* Logo height handled in section liquid for better control */
}

@media(max-width: 575px) {
    /* Logo height handled in section liquid for better control */
}

.kp-header__nav ul {
    display: flex;
    gap: 40px;
}

.kp-header__nav a {
    font-weight: 400;
    color: var(--kp-primary);
    text-transform: none;
    font-size: 19px;
    letter-spacing: 0;
}

.kp-header__nav a:hover {
    color: var(--kp-accent);
}

.kp-header__actions svg {
    color: #45556C;
}

.kp-header__actions svg:hover {
    color: var(--kp-accent);
}

.kp-header__actions .kp-icon-btn {
    font-size: 16px;
    color: #45556C;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.kp-icon-btn {
    color: #333;
    transition: color 0.3s;
}

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

.kp-btn {
    background-color: var(--kp-accent);
    color: #fff;
    padding: 16px 24px;
    border-radius: 50px;
    font-weight: 400;
    transition: all .3s ease;
    display: inline-block;
    border: 2px solid var(--kp-accent);
    line-height: 1;
    font-size: 19px;
}

.kp-btn:hover {
    background-color: #fff;
    color: var(--kp-accent);
}

.kp-footer {
    padding: 80px 0 0;
}

/* HERO SECTION
   Polish pass: removed dead .kp-hero { height:700px; overflow:hidden } and
   .kp-hero-card { border-radius:50%; width/height:558px; position:absolute; ... }
   — a legacy circular-card hero design no other page references (confirmed
   via full-theme search). The current kitchen-pro-hero.liquid section reuses
   the bare `kp-hero`/`kp-hero-card` class names for its own, unrelated
   rectangular hero, so these old rules were clipping/cropping its title,
   body text and buttons inside a fixed 558px circle inside a 700px,
   overflow:hidden section. .kp-btn-hero, .kp-btn-hero-2 and
   .kp-hero-card__buttons below are still used by the current hero and kept. */

.kp-btn-hero {
    font-size: 19px;
    padding: 22px;
    width: 100%;
    display: block;
    line-height: 1;
    border-radius: 50px;
}

.kp-btn-hero-2 {
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-decoration-line: underline;
    padding-top: 8px;
}

.kp-btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.kp-btn--secondary:hover {
    background: #fff;
    color: var(--kp-accent);
}

/* FORM SECTION */
.kp-form__box {
    background: #fff;
    color: #333;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.kp-form__box .kp-btn {
    width: 100%;
    border-radius: 50px;
    /* Pill button */
    font-size: 16px;
    padding: 15px;
}

.kp-form input,
.kp-form select,
.kp-form textarea,
.form-input {
    width: 100%;
    padding: 8px 24px;
    border: 1px solid #DFDFDF;
    border-radius: 50px;
    margin-bottom: 0;
    background-color: #fff;
    color: #5E5E5E;
    font-size: 18px;
    line-height: 1.2;
    height: 60px;
    font-family: var(--font-primary);
}

.kp-form__box .kp-btn {
    font-size: 24px;
    padding: 20px;
}

.kp-form textarea {
    border-radius: 20px;
    /* Rounded rect for textarea */
}

/* Label styling */
.kp-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
    font-size: 18px;
    color: #0F172B;
}



/* UI Utilities & Missing Styles */
.kp-btn--primary {
    background-color: #fff;
    color: var(--kp-accent);
    border-color: #fff;
}

.kp-btn--primary:hover {
    background-color: #f1f1f1;
    color: var(--kp-accent);
    border-color: #f1f1f1;
}

.bg-dark {
    background-color: #2a2d35;
    /* Dark blue/grey from image */
}

.bg-black {
    background-color: #000;
}

.opacity-75 {
    opacity: 0.75;
}

.text-black {
    color: #000;
}

.kp-form__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shop by Component - Bento Grid */
.kp-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 280px);
    gap: 20px;
}

.kp-cat-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.kp-cat-card:not(:first-child) {
    grid-column: span 1;
    grid-row: span 1;
}

.kp-cat-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.zoom-effect {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.kp-cat-card:hover .zoom-effect {
    transform: scale(1.1);
}

.kp-cat-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    z-index: 2;
}

.kp-cat-card__overlay h3 {
    margin-bottom: 4px;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
}

.kp-cat-card__overlay span {
    color: #fff;
    font-size: 16px;
    text-decoration: underline;
    opacity: 0;
    height: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.kp-cat-card:hover .kp-cat-card__overlay span {
    opacity: 1;
    height: fit-content;
    transform: translateY(0);
}

/* Shop by Style - Slider */
.kp-style-slider .splide__slide {
    padding-bottom: 10px;
    /* Space for shadow/hover effect */
}

.kp-card {
    transition: transform 0.3s ease;
}


.kp-shop-style .splide__arrow {
    display: none;
}

.kp-card__image {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 13px;
    height: 400px;
}

.kp-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-padding {
    padding: var(--section-padding) 0;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--container-px);
}

.text-center {
    text-align: center;
}

.font-bold {
    font-weight: 700;
}

.text-sm {
    font-size: 18px;
}

.underline {
    text-decoration: underline;
}

.mb-6 {
    margin-bottom: 24px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-1 {
    margin-bottom: 4px;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.object-cover {
    object-fit: cover;
}

.object-center {
    object-position: center;
}

@media (max-width: 1024px) {
    .kp-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .kp-cat-card:first-child {
        grid-column: span 2;
        grid-row: span 1;
        height: 350px;
    }

    .kp-cat-card:not(:first-child) {
        height: 250px;
    }
}

@media (max-width: 640px) {
    .kp-cat-card:first-child {
        height: 280px;
    }

    .kp-cat-card:not(:first-child) {
        height: 200px;
        grid-column: span 2;
        /* Full width on tiny screens? User said 1 for style slider, grid might naturally be 1 col */
    }

    .kp-bento-grid {
        grid-template-columns: 1fr;
    }

    .kp-cat-card:not(:first-child) {
        grid-column: span 1;
    }
}

/* Tailwind-like Utilities (Requested by User) */
.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.inset-y-0 {
    top: 0;
    bottom: 0;
}

.right-0 {
    right: 0;
}

.z-10 {
    z-index: 10;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

.block {
    display: block;
}

.grid {
    display: grid;
}

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

.gap-4 {
    gap: 1rem;
}

.gap-10 {
    gap: 2.5rem;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-4 {
    margin-top: 1rem;
}

.p-8 {
    padding: 2rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #000;
}

.text-gray-500 {
    color: #6b7280;
}

.text-green-600 {
    color: #059669;
}

.font-bold {
    font-weight: 700;
}

.text-sm {
    font-size: 16px;
}

.pointer-events-none {
    pointer-events: none;
}

.appearance-none {
    -webkit-appearance: none;
    appearance: none;
}

.object-cover {
    object-fit: cover;
}

.rounded {
    border-radius: 12px;
}

.align-center {
    align-items: center;
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.gap-2 {
    gap: 0.5rem;
}

.gap-6 {
    gap: 1.5rem;
}

.text-xs {
    font-size: 0.75rem;
}

.border-l {
    border-left-width: 1px;
}

.border-gray-500 {
    border-color: rgba(107, 114, 128, 0.5);
}

.pl-6 {
    padding-left: 1.5rem;
}

.inline-block {
    display: inline-block;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.text-green-500 {
    color: #10B981;
}

.bg-red-600 {
    background-color: #DC2626;
}

.rounded-full {
    border-radius: 9999px;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.leading-none {
    line-height: 1;
}

.text-2xl {
    font-size: 1.5rem;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.-top-1 {
    top: -0.25rem;
}

.-right-1 {
    right: -0.25rem;
}

.text-\[10px\] {
    font-size: 10px;
}

/* Footer Utilities */
.text-lg {
    font-size: 1.125rem;
}

.gap-3 {
    gap: 0.75rem;
}

/* Footer Specific */
.kp-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    gap: 40px;
}

.kp-contact-icon {
    width: 18px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.kp-contact-icon svg,
.kp-contact-icon img {
    width: 100%;
    height: auto;
}

.kp-footer__company-info p {
    margin-bottom: 4px;
}

.kp-footer__logo-img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media(max-width: 1024px) {
    .kp-footer__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .kp-footer__brand {
        grid-column: span 3;
        margin-bottom: 2rem;
    }

    .kp-footer__contact {
        grid-column: span 3;
        margin-top: 2rem;
    }
}

@media(max-width: 640px) {
    .kp-footer__grid {
        grid-template-columns: 1fr;
    }

    .kp-footer__brand,
    .kp-footer__contact {
        grid-column: span 1;
        margin-bottom: 1.5rem;
        margin-top: 0;
    }

    .kp-footer__col {
        margin-bottom: 2rem;
    }

    .kp-footer__grid {
        gap: 20px;
    }
}

/* =============================================
   KP SECTION RESPONSIVE OVERRIDES
   ============================================= */

/* Prevent Splide sliders from causing horizontal overflow before init */
.kp-hero .splide,
.kp-about-features .splide,
.kp-about-real-homes .splide,
.kp-reviews .splide,
.kp-shop-style .splide,
.kp-usp-slider .splide,
.kp-announcement-mobile .splide {
    overflow: hidden;
}

/* --- Tablet: 991px --- */
@media (max-width: 991px) {
    /* Hero — dead circular-card overrides removed (see note above);
       .kp-hero-card__buttons is still used by the current hero. */
    .kp-hero-card__buttons { width: 90%; }

    /* About Banner */
    .kp-about-banner__grid { gap: 24px; }

    /* About Hero */
    .kp-about-hero__grid { gap: 32px; }

    /* About Features */
    .kp-about-features { margin-top: -60px; }

    /* About Journey */
    .kp-about-journey__grid { gap: 32px; }

    /* About Steps */
    .kp-about-steps__grid { gap: 16px; }

    /* Features */
    .kp-feature-item { padding: 28px 18px; }

    /* Form */
    .kp-form__box { padding: 28px 20px; }

    /* Guide */
    .kp-guide__grid { gap: 32px; }

    /* Image Text */
    .kp-image-text__grid { gap: 32px; }

    /* Product CTA */
    .kp-product-cta__inner { gap: 32px; }

    /* Reviews */
    .kp-review-card { padding: 24px 16px; }

    /* Steps */
    .kp-steps__grid { gap: 16px; }
    .kp-step-card { padding: 24px 16px; }

    /* Why Choose */
    .kp-why-choose__grid { gap: 16px; }

    /* Collection */
    .kp-product-card { gap: 12px; }

    /* Footer */
    .kp-footer { padding: 40px 0 0; }

    /* Cart */
    .kp-cart__grid { gap: 24px; }

    /* Shop Component / Bento */
    .kp-bento-grid { gap: 12px; }

    /* Card image heights */
    .kp-card__image { height: 300px; }

    /* FAQ */
    .kp-faq__summary { padding: 18px 14px; }
    .kp-faq__body { padding: 0 14px 18px; }
}

/* --- Mobile: 575px --- */
@media (max-width: 575px) {
    /* Hero (desktop) uses desktop-only so already hidden */
    /* Hero (mobile) */
    .kp-hero-mobile__content { padding: var(--section-padding) 15px; }
    .kp-hero-mobile__title { margin-bottom: 12px; }
    .kp-hero-mobile__text { margin-bottom: 16px; }

    /* About Banner */
    .kp-about-banner { padding: var(--section-padding) 0; }

    /* About Features */
    .kp-about-features { margin-top: -20px; }
    .kp-feature-item { padding: 24px 16px; }
    .kp-feature-item__title { font-size: var(--fs-20); margin-bottom: 8px; }
    .kp-feature-icon { margin-bottom: 16px; }
    .kp-feature-icon__img { width: 36px; height: 36px; }

    /* About Hero */
    .kp-about-hero__stats-card { padding: 20px; }

    /* About Journey */
    .kp-about-journey__grid { gap: 20px; }

    /* About Scenes */
    .kp-about-scenes__grid { gap: 12px; }

    /* About Steps */
    .kp-about-steps__grid { gap: 12px; }
    .kp-about-step-card { padding: 20px 14px; }

    /* Breadcrumb */
    .kp-breadcrumb { padding-top: 8px; padding-bottom: 16px; }

    /* Collection Promo */
    .kp-collection-promo__content { padding: var(--section-padding) 15px; }

    /* FAQ */
    .kp-faq { padding: var(--section-padding) 0; }
    .kp-faq__summary { padding: 16px 12px; }
    .kp-faq__body { padding: 0 12px 16px; }

    /* Features */
    .kp-feature-item { padding: 24px 14px; }

    /* Form */
    .kp-form__box { padding: 20px 16px; }
    .kp-form input,
    .kp-form select,
    .kp-form textarea { padding: 6px 16px; height: 50px; font-size: 16px; }
    .kp-form__box .kp-btn { font-size: 18px; padding: 16px; }
    .kp-form label { font-size: 16px; }

    /* Guide */
    .kp-guide__card { padding: 24px 16px; }

    /* Image Text */
    .kp-image-text__grid { gap: 20px; }

    /* Product CTA */
    .kp-product-cta__inner { gap: 20px; padding: 24px 16px; }

    /* Product Gallery */
    .kp-product-gallery__grid { gap: 8px; }

    /* Product Main */
    .kp-product-main__grid { gap: 24px; }
    .kp-product-info { padding: 0; }

    /* Product Related */
    .kp-related__grid { gap: 12px; }

    /* Reviews */
    .kp-review-card { padding: 20px 14px; }
    .kp-reviews__grid { gap: 12px; }

    /* Shop Component / Bento */
    .kp-bento-grid { gap: 8px; }
    .kp-cat-card__overlay { padding: 16px; }
    .kp-cat-card__overlay h3 { font-size: 18px; }

    /* Shop Style (slider) */
    .kp-card__image { height: 250px; }

    /* Steps */
    .kp-step-card { padding: 20px 14px; }

    /* USP Slider */
    .kp-usp-slider { padding: 10px 0; }

    /* Why Choose */
    .kp-why-choose__item { padding: 20px 14px; }

    /* Footer */
    .kp-footer { padding: 30px 0 0; }
    .kp-footer__grid { gap: 16px; }

    /* Cart */
    .kp-cart__grid { gap: 16px; }

    /* Announcement */
    .kp-announcement { padding: 6px 0; }
}

/* Removed duplicate mobile menu drawer CSS to rely on global theme.css implementation */

.mobile-menu-list a {
    color: var(--kp-primary, #333);
}