/* June Flower design: an editorial restyle of Flatsome (Playfair Display headings, Be Vietnam Pro text, airy layout, brand green accent),
   with a dark palette that follows the visitor's system setting (end of file). */
:root {
	--jf-green: #07936e;
	--jf-green-dark: #05694f;
	--jf-green-tint: #eaf5f1;
	--jf-ink: #1f2a26;
	--jf-text: #4d5652;
	--jf-muted: #8a918d;
	--jf-line: #ebe6df;
	--jf-cream: #f7f4ef;
	--jf-rose: #c98b98;
	--jf-rose-tint: #f8ecee;
	--jf-bg: #fff;
	--jf-serif: "Playfair Display", Georgia, serif;
	--jf-sans: "Be Vietnam Pro", system-ui, sans-serif;
}

/* Base type */
body { color: var(--jf-text); font-size: 15px; line-height: 1.75; background: var(--jf-bg); }
h1, h2, h3, h4, h5, h6, .heading-font { color: var(--jf-ink); font-weight: 500; letter-spacing: 0; line-height: 1.25; }
h1 { font-size: 2.3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
a { color: var(--jf-ink); }
a:hover { color: var(--jf-green); }
strong, b { font-weight: 600; }
::selection { background: var(--jf-green-tint); }

.jf-eyebrow { margin: 0 0 .8em; font-family: var(--jf-sans); font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--jf-rose); }

/* Buttons: thin, square, uppercase */
.button, button.button, input[type="submit"], .button.alt { border-radius: 0; font-family: var(--jf-sans); font-weight: 500; letter-spacing: .14em; font-size: 12px; min-height: 44px; line-height: 42px; padding: 0 1.6em; }
.button.is-outline { border-width: 1px; }
/* Social and share icons stay equal circles: the button rule above would stretch them to 44px tall */
.social-icons .button.icon { width: 34px; min-width: 34px; height: 34px; min-height: 0; padding: 0; line-height: 32px; border-radius: 50%; }
.button.alt, .single_add_to_cart_button.button, .checkout-button.button, #place_order { background-color: var(--jf-ink); border-color: var(--jf-ink); }
.button.alt:hover, .single_add_to_cart_button.button:hover, .checkout-button.button:hover, #place_order:hover { background-color: var(--jf-green); border-color: var(--jf-green); box-shadow: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], input[type="number"], input[type="password"], textarea, select { border-color: var(--jf-line); box-shadow: none; border-radius: 0; }

/* Store notice: a slim cream line instead of a black bar */
.woocommerce-store-notice, p.demo_store { position: relative; top: auto; background: var(--jf-green-tint); color: var(--jf-ink); font-size: 12.5px; letter-spacing: .04em; padding: 8px 40px; margin: 0; line-height: 1.5; box-shadow: none; }
.woocommerce-store-notice a, p.demo_store a { color: var(--jf-green); text-decoration: underline; }

/* Header */
.header-top { border-bottom: 1px solid var(--jf-line); font-size: 12px; }
.header-top .nav > li > a, .header-top .nav > li > span { color: var(--jf-muted); font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: none; }
.header-top .nav > li > a:hover { color: var(--jf-green); }
.header-top .icon-map-pin-fill, .header-top .icon-clock, .header-top .icon-phone { color: var(--jf-green); }
/* Opening hours: a <span>, not a link without href (see accessibility.php), laid out like the links beside it */
.nav > li > span.tooltip { display: inline-flex; flex-wrap: wrap; align-items: center; padding: 5px 0; vertical-align: top; }
.nav > li > span.tooltip > i { vertical-align: middle; }
.nav > li > span.tooltip > i + span { margin-left: 5px; }
.nav-divided > li + li > span.tooltip:after { border-left: 1px solid rgba(0, 0, 0, .1); content: ""; height: 15px; left: -1em; margin-top: -7px; position: absolute; top: 50%; width: 1px; }
/* The top bar keeps bare icons (no circle) on purpose, as approved for the desktop header */
.header-top .social-icons a.button.icon { background: transparent !important; border: 0 !important; color: var(--jf-muted) !important; box-shadow: none; width: auto; min-width: 2.5em; height: auto; min-height: 0; padding: 0 .3em; line-height: 1; }
.header-top .social-icons a.button.icon:hover { color: var(--jf-green) !important; }
.header-top .social-icons a.button.icon > i { color: inherit !important; }
.header-main .nav > li > a { color: var(--jf-ink); }
.header-main .nav > li > a:hover, .header-main .header-cart-link:hover { color: var(--jf-green); }
.header-main .nav > li > a.nav-top-link { font-size: 12px; letter-spacing: .14em; }
.header-bottom { border-top: 1px solid var(--jf-line); border-bottom: 1px solid var(--jf-line); }
.header-bottom-nav > li > a { font-size: 12px; letter-spacing: .16em; font-weight: 500; }
.header-bottom-nav.nav-line-bottom > li > a:before { height: 1px; background-color: var(--jf-green); }
.header-bottom-nav .trp-flag-image { display: none; }
.nav-dropdown { border: 1px solid var(--jf-line); box-shadow: 0 12px 30px rgba(31, 42, 38, .08); }
.nav-dropdown li a { font-size: 14px; color: var(--jf-text); }
.nav-dropdown li a:hover { color: var(--jf-green); }
.header-wrapper.stuck { box-shadow: 0 1px 0 var(--jf-line); }
.cart-icon strong { border-color: var(--jf-ink); color: var(--jf-ink); border-radius: 0; }
.cart-icon strong:after { border-color: var(--jf-ink); }

