/*
 * Hand-written CSS for every content type, deliberately NOT Tailwind
 * utility classes. Hyvä's Tailwind build only keeps classes it finds by
 * scanning known template paths (see child theme's tailwind.config.js
 * `content` globs) - classes emitted at runtime by this JS-driven builder
 * would never be scanned and would get purged. A dedicated stylesheet with
 * real class names sidesteps that risk entirely.
 */
/* Decorative storefront chrome (header/nav/footer): used both around the
   admin canvas preview and in the standalone Preview tab, so what a
   merchant sees while editing matches what "Preview" shows - it's static
   decoration for visual context, not live Magento header/footer blocks. */
.ejdb-pb-storefront-header {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 56px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid #DAE3EC;
    font-family: 'Open Sans', system-ui, sans-serif;
}

.ejdb-pb-storefront-header__logo {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    color: #0055C2;
    font: 800 17px/1 'Kanit', sans-serif;
    font-style: italic;
    letter-spacing: -.4px;
}

.ejdb-pb-storefront-header__logo span { color: #050F0F; }

.ejdb-pb-storefront-header__search {
    flex: 1;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f1f5f9;
    border: 1px solid #DAE3EC;
    border-radius: 999px;
    padding: 10px 16px;
    font: 400 13px/1 'Open Sans', sans-serif;
    color: #6b7480;
}

.ejdb-pb-storefront-header__icons {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.ejdb-pb-storefront-header--mobile { gap: 12px; }
.ejdb-pb-storefront-header--mobile .ejdb-pb-storefront-header__logo { flex: 1; }
.ejdb-pb-storefront-header--mobile .ejdb-pb-storefront-header__icons { gap: 10px; }

.ejdb-pb-storefront-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #DAE3EC;
    font: 600 13px/1 'Kanit', sans-serif;
    color: #353C45;
    flex-wrap: wrap;
    padding: 0 12px;
}

.ejdb-pb-storefront-nav .is-sale { color: #DE0101; }

.ejdb-pb-storefront-nav__burger {
    border: none;
    background: none;
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    cursor: pointer;
    pointer-events: none;
}

.ejdb-pb-storefront-footer {
    background: #f8fafc;
    border-top: 1px solid #DAE3EC;
    padding: 40px 32px 20px;
    font-family: 'Open Sans', system-ui, sans-serif;
}

.ejdb-pb-storefront-footer__cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 24px;
}

.ejdb-pb-storefront-footer__cols p { font-size: 12px; color: #6b7480; margin: 10px 0 0; max-width: 220px; }
.ejdb-pb-storefront-footer__cols span { display: block; font-size: 12px; color: #353C45; margin-top: 10px; }
.ejdb-pb-storefront-footer__heading { font: 700 11px/1 'Kanit', sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #050F0F; }

.ejdb-pb-storefront-footer__bottom {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid #DAE3EC;
    font-size: 11px;
    color: #6b7480;
    line-height: 1.6;
}

@media (max-width: 700px) { .ejdb-pb-storefront-footer__cols { grid-template-columns: 1fr 1fr; } }

[data-content-type] {
    --ejdb-accent: #0055C2;
    --ejdb-accent-dark: #00429A;
    --ejdb-ink: #050F0F;
    --ejdb-text: #353C45;
    --ejdb-muted: #6b7480;
    --ejdb-line: #DAE3EC;
    font-family: 'Open Sans', system-ui, sans-serif;
    color: var(--ejdb-text);
}

[data-content-type] h1, [data-content-type] h2, [data-content-type] h3 {
    font-family: 'Kanit', sans-serif;
    color: var(--ejdb-ink);
    margin: 0;
}

/* Dark-scheme wrappers set color on the wrapper, but headings are matched
   directly above and would otherwise ignore that inherited value. */
.ejdb-pb-hero--dark h1, .ejdb-pb-hero--dark h2, .ejdb-pb-hero--dark h3 {
    color: #fff;
}

/* Promo Banner - two-column copy + image tile with a floating review badge */
.ejdb-pb-promo { padding: 64px 48px; }
.ejdb-pb-promo--dark { background: #050505; color: rgba(255, 255, 255, .7); }
.ejdb-pb-promo--dark h1 { color: #fff; }
.ejdb-pb-promo--light { background: #f2f6fb; }
.ejdb-pb-promo__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.ejdb-pb-promo__eyebrow { font: 700 12px/1 'Kanit', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--ejdb-accent); margin-bottom: 12px; }
.ejdb-pb-promo__heading { font-size: 44px; line-height: 1.05; margin: 0 0 20px; }
.ejdb-pb-promo__subtext { font-size: 16px; line-height: 1.5; max-width: 420px; margin: 0 0 28px; }
.ejdb-pb-promo__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ejdb-pb-btn-cta--outline { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: inherit; }
.ejdb-pb-btn-cta--outline:hover { border-color: #fff; background: transparent; }
.ejdb-pb-promo__art { position: relative; }
.ejdb-pb-promo__tile {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ejdb-accent), var(--ejdb-accent-dark));
    display: flex;
    align-items: center;
    justify-content: center;
}
.ejdb-pb-promo__tile-img { max-height: 60%; max-width: 60%; object-fit: contain; }
.ejdb-pb-promo__badge {
    position: absolute;
    left: -16px;
    bottom: -16px;
    background: #fff;
    color: var(--ejdb-ink);
    border-radius: 12px;
    box-shadow: 0 12px 30px -10px rgba(5, 15, 15, .35);
    padding: 12px 16px;
}
.ejdb-pb-promo__badge-rating { font: 700 16px/1 'Kanit', sans-serif; }
.ejdb-pb-promo__badge-count { font-size: 11px; color: var(--ejdb-muted); margin-top: 3px; }
@media (max-width: 700px) {
    .ejdb-pb-promo { padding: 40px 24px; }
    .ejdb-pb-promo__grid { grid-template-columns: 1fr; gap: 48px; }
    .ejdb-pb-promo__heading { font-size: 30px; }
    .ejdb-pb-promo__art { margin-top: 8px; }
    .ejdb-pb-promo__badge { left: 0; bottom: -24px; }
}

/* Hero / Promo Slider */
.ejdb-pb-slider { position: relative; }
.ejdb-pb-slider__dots.swiper-pagination { bottom: 16px; }
.ejdb-pb-slider__dots .swiper-pagination-bullet { background: #fff; opacity: .5; }
.ejdb-pb-slider__dots .swiper-pagination-bullet-active { opacity: 1; }
.ejdb-pb-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .85);
    color: var(--ejdb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ejdb-pb-slider__arrow--prev { left: 16px; }
.ejdb-pb-slider__arrow--next { right: 16px; }
.ejdb-pb-slider__empty { padding: 60px; text-align: center; color: var(--ejdb-muted); }

/* Section (Row) - mirrors the Mega Menu builder's 12-column row/column model */
.ejdb-pb-section--light { background: #f1f5f9; }
.ejdb-pb-section--dark { background: #0b1210; }
.ejdb-pb-section--dark h1, .ejdb-pb-section--dark h2, .ejdb-pb-section--dark h3 { color: #fff; }
.ejdb-pb-section--pad-sm { padding: 12px 16px; }
.ejdb-pb-section--pad-md { padding: 24px; }
.ejdb-pb-section--pad-lg { padding: 48px 24px; }
.ejdb-pb-section__row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.ejdb-pb-section__col { grid-column: span var(--span, 12); min-width: 0; }
@media (max-width: 700px) { .ejdb-pb-section__col { grid-column: span 12; } }

/* Atomic content widgets */
.ejdb-pb-heading { padding: 4px 0; }
.ejdb-pb-text { padding: 4px 0; line-height: 1.6; }
.ejdb-pb-image { display: block; text-align: center; }
.ejdb-pb-image__img { max-width: 100%; display: block; margin: 0 auto; }
.ejdb-pb-image__placeholder {
    padding: 40px;
    text-align: center;
    background: #f1f5f9;
    color: var(--ejdb-muted);
    border-radius: 8px;
    font-size: 12px;
}
.ejdb-pb-button-wrap { padding: 4px 0; }
.ejdb-pb-btn-cta--secondary { background: transparent; border: 1.5px solid var(--ejdb-accent); color: var(--ejdb-accent); }
.ejdb-pb-btn-cta--secondary:hover { background: #f6f9ff; }
.ejdb-pb-divider { border: none; border-top: 1px solid var(--ejdb-line); margin: 0; }
.ejdb-pb-spacer { width: 100%; }

.ejdb-pb-btn-cta {
    display: inline-block;
    font: 600 13px/1 'Kanit', sans-serif;
    color: #fff;
    background: var(--ejdb-accent);
    padding: 13px 24px;
    border-radius: 999px;
    text-decoration: none;
}
.ejdb-pb-btn-cta:hover { background: var(--ejdb-accent-dark); }

/* Hero */
.ejdb-pb-hero {
    padding: 64px 0;
    background-size: cover;
    background-position: center;
    display: flex;
    /* Break out of the constrained .column.main container to span the full
       viewport width, matching the other full-bleed dark sections. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.ejdb-pb-hero--dark { background-color: #0b1210; color: #fff; }
.ejdb-pb-hero--light { background-color: #f2f6fb; }
/* Full-bleed 100vw math can be a hair wider than the visible viewport on
   platforms with non-overlay scrollbars; contain it to that one axis
   rather than risk a page-wide horizontal scrollbar. */
body:has(.ejdb-pb-hero) { overflow-x: hidden; }
/* Theme's default .page-main top spacing (Magento_Theme/page-layout.css)
   creates an unwanted gap between the header and a hero that's meant to
   sit flush against it. Only zero it out when the hero is the very first
   thing in the main column - other hero-banner usages further down the
   page (e.g. the SEO-copy blocks near the footer) still want normal
   spacing above them. */
.page-main:has(.column.main > [data-content-type="hero-banner"]:first-child) {
    margin-block-start: 0;
}
.ejdb-pb-hero__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}
.ejdb-pb-hero__inner { max-width: 520px; }
/* Without a background image there's no visual on the right half to
   balance against, so the narrow 520px column (sized for text sharing
   the banner with a photo) just reads as a lopsided gap. Let text-only
   heroes use most of the container width instead. */
.ejdb-pb-hero--no-image .ejdb-pb-hero__inner { max-width: none; }
.ejdb-pb-hero__eyebrow { font: 700 11px/1 'Kanit', sans-serif; letter-spacing: 1.5px; color: var(--ejdb-accent); margin-bottom: 10px; }
/* The brand blue reads fine on the light scheme's pale background, but
   has poor contrast over a photographic dark-scheme hero (confirmed:
   "NEW DROPS WEEKLY" was nearly illegible against the smoky product
   image) - use a light, near-white tint there instead. */
.ejdb-pb-hero--dark .ejdb-pb-hero__eyebrow { color: #fff; opacity: .8; }
.ejdb-pb-hero__heading { font-size: 34px; line-height: 1.15; }
.ejdb-pb-hero__subtext { font-size: 14px; line-height: 1.6; margin: 14px 0 0; opacity: .85; }
.ejdb-pb-hero .ejdb-pb-btn-cta { margin-top: 20px; }

/* Rich text / SEO */
.ejdb-pb-richtext { padding: 24px; }
.ejdb-pb-richtext__heading { font-size: 22px; }
.ejdb-pb-richtext__body { font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
.ejdb-pb-richtext__links { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.ejdb-pb-richtext__link { font: 600 12px/1 'Kanit', sans-serif; color: var(--ejdb-accent); text-decoration: none; }
.ejdb-pb-richtext__link:hover { color: var(--ejdb-accent-dark); }

/* Category header */
.ejdb-pb-catheader { padding: 32px 24px; }
.ejdb-pb-catheader__crumb { font-size: 12px; color: var(--ejdb-muted); margin-bottom: 12px; }
.ejdb-pb-catheader__crumb a { color: var(--ejdb-muted); text-decoration: none; }
.ejdb-pb-catheader__crumb span:last-child { color: var(--ejdb-ink); font-weight: 600; }
.ejdb-pb-catheader__title { font-size: 30px; }
.ejdb-pb-catheader__desc { font-size: 14px; line-height: 1.6; margin: 10px 0 0; max-width: 640px; }

/* Trust badges */
.ejdb-pb-trustbadges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 24px; }
.ejdb-pb-trustbadge { text-align: center; color: var(--ejdb-accent); }
.ejdb-pb-trustbadge__heading { font: 600 13px/1 'Kanit', sans-serif; color: var(--ejdb-ink); margin-top: 10px; }
.ejdb-pb-trustbadge__subtext { font-size: 11px; color: var(--ejdb-muted); margin-top: 4px; }
@media (max-width: 700px) { .ejdb-pb-trustbadges { grid-template-columns: repeat(2, 1fr); } }

/* Brand strip */
.ejdb-pb-brandstrip { padding: 26px; }
.ejdb-pb-brandstrip__heading { text-align: center; font: 600 11px/1 'Kanit', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--ejdb-muted); margin-bottom: 16px; }
.ejdb-pb-brandstrip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ejdb-pb-brandstrip__logo { height: 56px; border: 1px solid var(--ejdb-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 700 15px/1 'Kanit', sans-serif; color: var(--ejdb-text); text-decoration: none; }
.ejdb-pb-brandstrip__logo img { max-height: 32px; max-width: 80%; }
.ejdb-pb-brandstrip--grayscale .ejdb-pb-brandstrip__logo img { filter: grayscale(1); opacity: .7; }

/* Flavor grid */
.ejdb-pb-flavorgrid { padding: 22px; }
.ejdb-pb-flavorgrid__heading { font-size: 18px; margin-bottom: 14px; }
.ejdb-pb-flavorgrid__grid { display: grid; grid-template-columns: repeat(var(--ejdb-cols, 3), minmax(0, 1fr)); gap: 10px; }
.ejdb-pb-flavortile { border: 1px solid var(--ejdb-line); border-radius: 12px; aspect-ratio: 2.4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.ejdb-pb-flavortile img { width: 48px; height: 48px; object-fit: contain; }
.ejdb-pb-flavortile__dot { width: 48px; height: 48px; border-radius: 50%; background: var(--ejdb-line); }
.ejdb-pb-flavortile__label { font: 600 12px/1 'Kanit', sans-serif; color: var(--ejdb-ink); }
@media (max-width: 480px) { .ejdb-pb-flavorgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Trust marquee */
@keyframes ejdb-pb-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ejdb-pb-marquee { background: #f1f5f9; border-top: 1px solid var(--ejdb-line); border-bottom: 1px solid var(--ejdb-line); overflow: hidden; padding: 14px 0; }
.ejdb-pb-marquee__track { display: flex; gap: 44px; white-space: nowrap; width: max-content; animation-name: ejdb-pb-marquee-scroll; animation-timing-function: linear; animation-iteration-count: infinite; font: 600 13px/1 'Kanit', sans-serif; color: var(--ejdb-text); }
.ejdb-pb-marquee--pausable:hover .ejdb-pb-marquee__track { animation-play-state: paused; }

/* Countdown */
.ejdb-pb-countdown { background: #0b1210; padding: 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ejdb-pb-countdown__eyebrow { font: 700 11px/1 'Kanit', sans-serif; letter-spacing: 1.5px; color: #DE0101; }
.ejdb-pb-countdown__label { font: 700 22px/1.1 'Kanit', sans-serif; color: #fff; margin-top: 7px; }
.ejdb-pb-countdown__clock { display: flex; gap: 8px; }
.ejdb-pb-countdown__unit { text-align: center; }
.ejdb-pb-countdown__unit span { display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; background: #1a2321; border-radius: 10px; font: 700 22px/1 'Kanit', sans-serif; color: #fff; }
.ejdb-pb-countdown__unit--accent span { background: var(--ejdb-accent); }
.ejdb-pb-countdown__unit small { display: block; font: 500 9px/1 'Open Sans', sans-serif; color: #aab6c2; margin-top: 5px; text-transform: uppercase; }
.ejdb-pb-countdown__expired { font: 600 14px/1 'Kanit', sans-serif; color: #fff; }

/* FAQ */
.ejdb-pb-faq { padding: 22px 24px; }
.ejdb-pb-faq__heading { font-size: 18px; margin-bottom: 6px; }
.ejdb-pb-faq__item { border-bottom: 1px solid var(--ejdb-line); }
.ejdb-pb-faq__question { width: 100%; background: none; border: none; cursor: pointer; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; font: 600 14px/1 'Kanit', sans-serif; color: var(--ejdb-ink); text-align: left; }
.ejdb-pb-faq__question svg { color: var(--ejdb-accent); flex-shrink: 0; transition: transform .15s; }
.ejdb-pb-faq__item.is-open .ejdb-pb-faq__question svg { transform: rotate(180deg); }
.ejdb-pb-faq__answer p { font-size: 13px; line-height: 1.6; margin: 0 0 14px; }

/* Product card (shared, atomic) */
.ejdb-pb-card { display: block; border: 1px solid var(--ejdb-line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; }
.ejdb-pb-card__media { height: 150px; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 100% at 60% 40%, #f2f6fb, #dae3ec); }
.ejdb-pb-card__media img { max-height: 120px; object-fit: contain; }
.ejdb-pb-card__body { padding: 12px; }
.ejdb-pb-card__name { font: 600 12px/1.3 'Open Sans', sans-serif; color: var(--ejdb-ink); }
.ejdb-pb-card__price-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ejdb-pb-card__price { font: 700 13px/1 'Kanit', sans-serif; color: var(--ejdb-ink); }
.ejdb-pb-card__price-was { font: 500 11px/1 'Open Sans', sans-serif; color: var(--ejdb-muted); text-decoration: line-through; }

/* Carousel */
.ejdb-pb-carousel { padding: 22px; }
.ejdb-pb-carousel__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.ejdb-pb-carousel__head > div:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ejdb-pb-carousel__eyebrow { font: 700 10px/1 'Kanit', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ejdb-accent); }
.ejdb-pb-carousel__heading { font-size: 19px; margin-top: 6px; }
.ejdb-pb-carousel__arrows { display: flex; gap: 7px; flex-shrink: 0; }
.ejdb-pb-carousel__arrow { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--ejdb-line); border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--ejdb-text); background: #fff; cursor: pointer; }
.ejdb-pb-carousel__arrow svg { display: block; flex-shrink: 0; }
.ejdb-pb-carousel__arrow--next { background: var(--ejdb-accent); border-color: var(--ejdb-accent); color: #fff; }
.ejdb-pb-carousel__swiper { padding-bottom: 4px; }
.ejdb-pb-carousel__loading { padding: 40px 0; text-align: center; color: var(--ejdb-muted); font-size: 13px; width: 100%; }
.ejdb-pb-carousel__dots.swiper-pagination { position: static; display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.ejdb-pb-carousel__dots .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 999px; background: #c6d3e0; opacity: 1; margin: 0; transition: width .15s; }
.ejdb-pb-carousel__dots .swiper-pagination-bullet-active { width: 20px; background: var(--ejdb-accent); border-radius: 999px; }
@media (max-width: 900px) { .ejdb-pb-carousel__slide { flex-basis: calc(50% - 6px); } }
@media (max-width: 560px) { .ejdb-pb-carousel__slide { flex-basis: 85%; } }

/* Newsletter */
.ejdb-pb-newsletter { background: #0b1210; border-radius: 16px; padding: 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.ejdb-pb-newsletter__heading { font: 700 18px/1.2 'Kanit', sans-serif; color: #fff; }
.ejdb-pb-newsletter__subtext { font-size: 12px; color: #aab6c2; margin-top: 6px; }
.ejdb-pb-newsletter__form { display: flex; gap: 8px; }
.ejdb-pb-newsletter__input { border: none; border-radius: 999px; padding: 12px 16px; font-size: 13px; min-width: 220px; }
.ejdb-pb-newsletter__submit { border: none; border-radius: 999px; padding: 12px 22px; font: 600 12px/1 'Kanit', sans-serif; background: var(--ejdb-accent); color: #fff; cursor: pointer; }
.ejdb-pb-newsletter__submit:hover { background: var(--ejdb-accent-dark); }

/* Tabs */
.ejdb-pb-tabs { padding: 22px 24px; }
.ejdb-pb-tabs__nav { display: flex; gap: 6px; border-bottom: 1px solid var(--ejdb-line); }
.ejdb-pb-tabs__btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font: 600 12px/1 'Kanit', sans-serif; color: var(--ejdb-muted); cursor: pointer; }
.ejdb-pb-tabs__btn.is-active { color: var(--ejdb-accent); border-bottom-color: var(--ejdb-accent); }
.ejdb-pb-tabs__panels { padding-top: 16px; font-size: 13px; line-height: 1.6; }