:root {
  --u-accent: #197a58;
  --u-bg: #fff;
  --u-text: #17231f;
  --u-width: 1180px;
  --u-surface: #fff;
  --u-line: #dce4df;
  --u-muted: #66736d;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--u-bg); color: var(--u-text); }
.u-loading, .u-error { min-height: 100vh; display: grid; place-items: center; padding: 24px; font-family: Inter, Arial, sans-serif; }
.u-state { max-width: 560px; padding: 28px; border: 1px solid var(--u-line); border-radius: 14px; background: #fff; text-align: center; }
.u-state strong { display: block; font-size: 20px; margin-bottom: 8px; }
.u-state p { color: var(--u-muted); margin: 0; }

.u-page { min-height: 100vh; background: var(--u-bg); color: var(--u-text); overflow-x: clip; }
.u-ribbon { background: var(--u-accent); color: #fff; padding: 9px 18px; text-align: center; font: 700 12px/1.4 Inter, Arial, sans-serif; letter-spacing: .04em; }
.u-masthead { background: var(--u-surface); border-bottom: 1px solid var(--u-line); }
.u-masthead-inner { max-width: var(--u-width); margin: auto; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.u-brand { font: 800 22px/1.1 Georgia, serif; color: var(--u-text); text-decoration: none; }
.u-guide { color: var(--u-muted); font: 600 12px/1.2 Inter, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.u-main { max-width: var(--u-width); margin: 0 auto; padding: 28px 22px 110px; }
.u-block { position: relative; }
.u-block[hidden] { display: none !important; }
.u-block + .u-block { margin-top: 24px; }
.u-block-content:focus { outline: 2px solid var(--u-accent); outline-offset: 5px; border-radius: 4px; }

.u-page[data-preset="editorial"] .u-main { display: grid; grid-template-columns: minmax(0, 780px); justify-content: center; }
.u-page[data-preset="editorial"] .u-block + .u-block { margin-top: 10px; }
.u-page[data-preset="editorial"] .article-main { width: 100%; max-width: none; }
.u-page[data-preset="editorial"] .article-header { padding-top: 0; }
.u-page[data-preset="editorial"] .article-section { padding-left: 0; padding-right: 0; }

.u-product-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 36px; align-items: center; padding: 18px 0 30px; }
.u-gallery { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--u-line); }
.u-gallery-main { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.u-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.u-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; border-top: 1px solid var(--u-line); }
.u-thumb { flex: 0 0 58px; width: 58px; height: 58px; padding: 0; border: 1px solid var(--u-line); border-radius: 7px; background: #fff; overflow: hidden; }
.u-thumb.active { border-color: var(--u-accent); box-shadow: 0 0 0 1px var(--u-accent); }
.u-thumb img { width: 100%; height: 100%; object-fit: cover; }
.u-product-copy h1 { margin: 0 0 15px; font: 800 clamp(30px, 4vw, 52px)/1.08 Inter, Arial, sans-serif; }
.u-product-copy p { margin: 0 0 16px; color: var(--u-muted); font: 400 18px/1.65 Inter, Arial, sans-serif; }
.u-price { font: 800 24px/1.2 Inter, Arial, sans-serif; color: var(--u-accent); }

.u-rich { font: 400 18px/1.75 Georgia, serif; }
.u-rich > :first-child { margin-top: 0; }
.u-rich > :last-child { margin-bottom: 0; }
.u-image { margin: 0; text-align: center; }
.u-image img, .u-image-text img { max-width: 100%; height: auto; border-radius: 12px; }
.u-image-text { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 22px; border: 1px solid var(--u-line); border-radius: 14px; background: var(--u-surface); }
.u-image-text h2 { font: 800 28px/1.2 Inter, Arial, sans-serif; margin: 0 0 12px; }
.u-image-text p { font: 400 17px/1.7 Inter, Arial, sans-serif; margin: 0; }
.u-list { padding: 24px 30px 24px 48px; background: #fff; border: 1px solid var(--u-line); border-radius: 14px; font: 500 17px/1.65 Inter, Arial, sans-serif; }
.u-list li + li { margin-top: 10px; }
.u-quote { margin: 0; padding: 24px 28px; border-left: 5px solid var(--u-accent); background: color-mix(in srgb, var(--u-accent) 7%, #fff); font: 600 22px/1.5 Georgia, serif; }
.u-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.u-comparison article { padding: 22px; border: 1px solid var(--u-line); border-radius: 14px; background: #fff; }
.u-comparison h3 { margin-top: 0; }
.u-faq details { border: 1px solid var(--u-line); border-radius: 10px; padding: 14px 16px; background: #fff; }
.u-faq details + details { margin-top: 9px; }
.u-faq summary { cursor: pointer; font-weight: 750; }
.u-testimonials h2 { font: 800 30px/1.2 Inter, Arial, sans-serif; }
.u-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.u-testimonial { padding: 18px; border: 1px solid var(--u-line); border-radius: 13px; background: #fff; font: 400 14px/1.55 Inter, Arial, sans-serif; }
.u-testimonial strong { display: block; margin-bottom: 6px; }
.u-testimonial img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; float: left; margin: 0 11px 8px 0; }
.u-cta { padding: 32px; border-radius: 16px; text-align: center; background: color-mix(in srgb, var(--u-accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--u-accent) 30%, #fff); }
.u-cta h2 { font: 800 30px/1.2 Inter, Arial, sans-serif; margin: 0 0 10px; }
.u-cta p { font: 400 17px/1.6 Inter, Arial, sans-serif; margin: 0 0 20px; }
.u-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 22px; background: var(--u-accent); color: #fff !important; text-decoration: none; border-radius: 9px; font: 800 15px/1.2 Inter, Arial, sans-serif; border: 0; }
.u-page[data-button="pill"] .u-button { border-radius: 999px; }
.u-page[data-button="square"] .u-button { border-radius: 2px; }
.u-divider { border: 0; border-top: 1px solid var(--u-line); }
.u-spacer { height: var(--spacer, 40px); }

.u-editor-banner { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; color: #fff; background: #15251f; font: 650 12px/1.4 Inter, Arial, sans-serif; }
.u-editor .u-block { border: 1px dashed transparent; border-radius: 7px; }
.u-editor .u-block:hover, .u-editor .u-block.is-selected { border-color: var(--u-accent); }
.u-editor .u-block.is-selected::before { content: attr(data-block-type); position: absolute; z-index: 45; top: -11px; left: 8px; padding: 2px 7px; border-radius: 4px; background: var(--u-accent); color: #fff; font: 700 10px/1.4 Inter, Arial, sans-serif; }
.u-editor [data-edit-image] { cursor: pointer; }

@media (max-width: 760px) {
  .u-masthead-inner { padding: 13px 15px; }
  .u-main { padding: 18px 15px 90px; }
  .u-product-hero, .u-image-text, .u-comparison { grid-template-columns: 1fr; }
  .u-product-copy h1 { font-size: 32px; }
  .u-testimonial-grid { grid-template-columns: 1fr; }
  .u-cta { padding: 24px 18px; }
}