/* Shared by the front end and block editor. Each section works independently. */
.icy-system-section {
    --icy-system-gap: clamp(24px, 5vw, 80px);
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: clamp(40px, 5vw, 80px) 0;
    background: #fff;
    color: var(--icy-ink, #223d40);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}
.icy-system-section *, .icy-system-section *::before, .icy-system-section *::after { box-sizing: inherit; }
.icy-system-section :where(p, figure, .wp-block-group, .wp-block-buttons, h1, h2, h3) { margin: 0; }
.icy-system-section .wp-block-group > * { margin-block-start: 0; }
.icy-system-section :where(h1, h2, h3) { color: var(--icy-dark, var(--ast-global-color-0)); line-height: 1.2; letter-spacing: -.025em; }
.icy-system-section h1 { font-size: clamp(30px, 3vw, 44px); font-weight: 700; }
.icy-system-section h2 { font-size: clamp(25px, 2.5vw, 34px); font-weight: 600; }
.icy-system-section h3 { font-size: 20px; font-weight: 700; }
.icy-system-section p + p { margin-top: 16px; }
.icy-system-section img { display: block; max-width: 100%; width: 100%; height: auto; }
.icy-system-section .icy-system-container { width: min(var(--icy-width, 1400px), calc(100% - var(--icy-gutter, 20px) * 2)); max-width: none; margin-inline: auto; }
.icy-system-section .icy-system-copy > * + * { margin-top: 24px; }
.icy-system-section .icy-system-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--icy-system-gap); }
.icy-system-section .icy-system-split > * { min-width: 0; }
.icy-system-section .icy-system-split > figure img { aspect-ratio: 1.5; object-fit: cover; }
.icy-system-section .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.icy-system-section .wp-block-button__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 12px 24px; border: 0; border-radius: 100px;
    background: var(--icy-button, #007b80); color: #fff; box-shadow: none;
    text-decoration: none; font-size: 15px; line-height: 1.4;
}
.icy-system-section .wp-block-button__link:hover { background: #005b61; color: #fff; }
.icy-system-section a:focus-visible { outline: 3px solid #bc297a; outline-offset: 5px; }
.icy-system-section[id] { scroll-margin-top: 30px; }

/* Large image with the design's curved edge and floating information card. */
.icy-system-hero { min-height: 660px; display: flex; align-items: center; isolation: isolate; overflow: hidden; background: var(--icy-brand, #00adb0); }
/* Equal horizontal/vertical radii form a circular end, regardless of image width. */
.icy-system-hero > .icy-system-hero-media { position: absolute; z-index: -1; inset: 0 27% 0 0; overflow: hidden; border-radius: 0 9999px 9999px 0; }
.icy-system-hero > .icy-system-hero-media img { height: 100%; object-fit: cover; }
.icy-system-hero .icy-system-hero-inner { display: flex; justify-content: flex-end; }
.icy-system-hero .icy-system-hero-card { width: min(510px, 100%); padding: clamp(25px, 3vw, 40px); border-radius: 20px; background: #f2fcfb; box-shadow: 4px 5px 12px #00383b38; }
.icy-system-hero .icy-system-hero-card > * + * { margin-top: 22px; }
.icy-system-hero .wp-block-button__link { border-radius: 8px; }
.icy-system-benefits { padding-block: 50px; --icy-system-section-padding: 50px 0; }
.icy-system-benefits .icy-system-split { grid-template-columns: 1fr 1.4fr; }
.icy-system-benefits .icy-system-split > figure img { height: 425px; object-fit: contain; }
.icy-system-section .icy-system-checks { padding: 0; margin: 24px 0 0; list-style: none; }
.icy-system-checks li { position: relative; padding-left: 30px; margin-block: 12px; }
.icy-system-checks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: #00B1B0; }

/* Turquoise section background from the supplied design. */
.icy-system-tone { background: var(--ast-global-color-0); color: #fff; }
.icy-system-tone :where(h2, h3) { color: #fff; }
.icy-system-tone .wp-block-button__link { background: #fff; color: var(--ast-global-color-0); }
.icy-system-tone .wp-block-button__link:hover { background: #e7f6f5; color: #164f50; }
.icy-system-section .icy-system-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 4vw, 60px); }
.icy-system-section .icy-system-feature { min-width: 0; }
.icy-system-feature > figure { width: 140px; margin: 0 auto 24px; }
.icy-system-feature h3 { text-align: center; margin-bottom: 24px; }
.icy-system-feature p { font-size: 15px; }
.icy-system-software, .icy-system-revenue { display: grid; grid-template-columns: 1fr 1fr; padding: 0; align-items: stretch; }
.icy-system-software > .icy-system-copy, .icy-system-revenue > .icy-system-copy { padding: clamp(35px, 5vw, 80px); align-self: center; }
.icy-system-software > .icy-system-software-media { overflow: hidden; border-radius: 0 9999px 9999px 0; }
.icy-system-software > figure img, .icy-system-revenue > figure img { height: 100%; min-height: 420px; object-fit: cover; }
.icy-system-revenue { background: var(--ast-global-color-0); color: #fff; }
.icy-system-revenue h2 { color: #fff; }
.icy-system-section.icy-system-options, .icy-system-section.icy-system-related, .icy-system-section.icy-system-customers { text-align: center; }
.icy-system-options h2, .icy-system-related h2, .icy-system-customers h2 { margin-bottom: 45px; }
.icy-system-product h3 { font-size: 16px; margin-top: 14px; }
.icy-system-product img { height: 150px; object-fit: contain; }
.icy-system-section .icy-system-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.icy-system-logo { display: flex; align-items: center; justify-content: center; min-height: 105px; padding: 15px; border: 1px solid #c8dedc; color: #587174; }
.icy-system-logo img { max-height: 100px; object-fit: contain; }
.icy-system-section .icy-system-integrations-list { columns: 2; column-gap: 32px; padding-left: 22px; margin: 0; }
.icy-system-integrations-list li { break-inside: avoid; margin-bottom: 12px; }
.icy-system-contact { isolation: isolate; overflow: hidden; text-align: center; }
.icy-system-contact > .icy-system-contact-media { position: absolute; inset: 0; z-index: -2; }
.icy-system-contact > .icy-system-contact-media img { height: 100%; object-fit: cover; }
.icy-system-contact::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fffffff0; }
.icy-system-contact .wp-block-buttons, .icy-system-related .wp-block-buttons { justify-content: center; }
.icy-system-page .entry-content > .icy-system-section { max-width: none; margin-block: 0; }
/* Astra gives top-level groups its own padding. Keep these sections full bleed. */
.entry-content > .wp-block-group.icy-system-section { padding: var(--icy-system-section-padding, clamp(40px, 5vw, 80px) 0); }
.icy-system-software, .icy-system-revenue { --icy-system-section-padding: 0; }

/* Preserve the native Astra Header Builder; overlay only on this template. */
@media (min-width: 922px) {
    /* Align copy to the navigation edges while photographs stay full bleed. */
    .icy-system-software > .icy-system-copy { padding-right: max(var(--icy-gutter, 20px), calc((100vw - var(--icy-width, 1400px)) / 2)); }
    .icy-system-revenue > .icy-system-copy { padding-left: max(var(--icy-gutter, 20px), calc((100vw - var(--icy-width, 1400px)) / 2)); }
    .icy-system-page .site-header { position: absolute; inset: 0 0 auto; z-index: 50; width: 100%; background: transparent; }
    .icy-system-page .icy-system-hero { padding-top: 210px; --icy-system-section-padding: 210px 0 80px; }
}
@media (max-width: 921px) {
    .icy-system-section { --icy-system-gap: 30px; }
    .icy-system-section .icy-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
    .icy-system-section .icy-system-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .icy-system-hero { min-height: 620px; padding-top: 300px; --icy-system-section-padding: 300px 0 50px; }
    .icy-system-hero > .icy-system-hero-media { inset: 0 0 140px; }
    .icy-system-hero .icy-system-hero-inner { justify-content: center; }
    .icy-system-software, .icy-system-revenue { grid-template-columns: 1fr; }
    .icy-system-software > figure img, .icy-system-revenue > figure img { height: 320px; min-height: 0; }
}
@media (max-width: 600px) {
    .icy-system-section { --icy-system-gap: 22px; }
    .icy-system-section .icy-system-split, .icy-system-benefits .icy-system-split { grid-template-columns: 1fr; gap: 30px; }
    .icy-system-section .icy-system-grid { grid-template-columns: 1fr; }
    .icy-system-feature { max-width: 360px; margin-inline: auto; }
    .icy-system-feature p { text-align: center; }
    .icy-system-section .icy-system-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .icy-system-section .icy-system-integrations-list { columns: 1; }
    .icy-system-hero { min-height: 0; padding-top: 240px; --icy-system-section-padding: 240px 0 40px; }
    .icy-system-hero > .icy-system-hero-media { inset: 0 0 180px; border-radius: 0 0 35% 0; }
}

/* Three features per desktop row; other product grids keep four columns. */
@media (min-width: 922px) {
    .icy-system-section.icy-system-features .icy-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* WooCommerce category carousel, also usable outside a system-page section. */
.icy-product-slider { --icy-slider-gap: 24px; margin-block: 24px; }
.icy-product-slider .icy-product-slider-track { position: relative; display: flex; gap: var(--icy-slider-gap); overflow-x: auto; margin: 0; padding: 4px 2px 12px; list-style: none; scrollbar-width: none; }
.icy-product-slider-track::-webkit-scrollbar { display: none; }
.icy-product-slider .icy-product-slider-card { flex: 0 0 calc((100% - 3 * var(--icy-slider-gap)) / 4); min-width: 0; margin: 0; padding: 0; list-style: none; }
.icy-product-slider-card > a { display: block; padding: 16px; color: var(--icy-dark, var(--ast-global-color-0)); text-decoration: none; text-align: center; border-radius: 12px; }
.icy-product-slider-card > a:hover { background: #f4f8f8; }
.icy-product-slider-image { display: flex; align-items: center; justify-content: center; height: 180px; margin-bottom: 18px; }
.icy-product-slider .icy-product-slider-image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.icy-product-slider-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; }
.icy-product-slider-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.icy-product-slider-controls[hidden] { display: none; }
.icy-product-slider-controls button { padding: 8px 16px; border: 1px solid #d4e6e4; border-radius: 100px; background: #fff; color: var(--icy-dark, var(--ast-global-color-0)); font: inherit; cursor: pointer; }
.icy-product-slider-controls button:hover { background: #e7f6f5; }
.icy-product-slider :is(a, button):focus-visible { outline: 2px solid var(--icy-dark, var(--ast-global-color-0)); outline-offset: -2px; }
@media (max-width: 921px) { .icy-product-slider .icy-product-slider-card { flex-basis: calc((100% - var(--icy-slider-gap)) / 2); } }
@media (max-width: 540px) { .icy-product-slider .icy-product-slider-card { flex-basis: 100%; } }

/* Brochure-style control options: independently editable columns. */
.icy-system-options .icy-system-option-columns,
.icy-system-section.icy-system-options .icy-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px; }
.icy-system-option-column { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.icy-system-options .icy-system-option,
.icy-system-options .icy-system-product { min-width: 0; padding: 26px 20px 26px 32px; border-radius: 12px; background: #f4f4f4; text-align: left; }
.icy-system-options .icy-system-option { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 20px; }
.icy-system-option > figure { grid-column: 2; grid-row: 1; margin: 0; }
.icy-system-option-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.icy-system-options :is(.icy-system-option, .icy-system-product) h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; color: var(--icy-brand, #00adb0); }
.icy-system-options :is(.icy-system-option, .icy-system-product) p { font-size: 15px; line-height: 1.65; color: #587174; text-align: left; }
.icy-system-options :is(.icy-system-option, .icy-system-product) img { width: 100%; height: 170px; object-fit: contain; border-radius: 0; }
/* Restyle existing four-card blocks without replacing saved page content. */
.icy-system-options .icy-system-product { display: flow-root; }
.icy-system-options .icy-system-product > figure { float: right; width: 120px; margin: 0 0 12px 20px; }
@media (max-width: 1100px) {
    .icy-system-options .icy-system-option-columns,
    .icy-system-section.icy-system-options .icy-system-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .icy-system-options .icy-system-option { grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; padding: 22px 16px 22px 24px; border-radius: 10px; }
    .icy-system-options .icy-system-option img { height: 120px; }
    .icy-system-options .icy-system-option h3 { font-size: 19px; }
}

/* Pattern images stay square; only the designed masks and case photo are rounded. */
.icy-system-section img { border-radius: 0 !important; }
.icy-system-section .wp-block-image:not(.icy-system-hero-media):not(.icy-system-software-media) { border-radius: 0 !important; }
/* Older inserted case patterns have only icy-system-tone, without icy-system-case. */
.icy-system-section:is(.icy-system-case, .icy-system-tone) .icy-system-split .wp-block-image,
.icy-system-section:is(.icy-system-case, .icy-system-tone) .icy-system-split .wp-block-image img { border-radius: 24px !important; }
.icy-system-section:is(.icy-system-case, .icy-system-tone) .icy-system-split .wp-block-image { overflow: hidden; }

/* Optional four-column variation, set on the features section or page wrapper. */
@media (min-width: 922px) {
    .icy-system-section.icy-system-features.icy-system-features-four .icy-system-grid,
    .icy-system-features-four .icy-system-section.icy-system-features .icy-system-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Reservation integrations: centered introduction and six compact name tiles.
   The list marker also upgrades earlier inserted versions of this pattern. */
.icy-system-section:is(.icy-system-integrations, :has(.icy-system-integrations-list)) {
    background: var(--ast-global-color-0); color: #fff; text-align: center;
}
.icy-system-section:is(.icy-system-integrations, :has(.icy-system-integrations-list)) .icy-system-split { display: block; }
.icy-system-section:is(.icy-system-integrations, :has(.icy-system-integrations-list)) .icy-system-copy {
    max-width: 980px; margin-inline: auto; margin-bottom: 36px;
}
.icy-system-section:is(.icy-system-integrations, :has(.icy-system-integrations-list)) h2 { color: #fff; margin-bottom: 26px; }
.icy-system-section:is(.icy-system-integrations, :has(.icy-system-integrations-list)) p { color: #fff; line-height: 1.5; }
.icy-system-section .icy-system-integrations-list {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px 22px; columns: auto; padding: 0; margin: 0; list-style: none;
}
.icy-system-section .icy-system-integrations-list > li {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 50px; padding: 10px 12px; margin: 0;
    background: rgb(255 255 255 / 55%); border-radius: 14px;
    color: #fff; font-size: clamp(16px, 1.35vw, 21px); font-weight: 600;
    line-height: 1.3; text-align: center; overflow-wrap: anywhere;
}
.icy-system-integrations-list > li::marker { content: ''; }
.icy-system-integrations-list a { color: inherit; }
@media (max-width: 1100px) {
    .icy-system-section .icy-system-integrations-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .icy-system-section .icy-system-integrations-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .icy-system-section .icy-system-integrations-list > li { border-radius: 10px; font-size: 16px; }
}