/* Language switcher in the mobile header */
.header-main .mobile-nav li.html_top_right_text { display: flex; align-items: center; }
.header-main .trp-shortcode-switcher__wrapper { --text: var(--jf-ink); --text-hover: var(--jf-green); --bg-hover: transparent; --font-size: 12px; }
.header-main .trp-language-item { min-height: 44px; min-width: 44px; justify-content: center; display: flex; align-items: center; gap: 6px; letter-spacing: .1em; }
/* TranslatePress prints white text inline and clips the two-letter code to "E…" */
.header-main .trp-language-item-name { color: var(--jf-ink); overflow: visible; text-overflow: clip; }

/* Off-canvas menu */
.off-canvas .nav-vertical > li > a { font-family: var(--jf-sans); font-size: 13px; letter-spacing: .12em; color: var(--jf-ink); }
.off-canvas .nav-vertical li li > a { font-size: 14px; color: var(--jf-text); }
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content { background: var(--jf-bg); }

/* Section titles: small uppercase serif with modest tracking and a short line */
.section-title-container { margin-top: 64px; margin-bottom: 34px; }
.section-title-center { display: block; text-align: center; }
.section-title-center:before, .section-title-center:after, .section-title b { display: none; }
.section-title-center .section-title-main, .section-title .section-title-main { display: inline-block; padding: 0 0 18px; font-family: var(--jf-serif); font-size: 22px; font-weight: 500; letter-spacing: .07em; color: var(--jf-ink); border: 0; position: relative; line-height: 1.35; }
.section-title-center .section-title-main:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 1px; margin-left: -28px; background: var(--jf-rose); }

