/* =====================================================================
   Site Style "hybrid" (runviet-wp 4.47.0) -- shop site + hybrid product page.

   The body carries BOTH rv-style-hybrid and rv-style-shop, and three stylesheets load:
   - style-shop.css   site chrome (header, footer, home/search cards) and the marketplace
                      top of the product page: gallery, price band, buy box, store card,
                      spec table, order card + bottom sheet, buy bar, related grid;
   - style-brand.css  the long-form sales sections (.bx-*), whose bare class rules apply
                      as they are;
   - this file        the brand rules that style-brand.css hangs on body.rv-style-brand
                      (its design tokens and a few .rv-style-brand .bx-* rules), re-scoped
                      to the .hx-lp wrapper -- GENERATED below -- plus the seams between
                      the two halves, hand-written above the marker.
   ===================================================================== */

/* The long-form part sits in the shop body column like one more card, full width. */
body.rv-style-hybrid .hx-lp { display: block; margin: 8px 0 0; overflow: clip; }
body.rv-style-hybrid .hx-lp .bx-main { overflow-x: clip; }
body.rv-style-hybrid .hx-lp + .hx-lp { margin-top: 0; }

/* Shop parts dropped between brand sections (spec table) get the brand side gutter. */
body.rv-style-hybrid .hx-shop-slot { background: var(--st-bg, #fff); }

@media (min-width: 1024px) {
  /* In the desktop main column (next to the sticky buy card) the brand sections keep
     their own max widths; round the column so it reads as one sales page. */
  body.rv-style-hybrid .hx-lp { border-radius: 12px; }
}

/* Brand full-bleed rows align to the viewport (calc((100vw - 1120px) / 2 + gutter)).
   Here the sales page sits in a column next to the sticky buy card, so that offset
   pushed the review cards and the benefits banner copy hundreds of pixels right and
   under the sidebar (sookmart Flexvits, 1920 px). Align them to the column instead. */
@media (min-width: 768px) {
  body.rv-style-hybrid .hx-lp .bx-track { padding-left: var(--bx-gut); padding-right: var(--bx-gut); scroll-padding-left: var(--bx-gut); }
  body.rv-style-hybrid .hx-lp .bx-banner__copy { padding-left: var(--bx-gut); }
}

/* Brand switches to its wide layouts on the VIEWPORT (2-column benefits at 768, big
   collages and 3 side-by-side role cards at 1000). Next to the buy card the column is
   only ~680 px at 1024, so the benefit rows overflowed. Size those parts on the column. */
body.rv-style-hybrid .hx-lp { container: hxlp / inline-size; }
@container hxlp (max-width: 899px) {
  .hx-lp .bx-collage { width: 150px; height: 118px; }
  .hx-lp .bx-collage__p--0 { width: 90px; }
  .hx-lp .bx-collage__p--1 { width: 56px; }
  .hx-lp .bx-collage__p--2 { width: 50px; }
  .hx-lp .bx-usp__list { column-gap: 32px; }
  .hx-lp .bx-roles { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hx-lp .bx-role:not(:last-child)::after { left: 50%; right: auto; top: auto; bottom: -20px; width: 0; height: 20px; border-top: 0; border-left: 3px dashed var(--bx-ink); }
}
@container hxlp (max-width: 599px) {
  .hx-lp .bx-usp__list { grid-template-columns: minmax(0, 1fr); }
}

/* @generated:begin -- from style-brand.css by 02-tools/build-style-hybrid-css.py; do not edit by hand */
body.rv-style-hybrid .hx-lp {
  --bx-brand: var(--st-brand, #0E4D3F);
  --bx-ink: color-mix(in srgb, var(--bx-brand) 84%, #000);
  --bx-ink-deep: color-mix(in srgb, var(--bx-brand) 64%, #000);
  --bx-text: color-mix(in srgb, var(--st-text, #15201D) 20%, #111816);
  --bx-head: color-mix(in srgb, var(--st-heading, #15201D) 28%, #0F1513);
  --bx-muted: color-mix(in srgb, var(--bx-text) 74%, #fff);
  --bx-line: color-mix(in srgb, var(--bx-brand) 14%, #fff);
  --bx-g25: color-mix(in srgb, var(--bx-brand) 4%, #fff);
  --bx-g50: color-mix(in srgb, var(--bx-brand) 8%, #fff);
  --bx-g100: color-mix(in srgb, var(--bx-brand) 15%, #fff);
  --bx-g200: color-mix(in srgb, var(--bx-brand) 27%, #fff);
  --bx-g300: color-mix(in srgb, var(--bx-brand) 48%, #fff);
  --bx-cta: var(--st-cta, #D9481F);
  --bx-cta-hi: color-mix(in srgb, var(--bx-cta) 88%, #fff);
  --bx-cta-press: color-mix(in srgb, var(--bx-cta) 76%, #000);
  --bx-cta-soft: color-mix(in srgb, var(--bx-cta) 12%, #fff);
  --bx-on-cta: var(--st-on-cta, #fff);
  --bx-bg: var(--st-bg, #fff);
  --bx-star: #F2A516;
  --bx-star-off: color-mix(in srgb, var(--bx-brand) 12%, #E4E7E6);
  --bx-font: var(--st-font, system-ui, sans-serif);
  --bx-r-lg: 26px;
  --bx-r-md: 20px;
  --bx-r-sm: 14px;
  --bx-gut: 18px;
  --bx-ease: cubic-bezier(.22, 1, .36, 1);
  --bx-spring: cubic-bezier(.34, 1.4, .64, 1);
  --bx-shadow: 0 1px 2px color-mix(in srgb, var(--bx-ink) 8%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--bx-ink) 30%, transparent);
  --rv-illo-fill: var(--bx-g200);
  --rv-illo-paper: #fff;
  background: var(--bx-bg);
  color: var(--bx-text);
  font-family: var(--bx-font);
}
.rv-style-hybrid .bx-cta {
  display: flex; align-items: center; justify-content: center; gap: 2px; text-align: center; text-decoration: none;
  min-height: 56px; padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer; overflow: visible; isolation: auto;
  background: var(--bx-cta); color: var(--bx-on-cta); font: 800 18.5px/1.2 var(--bx-font); text-shadow: none; filter: none;
  box-shadow: 0 6px 0 var(--bx-cta-press), 0 14px 24px -10px color-mix(in srgb, var(--bx-cta) 55%, transparent);
  transition: transform .18s var(--bx-ease), box-shadow .18s var(--bx-ease), background .2s;
}
.rv-style-hybrid .bx-cta::before,
.rv-style-hybrid .bx-cta::after { content: none; display: none; }
.rv-style-hybrid .bx-cta:hover { background: var(--bx-cta-hi); transform: none; filter: none; box-shadow: 0 6px 0 var(--bx-cta-press), 0 14px 24px -10px color-mix(in srgb, var(--bx-cta) 55%, transparent); }
.rv-style-hybrid .bx-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bx-cta-press), 0 6px 14px -8px color-mix(in srgb, var(--bx-cta) 50%, transparent); }
.rv-style-hybrid .bx-cta--xl { width: 100%; min-height: 64px; font-size: 20.5px; flex-direction: column; padding: 10px 20px; }
.rv-style-hybrid .bx-cta--light { display: inline-flex; background: #fff !important; color: var(--bx-ink); box-shadow: 0 6px 0 var(--bx-g300); }
.rv-style-hybrid .bx-cta--light:hover { background: var(--bx-g50) !important; box-shadow: 0 6px 0 var(--bx-g300); }
.rv-style-hybrid .bx-order .rv-order-form { margin-top: 16px; display: block; background: none; padding: 0; box-shadow: none; border: 0; }
.rv-style-hybrid .bx-order--pkgs .rv-single-product { display: none; }
.rv-style-hybrid .bx-order .rv-single-product { margin: 4px 0 14px; padding: 12px 14px; background: var(--bx-g25); border: 1.5px solid var(--bx-line); border-radius: 16px; }
.rv-style-hybrid .bx-order .rv-single-product__media { display: none; }
.rv-style-hybrid .bx-order .rv-single-product__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.rv-style-hybrid .bx-order .rv-single-product__name { grid-column: 1; margin: 0 0 4px; font-family: var(--bx-font); color: var(--bx-head); }
.rv-style-hybrid .bx-order .rv-single-product__badge { grid-column: 1; justify-self: start; margin: 0; background: var(--bx-g100); color: var(--bx-ink); }
.rv-style-hybrid .bx-order .rv-single-product__price-row { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; text-align: right; }
.rv-style-hybrid .bx-order .rv-single-product__price { font: 900 32px/1 var(--bx-font); color: var(--bx-head); text-align: right; }
.rv-style-hybrid .bx-order .rv-single-product__strike { font-size: 16px; }
.rv-style-hybrid .bx-order .rv-single-product__pill { font-size: 14px; padding: 2px 10px; background: var(--bx-cta); color: var(--bx-on-cta); }
.rv-style-hybrid .bx-order .rv-single-product__badge { white-space: nowrap; }
@media (max-width: 479px) {
  .rv-style-hybrid .bx-order .rv-single-product__info { grid-template-columns: minmax(0, 1fr); }
  .rv-style-hybrid .bx-order .rv-single-product__price-row { grid-column: 1; grid-row: auto; justify-content: flex-start; text-align: left; margin-top: 8px; }
  .rv-style-hybrid .bx-order .rv-single-product__price { text-align: left; }
}
.rv-style-hybrid .bx-order .rv-single-fieldshead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; font-size: 16.5px; color: var(--bx-head); }
.rv-style-hybrid .bx-order .rv-single-fieldshead svg { display: none; }
.rv-style-hybrid .bx-order .rv-field { margin-bottom: 12px; }
.rv-style-hybrid .bx-order .rv-field__wrap { background: var(--bx-g25); border: 2px solid var(--bx-line); border-radius: 16px; min-height: 58px; }
.rv-style-hybrid .bx-order .rv-field__label { background: var(--bx-g25); color: var(--bx-muted); font-family: var(--bx-font); font-size: 16.5px; }
.rv-style-hybrid .bx-order .rv-field__input { font-family: var(--bx-font); font-size: 17.5px; color: var(--bx-text); }
.rv-style-hybrid .bx-order .rv-field__icon { color: var(--bx-g300); }
.rv-style-hybrid .bx-order .rv-field__wrap:focus-within { border-color: var(--bx-ink); box-shadow: 0 0 0 4px var(--bx-g100); background: #fff; }
.rv-style-hybrid .bx-order .rv-field__wrap:focus-within .rv-field__label { background: #fff; }
.rv-style-hybrid .bx-order .rv-field__input:focus + .rv-field__label,
.rv-style-hybrid .bx-order .rv-field__input:not(:placeholder-shown) + .rv-field__label { color: var(--bx-ink); }
.rv-style-hybrid .bx-order .rv-field__wrap:focus-within .rv-field__icon { color: var(--bx-ink); }
.rv-style-hybrid .bx-order .rv-field--error .rv-field__wrap { border-color: var(--bx-cta); background: var(--bx-cta-soft); }
.rv-style-hybrid .bx-order .rv-field__error { color: var(--bx-cta-press); }
.rv-style-hybrid .bx-order .rv-order-form .rv-btn-primary--full {
  width: 100%; min-height: 64px; margin-top: 6px; border-radius: 999px; background: var(--bx-cta); color: var(--bx-on-cta);
  font: 800 20px/1.2 var(--bx-font); text-transform: none; letter-spacing: 0; text-shadow: none; filter: none; overflow: visible;
  box-shadow: 0 6px 0 var(--bx-cta-press), 0 14px 24px -10px color-mix(in srgb, var(--bx-cta) 55%, transparent);
  transition: transform .18s var(--bx-ease), box-shadow .18s var(--bx-ease), background .2s;
  animation: none;
}
.rv-style-hybrid .bx-order .rv-order-form .rv-btn-primary--full .rv-btn-primary__label { text-transform: none; letter-spacing: 0; font: inherit; font-size: 20px !important; }
.rv-style-hybrid .bx-order .rv-order-form .rv-btn-primary--full::before,
.rv-style-hybrid .bx-order .rv-order-form .rv-btn-primary--full::after { content: none; display: none; }
.rv-style-hybrid .bx-order .rv-order-form .rv-btn-primary--full:hover { background: var(--bx-cta-hi); transform: none; }
.rv-style-hybrid .bx-order .rv-order-form .rv-btn-primary--full:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bx-cta-press); }
.rv-style-hybrid .bx-order .rv-btn-primary__icon-trailing { background: color-mix(in srgb, var(--bx-on-cta) 22%, transparent); color: var(--bx-on-cta); }
.rv-style-hybrid .bx-order .rv-single-notes { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.rv-style-hybrid .bx-order .rv-single-notes__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--bx-muted); }
.rv-style-hybrid .bx-order .rv-single-notes__item svg { width: 20px; height: 20px; color: var(--bx-ink); }
.rv-style-hybrid .bx-order .rv-single-notes__link { color: var(--bx-ink); }
.rv-style-hybrid .bx-sticky__cta { min-height: 50px; padding: 10px 22px; font-size: 18px; box-shadow: 0 4px 0 var(--bx-cta-press); }
@media (min-width: 768px) {
  body.rv-style-hybrid .hx-lp { --bx-gut: 32px; }
}
.rv-style-hybrid .bx-cta--light.is-disabled,
.rv-style-hybrid .bx-cta--light.is-disabled:hover {
  background: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
}
/* @generated:end */