@layer jf-bricks-foundation {  :root { --jf-flow-space: var(--jf-space-block, 2.4rem); --jf-cq-tablet: 991px; --jf-cq-mobile-ls: 767px; --jf-cq-mobile: 478px; }  body { background: var(--jf-color-bg); color: var(--jf-color-text); } a:not(.bricks-button) { text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; }  section.brxe-section { width: 100%; container-type: inline-size; }   .jf-stack { display: flex; flex-direction: column; gap: var(--gap, var(--jf-space-md)); }  .jf-cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--jf-space-sm)); align-items: var(--align, center); justify-content: var(--justify, flex-start); }  .jf-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap, var(--jf-gap-grid)); } @container (max-width: 991px) { .jf-grid { grid-template-columns: repeat(var(--cols-tablet, 2), minmax(0, 1fr)); } } @container (max-width: 767px) { .jf-grid { grid-template-columns: repeat(var(--cols-mobile-ls, 1), minmax(0, 1fr)); } } @container (max-width: 478px) { .jf-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)); } }  .jf-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col, 280px), 100%), 1fr)); gap: var(--gap, var(--jf-gap-grid)); }  .jf-sidebar { display: flex; flex-wrap: wrap; gap: var(--gap, var(--jf-gap-grid)); } .jf-sidebar> :first-child { flex-basis: var(--sidebar-width, 300px); flex-grow: 1; } .jf-sidebar> :last-child { flex-basis: 0; flex-grow: 999; min-width: var(--content-min, 50%); }  .jf-center { width: 100%; max-width: var(--max, var(--jf-container-content)); margin-inline: auto; padding-inline: var(--pad, var(--jf-space-container-inline)); }  .jf-cover { display: flex; flex-direction: column; justify-content: center; min-height: var(--min-h, 100svh); padding-block: var(--pad, var(--jf-space-2xl)); }   .jf-display { font-size: var(--jf-text-h1); line-height: 1.05; text-wrap: balance; }  .jf-prose { max-width: var(--jf-container-prose); line-height: 1.7; }  .jf-label { font-size: var(--jf-text-xs); font-weight: var(--jf-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }  .jf-overline { font-size: var(--jf-text-xs); font-weight: var(--jf-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--jf-color-primary); line-height: 1; }  .jf-flow>*+* { margin-top: var(--jf-flow-space); } .jf-text-balance { text-wrap: balance; } .jf-hide-overflow { overflow: hidden; } .jf-surface-soft { background: var(--jf-color-surface-soft); } .jf-text-muted { color: var(--jf-color-muted); } @supports (container-type: inline-size) { .jf-cq { container-type: inline-size; } .jf-cq-page { container: jf-page / inline-size; } } }  @layer jf-pages { :root { --zz-single-max: 1288px; --zz-gallery-blue: #8fc6f4; } .zz-section { width: 100%; padding-block: 64px; } .zz-container { width: 100%; max-width: var(--zz-single-max); margin-inline: auto; padding-inline: clamp(20px, 4vw, 64px); } .zz-product-hero { display: grid; grid-template-columns: minmax(0, 840px) 408px; gap: 40px; align-items: start; background: #fff; } .zz-gallery-main { position: relative; background: var(--zz-gallery-blue); aspect-ratio: 840 / 558; display: grid; place-items: center; overflow: hidden; } .zz-gallery-main img { max-width: 72%; max-height: 78%; object-fit: contain; } .zz-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: #fff; border: 1px solid var(--zz-primary-300, #67adf0); color: var(--zz-primary-700, #105aa0); font-weight: 700; } .zz-gallery-nav--left { left: 16px; } .zz-gallery-nav--right { right: 16px; } .zz-thumbs { display: flex; gap: 16px; margin-top: 16px; } .zz-thumb { width: 120px; aspect-ratio: 1; background: #fff; border: 1px solid var(--zz-neutral-200, #d2d2d2); display: grid; place-items: center; overflow: hidden; } .zz-thumb:first-child { border: 3px solid var(--zz-primary-500, #1b85e8); } .zz-thumb img { width: 100%; height: 100%; object-fit: cover; } .zz-product-kicker { font-size: var(--zz-text-body-3, 12px); line-height: var(--zz-leading-body-3, 18px); font-weight: 700; text-transform: uppercase; color: var(--zz-neutral-500, #777777); letter-spacing: .02em; margin: 0 0 4px; } .zz-product-title { font-size: var(--zz-text-h1, 34px); line-height: var(--zz-leading-h1, 44px); font-weight: 700; color: var(--zz-neutral-800, #333333); margin: 0; } .zz-product-copy { font-size: var(--zz-text-body-1, 16px); line-height: var(--zz-leading-body-1, 24px); color: var(--zz-neutral-600, #606060); margin: 20px 0; } .zz-divider { height: 1px; background: var(--zz-neutral-200, #d2d2d2); margin: 20px 0; } .zz-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .zz-stat { border-radius: 6px; padding: 8px 16px; } .zz-stat-label { font-size: var(--zz-text-body-4, 10px); line-height: var(--zz-leading-body-4, 16px); font-weight: 700; text-transform: uppercase; color: var(--zz-neutral-500, #777777); margin: 0 0 2px; } .zz-stat-value { font-size: var(--zz-text-body-1, 16px); line-height: var(--zz-leading-body-1, 24px); font-weight: 700; color: var(--zz-neutral-800, #333333); margin: 0; } .zz-config-card { border: 1px solid var(--zz-neutral-200, #d2d2d2); border-radius: 6px; padding: 17px; margin-top: 20px; } .zz-config-title { font-size: var(--zz-text-body-3, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; } .zz-swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .zz-swatch-label { font-size: var(--zz-text-body-4, 10px); font-weight: 700; text-transform: uppercase; color: var(--zz-neutral-500, #777777); margin: 0 0 8px; } .zz-swatches { display: flex; gap: 8px; margin-bottom: 6px; } .zz-swatch { width: 24px; height: 24px; border: 1px solid var(--zz-neutral-300, #bbbbbb); border-radius: 2px; } .zz-swatch--black { background: #232323; } .zz-swatch--white { background: #fff; } .zz-swatch--satin { background: #cfcfcf; } .zz-swatch--gray { background: #8e8e8e; } .zz-swatch--light { background: #e8e8e8; } .zz-swatch--med { background: #bbbbbb; } .zz-swatch-note { font-size: var(--zz-text-body-4, 10px); line-height: var(--zz-leading-body-4, 16px); color: var(--zz-neutral-500, #777777); margin: 0; } .zz-addons { border-top: 1px solid var(--zz-neutral-200, #d2d2d2); margin-top: 16px; padding-top: 12px; } .zz-tags { display: flex; flex-wrap: wrap; gap: 8px 12px; } .zz-tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--zz-neutral-200, #d2d2d2); border-radius: 999px; padding: 5px 12px; font-size: var(--zz-text-body-3, 12px); line-height: var(--zz-leading-body-3, 18px); color: var(--zz-neutral-700, #4a4a4a); } .zz-tag::before { content: "+"; color: var(--zz-primary-600, #146fc6); font-weight: 700; } .zz-btn, .zz-card-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; background: var(--zz-primary-700, #105aa0); color: #fff; font-size: var(--zz-text-body-1, 16px); font-weight: 700; text-decoration: none; border: 0; } .zz-btn { width: 100%; margin-top: 20px; } .zz-muted-section { background: var(--zz-neutral-100, #e8e8e8); } .zz-heading { font-size: var(--zz-text-h2, 28px); line-height: var(--zz-leading-h2, 40px); font-weight: 700; color: var(--zz-neutral-800, #333333); margin: 0; } .zz-subtitle { font-size: var(--zz-text-body-1, 16px); line-height: var(--zz-leading-body-1, 24px); color: var(--zz-neutral-600, #606060); margin: 8px 0 0; } .zz-spec-panel { background: #fff; padding: 24px; margin-top: 32px; } .zz-spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; } .zz-spec-row { display: grid; grid-template-columns: 100px 1fr; gap: 24px; font-size: var(--zz-text-body-2, 14px); line-height: var(--zz-leading-body-2, 21px); color: var(--zz-neutral-600, #606060); } .zz-spec-row strong { font-weight: 700; color: var(--zz-neutral-700, #4a4a4a); } .zz-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; } .zz-feature-card { border: 1px solid var(--zz-neutral-200, #d2d2d2); border-radius: 6px; padding: 25px; background: #fff; } .zz-icon-box { width: 44px; height: 44px; border-radius: 8px; background: var(--zz-secondary-400, #abaf68); color: #fff; display: grid; place-items: center; font-weight: 700; margin-bottom: 16px; } .zz-feature-title { font-size: var(--zz-text-body-1, 16px); line-height: var(--zz-leading-body-1, 24px); font-weight: 700; color: var(--zz-neutral-800, #333333); margin: 0 0 8px; } .zz-feature-copy { font-size: var(--zz-text-body-2, 14px); line-height: var(--zz-leading-body-2, 21px); color: var(--zz-neutral-600, #606060); margin: 0; } .zz-suite-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; } .zz-suite-card { background: #fff; border: 1px solid var(--zz-neutral-200, #d2d2d2); border-radius: 6px; overflow: hidden; } .zz-suite-card-img { aspect-ratio: 305 / 229; background: var(--zz-primary-700, #105aa0); display: grid; place-items: center; overflow: hidden; } .zz-suite-card-img img { width: 100%; height: 100%; object-fit: cover; } .zz-suite-card-body { padding: 16px; } .zz-suite-type { font-size: var(--zz-text-body-4, 10px); line-height: var(--zz-leading-body-4, 16px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zz-neutral-500, #777777); margin: 0; } .zz-suite-size { font-size: var(--zz-text-h3, 24px); line-height: var(--zz-leading-h3, 36px); font-weight: 700; color: var(--zz-neutral-900, #232323); margin: 4px 0 20px; } .zz-card-btn { width: 100%; } .zz-cta { position: relative; overflow: hidden; color: #fff; text-align: center; min-height: 300px; display: grid; place-items: center; } .zz-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .zz-cta-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; align-items: center; padding-inline: 24px; } .zz-cta-title { font-size: var(--zz-text-h1, 34px); line-height: var(--zz-leading-h1, 44px); font-weight: 700; margin: 0; } .zz-cta-copy { font-size: var(--zz-text-body-1, 16px); line-height: var(--zz-leading-body-1, 24px); color: var(--zz-primary-100, #dfefff); margin: 0; } .zz-cta-btn { background: var(--zz-secondary-400, #abaf68); color: #fff; padding: 12px 24px; text-decoration: none; font-weight: 700; font-size: var(--zz-text-body-1, 16px); } @container (max-width: 991px) { .zz-product-hero { grid-template-columns: 1fr; gap: 32px; } .zz-gallery-main img { max-width: 80%; } .zz-feature-grid, .zz-suite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zz-spec-list { grid-template-columns: 1fr; } } @container (max-width: 767px) { .zz-section { padding-block: 48px; } .zz-container { padding-inline: 24px; } .zz-spec-grid, .zz-swatch-grid, .zz-feature-grid, .zz-suite-grid { grid-template-columns: 1fr; } .zz-gallery-main { aspect-ratio: 4 / 3; } .zz-thumbs { overflow-x: auto; } .zz-spec-row { grid-template-columns: 1fr; gap: 4px; } .zz-product-title { font-size: 28px; line-height: 40px; } } @container (max-width: 478px) { .zz-container { padding-inline: 20px; } .zz-product-hero { gap: 24px; } .zz-gallery-main img { max-width: 92%; } .zz-thumb { width: 84px; } } }