/* Home hero: text over the dark left side of the shop photo on wide screens, below the photo on smaller ones */
.banner.jf-hero { background-color: #10211b; }
.banner.jf-hero .text-box-content, .banner.jf-hero .text-inner { text-shadow: none; }
.jf-hero .jf-eyebrow { color: #f0c9d1; }
.jf-hero h1.jf-h1 { margin: 0 0 .4em; color: #fff; font-family: var(--jf-serif); font-weight: 500; font-size: 46px; line-height: 1.14; letter-spacing: -.005em; }
.jf-hero .jf-hero-lead { margin: 0 0 1.8em; color: rgba(255, 255, 255, .85); font-size: 16px; font-weight: 400; }
.jf-hero .jf-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.jf-btn-outline { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 22px; border: 1px solid currentColor; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; transition: background .2s, color .2s; }
.jf-btn-outline:after { content: ""; width: 22px; height: 1px; background: currentColor; }
.jf-btn-outline:hover { background: #fff; color: #1f2a26; }
/* Flatsome's dark-text link colour would otherwise keep the hovered label white on the white fill */
@media (min-width: 1024px) { .banner.jf-hero .jf-hero-cta a.jf-btn-outline:hover { color: #1f2a26; } }
.jf-btn-zalo { gap: 10px; }
.jf-btn-zalo:after { display: none; }
.jf-btn-icon { flex: none; width: 16px; height: 16px; }

/* Hero Zalo QR: white on the blurred right side of the hero photo, wide screens only */
.jf-hero-zalo { display: none; }
@media (min-width: 1024px) {
	.jf-hero-zalo { display: block; position: absolute; z-index: 2; left: 83%; top: 50%; width: 220px; transform: translate(-50%, -50%); color: #fff; text-align: center; }
	.jf-hero-zalo p { margin: 0; color: #fff; }
	.jf-hero-qr { display: inline-block; padding: 10px; border: 1px solid rgba(255, 255, 255, .9); line-height: 0; }
	.jf-hero-qr img { display: block; width: 96px; height: 96px; }
	.jf-hero-zalo .jf-hero-zalo-scan { margin-top: 14px; font-family: var(--jf-serif); font-style: italic; font-size: 17px; line-height: 1.3; }
	.jf-hero-zalo .jf-hero-zalo-phone { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
	.jf-hero-zalo-rule { display: block; width: 32px; height: 1px; margin: 14px auto 12px; background: rgba(255, 255, 255, .7); }
	.jf-hero-zalo .jf-hero-zalo-info { font-size: 12.5px; font-weight: 400; line-height: 1.75; letter-spacing: .03em; color: rgba(255, 255, 255, .85); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	/* Here the photo (3:1) sits above the text: centre the block on the photo, which spans the full width. */
	.jf-hero-zalo { top: calc(-100vw / 6); }
}
@media (min-width: 1200px) {
	.banner.jf-hero .banner-layers { max-width: none; padding: 0; }
	.banner.jf-hero .text-box { top: 50% !important; bottom: auto !important; left: 4.5% !important; right: auto !important; width: 440px !important; transform: translateY(-50%) !important; }
	.jf-hero h1.jf-h1 { max-width: 390px; }
	.jf-hero .jf-hero-cta { flex-wrap: nowrap; }
	.jf-hero .jf-btn-outline { padding: 0 18px; letter-spacing: .18em; }
	.jf-hero .jf-btn-outline:after { width: 16px; }
}
@media (max-width: 1199px) {
	.banner.jf-hero { padding-top: 0 !important; height: auto !important; }
	.banner.jf-hero .banner-inner { position: relative; }
	.banner.jf-hero .banner-bg { position: relative; height: auto; aspect-ratio: 3 / 1; }
	.banner.jf-hero .banner-layers { position: relative; height: auto; }
	.banner.jf-hero .banner-link { display: none; }
	.banner.jf-hero .text-box { position: relative !important; top: auto !important; left: auto !important; bottom: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: 640px; margin: 0; padding: 40px 0 46px; }
}
@media (min-width: 550px) and (max-width: 1199px) {
	.banner.jf-hero .text-box { margin: 0 auto; }
	.banner.jf-hero .text-inner { text-align: center !important; }
}
@media (max-width: 549px) {
	.banner.jf-hero .banner-bg { aspect-ratio: auto; height: 64vw; min-height: 230px; }
	.banner.jf-hero .text-box { padding: 30px 6px 36px; }
	.jf-hero h1.jf-h1 { font-size: 32px !important; }
	.jf-hero .jf-hero-cta { gap: 10px; }
	.jf-btn-outline { padding: 0 16px; letter-spacing: .16em; }
	.jf-hero .jf-hero-lead { font-size: 15px; margin-bottom: 1.4em; }
}
/* Hero CTAs below desktop: Zalo (the order channel) as a filled button, the shop as a text link with the thin line,
   on one row, aligned like the heading */
@media (max-width: 1023px) {
	.jf-hero .jf-hero-cta { flex-wrap: nowrap; align-items: center; gap: 26px; }
	.jf-hero .jf-btn-zalo { min-height: 46px; padding: 0 26px; border-color: #fff; background: #fff; color: #1f2a26; font-size: 12.5px; letter-spacing: .16em; white-space: nowrap; }
	.jf-hero .jf-btn-zalo:hover { border-color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .86); color: #1f2a26; }
	.jf-hero .jf-btn-outline:not(.jf-btn-zalo) { min-height: 44px; padding: 0; border: 0; font-size: 12px; letter-spacing: .2em; white-space: nowrap; }
	.jf-hero .jf-btn-outline:not(.jf-btn-zalo):after { width: 22px; transition: width .2s; }
	.jf-hero .jf-btn-outline:not(.jf-btn-zalo):hover { background: none; color: #f0c9d1; }
	.jf-hero .jf-btn-outline:not(.jf-btn-zalo):hover:after { width: 34px; }
	.jf-hero .jf-btn-outline:focus-visible { outline: 2px solid #f0c9d1; outline-offset: 3px; }
}
@media (min-width: 550px) and (max-width: 1023px) {
	.jf-hero .jf-hero-cta { justify-content: center; }
}

/* Promo tiles: photo on the right half, text on cream */
.jf-tiles { margin-bottom: 0; }
.jf-tiles .col { padding-bottom: 0 !important; }
.jf-tile .banner-bg { left: auto; width: 50%; }
.jf-tile .banner-bg img, .jf-tile .banner-bg .bg { object-fit: cover; }
.jf-tile .text-box { padding: 0 6% 0 12%; }
.jf-tile .jf-eyebrow { margin-bottom: .6em; font-size: 11px; letter-spacing: .18em; }
.jf-tile h2.jf-tile-title { margin: 0 0 .7em; font-family: var(--jf-serif); font-size: 27px; font-weight: 500; line-height: 1.18; color: var(--jf-ink); }
.jf-link { display: inline-block; margin: 0; padding-bottom: 3px; border-bottom: 1px solid var(--jf-green); color: var(--jf-green); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.jf-tile:hover .jf-link { color: var(--jf-ink); border-color: var(--jf-ink); }
.jf-tile-col + .jf-tile-col .jf-tile { border-left: 1px solid var(--jf-bg); }
/* Tiles sit side by side: text starts at one top line and "Xem ngay" sits on one bottom line, whatever the title length */
@media (min-width: 550px) {
	.jf-tile .text-box.jf-tile-text { top: 0; bottom: 0; height: auto; padding-top: 52px; padding-bottom: 52px; transform: none !important; }
	.jf-tile .jf-tile-text .text-box-content, .jf-tile .jf-tile-text .text-inner { height: 100%; }
	.jf-tile .jf-tile-text .text-inner { display: flex; flex-direction: column; align-items: flex-start; }
	.jf-tile .jf-tile-text .jf-link { margin-top: auto; }
}
@media (min-width: 550px) and (max-width: 1023px) { .jf-tile .text-box.jf-tile-text { padding-top: 34px; padding-bottom: 34px; } }

/* Home intro: text beside a photo on a cream band */
.jf-intro-band { margin-top: 0; }
.jf-intro { justify-content: space-between; }
.jf-intro .col { padding-bottom: 0; }
.jf-intro-text .col-inner { max-width: 560px; }
h2.jf-intro-title { margin: 0 0 .6em; font-family: var(--jf-serif); font-size: 36px; font-weight: 500; line-height: 1.18; color: var(--jf-ink); }
.jf-intro p { font-size: 17px; line-height: 1.85; color: var(--jf-text); }
.jf-intro p.jf-intro-cta { margin: 26px 0 0; }
.jf-intro p.jf-eyebrow { margin-bottom: 14px; font-size: 12px; line-height: 1.5; color: var(--jf-rose); }
.jf-intro-slider { box-shadow: 0 18px 40px -24px rgba(31, 42, 38, .45); }
/* Fixed 10:11 frame so the page does not move while the slider starts or a slide loads */
.jf-intro-slider .slider { overflow: hidden; aspect-ratio: 10 / 11; background: var(--jf-cream); }
.jf-intro-slider .jf-slide { position: relative; width: 100%; aspect-ratio: 10 / 11; }
.jf-intro-slider .jf-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.jf-intro-slider .slider-type-fade .flickity-slider > * { transition: opacity .9s ease; }
.jf-intro-slider .flickity-page-dots { bottom: 14px; }
.jf-intro-slider .flickity-page-dots .dot { width: 7px; height: 7px; margin: 0 4px; border: 0; background: #fff; opacity: .55; box-shadow: 0 0 0 1px rgba(31, 42, 38, .15); }
.jf-intro-slider .flickity-page-dots .dot.is-selected { background: #fff; }
.jf-intro-slider .loading-spin { display: none; }

/* Category circles: a full-width row on a light green band */
.jf-cats-band { padding: 4px 0 50px !important; }
.jf-cats-band .section-title-container { margin-top: 56px; }
.jf-cats .box-category .box-image { transition: transform .3s ease, border-color .3s ease; }
.jf-cats .box-category:hover .box-image { transform: translateY(-4px); }
.jf-cats .box-category .box-image { width: 100%; max-width: 160px; margin: 0 auto; border: 1px solid var(--jf-line); padding: 6px; border-radius: 50%; background: var(--jf-bg); }
.jf-cats .box-category .box-image > div { border-radius: 50%; overflow: hidden; }
.jf-cats .box-category .box-text { padding-top: 14px; }
.jf-cats .box-category .header-title { font-family: var(--jf-serif); font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; color: var(--jf-ink); }
.jf-cats .box-category:hover .box-image { border-color: var(--jf-green); }
.jf-cats .is-count { display: none; }

/* Section title with a "view all" link on the right */
.jf-title-link .section-title { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--jf-line); }
.jf-title-link .section-title-main { padding-bottom: 14px; }
.jf-title-link .section-title a { margin: 0 0 16px; padding: 10px 0; font-family: var(--jf-sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--jf-green); }
.jf-title-link .section-title a:hover { color: var(--jf-ink); }
.jf-latest { margin-bottom: 20px; }

/* Product cards */
.product-small.box { background: transparent; }
.product-small .box-image { background: var(--jf-cream); }
.product-small .box-text { padding: 14px 4px 6px; }
.product-small .category { margin-bottom: 4px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--jf-muted); opacity: 1; }
.product-small .product-title, .product-small .name.product-title { font-family: var(--jf-serif); font-size: 16px; line-height: 1.4; font-weight: 500; }
.product-small .product-title a { color: var(--jf-ink); }
.product-small .product-title a:hover { color: var(--jf-green); }
.product-small .price-wrapper { margin-top: 4px; }
.juneflower-contact-price { font-weight: 500; font-size: 13px; letter-spacing: .08em; color: var(--jf-green); }
.product-small .add-to-cart-button { margin-top: 10px; }
/* Price under the title, and cards in a row share one height so every button sits on the same line at the bottom */
.product-small .box-text .title-wrapper, .product-small .box-text .price-wrapper, .product-small .add-to-cart-button { flex: 0 0 auto; width: 100%; max-width: 100%; }
.product-small .box-text .price-wrapper { text-align: left; }
.product-small.col > .col-inner, .product-small.col .product-small.box { height: 100%; }
.product-small.box { display: flex; flex-direction: column; }
/* As a flex item the image block would shrink to the 247px thumbnail and sit centred, away from the text */
.product-small.box > .box-image { width: 100%; }
.product-small.box .box-text { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; }
.product-small .box-text .add-to-cart-button { margin-top: auto; padding-top: 10px; }
/* Slider cells (related products) are absolutely positioned, so each one is stretched to the tallest after Flickity measures them */
.flickity-enabled .flickity-slider > .product-small.col { display: flex; min-height: 100%; }
.flickity-enabled .flickity-slider > .product-small.col > .col-inner { flex: 1 1 auto; height: auto; }
.product-small .add-to-cart-button .button { min-height: 36px; line-height: 34px; font-size: 11px; padding: 0 1.2em; border-width: 1px; color: var(--jf-ink); border-color: var(--jf-line); background: transparent; }
.product-small .add-to-cart-button .button:hover { color: #fff; background: var(--jf-green); border-color: var(--jf-green); }
.badge-container .badge-inner { border-radius: 0; font-size: 11px; letter-spacing: .08em; background-color: var(--jf-rose); }

/* Reasons and testimonials */
.jf-features { border-top: 1px solid var(--jf-line); border-bottom: 1px solid var(--jf-line); padding: 26px 0 6px; }
.jf-features .featured-title, .jf-features h4, .jf-features h5 { font-family: var(--jf-serif); font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--jf-ink); }
.jf-features p { color: var(--jf-muted); font-size: 14px; }
/* Facebook reviews: three cards per view on desktop, two on tablets, one and a peek on phones; Flickity moves them */
.jf-reviews { margin: 30px -10px 10px; }
/* Flatsome sizes every slider cell to 100% with !important; min-height stays 0 while Flickity measures the cells, then fills the row */
.jf-reviews .flickity-slider > .jf-review { width: 33.333% !important; padding: 0 10px; }
.jf-reviews .flickity-enabled .flickity-slider > .jf-review { min-height: 100%; display: flex; }
.jf-review-card { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; box-sizing: border-box; margin: 0; padding: 30px 26px 24px; background: var(--jf-cream); }
.jf-review-stars { color: var(--jf-rose); font-size: 13px; letter-spacing: .2em; }
.jf-review-text { flex: 1 1 auto; margin: 14px 0 20px; padding: 0; border: 0; font-family: var(--jf-serif); font-size: 16px; font-style: italic; line-height: 1.65; color: var(--jf-ink); }
.jf-review-author { display: flex; align-items: center; gap: 12px; }
.jf-review-avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--jf-green-tint); color: var(--jf-green); font-family: var(--jf-serif); font-size: 17px; line-height: 40px; text-align: center; }
.jf-review-name, .jf-review-meta { display: block; line-height: 1.5; }
.jf-review-name { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--jf-ink); }
.jf-review-meta { font-size: 12px; color: var(--jf-muted); }
@media (max-width: 849px) { .jf-reviews .flickity-slider > .jf-review { width: 50% !important; } }
@media (max-width: 549px) { .jf-reviews .flickity-slider > .jf-review { width: 86% !important; } }
.jf-about p { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; font-size: 17px; line-height: 1.9; }
/* FAQ: a cream card of serif questions with a plus that turns into a cross when an item is open */
.jf-about .text + .section-title-container { margin-top: 76px; }
.juneflower-faq { max-width: 840px; margin: 0 auto 56px; padding: 6px 44px; background: var(--jf-cream); }
.juneflower-faq details { margin: 0; padding: 0; border: 0; }
.juneflower-faq details + details { border-top: 1px solid var(--jf-line); }
.juneflower-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font-weight: 500; color: var(--jf-ink); }
.juneflower-faq summary::-webkit-details-marker { display: none; }
.juneflower-faq summary::after { content: ""; flex: 0 0 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; color: var(--jf-green); transition: transform .25s ease; }
.juneflower-faq details[open] > summary::after { transform: rotate(45deg); }
.juneflower-faq summary:hover h3 { color: var(--jf-green); }
.juneflower-faq summary:focus { outline: 0; }
.juneflower-faq summary:focus-visible { outline: 2px solid var(--jf-green); outline-offset: 4px; }
.juneflower-faq summary h3 { margin: 0; font-family: var(--jf-serif); font-size: 19px; font-weight: 500; line-height: 1.4; letter-spacing: 0; transition: color .2s ease; }
.juneflower-faq .juneflower-faq-answer { padding: 0 38px 22px 0; }
.juneflower-faq .juneflower-faq-answer p { max-width: none; margin: 0 0 .8em; text-align: left; font-size: 17px; line-height: 1.85; color: var(--jf-text); }
.juneflower-faq .juneflower-faq-answer p:last-child { margin-bottom: 0; }

/* Shop and category pages */
.page-title.shop-page-title, .category-page-title { background: var(--jf-cream); border-bottom: 1px solid var(--jf-line); }
.shop-page-title .page-title-inner { padding-top: 22px; padding-bottom: 22px; }
.shop-page-title h1, .category-page-title h1, .page-title h1 { font-family: var(--jf-serif); font-size: 34px; font-weight: 500; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.breadcrumbs { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--jf-muted); }
.breadcrumbs a { color: var(--jf-muted); font-weight: 400; }
.term-description, .juneflower-category-bottom { color: var(--jf-text); }
.woocommerce-ordering select { border: 0; border-bottom: 1px solid var(--jf-line); font-size: 13px; }

/* Product page */
.product-info .product-title { font-family: var(--jf-serif); font-size: 32px; font-weight: 500; text-transform: none; line-height: 1.22; }
.product-info .is-divider { background: var(--jf-rose); height: 1px; max-width: 48px; }
.product-info .juneflower-contact-price { font-size: 15px; }
.product-info .product_meta { font-size: 13px; color: var(--jf-muted); border-top: 1px solid var(--jf-line); padding-top: 12px; }
.product-tabs li a { font-size: 12px; letter-spacing: .16em; }
.product-section, .product-footer .woocommerce-tabs { border-top-color: var(--jf-line); }
.related .product-section-title, .product-section-title { font-family: var(--jf-serif); font-size: 21px; font-weight: 500; letter-spacing: .05em; }
.quantity input[type="number"], .quantity .button { border-color: var(--jf-line); }

/* Cart, checkout and pages */
.jf-page-title { margin: 6px 0 26px; font-family: var(--jf-serif); font-size: 34px; font-weight: 500; line-height: 1.2; color: var(--jf-ink); }
.page-title:not(.featured-title) { border-bottom: 1px solid var(--jf-line); }
.checkout-page-title .nav > li > a { font-family: var(--jf-serif); font-size: 19px; letter-spacing: .02em; text-transform: none; }
.shop_table thead th, .shop_table .cart_totals th { font-size: 11px; letter-spacing: .18em; color: var(--jf-muted); }
.cart_totals, .checkout-sidebar, .woocommerce-checkout-review-order { background: transparent; }
.has-border { border-color: var(--jf-line) !important; }
.is-well { background: var(--jf-cream); box-shadow: none; }
.juneflower-zalo-box { border-width: 1px; border-radius: 0; background: var(--jf-green-tint); }
.button-continue-shopping.button { display: inline-flex; align-items: center; gap: .4em; }

/* Footer */
.absolute-footer { font-size: 12.5px; color: var(--jf-muted); border-top: 1px solid var(--jf-line); padding: 26px 0 30px; }
.absolute-footer a { color: var(--jf-ink); }
.footer-secondary .payment-icons { opacity: .55; }

/* Floating Zalo button (button-contact-vr): one tidy button in the bottom-right corner on desktop,
   in the page margin at common widths; Flatsome's back-to-top button sits above it */
#button-contact-vr { left: auto !important; right: 18px; bottom: 18px !important; width: 60px; }
#button-contact-vr .phone-vr-circle-fill { display: none; }
#button-contact-vr .button-contact .phone-vr { width: 60px; height: 60px; }
#button-contact-vr .phone-vr-img-circle { width: 48px; height: 48px; top: 6px; left: 6px; box-shadow: 0 6px 18px rgba(0, 104, 255, .25); animation: none; }
#button-contact-vr .phone-vr-img-circle a { position: absolute; inset: 0; width: auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
#button-contact-vr .phone-vr-img-circle a img { position: static; width: auto; height: auto; max-width: 26px; transform: none; }
/* On the home page the hero has its own Zalo button: show the floating one once the hero is scrolled past (see design.php) */
#button-contact-vr { transition: opacity .25s, visibility .25s; }
body:has(.jf-hero):not(.jf-past-hero) #button-contact-vr { opacity: 0; visibility: hidden; }

/* Back to top */
.back-to-top.button { right: 26px; bottom: 90px; width: 44px; height: 44px; min-height: 44px; padding: 0; line-height: 42px; border-radius: 50% !important; border: 1px solid var(--jf-line) !important; background: var(--jf-bg) !important; color: var(--jf-ink) !important; box-shadow: 0 4px 14px rgba(31, 42, 38, .08); }
.back-to-top.button:hover { color: var(--jf-green) !important; border-color: var(--jf-green) !important; }

/* Mobile bottom bar */
.jf-bbar { display: none; }

@media (max-width: 849px) {
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	#button-contact-vr, .back-to-top { display: none !important; }
	.jf-bbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--jf-bg); border-top: 1px solid var(--jf-line); box-shadow: 0 -6px 20px rgba(31, 42, 38, .05); }
	.jf-bbar-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: var(--jf-ink); font-size: 10.5px; letter-spacing: .04em; line-height: 1.2; }
	.jf-bbar-item:hover, .jf-bbar-item:focus { color: var(--jf-green); }
	.jf-bbar-zalo { color: var(--jf-green); font-weight: 600; }
	.jf-bbar-count { position: absolute; top: 7px; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--jf-green); color: #fff; font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; }
	.jf-bbar-count[hidden] { display: none; }
	.juneflower-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }

	/* Off-canvas menu: search without the category select, quiet outline social icons */
	#main-menu .search-form-categories { display: none; }
	#main-menu .social-icons .button.icon { background-color: transparent !important; border-color: var(--jf-line) !important; color: var(--jf-ink) !important; box-shadow: none; }
	#main-menu .social-icons .button.icon > i { color: var(--jf-ink) !important; }
	#main-menu .social-icons .button.icon:hover, #main-menu .social-icons .button.icon:focus { border-color: var(--jf-green) !important; }
	#main-menu .social-icons .button.icon:hover > i, #main-menu .social-icons .button.icon:focus > i { color: var(--jf-green) !important; }
	.woocommerce-store-notice, p.demo_store { font-size: 12px; padding: 7px 14px; }

	.header-main .nav > li.html { margin: 0; }
	h1 { font-size: 1.9em; }
	.section-title-container { margin-top: 44px; margin-bottom: 22px; }
	.section-title-center .section-title-main { font-size: 19px; letter-spacing: .06em; }

	.jf-hero h1.jf-h1 { font-size: 40px; }
	.jf-tile h2.jf-tile-title { font-size: 24px; }
	.product-info .product-title { font-size: 26px; }
	.shop-page-title h1, .category-page-title h1, .page-title h1, .jf-page-title { font-size: 28px; }
}

@media (max-width: 549px) {
	body { font-size: 15px; }
	.jf-tiles .col + .col .jf-tile { border-left: 0; border-top: 1px solid var(--jf-bg); }
	.jf-tile .text-box { padding: 0 6% 0 9%; }
	.jf-tile h2.jf-tile-title { font-size: 22px; }
	h2.jf-intro-title { font-size: 28px; }
	.jf-intro-slider .slider, .jf-intro-slider .jf-slide { aspect-ratio: 4 / 5; }
	.jf-intro-media { margin-top: 26px; }
	.jf-intro p, .jf-about p { font-size: 16px; line-height: 1.85; text-align: left; }
	.jf-about .text + .section-title-container { margin-top: 56px; }
	.juneflower-faq { margin-bottom: 40px; padding: 2px 20px; }
	.juneflower-faq summary { gap: 16px; padding: 18px 0; }
	.juneflower-faq summary h3 { font-size: 17px; }
	.juneflower-faq .juneflower-faq-answer { padding: 0 0 18px; }
	.juneflower-faq .juneflower-faq-answer p { font-size: 16px; }
	.jf-cats .box-category .box-image { max-width: 104px; }
	.jf-cats-band { padding-bottom: 22px !important; }
	.jf-cats-band .section-title-container { margin-top: 40px; }
	.jf-title-link .section-title-main { font-size: 17px; letter-spacing: .05em; }
	.jf-title-link .section-title a { letter-spacing: .12em; white-space: nowrap; }
	.jf-cats .box-category .header-title { font-size: 14px; }
	.product-small .product-title, .product-small .name.product-title { font-size: 15px; }
	.product-small .add-to-cart-button .button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 6px 8px; line-height: 1.35; font-size: 10.5px; letter-spacing: .06em; white-space: normal; }
}

/* Dark mode: follows the visitor's system setting (no toggle). The palette keeps the brand green and pink accent on
   warm near-black surfaces. Flatsome hard-codes white surfaces and prints the theme option colours (custom-css)
   after this file, so those rules are overridden here with more specific selectors. Photos are left untouched. */
@media (prefers-color-scheme: dark) {
	:root {
		--jf-green: #2fb48c;
		--jf-green-dark: #067a5c;
		--jf-green-tint: #15221d;
		--jf-ink: #f1ece5;
		--jf-text: #cfc8be;
		--jf-muted: #a59d93;
		--jf-line: #3a352f;
		--jf-cream: #201d1a;
		--jf-rose: #e3aab6;
		--jf-rose-tint: #2b2023;
		--jf-bg: #161412;
		--jf-field: #1f1c19;
		--primary-color: #2fb48c;
		color-scheme: dark;
	}

	/* Page, text and links (custom-css sets body, h1–h6 and a colours) */
	html:root, html body, #wrapper, #main, .absolute-footer, .footer-1, .footer-wrapper { background-color: var(--jf-bg); }
	html body { color: var(--jf-text); }
	body h1, body h2, body h3, body h4, body h5, body h6, body .heading-font { color: var(--jf-ink); }
	body a { color: var(--jf-ink); }
	body a:hover { color: var(--jf-green); }
	body .primary.is-link, body .primary.is-underline, body .is-outline.primary, body [data-color="primary"] { color: var(--jf-green); }
	label, legend, .woocommerce-form__label, th { color: var(--jf-ink); }
	td, .mobile-product-price__qty, .product-quantity, .juneflower-quote { color: var(--jf-text); }
	td, th, .shop_table td, .shop_table th, .shop_table thead th, .cart_totals tbody tr td, .cart_totals tbody tr th, .woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th, hr, .is-border { border-color: var(--jf-line) !important; }
	.is-divider { background-color: rgba(255, 255, 255, .16); }
	.col-divided, .col.col-divided:not(.col-first):last-child, .col-border, .row-divided > .col + .col:not(.large-12), .row-divided.row-reverse > .col + .col:not(.large-12) { border-color: var(--jf-line); }
	.ux-menu-link__link, .product_meta > span { border-color: var(--jf-line); }
	body .star-rating:before, body .star-rating span:before, body .stars a.active, body .woocommerce-page .star-rating:before { color: var(--jf-ink); }
	::selection { background: #2b4a3f; color: #fff; }

	/* Header: top bar, logo row, navigation row, icons */
	html .header-top, html .header-wrapper .header-top { background-color: var(--jf-cream) !important; }
	html .header-bg-color, html .header-bottom, .header-wrapper, .header-main { background-color: var(--jf-bg); }
	html .header-main .nav > li > a, html .header-main .nav > li > a > i:not(.icon-angle-down), html .header-main .menu-title, html .header-main .social-icons { color: var(--jf-ink) !important; }
	html .header-main .nav > li > a:hover, html .header-main .nav > li > a:hover > i:not(.icon-angle-down) { color: var(--jf-green) !important; }
	html .header-main .cart-icon strong, html .header-main .cart-icon strong:after { color: var(--jf-ink) !important; border-color: var(--jf-ink) !important; }
	html .header-main .current-dropdown .cart-icon strong, html .header-main .cart-icon:hover strong { color: var(--jf-bg) !important; background-color: var(--jf-ink) !important; }
	html .header:not(.transparent) .header-bottom-nav.nav > li > a { color: var(--jf-ink); }
	html .header:not(.transparent) .header-bottom-nav.nav > li > a:hover, html .header:not(.transparent) .header-bottom-nav.nav > li.active > a, html .header:not(.transparent) .header-bottom-nav.nav > li.current > a { color: var(--jf-green); }
	html .header-bottom-nav.nav-line-bottom > li > a:before { background-color: var(--jf-green); }
	.header-wrapper.stuck, .stuck .header-main { background-color: var(--jf-bg); }
	/* The green logo on the dark header: a touch brighter so the script stays legible */
	#logo img { filter: brightness(1.25) saturate(1.05); }
	.nav-dropdown, .header .search-form .live-search-results, .col .live-search-results, .header-block .live-search-results { background-color: var(--jf-cream); border-color: var(--jf-line); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); color: var(--jf-text); }
	.nav-dropdown-has-arrow li.has-dropdown:after { border-bottom-color: var(--jf-cream); }
	.nav-dropdown-has-arrow li.has-dropdown:before { border-bottom-color: var(--jf-line); }
	.nav-dropdown li a, .nav-dropdown .nav-column li > a { color: var(--jf-text); }
	.nav-dropdown li a:hover { color: var(--jf-green); }
	.nav-dropdown-default .nav-column li > a, .nav-dropdown.nav-dropdown-default > li > a { border-color: var(--jf-line); }
	.header-main .trp-shortcode-switcher__wrapper { --bg: var(--jf-cream); --bg-hover: transparent; --border-color: var(--jf-line); }

	/* Off-canvas menu and popups */
	.off-canvas-left .mfp-content, .off-canvas-right .mfp-content, .mfp-bg.off-canvas-center:not(.dark), .lightbox-content { background-color: var(--jf-bg); }
	.off-canvas .nav-vertical li > a, .off-canvas .nav-sidebar.nav-vertical > li.menu-item.active > a { color: var(--jf-ink); }
	.off-canvas .nav-vertical li li > a, .off-canvas .nav-vertical li .toggle { color: var(--jf-text); }
	.off-canvas .nav-sidebar.nav-vertical > li + li, .off-canvas .nav-vertical li li { border-color: var(--jf-line); }
	.off-canvas .searchform input, .mfp-close { color: var(--jf-ink); }

	/* Section bands set in the page content (ID-scoped inline colours) */
	.section.jf-intro-band { background-color: var(--jf-cream) !important; }
	.section.jf-cats-band { background-color: var(--jf-green-tint) !important; }
	.jf-tile .banner-bg, .jf-tile.banner { background-color: var(--jf-cream) !important; }
	.jf-intro-slider { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }

	/* Fields and buttons */
	input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], input[type="number"], input[type="password"], input[type="url"], textarea, select,
	.select2-container .select2-selection, .select2-container .select2-choice, .select-resize-ghost { background-color: var(--jf-field); color: var(--jf-ink); border-color: var(--jf-line); }
	input:focus, textarea:focus, select:focus { background-color: var(--jf-field) !important; color: var(--jf-ink); border-color: var(--jf-green) !important; box-shadow: none; }
	::placeholder { color: var(--jf-muted); opacity: 1; }
	select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cfc8be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }
	.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--jf-ink); }
	.select2-dropdown, .select2-results, .select2-search--dropdown { background-color: var(--jf-cream); color: var(--jf-text); border-color: var(--jf-line); }
	.select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background-color: var(--jf-line); }
	.select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--jf-field); color: var(--jf-ink); border-color: var(--jf-line); }
	html .button.alt, html .button.alt:not(.is-outline), html .single_add_to_cart_button.button, html .checkout-button.button, html #place_order, html .button.checkout, html .button.secondary:not(.is-outline) { background-color: var(--jf-ink); border-color: var(--jf-ink); color: var(--jf-bg); }
	html .button.alt:hover, html .single_add_to_cart_button.button:hover, html .checkout-button.button:hover, html #place_order:hover, html .button.checkout:hover, html .button.secondary:not(.is-outline):hover { background-color: var(--jf-green-dark); border-color: var(--jf-green-dark); color: #fff; }
	html .button.wc-forward:not(.checkout):not(.checkout-button), html .button.primary:not(.is-outline), html button[type="submit"]:not(.is-form), html input[type="submit"]:not(.is-form) { background-color: var(--jf-green-dark); border-color: var(--jf-green-dark); color: #fff; }
	html .button.is-outline, html .button.secondary.is-outline, html .is-outline.secondary { color: var(--jf-ink); border-color: var(--jf-line); }
	html .button.is-outline:hover { background-color: var(--jf-ink); border-color: var(--jf-ink); color: var(--jf-bg); }
	.is-form, input[type="submit"].is-form, input[type="button"].is-form, .quantity .button, .quantity input[type="number"] { background-color: var(--jf-field); color: var(--jf-ink); border-color: var(--jf-line); }
	.quantity .button:hover { background-color: var(--jf-line); color: var(--jf-ink); }
	.product-small .add-to-cart-button .button { color: var(--jf-ink); border-color: var(--jf-line); }
	.product-small .add-to-cart-button .button:hover { color: #fff; background: var(--jf-green-dark); border-color: var(--jf-green-dark); }
	.badge-container .badge-inner { color: #241a1c; }
	.back-to-top.button { box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }

	/* Product boxes and photos: photos keep their white backgrounds, softened by a small radius */
	.product-small .box-image, .product-gallery .woocommerce-product-gallery__image, .product-thumbnails a { border-radius: 4px; }
	.product-small .box-image { overflow: hidden; }
	.product-thumbnails a { background-color: var(--jf-cream); border-color: var(--jf-line); }
	.product-thumbnails .is-nav-selected a, .product-thumbnails a:hover { border-color: var(--jf-ink); }
	.box-image .out-of-stock-label { background: rgba(22, 20, 18, .9); color: var(--jf-ink); }
	.easyzoom-flyout { background: var(--jf-bg); }

	/* Tabs, accordions and tables */
	.nav-tabs > li > a { background-color: var(--jf-cream); border-color: var(--jf-line); color: var(--jf-text); }
	.nav-tabs > li.active > a { background-color: var(--jf-bg); color: var(--jf-ink); border-top-color: var(--jf-green); }
	.nav-tabs + .tab-panels, .tabbed-content .tab-panels { background-color: var(--jf-bg); border-color: var(--jf-line); }
	.nav-line > li > a, .nav-line-bottom > li > a, .product-tabs li a { color: var(--jf-text); }
	.product-tabs li.active > a { color: var(--jf-ink); }
	.accordion-title { border-color: var(--jf-line); color: var(--jf-ink); }
	.juneflower-faq summary, .juneflower-faq summary h3 { color: var(--jf-ink); }

	/* Notices, cart and checkout */
	.woocommerce-store-notice, p.demo_store { background: var(--jf-green-tint); color: var(--jf-ink); }
	.woocommerce-message, .woocommerce-info, .woocommerce-error, .message-container, .woocommerce-notices-wrapper .message-wrapper { color: var(--jf-ink); background-color: transparent; }
	.woocommerce-error, .woocommerce-error li { color: #ffb4ab; }
	.has-transparent + main > .message-wrapper { background-color: var(--jf-bg); }
	.widget_shopping_cart_content .blockUI.blockOverlay, .woocommerce-checkout-review-order .blockUI.blockOverlay, .blockUI.blockOverlay { background-color: rgba(22, 20, 18, .7) !important; }
	.cart-collaterals .cart_totals, .checkout-sidebar, .woocommerce-checkout-review-order, .col-inner.has-border { background: transparent; }
	.is-well { background-color: var(--jf-cream); }
	.woocommerce-checkout-payment, #payment, #payment .payment_methods, #payment .payment_box, .wc_payment_method .payment_box { background-color: transparent; color: var(--jf-text); }
	.woocommerce-checkout-payment .payment_box p, .payment_methods li label { color: var(--jf-text); }
	.juneflower-zalo-box { background: var(--jf-green-tint); border-color: var(--jf-green-dark); }
	.juneflower-zalo-summary { background: var(--jf-field); border-color: var(--jf-line); color: var(--jf-ink); }
	.juneflower-zalo-button.button { background-color: #0068ff; border-color: #0068ff; color: #fff; }
	.juneflower-toast { background: #f1ece5; color: #161412; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
	.juneflower-contact-price { color: var(--jf-green); }
	.checkout-page-title .nav > li > a, .breadcrumb-step { color: var(--jf-muted); }
	.checkout-page-title .nav > li.current > a, .checkout-page-title .nav > li > a.current { color: var(--jf-ink); }
	html .current .breadcrumb-step { background-color: var(--jf-ink); color: var(--jf-bg); }
	.woocommerce-terms-and-conditions { background-color: var(--jf-cream) !important; border-color: var(--jf-line) !important; }
	.page-title.shop-page-title, .category-page-title { background: var(--jf-cream); }
	.woocommerce-pagination .page-numbers li > a, .nav-pagination > li > a, .nav-pagination > li > span { border-color: var(--jf-line); color: var(--jf-ink); }
	html .nav-pagination > li > .current { background-color: var(--jf-green-dark); border-color: var(--jf-green-dark); color: #fff; }

	/* Footer */
	html .absolute-footer, html .absolute-footer.light { background-color: var(--jf-cream); color: var(--jf-muted); }
	.absolute-footer a, .footer-wrapper a { color: var(--jf-ink); }
	.footer-1, .footer-2 { border-top-color: var(--jf-line); }

	/* Share icons: Flatsome's near-black email and TikTok circles would vanish on the dark background */
	.share-icons .button.icon.email:not(.is-outline), .share-icons .button.icon.tiktok:not(.is-outline) { color: var(--jf-ink) !important; }
	.share-icons .button.icon.email:not(.is-outline) > i, .share-icons .button.icon.tiktok:not(.is-outline) > i { color: var(--jf-bg) !important; }

	/* Mobile bottom bar */
	.jf-bbar { box-shadow: 0 -6px 20px rgba(0, 0, 0, .4); }
	.jf-bbar-count { color: #10201a; }
}