@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/public/be-vietnam-pro/BeVietnamPro-Regular-348e5941.woff2") format("woff2"); }
@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/public/be-vietnam-pro/BeVietnamPro-Medium-2815b6bb.woff2") format("woff2"); }
@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/public/be-vietnam-pro/BeVietnamPro-SemiBold-2e8fc99c.woff2") format("woff2"); }
@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/public/be-vietnam-pro/BeVietnamPro-Bold-f224c7b3.woff2") format("woff2"); }

/* Canonical Public tokens. No declarations escape the Public layout. */
.public-site {
  --ht-font-family:"Be Vietnam Pro", "Noto Sans", Arial, sans-serif;
  --ht-color-primary:#0053E2;
  --ht-color-primary-hover:#0042B5;
  --ht-color-primary-active:#00358F;
  --ht-color-ink:#102C54;
  --ht-color-text-muted:#4B5B70;
  --ht-color-bg:#FFFFFF;
  --ht-color-bg-subtle:#F3F7FC;
  --ht-color-bg-selected:#E7F0FF;
  --ht-color-border:#D6DFEA;
  --ht-color-control-border:#687A90;
  --ht-color-accent:#FFC220;
  --ht-color-error:#B42318;
  --ht-color-error-surface:#FFF3F1;
  --ht-color-success:#145C50;
  --ht-color-success-surface:#EDF7F5;
  --ht-color-warning:#805600;
  --ht-radius-control:.5rem;
  --ht-radius-card:.75rem;
  --ht-card-image-ratio:4 / 3;
  --ht-container-width:80rem;
  --ht-gutter:1.25rem;
  --ht-section-space:2.5rem;
  --ht-card-padding:1.25rem;
  --ht-space-1:.25rem;
  --ht-space-2:.5rem;
  --ht-space-3:.75rem;
  --ht-space-4:1rem;
  --ht-space-6:1.5rem;
  --ht-space-8:2rem;
  --ht-space-10:2.5rem;
  --ht-space-12:3rem;
  --ht-space-16:4rem;
  --ht-space-20:5rem;
  --public-text-body:1.125rem;
  --public-text-card:var(--public-text-body);
  --public-text-nav:1.0625rem;
  --public-text-button:1.0625rem;
  --public-text-small:1rem;
  --public-text-h1:2.125rem;
  --public-text-h2:1.75rem;
  --public-text-h3:1.375rem;
  --public-text-brand:1.375rem;
  --public-text-brand-caption:.75rem;
  --public-text-display:2.25rem;
  --public-leading-body:1.6;
  --public-leading-heading:1.3;
  --ht-text-lead:1.125rem;
  --ht-text-table:1rem;
  font-synthesis:none;
}
@media (min-width:768px) {
  .public-site {
    --ht-gutter:2rem;
    --ht-section-space:4rem;
    --ht-card-padding:1.5rem;
    --public-text-h1:2.625rem;
    --public-text-h2:1.875rem;
    --public-text-nav:1.125rem;
    --public-text-button:1.125rem;
    --ht-text-lead:1.25rem;
    --ht-text-table:1.125rem;
  }
}
@media (min-width:1024px) {
  .public-site {
    --ht-gutter:2.5rem;
    --public-text-h1:3.25rem;
    --public-text-h2:2.25rem;
    --public-text-h3:1.5rem;
  }
}
.public-site { font-size:var(--public-text-body); }
.public-site *, .public-site *::before, .public-site *::after { box-sizing:border-box; }
.public-site :is(input, textarea, select, button) { font-family:inherit; }
.public-site h1 { font-size:var(--public-text-h1); line-height:1.25; font-weight:700; }
.public-site h2 { font-size:var(--public-text-h2); line-height:1.3; font-weight:700; }
.public-site h3 { font-size:var(--public-text-h3); line-height:1.3; font-weight:600; }
.public-site :is(h1,h2,h3,p,li,summary) { letter-spacing:normal; }
.public-site :is(main p, .sg-copy) { text-align:left; }
.public-site main p { max-inline-size:65ch; }
.public-site :is(a, button, summary, input, select, textarea):focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; }
.public-site :is(button,summary) { touch-action:manipulation; }
.public-site main :is(section, [id], :focus) { scroll-margin-block:2rem calc(max(var(--ht-contact-bar-clearance,0px),7rem) + 1rem); }
/* The document scrolls these Public shells; padding on the shell cannot protect focus. */
html:has(> .public-site .ht-public-shell) { scroll-padding-block:6px calc(var(--ht-public-contact-clearance,0px) + 6px); }
/* Public-only type scale. Component styles consume these shared roles. */
.public-site { font-size:var(--public-text-body); }
.public-site :is(input, textarea, select) { font:inherit; font-size:var(--public-text-body); min-height:48px; }
.public-site :is(a, button, input, textarea, select, summary):focus-visible {
  outline:3px solid var(--ht-color-primary); outline-offset:3px;
}
.public-recovery h1 { font-size:var(--public-text-h1); line-height:1.25; }
.public-recovery p { max-width:min(65ch,750px); }

