/* KB Seller Page Builder - front render styles.
   Everything is scoped under .kbspb-page so it cannot leak into the theme,
   while theme typography/buttons still cascade in for a native look. */

.kbspb-page {
    --kbspb-primary: #253237;
    --kbspb-accent: #80b435;
    --kbspb-bg: #ffffff;
    --kbspb-bg-soft: #f7f8f9;
    --kbspb-border: #e6e6e6;
    --kbspb-text: #2b2f33;
    --kbspb-muted: #6b7378;
    --kbspb-radius: 8px;
    --kbspb-radius-sm: 4px;
    --kbspb-space: 1rem;
    --kbspb-space-mult: 1;
    --kbspb-sec-pad-s: calc(var(--kbspb-space) * 2 * var(--kbspb-space-mult));
    --kbspb-sec-pad-m: calc(var(--kbspb-space) * 3 * var(--kbspb-space-mult));
    --kbspb-sec-pad-l: calc(var(--kbspb-space) * 4.5 * var(--kbspb-space-mult));
    --kbspb-sec-pad-xl: calc(var(--kbspb-space) * 6 * var(--kbspb-space-mult));
    background: var(--kbspb-bg);
    color: var(--kbspb-text);
    overflow-x: hidden;
}

.kbspb-page * { box-sizing: border-box; }
.kbspb-width-boxed > .kbspb-section > .kbspb-sec__inner { max-width: 1200px; }

/* ---- Sections ---- */
.kbspb-section {
    position: relative;
    background-size: cover;
    background-position: center;
}
.kbspb-sec__inner { position: relative; z-index: 2; margin: 0 auto; }
.kbspb-sec--pad-s .kbspb-sec__inner { padding-top: var(--kbspb-sec-pad-s); padding-bottom: var(--kbspb-sec-pad-s); }
.kbspb-sec--pad-m .kbspb-sec__inner { padding-top: var(--kbspb-sec-pad-m); padding-bottom: var(--kbspb-sec-pad-m); }
.kbspb-sec--pad-l .kbspb-sec__inner { padding-top: var(--kbspb-sec-pad-l); padding-bottom: var(--kbspb-sec-pad-l); }
.kbspb-sec--pad-xl .kbspb-sec__inner { padding-top: var(--kbspb-sec-pad-xl); padding-bottom: var(--kbspb-sec-pad-xl); }
.kbspb-container--narrow { max-width: 820px; }