.public-site { margin:0; color-scheme:light; background:var(--ht-color-bg); color:var(--ht-color-ink); font-family:var(--ht-font-family); line-height:1.6; }
.public-recovery { max-width:56rem; margin:10vh auto; padding:2rem; }
.public-recovery a { color:var(--ht-color-primary); }
.public-skip { position:absolute; left:1rem; top:-10rem; z-index:10; background:var(--ht-color-bg); color:var(--ht-color-ink); padding:12px; }
.public-skip:focus { top:1rem; }

/* Keep larger navigation text clear of the brand and header action. */

/* Readability for tradespeople using phones on site. */

/* Balance both brand lines without scaling or condensing the lettering. */

/* Solid group overview; independent of homepage and OMS styles. */
.sg-page { --sg-blue:var(--ht-color-primary); --sg-ink:var(--ht-color-ink); color:var(--sg-ink); background:var(--ht-color-bg); font:var(--public-text-body)/var(--public-leading-body) var(--ht-font-family); }
.sg-page *, .sg-review * { box-sizing:border-box; }
.sg-page a { color:inherit; text-decoration:none; }
.sg-page a:focus-visible,.sg-review a:focus-visible,.sg-review input:focus-visible,.sg-review button:focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; }
.sg-wrap { max-width:var(--ht-container-width); padding-inline:var(--ht-gutter); margin-inline:auto; }
.sg-top { background:var(--ht-color-ink); color:white; font-size:var(--public-text-body); padding-block:9px; }
.sg-top .sg-wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sg-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:22px; }
.sg-brand { display:flex; align-items:center; gap:12px; font-size:var(--public-text-brand); font-weight:700; line-height:1.3; }
.sg-brand small { display:block; font-size:var(--public-text-brand-caption); letter-spacing:1px; }
.sg-header nav { display:flex; gap:24px; flex-wrap:wrap; }
.sg-hero { background:linear-gradient(120deg,var(--ht-color-bg-subtle),var(--ht-color-bg)); padding-block:24px 70px; border-block:1px solid var(--ht-color-border); }
.sg-breadcrumb { display:flex; gap:14px; flex-wrap:wrap; font-size:var(--public-text-small); margin-bottom:42px; }
.sg-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:center; }
.sg-eyebrow { font-size:var(--public-text-small); font-weight:600; letter-spacing:1.2px; color:var(--ht-color-primary); margin:0 0 16px; }
.sg-page h1 { font-size:var(--public-text-h1); line-height:1.25; letter-spacing:0; margin:0 0 24px; }
.sg-page h1 span { color:var(--ht-color-primary); }
.sg-page h2 { font-size:var(--public-text-h2); line-height:1.3; margin:0 0 24px; }
.sg-lead { margin:0 0 30px; }
.sg-actions { display:flex; gap:12px; flex-wrap:wrap; }
.sg-button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 20px; border:1px solid transparent; border-radius:var(--ht-radius-control); background:var(--ht-button-bg, var(--ht-color-primary)); color:var(--ht-color-bg); font:600 var(--public-text-button)/1.4 var(--ht-font-family); cursor:pointer; text-decoration:none; }
.sg-button.sg-outline { background:white; color:var(--ht-color-ink); border-color:var(--ht-color-control-border); }
.sg-hero-image { margin:0; border-radius:var(--ht-radius-card); overflow:hidden; background:white; box-shadow:0 22px 55px #153e6217; }
.sg-hero-image img { display:block; width:100%; height:auto; object-fit:contain; }
.sg-art { position:relative; height:330px; border-radius:var(--ht-radius-card); background:radial-gradient(ellipse at center,var(--ht-color-bg-subtle),var(--ht-color-bg-subtle) 70%); overflow:hidden; }
.sg-sheet { position:absolute; width:74%; height:55%; left:14%; top:22%; transform:rotate(-22deg) skew(12deg); border:2px solid var(--ht-color-border); border-bottom:8px solid var(--ht-color-border); border-radius:var(--ht-radius-card); background:linear-gradient(125deg,#ffffffbd,#81b7d855,#e9fcffff); box-shadow:0 22px 24px #1d426326; }
.sg-sheet-back { top:32%; left:10%; background:#b7dcea99; }
.sg-art>span { position:absolute; bottom:15px; right:20px; font-size:var(--public-text-body); }
.sg-content-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:64px; padding-block:72px; align-items:start; }
.sg-paragraph { white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 24px; }
.sg-advice { background:var(--ht-color-bg-subtle); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); padding:28px; }
.sg-advice h2 { font-size:var(--public-text-h2); }
.sg-small { font-size:var(--public-text-small); margin-bottom:0; }
.sg-gallery { padding-bottom:72px; }
.sg-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.sg-gallery figure { margin:0; background:var(--ht-color-bg-subtle); border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); overflow:hidden; }
.sg-gallery img { width:100%; height:auto; display:block; object-fit:contain; }
.sg-contact { padding-block:52px; background:var(--ht-color-ink); color:white; }
.sg-contact .sg-wrap { display:flex; justify-content:space-between; gap:32px; align-items:center; }
.sg-contact .sg-eyebrow { color:var(--ht-color-bg-subtle); }
.sg-contact p { margin-bottom:0; }
.sg-yellow { background:var(--ht-button-bg, var(--ht-color-primary)); color:var(--ht-color-bg); flex-shrink:0; }
.sg-footer { display:flex; flex-wrap:wrap; gap:16px 30px; padding-block:30px; font-size:var(--public-text-body); }
.sg-footer a { margin-left:auto; }
.sg-review { background:var(--ht-color-accent); border-bottom:2px solid var(--ht-color-border); padding-block:22px; color:var(--ht-color-ink); font:var(--public-text-body)/var(--public-leading-body) var(--ht-font-family); }
.sg-review h2 { font-size:var(--public-text-h2); }
.sg-review form { margin-block:12px; }
@media(max-width:760px) { .sg-header { flex-direction:column; align-items:flex-start; gap:18px; } .sg-header nav { gap:20px; } .sg-hero-grid,.sg-content-grid { grid-template-columns:1fr; gap:30px; } .sg-hero { padding-bottom:40px; } .sg-breadcrumb { margin-bottom:30px; } .sg-content-grid { padding-block:40px; } .sg-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sg-contact .sg-wrap { align-items:flex-start; flex-direction:column; } .sg-art { height:280px; } .sg-footer a { margin-left:0; } }
.sg-toc { border:1px solid var(--ht-color-border); background:var(--ht-color-bg); padding:22px; border-radius:var(--ht-radius-card); margin:0 0 32px; }
.sg-toc ul { padding-left:22px; margin-bottom:0; }
.sg-copy a { color:var(--ht-color-primary); }
.sg-copy .sg-article-heading { margin-top:36px; scroll-margin-top:24px; }
.sg-copy h3 { font-size:var(--public-text-h3); line-height:1.3; margin-bottom:12px; }
.sg-article-list { padding-left:24px; margin-bottom:26px; }
.sg-article-list li { margin-bottom:10px; }
.sg-thickness-section { padding-top:38px; }
.sg-thickness-nav { display:flex; flex-wrap:wrap; gap:10px; }
.sg-page a.sg-thickness-link { display:inline-flex; align-items:center; justify-content:center; padding:10px 17px; min-height:46px; border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); color:var(--ht-color-primary); background:var(--ht-color-bg); text-decoration:none; }
.sg-page a.sg-thickness-link[aria-current="page"] { background:var(--ht-color-primary); color:white; border-color:var(--ht-color-border); }
.sg-table-scroll { overflow-x:auto; border:1px solid var(--ht-color-border); border-radius:var(--ht-radius-card); margin-block:24px; }
.sg-spec-table { width:100%; border-collapse:collapse; text-align:left; }
.sg-spec-table th,.sg-spec-table td { padding:14px 16px; border-bottom:1px solid var(--ht-color-border); vertical-align:top; }
.sg-spec-table thead { background:var(--ht-color-bg-subtle); }

.sg-retail { padding-top: 24px; padding-bottom: 32px; }
.sg-price { color: var(--ht-color-primary); font-size:var(--public-text-body); }
.sg-gallery figcaption { padding: 12px 4px; line-height: 1.6; }
.sg-gallery a { display: block; }

.sg-carousel { min-width: 0; }
.sg-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--ht-radius-card); background: var(--ht-color-bg); }
.sg-carousel-slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.sg-carousel-slide a { display: block; }
.sg-carousel-slide img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; }
.sg-carousel-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.sg-carousel-controls[hidden] { display: none; }
.sg-carousel-controls button { width: 46px; height: 46px; border: 1px solid var(--ht-color-control-border); border-radius: var(--ht-radius-control); background: var(--ht-color-bg); color: var(--ht-color-primary); font-size:var(--public-text-button); cursor: pointer; }
.sg-carousel-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px; margin-top: 12px; }
.sg-carousel-thumbnails a { flex: 0 0 76px; border: 2px solid var(--ht-color-border); border-radius: var(--ht-radius-card); overflow: hidden; background: var(--ht-color-bg); }
.sg-carousel-thumbnails a[aria-current="true"] { border-color: var(--ht-color-border); box-shadow: 0 0 0 1px #0071ce; }
.sg-carousel-thumbnails img { display: block; width: 72px; height: 72px; object-fit: contain; }
.sg-carousel :focus-visible { outline: 3px solid var(--ht-color-primary); outline-offset: 3px; }

.sg-video { padding-block: 24px 48px; }
.sg-video-frame { aspect-ratio: 16 / 9; width: 100%; background: var(--ht-color-ink); border-radius: var(--ht-radius-card); overflow: hidden; }
.sg-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Group overview: keep purchasing choices ahead of the supporting article. */
.sg-overview .sg-hero { padding-bottom: 32px; }
.sg-overview .sg-breadcrumb { margin-bottom: 24px; }
.sg-overview h1 { font-size:var(--public-text-h1); letter-spacing: 0; }
.sg-overview .sg-hero-grid { grid-template-columns: 1.4fr 1fr; gap: 36px; }
.sg-selection { padding-block: 48px 24px; scroll-margin-top: 24px; }
.sg-selection > p { max-width: min(65ch,750px); }
.sg-selection-note { color: var(--ht-color-text-muted); font-size:var(--public-text-body); }
.sg-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.sg-product-card { min-width: 0; border: 1px solid var(--ht-color-border); border-radius: var(--ht-radius-card); overflow: hidden; display: flex; flex-direction: column; background: white; }
.sg-product-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--ht-color-bg); border-radius: var(--ht-radius-card); }
.sg-product-placeholder { display: grid; place-content: center; padding: 8px; box-sizing: border-box; text-align: center; color: var(--ht-color-text-muted); font-size:var(--public-text-body); overflow-wrap: anywhere; }
.sg-product-info { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.sg-product-title h3 { font-size:var(--public-text-h3); line-height:1.3; margin: 0 0 10px; }
.sg-product-price { color: var(--ht-color-primary); font-size:var(--public-text-body); margin: 0; }
.sg-product-price strong { display: block; font-size:var(--public-text-body); }
.sg-product-colors { font-size:var(--public-text-body); margin-bottom: 22px; }
.sg-product-colors > span { display: block; color: var(--ht-color-text-muted); margin-bottom: 10px; }
.sg-product-colors ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-product-colors li { background: var(--ht-color-bg-subtle); border-radius: var(--ht-radius-card); padding: 5px 9px; }
.sg-product-info .sg-button { margin-top: auto; font-size:var(--public-text-button); }
.sg-price-comparison { padding-bottom: 32px; }
.sg-price-comparison details { border: 1px solid var(--ht-color-border); border-radius: var(--ht-radius-card); }
.sg-price-comparison summary { padding: 18px 22px; cursor: pointer; color: var(--ht-color-primary); font-weight: 600; }
.sg-overview-reading { padding-block: 36px 56px; }
.sg-overview-reading .sg-copy { max-width: min(65ch,750px); margin-inline: auto; }
.sg-overview .sg-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-overview .sg-contact .sg-actions { flex-shrink: 0; max-width: 310px; }
.sg-overview summary:focus-visible { outline: 3px solid var(--ht-color-primary); outline-offset: 3px; }
@media (max-width: 1000px) {
  .sg-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sg-overview .sg-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .sg-product-grid { grid-template-columns: 1fr; gap: 20px; }
  .sg-selection { padding-top: 32px; }
  .sg-overview .sg-gallery-grid { grid-template-columns: 1fr; }
}

.sg-product-heading { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 16px; padding: 18px 18px 0; }
.sg-product-title { min-width: 0; overflow-wrap: anywhere; }
.sg-overview .sg-brand img { width: 72px; height: 72px; flex-shrink: 0; }
.sg-overview .sg-brand small { font-size:var(--public-text-brand-caption); letter-spacing: 0; white-space: nowrap; }
.sg-overview .sg-top .sg-wrap { justify-content: flex-end; }
.sg-purchase-policy { background: var(--ht-color-ink); color: var(--ht-color-bg); padding: 22px 28px; border-radius: var(--ht-radius-card); margin-bottom: 24px; }
.sg-purchase-policy p { margin: 0; }
.sg-purchase-policy p + p { margin-top: 6px; font-size:var(--public-text-body); }
.sg-learning { padding-top: 16px; }
.sg-learning-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sg-learning-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--ht-color-border); border-radius: var(--ht-radius-card); background: var(--ht-color-bg); }
@media (max-width: 760px) {
  .sg-overview .sg-brand img { width: 60px; height: 60px; }
  .sg-overview .sg-brand { font-size:var(--public-text-brand); }
  .sg-learning-links { grid-template-columns: 1fr; gap: 12px; }
  .sg-purchase-policy { padding: 20px; }
}