/* section backgrounds via CSS vars set inline (validated hex / server path) */
.kbspb-sec__bg { position: absolute; inset: 0; z-index: 1; }
.kbspb-sec--bg-color .kbspb-sec__bg { background: var(--kbspb-sec-bg, transparent); }
.kbspb-sec--bg-image .kbspb-sec__bg { background-image: var(--kbspb-sec-img); background-size: cover; background-position: center; }
.kbspb-sec--bg-image .kbspb-sec__bg::after { content: ""; position: absolute; inset: 0; background: #253237; opacity: var(--kbspb-sec-overlay, 0); }
.kbspb-sec--bg-gradient .kbspb-sec__bg { background: linear-gradient(135deg, var(--kbspb-accent), var(--kbspb-primary)); }
.kbspb-grad--dark-slate .kbspb-sec__bg { background: linear-gradient(135deg, #3a4a54, #1c262b); }
.kbspb-grad--sage .kbspb-sec__bg { background: linear-gradient(135deg, #a7c957, #6a994e); }
.kbspb-grad--sunrise .kbspb-sec__bg { background: linear-gradient(135deg, #ffb347, #ffcc80); }
.kbspb-grad--mist .kbspb-sec__bg { background: linear-gradient(135deg, #e7eef2, #f7f8f9); }
.kbspb-sec--light-text, .kbspb-sec--light-text .kbspb-heading__title, .kbspb-sec--light-text .kbspb-heading__sub { color: #fff; }
.kbspb-sec--dark-text { color: var(--kbspb-primary); }

/* ---- Columns / rows ---- */
.kbspb-row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.kbspb-col { padding: 0 12px; margin-bottom: 12px; }
.kbspb-col__inner { height: 100%; }
.kbspb-valign-middle .kbspb-col__inner { display: flex; flex-direction: column; justify-content: center; }
.kbspb-valign-bottom .kbspb-col__inner { display: flex; flex-direction: column; justify-content: flex-end; }

/* ---- Widget spacing / alignment ---- */
.kbspb-widget { margin-bottom: 1rem; }
.kbspb-widget:last-child { margin-bottom: 0; }
.kbspb-align-left { text-align: left; }
.kbspb-align-center { text-align: center; }
.kbspb-align-right { text-align: right; }
.kbspb-mt-s { margin-top: .5rem; } .kbspb-mt-m { margin-top: 1rem; } .kbspb-mt-l { margin-top: 2rem; }
.kbspb-mb-s { margin-bottom: .5rem; } .kbspb-mb-m { margin-bottom: 1rem; } .kbspb-mb-l { margin-bottom: 2rem; }

/* ---- Heading ---- */
.kbspb-heading__title { margin: 0 0 .25rem; color: inherit; line-height: 1.2; }
.kbspb-heading--s .kbspb-heading__title { font-size: 1.25rem; }
.kbspb-heading--m .kbspb-heading__title { font-size: 1.75rem; }
.kbspb-heading--l .kbspb-heading__title { font-size: 2.25rem; }
.kbspb-heading--xl .kbspb-heading__title { font-size: clamp(2rem, 4vw, 3.25rem); }
.kbspb-heading__sub { color: var(--kbspb-muted); font-size: 1.05rem; }
.kbspb-heading__rule { display: inline-block; width: 56px; height: 3px; margin-top: .75rem; border-radius: 2px; background: var(--kbspb-w-accent, var(--kbspb-accent)); }
.kbspb-align-center .kbspb-heading__rule { margin-left: auto; margin-right: auto; }

/* ---- Rich text ---- */
.kbspb-richtext { line-height: 1.7; }
.kbspb-richtext--cols2 { column-count: 2; column-gap: 2rem; }
@media (max-width: 767px) { .kbspb-richtext--cols2 { column-count: 1; } }

/* ---- Image ---- */
.kbspb-image { margin: 0; }
.kbspb-image img { max-width: 100%; height: auto; display: block; }
.kbspb-image--1-1 img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.kbspb-image--4-3 img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.kbspb-image--16-9 img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.kbspb-image--r-soft img { border-radius: var(--kbspb-radius); }
.kbspb-image--r-round img { border-radius: 999px; }
.kbspb-image__caption { color: var(--kbspb-muted); font-size: .9rem; margin-top: .5rem; }
.kbspb-align-center .kbspb-image img { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.kbspb-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.kbspb-align-center .kbspb-buttons { justify-content: center; }
.kbspb-align-right .kbspb-buttons { justify-content: flex-end; }
.kbspb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .65rem 1.4rem; border-radius: var(--kbspb-radius-sm);
    font-weight: 600; text-decoration: none; cursor: pointer;
    border: 2px solid transparent; transition: opacity .15s ease, background .15s ease;
    color: #fff;
}
.kbspb-btn--l { padding: .85rem 1.8rem; font-size: 1.05rem; }
.kbspb-btn--primary { background: var(--kbspb-w-accent, var(--kbspb-accent)); border-color: var(--kbspb-w-accent, var(--kbspb-accent)); color: #fff; }
.kbspb-btn--primary:hover { opacity: .9; color: #fff; }
.kbspb-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.kbspb-btn--light { background: #fff; border-color: #fff; color: var(--kbspb-primary); }
.kbspb-btn--link { background: transparent; border-color: transparent; color: var(--kbspb-w-accent, var(--kbspb-accent)); padding-left: 0; padding-right: 0; }

/* ---- Divider / spacer ---- */
.kbspb-divider--line { border: 0; border-top: 1px solid var(--kbspb-border); margin: 0; }
.kbspb-divider--w-short { width: 80px; }
.kbspb-divider--w-icon { width: 40px; }
.kbspb-align-center .kbspb-divider--line { margin-left: auto; margin-right: auto; }
.kbspb-divider--dots { display: flex; gap: 8px; justify-content: center; }
.kbspb-divider--dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--kbspb-border); }
.kbspb-spacer--s { height: 1rem; } .kbspb-spacer--m { height: 2rem; }
.kbspb-spacer--l { height: 3.5rem; } .kbspb-spacer--xl { height: 5rem; }

/* ---- Hero ---- */
.kbspb-hero { position: relative; display: flex; align-items: center; background-size: cover; background-position: center; border-radius: var(--kbspb-radius); overflow: hidden; }
.kbspb-hero--h-s { min-height: 280px; }
.kbspb-hero--h-m { min-height: 420px; }
.kbspb-hero--h-l { min-height: 560px; }
.kbspb-hero--no-image { background: linear-gradient(135deg, var(--kbspb-accent), var(--kbspb-primary)); }
.kbspb-hero--no-image .kbspb-hero__overlay { display: none; }
.kbspb-hero__overlay { position: absolute; inset: 0; background: #253237; }
.kbspb-hero__overlay--0 { opacity: 0; } .kbspb-hero__overlay--20 { opacity: .2; }
.kbspb-hero__overlay--40 { opacity: .4; } .kbspb-hero__overlay--60 { opacity: .6; }
.kbspb-hero__content { position: relative; z-index: 2; padding: 2.5rem; width: 100%; }
.kbspb-hero--light .kbspb-hero__content { color: #fff; }
.kbspb-hero--dark .kbspb-hero__content { color: var(--kbspb-primary); }
.kbspb-hero.kbspb-align-center .kbspb-hero__content { text-align: center; }
.kbspb-hero.kbspb-align-right .kbspb-hero__content { text-align: right; }
.kbspb-hero__badge { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: var(--kbspb-accent); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.kbspb-hero__heading { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 1rem; color: inherit; }
.kbspb-hero__sub { font-size: 1.15rem; max-width: 640px; margin: 0 0 1.5rem; opacity: .95; }
.kbspb-hero.kbspb-align-center .kbspb-hero__sub { margin-left: auto; margin-right: auto; }
.kbspb-hero__buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
.kbspb-hero.kbspb-align-center .kbspb-hero__buttons { justify-content: center; }

/* ---- Editor-only affordances (public pages never load these states) ---- */
.kbspb-placeholder { padding: 2rem; text-align: center; color: var(--kbspb-muted); background: var(--kbspb-bg-soft); border: 1px dashed var(--kbspb-border); border-radius: var(--kbspb-radius); }
.kbspb-empty-page { padding: 4rem 2rem; text-align: center; color: var(--kbspb-muted); }
.kbspb-col__empty { min-height: 60px; display: flex; align-items: center; justify-content: center; color: var(--kbspb-muted); font-size: .85rem; border: 1px dashed var(--kbspb-border); border-radius: var(--kbspb-radius-sm); }

@media (max-width: 767px) {
    .kbspb-hero__content { padding: 1.5rem; }
}

/* ===== M8 widgets ===== */
/* Gallery */
.kbspb-gallery { display: grid; gap: 12px; }
.kbspb-gallery--gap-s { gap: 6px; }
.kbspb-gallery--c2 { grid-template-columns: repeat(2, 1fr); }
.kbspb-gallery--c3 { grid-template-columns: repeat(3, 1fr); }
.kbspb-gallery--c4 { grid-template-columns: repeat(4, 1fr); }
.kbspb-gallery__item { display: block; overflow: hidden; border-radius: var(--kbspb-radius); }
.kbspb-gallery__item img { width: 100%; display: block; transition: transform .3s ease; }
.kbspb-gallery__item:hover img { transform: scale(1.05); }
.kbspb-gallery__item--1-1 img { aspect-ratio: 1/1; object-fit: cover; }
.kbspb-gallery__item--4-3 img { aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 767px) { .kbspb-gallery { grid-template-columns: repeat(2, 1fr) !important; } }
.kbspb-lightbox { border: 0; background: transparent; max-width: 92vw; max-height: 92vh; padding: 0; }
.kbspb-lightbox::backdrop { background: rgba(0,0,0,.85); }
.kbspb-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; }

/* Video */
.kbspb-video { position: relative; border-radius: var(--kbspb-radius); overflow: hidden; background: #000; cursor: pointer; }
.kbspb-video--16-9 { aspect-ratio: 16/9; } .kbspb-video--4-3 { aspect-ratio: 4/3; } .kbspb-video--9-16 { aspect-ratio: 9/16; max-width: 360px; margin: 0 auto; }
.kbspb-video__frame { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
.kbspb-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--kbspb-accent); color: #fff; font-size: 22px; cursor: pointer; }

/* Icon boxes */
.kbspb-iconboxes { display: grid; gap: 16px; }
.kbspb-iconboxes--grid-2 { grid-template-columns: repeat(2, 1fr); }
.kbspb-iconboxes--grid-3 { grid-template-columns: repeat(3, 1fr); }
.kbspb-iconboxes--grid-4 { grid-template-columns: repeat(4, 1fr); }
.kbspb-iconboxes--list { grid-template-columns: 1fr; }
@media (max-width: 767px) { .kbspb-iconboxes { grid-template-columns: 1fr !important; } }
.kbspb-iconbox { padding: 20px; border-radius: var(--kbspb-radius); }
.kbspb-iconboxes--card .kbspb-iconbox { border: 1px solid var(--kbspb-border); }
.kbspb-iconboxes--soft .kbspb-iconbox { background: var(--kbspb-bg-soft); }
.kbspb-iconbox__icon { display: inline-block; width: 44px; height: 44px; border-radius: 50%; background: var(--kbspb-w-accent, var(--kbspb-accent)); margin-bottom: 12px; }
.kbspb-iconbox__title { margin: 0 0 6px; font-size: 1.1rem; }
.kbspb-iconbox__text { color: var(--kbspb-muted); margin: 0; }

/* FAQ */
.kbspb-faq__item { border-bottom: 1px solid var(--kbspb-border); }
.kbspb-faq__q { padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 24px; }
.kbspb-faq__q::after { content: "+"; position: absolute; right: 0; color: var(--kbspb-accent); font-size: 20px; }
.kbspb-faq__item[open] .kbspb-faq__q::after { content: "−"; }
.kbspb-faq__a { padding: 0 0 14px; color: var(--kbspb-muted); line-height: 1.7; }

/* CTA banner */
.kbspb-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: var(--kbspb-radius); flex-wrap: wrap; }
.kbspb-cta--accent { background: var(--kbspb-accent); color: #fff; }
.kbspb-cta--dark { background: var(--kbspb-primary); color: #fff; }
.kbspb-cta--soft { background: var(--kbspb-bg-soft); }
.kbspb-cta--outline { border: 2px solid var(--kbspb-border); }
.kbspb-cta__heading { margin: 0 0 6px; }
.kbspb-cta__text { margin: 0; opacity: .95; }
.kbspb-cta__contact { list-style: none; padding: 0; margin: 10px 0 0; }
.kbspb-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Announcement */
.kbspb-announce { padding: 12px 20px; border-radius: var(--kbspb-radius-sm); text-align: center; font-weight: 600; }
.kbspb-announce--accent { background: var(--kbspb-accent); color: #fff; }
.kbspb-announce--dark { background: var(--kbspb-primary); color: #fff; }
.kbspb-announce--warning { background: #ffb347; color: #3a2c00; }
.kbspb-announce__link { color: inherit; text-decoration: none; }
.kbspb-announce__count { margin-left: 10px; opacity: .9; }

/* Seller card */
.kbspb-sellercard { display: flex; gap: 20px; padding: 20px; background: var(--kbspb-bg-soft); border-radius: var(--kbspb-radius); }
.kbspb-sellercard--vertical { flex-direction: column; text-align: center; align-items: center; }
.kbspb-sellercard--compact { padding: 12px; gap: 12px; }
.kbspb-sellercard__logo img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.kbspb-sellercard__name { margin: 0 0 4px; }
.kbspb-sellercard__rating { color: #f0a800; font-weight: 600; }
.kbspb-sellercard__loc { color: var(--kbspb-muted); font-size: .9rem; }
.kbspb-sellercard__desc { margin-top: 8px; color: var(--kbspb-muted); }
.kbspb-sellercard__social { margin-top: 10px; display: flex; gap: 12px; }
.kbspb-sellercard__social a { color: var(--kbspb-accent); text-decoration: none; font-size: .9rem; }

/* Products grid/carousel */
.kbspb-products__heading, .kbspb-reviews__heading, .kbspb-feed__heading, .kbspb-hoursmap__heading, .kbspb-details__heading { margin: 0 0 16px; }
.kbspb-products__grid { display: grid; gap: 16px; }
.kbspb-products__grid--c2 { grid-template-columns: repeat(2, 1fr); }
.kbspb-products__grid--c3 { grid-template-columns: repeat(3, 1fr); }
.kbspb-products__grid--c4 { grid-template-columns: repeat(4, 1fr); }
.kbspb-products__grid--c5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 991px) { .kbspb-products__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 575px) { .kbspb-products__grid { grid-template-columns: 1fr !important; } }
.kbspb-carousel { position: relative; }
.kbspb-carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
.kbspb-carousel__slide { scroll-snap-align: start; flex: 0 0 calc(25% - 12px); min-width: 200px; }
.kbspb-reviews--slider .kbspb-reviews__list { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.kbspb-carousel__nav { position: absolute; top: -44px; right: 0; display: flex; gap: 6px; }
.kbspb-carousel__btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--kbspb-border); background: #fff; cursor: pointer; font-size: 18px; }

/* Reviews */
.kbspb-reviews__summary { font-size: 1.2rem; color: #f0a800; font-weight: 600; margin-bottom: 16px; }
.kbspb-reviews__summary span { color: var(--kbspb-muted); font-size: .9rem; }
.kbspb-reviews--cards .kbspb-reviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) { .kbspb-reviews--cards .kbspb-reviews__list { grid-template-columns: 1fr; } }
.kbspb-review { padding: 18px; background: var(--kbspb-bg-soft); border-radius: var(--kbspb-radius); }
.kbspb-reviews--slider .kbspb-review { flex: 0 0 calc(33% - 12px); min-width: 240px; scroll-snap-align: start; }
.kbspb-review__stars { color: #f0a800; }
.kbspb-review__text { margin: 8px 0; }
.kbspb-review__author { font-weight: 600; font-size: .9rem; }

/* Feed */
.kbspb-feed__item { padding: 14px 0; border-bottom: 1px solid var(--kbspb-border); }
.kbspb-feed__title { margin: 0 0 4px; }
.kbspb-feed__date { color: var(--kbspb-muted); font-size: .8rem; }

/* Hours & map */
.kbspb-hoursmap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kbspb-hoursmap--stacked .kbspb-hoursmap__grid { grid-template-columns: 1fr; }
@media (max-width: 767px) { .kbspb-hoursmap__grid { grid-template-columns: 1fr; } }
.kbspb-hoursmap__hours { list-style: none; padding: 0; margin: 0; }
.kbspb-hoursmap__hours li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--kbspb-border); }
.kbspb-hoursmap__map iframe { width: 100%; border: 0; border-radius: var(--kbspb-radius); }
.kbspb-hoursmap__map--s iframe { height: 200px; } .kbspb-hoursmap__map--m iframe { height: 300px; } .kbspb-hoursmap__map--l iframe { height: 420px; }

/* Details */
.kbspb-details__list { margin: 0; }
.kbspb-details__row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--kbspb-border); }
.kbspb-details__row dt { font-weight: 600; min-width: 140px; margin: 0; }
.kbspb-details__row dd { margin: 0; color: var(--kbspb-muted); }

/* Custom HTML */
.kbspb-html { overflow-x: auto; }

/* Editor: clickable image placeholder */
.kbspb-placeholder--pick { cursor: pointer; transition: border-color .15s, background .15s; }
.kbspb-placeholder--pick:hover { border-color: var(--kbspb-accent); background: #eef4e4; color: var(--kbspb-primary); }