.sg-hero-pair { margin: 0; min-width: 0; }
.sg-hero-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-hero-photos a { display: block; min-width: 0; border-radius: var(--ht-radius-card); background: var(--ht-color-bg); }
.sg-hero-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--ht-radius-card); }
.sg-hero-photos a:only-child { grid-column: 1 / -1; width: 50%; justify-self: center; }
.sg-hero-pair figcaption { margin-top: 12px; font-size:var(--public-text-small); color: var(--ht-color-text-muted); }

.sg-fee-note { color: var(--ht-color-text-muted); font-size:var(--public-text-small); margin: -8px 0 28px; }

/* Original certificate pages keep every edge, signature and source mark visible. */
.sg-information-body { padding-top: 36px; padding-bottom: 36px; }
.sg-information-body > .sg-copy { max-width: min(65ch,750px); }
.sg-certificate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.sg-certificate { border: 1px solid var(--ht-color-border); border-radius: var(--ht-radius-card); overflow: hidden; background: var(--ht-color-bg); }
.sg-certificate > a { display: block; padding: 20px; background: var(--ht-color-bg-subtle); }
.sg-certificate img { display: block; width: 100%; height: auto; object-fit: contain; }
.sg-certificate > div { padding: 24px; }
.sg-certificate h2 { font-size:var(--public-text-h2); line-height:1.3; }
.sg-certificate p { line-height: 1.6; }
@media (max-width: 700px) { .sg-certificate-grid { grid-template-columns: 1fr; } .sg-certificate > div { padding: 18px; } }

.sg-page h3 { font-size:var(--public-text-h3); line-height:1.3; }
.sg-page h1 { font-weight:700; text-wrap:balance; letter-spacing:0; }
.sg-header nav { font-size:var(--public-text-body); font-weight:600; }
.sg-page :is(a, button, summary):focus-visible { outline:3px solid var(--ht-color-primary); outline-offset:3px; box-shadow:0 0 0 2px #fff; }
.sg-page .sg-button, .sg-page a.sg-thickness-link, .sg-carousel-controls button { min-height:48px; }
.sg-header nav a, .sg-footer a { display:inline-flex; align-items:center; min-height:48px; }
.sg-copy > p, .sg-lead { max-width:min(65ch,750px); }
.sg-product-card { font-size:var(--public-text-body); }
.sg-spec-table :is(th, td), .sg-product-price strong { font-variant-numeric:tabular-nums; }
.sg-hero-grid > *, .sg-contact .sg-wrap > * { min-width:0; }
.sg-contact .sg-wrap { flex-wrap:wrap; }
@media (max-width:900px) {
  .sg-hero-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:380px) {
  .sg-brand { flex-wrap:wrap; }
  .sg-page .sg-brand small { white-space:normal; }
}