:root {

    --main-background-color: #ffffff;
    --accent-color-main: #333333;
    --accent-color-2: #E77037;
    --accent-color-3: #006DB4;
    --main-link-color: #111111;
    --main-link-hover: #666666;
    --simpatico-red: #FF0600;
    --simpatico-red-dark: #C00600;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}


body, input, textarea, option, select, div, p, nav.menu-top, nav.menu-mobile, button {

    margin: 0;
    padding: 0;
    border: 0 solid var(--accent-color-3);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;


}

::placeholder {
    color: rgba(0, 0, 0, 0.2);
}

form label:not(.label-wide) {
    margin-right: 10px;
    display: inline-block;
    width: 200px;
}

form div > div {

    margin: 40px 0 40px 0;
    clear: both;

}

form input, form textarea, form select {

    border: 1px rgba(0, 0, 0, 0.4) solid;
    padding: 10px 12px;
    border-radius: 3px;

}

form input[type='text'], form input[type='date'], form input[type='time'], form input[type='email'] {

    width: 200px;
    float: right

}

form textarea {


    width: calc(100% - 24px);
    min-height: 200px;
}

form select {


    width: 226px;
    float: right;

}

.menu-mobile-wrapper {
    display: none;
    visibility: hidden;
}

.menu-top-wrapper {
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 10px 16px -10px rgb(0 0 0 / 50%);
    background-color: var(--main-background-color);
    height: 60px;


}

nav.menu-top {

    max-width: 1150px;
    margin: 0 auto;
    height: 60px;

}

nav.menu-top h2 {
    margin: 2px 0;
    font-size: 1.3em;
}

nav.menu-top ul {
    display: block;
    position: relative;
}

nav.menu-top ul {

    list-style: none;
    padding: 0;
    margin: 0;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;


}


nav.menu-top ul > li {

    list-style: none;
    padding: 0;
    margin: 0;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;


}


nav.menu-top > ul > li {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;

}

nav.menu-top > ul > li:hover {

    overflow: visible;

}

nav.menu-top > ul > li:hover a {

    color: var(--main-link-hover);

}


nav.menu-top > ul > li > ul {

    right: 0;
    position: absolute;
    background-color: #ffffff;
    visibility: hidden;

    /*
     * ONE LINE, AND IT IS THE WHOLE FOOTER GAP.
     *
     * visibility:hidden HIDES a box but still lays it out, and an absolutely
     * positioned box still contributes to the document's scrollable overflow.
     * These dropdowns are ~1900px of nested submenus, so on any page whose own
     * content is shorter than that the document kept scrolling long past the
     * footer: /en/news-and-events ended its footer at 1005px and the page went
     * on to 1963px. Fourteen pages measured, every one of them exactly 1963
     * tall regardless of content — the giveaway that the height came from the
     * menu, not the page.
     *
     * display:none removes it from layout entirely, and the :hover rule below
     * already sets display:block, so hovering restores it exactly as before.
     * There is no transition on this menu, which is what makes toggling
     * display safe here.
     */
    display: none;

}

nav.menu-top > ul > li:hover > ul {

    visibility: visible;
    box-shadow: 0 10px 16px -10px rgb(0 0 0 / 50%);
    display: block;

    /*
     * 100%, WHICH IS THE NAV'S WIDTH -- and it is 100% of a relative parent,
     * which is the whole difference from the 1150px this used to be.
     *
     * THE ORIGINAL FAULT. Fernando: "at 100% the overflow is so large that
     * moving the mouse to the right does not trigger the menu to close." This
     * panel was 1150 CSS PIXELS wide whatever the window was, so on any laptop
     * narrower than 1150 it reached past the right edge of the screen. The
     * pointer could never leave it, and a menu only closes when the pointer
     * leaves.
     *
     * v104 fixed that by shrinking the panel to 66%. It closed, and it was
     * wrong: "the menu is now way narrower and some labels break into 2 lines.
     * that is not the fix I expected. I like the way the menu looks when it is
     * as wide as nav.menu-top."
     *
     * He is right, and 66% was treating the symptom. `nav.menu-top > ul` is
     * position:relative, so this panel's containing block IS the nav -- capped
     * at 1150px and narrower on a small screen. 100% of that is exactly the
     * nav's width at every size, and it CANNOT reach past the right edge,
     * because the nav does not. Full width and it closes: the two were never
     * in conflict, the fixed pixel value was the problem.
     */
    width: 100%;
    top: 60px;
    left: 0;
    height: auto;
    z-index: 999;
    min-height: 260px;

}


nav.menu-top > ul > li:hover > ul > li {

    margin-left: 20px;
    overflow: hidden;

    /* The left column. Bounded so the row is a column and not a full-width
       strip of hover area with a word at one end. */
    width: 30%;


}


nav.menu-top > ul > li:hover > ul > li:hover {

    overflow: visible;

}

nav.menu-top > ul > li:hover > ul > li:first-child {

    margin-top: 10px;

}

nav.menu-top > ul > li:hover > ul > li:last-child {

    margin-bottom: 10px;

}


nav.menu-top > ul > li:hover > ul > li > a {
    padding-left: 15px;
    color: var(--main-link-color);

}

nav.menu-top > ul > li > ul > li:hover > a, nav.menu-top > ul > li:hover > ul > li .fa.fa-angle-right {
    color: var(--accent-color-2);

}


nav.menu-top > ul > li > ul > li > a:hover {
    padding-left: 15px;

}


nav.menu-top > ul > li:not(:first-child) {

    margin-left: 30px;

}

nav.menu-top > ul > li > a {

    padding: 0;
    position: relative;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;

}


nav.menu-top > ul > li > ul > li:hover > ul {

    position: absolute;

    /* Just clear of the 30% column, with a small gap. */
    left: 32%;
    top: 15px;
    height: 100%;
    padding-left: 15px;
}

nav.menu-top > ul > li > ul > li:hover > ul:nth-child(2) {

    /*
     * TO THE PANEL'S RIGHT EDGE, not a fixed share of it.
     *
     * It was 100% once -- 1165px to hold three words whose longest is 141px,
     * about a thousand pixels of invisible hover area, most of it off the
     * right of the screen. That was the overflow Fernando reported.
     *
     * Then 34%, which stopped the overflow and left the panel's right third
     * empty: "without mashing it up on the left side."
     *
     * right:0 is both. The flyout starts clear of the 30% column and ends
     * where the panel ends, so it fills the space and none of it is off
     * screen -- 100% of the RIGHT THING instead of a share of it.
     */
    right: 0;
}


/*
 * THE THREE PIXELS BETWEEN THE COLUMN AND THE FLYOUT.
 *
 * Fernando: "if I move the mouse slowly from left to right (say, starting from
 * Torano Statuario) slowly, I have to move the mouse back to Torano Statuario
 * then do it a little faster horizontal movement."
 *
 * MEASURED: the color row ends at x=510 and the flyout begins at x=513. The
 * row is 30% wide with a 20px left margin, the flyout is positioned at 32%, and
 * 2% of 1150 is 23px -- three more than the margin. So there is a three pixel
 * strip belonging to neither.
 *
 * A CSS-hover menu closes the instant the pointer is outside, and the pointer
 * moves in discrete steps: dragged slowly, one of those steps lands in the
 * strip and the flyout shuts. Moved quickly, the samples step over it. That is
 * exactly the difference he describes, and it is why the bug looks like it
 * depends on speed rather than on position.
 *
 * A TRANSPARENT BRIDGE RATHER THAN MOVING THE FLYOUT. Closing the gap by
 * shifting the flyout to calc(30% + 20px) would work and would move the divider
 * line and every word in that column three pixels left. He has just told me
 * twice that he likes how this menu looks; the fix should not be visible.
 *
 * 10px, not 3: the gap is 2% of the panel minus the margin, so it grows a
 * little with the window. Ten covers it at every width the menu is used at, and
 * the overlap it puts over the row's right edge is past the end of any label.
 *
 * Same pattern as .oweux-admin-galleries-menu::before, which fixed the same
 * class of gap on the toolbar in v103.
 */
nav.menu-top > ul > li > ul > li:hover > ul::after {

    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 10px;
}

nav.menu-top > ul > li > ul > li:hover > ul::before {

    content: '';
    display: block;
    background-color: #e8e8e8;
    height: calc(100% - 32px);
    top: 0;
    width: 1px;
    position: absolute;
    /*left: -14px;*/


}


nav.menu-top > ul > li > ul > li:hover > ul li {

    height: 30px;
    line-height: 30px;
    padding-left: 20px;
}

nav.menu-top > ul > li > ul > li .menu-top-submenu-static {
    visibility: hidden;
}

nav.menu-top > ul > li > ul > li:hover .menu-top-submenu-static {
    visibility: visible;
    position: absolute;
    right: 0;
    width: 30%;
    left: unset;
    height: calc(100% - 32px);
    margin-right: 20px;
}


nav.menu-top > ul > li > ul > li:hover .menu-top-submenu-static::before {
    content: '';
    display: block;
    background-color: #e8e8e8;
    height: calc(100%);
    top: 0;
    width: 1px;
    position: absolute;
    left: -14px;
}


nav.menu-top > ul > li > ul > li:hover > ul.menu-top-submenu-static li {
    display: block;
    height: unset;
}

nav.menu-top > ul > li > ul > li:hover > ul.menu-top-submenu-static a {
    font-size: 14px;
}

.menu-top-submenu-static .menu-top-submenu-static-image-box {
    display: block;
    outline: 1px solid black;
    background-color: gray;
    width: 100%;
    height: 150px;
    overflow: hidden;

}

.menu-top-submenu-static .menu-top-submenu-static-image-box, .menu-top-submenu-static h2 {
    cursor: default;

}

nav.menu-top > ul > li > ul > li:hover > ul li a {

    font-weight: lighter;
    color: #9c9c9c;

}

nav.menu-top > ul > li > ul > li:hover > ul li a:hover {

    color: #717171;

}


nav.menu-top a {
    display: block;
    text-decoration: none;
    font-weight: 500;
    color: var(--main-link-color);
    vertical-align: middle;
    height: 100%;
    font-size: 1.1em;
    letter-spacing: 3px;
}

nav.menu-top .menu-top-logo {
    width: 240px;
    vertical-align: middle;
    overflow: visible;
}

.menu-top-logo img {
    display: block;
    width: 100%;
    vertical-align: middle;
    margin-top: 0;
    position: absolute;
    z-index: 999999;
    /*filter: drop-shadow(0px 3px 3px #006DB4);*/
}

h1 {

    color: var(--simpatico-red);

}

h2 {

    color: var(--simpatico-red-dark);

}

h3, h4 {

    color: #006DB4;

}


.button {


    background-color: #1bc9c9;
    padding: 10px 35px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;

}

section:first-of-type {
    margin-top: 50px;
}

.section-container {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.section-container > div {
    flex: 1;
    margin: 0;
    padding: 0;


}

.section-container p {
    margin-bottom: 1.3em;
}

.column p {

    margin-bottom: 1.3em;

}

.content-container {

    max-width: 1000px;
    margin: 0 auto;


}

.anchor-offset {
    margin-bottom: 50px;
    display: block;
}

.flex-none {

    flex: 0;
    display: block;
    width: 100%;
    min-width: 100%;

}


section .section-container {

    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

/*
 * The footer's logo strip (2026-10-26): the "footer-logos" gallery, markup "logo-row", in place of the
 * single hardcoded Atlas Plan badge. Centred, wraps on a phone, every logo the badge's 100px tall.
 * Renders nothing when the gallery is empty, so there is no empty band to style.
 */
.gallery-logo-row {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 40px;
    max-width: 1000px;
    margin: 50px auto;
    padding: 0 16px;

}

/*
 * SIZING (Fernando, 2026-10-27, agreed across the three sibling sites): cap each logo's box and NEVER enlarge
 * it -- "logo size is roughly what the current logo size is". Natural size, proportions kept, at most 100px
 * tall (the Atlas badge's size) and 160px wide. Under the first rule (every logo forced to 100px tall) a
 * 260x60 logo rendered 433x100 and a 40x30 one was blown up to 133x100; now they render 160x37 and 40x30.
 */
.gallery-logo-row img {

    width: auto;
    height: auto;
    max-height: 100px;
    max-width: min(160px, 100%);
    object-fit: contain;

}

section.section-container.certifications {

    max-width: 1000px;
    margin: 50px auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

footer {

    background-color: #ffffff;
    padding: 50px 0;
    margin-top: 50px;

}


footer .section-container {


    max-width: 1000px;
    margin: 0 auto;

}

.section-container.disclaimers, .section-container.disclaimers * {
    display: block;
    text-align: center;
    font-size: 10px;
    color: #444444;
}

.section-container.copyright, .section-container.disclaimers * {
    display: block;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}


footer ul, footer li {

    list-style: none;
    padding: 0;
    margin: 0;


}

footer li {

    line-height: 32px;
    height: 32px;
    vertical-align: middle;
    position: relative;

}

footer a {
    text-decoration: none;
    color: #006DB4;
}

footer ul li > a {
    font-size: 14px;
}


footer .footer-column-header {
    text-transform: capitalize;
}

footer .footer-column-social li {

    margin-left: 32px;
}


footer .footer-column-social li .fa, footer .footer-column-social li .fab {
    position: absolute;
    z-index: 1;
    width: 28px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    left: -32px;
    color: #ffffff;

    text-align: center;

}

footer .footer-column-social li::before {

    content: '';
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    line-height: 28px;
    left: -32px;
    background-color: #006DB4;
    z-index: 0;
    border-radius: 15px;


}


.scroll-to-top {

    position: fixed;
    z-index: 99999;
    width: 75px;
    height: 75px;
    background: #006DB4;
    bottom: 20px;
    right: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 70px;
    font-size: 40px;
    text-decoration: none;
    border-radius: 45px;
    transition: opacity 1000ms;
    color: #ffffff;
    cursor: pointer;


}

.scroll-to-top::before {
    content: '\f077';
    font-family: FontAwesome;

}

.hide {
    opacity: 0;
}

.show {
    opacity: 1;
}

section > h2 {

    max-width: 1000px;
    margin: 0 auto 20px auto;


}

.section-container .brand-flashcard {
    border-bottom: 55px solid #006DB4;
    margin: 0;
    position: relative;
    background-color: #ffffff;
    height: 450px;
}


.section-container .brand-flashcard .brand-flashcard-image {
    background-image: url(../../assets/images/simpatico-gc-plumbing-logo-stacked-white.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    background-color: var(--main-background-color);
    margin: 0 0 10px 0;
}


.section-container .brand-flashcard .brand-flashcard-header {

    margin: 0 15px 10px 15px;

}

.section-container .brand-flashcard .brand-flashcard-text {

    margin: 0 15px 25px 15px;

}

.section-container .brand-flashcard .brand-flashcard-button {


    display: inline-block;

    position: absolute;
    bottom: -30px;
    left: 30px;


}

.section-container .product-flashcard {
    border-bottom: 55px solid #006DB4;
    margin: 0;
    position: relative;
    background-color: #ffffff;
    height: 450px;
}


.section-container .product-flashcard .product-flashcard-image {
    background-image: url(../../assets/images/simpatico-gc-plumbing-logo-stacked-white.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    background-color: black;
    margin: 0 0 10px 0;
}


.section-container .product-flashcard .product-flashcard-header {

    margin: 0 15px 10px 15px;

}

.section-container .product-flashcard .product-flashcard-text {

    margin: 0 15px 25px 15px;

}

.section-container .product-flashcard .product-flashcard-button {


    display: inline-block;
    /*position: absolute;*/
    bottom: -30px;
    left: 30px;


}


section.columns {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 50px auto 25px auto;
    max-width: 1000px;
    align-items: flex-start;


}

.float-right {
    float: right;
}

.photo-collection.float-right {
    margin: 0 0px 50px 50px;
}

section.columns .column:first-of-type {
    margin-right: 40px;
}


section.columns .column {

    flex: 1;
    margin-top: 0;

}

section.brand-wide-banner .section-container {
    display: block;
}

section.brand-wide-banner {

    background-color: #000000;
    padding: 50px 0;
    margin-top: 50px;
    height: 300px;
    /*background-image: url(../../assets/images/pages/home/slideshow/varo-by-bc-002.jpg);*/
    background-size: cover;

}


section .brand-wide-banner-box {
    background-color: #ffffff;
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.brand-wide-banner-box-content {

    margin: 45px;
}

.brand-wide-banner-box-button {
    display: inline-block;
    bottom: 45px;
    left: 45px;
    position: absolute;

}

section.columns {
    font-size: 1.3em;
    line-height: 1.4em;
}

#slideshow-primary-wrapper {
    background-color: azure;
    height: 50vh;
    background-size: cover;
    overflow: hidden;
    position: relative;
    margin-bottom: 50px;
}

#slideshow-primary-wrapper h1 {

    max-width: 1000px;
    margin: 340px auto 0 auto;
    text-shadow: 0px 0px 5px #ffffff;
    letter-spacing: 1px;


}

.slideshow-primary-control-box {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #006DB4;
    width: 300px;
    height: 70px;
    font-size: 0;
    white-space: nowrap;
    border: 0;
    padding: 0;
}

.slideshow-primary-controls {
    width: 100px;
    height: 70px;
    display: inline-block;
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    line-height: 70px;
    vertical-align: middle;
    cursor: pointer;
}

.slideshow-primary-controls-prev {
}

.slideshow-primary-controls-curr {
}

.slideshow-primary-controls-next {
}


.watch-our-video-visual {

    background-color: black;
    /*background-image: url(../../assets/images/pages/home/slideshow/varo-by-bc-003.jpg);*/
    background-size: cover;

}

.watch-our-video-text {


    background-color: #efeef0;
    position: relative;
    vertical-align: top;
}


.watch-our-video-visual > div, .watch-our-video-text > div {
    margin: 50px 50px 130px 50px;

}

.watch-our-video-button {
    position: absolute;
    bottom: 0;
    left: -80px;
    height: 80px;
    width: 300px;
    background-color: #006DB4;
    border: 0 solid #006DB4;
    text-align: left;
    padding: 0;
    vertical-align: top;
}


.watch-our-video-button-icon {
    width: 80px;
    height: 80px;
    display: inline-block;
    background-color: black;
    vertical-align: top;
    color: #ffffff;
    font-size: 50px;
    font-family: FontAwesome;
}

.watch-our-video-button-icon::before {
    content: '';
    display: block;
    height: 70px;
    width: 70px;
    margin: 3px;
    border: 2px solid #ffffff;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 46px;
}

.watch-our-video-button-icon:hover::before {

    cursor: pointer;
    background-color: #006DB4;

}

.watch-our-video-button-icon::after {
    content: '\f04b';
    display: block;
    height: 80px;
    width: 80px;
    margin: 0 0 0 5px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
}

.watch-our-video-button-icon:hover::after {

    cursor: pointer;
    color: #00d01b;

}

.watch-our-video-button-message {
    display: inline-block;
    color: #ffffff;
    height: 80px;
    line-height: 80px;
    vertical-align: middle;
    margin-left: 20px;
    font-size: 1.3em;

}

.footer-newsletter-submit-button {

    background-color: unset;
    font-size: 50px;
    vertical-align: middle;
    cursor: pointer;
}

.language-selector {

    text-transform: uppercase;
    outline: dotted gray 2px;
    outline-offset: -5px;
    padding: 0px 12px;
    cursor: pointer;
    float: right;


}

.policies {
    justify-content: center;
}

#newsletter-form input[type='email'] {

    float: unset;

}

h1.sub-content-title {
    text-transform: uppercase;
    height: 50px;
    vertical-align: middle;
}

.sub-content h2:first-child, .sub-content h3:first-child {
    margin-top: 0;
    text-transform: uppercase;

}

.sub-menu-option h2 {

}

.sub-menu-option > div.column {
    flex: 1;
}

div.column.sub-menu-option {
    width: 200px;
    flex: 0 0 auto;
    border-right: 1px #e0e0e0 solid;
}


.sub-menu-option ul, .sub-menu-option li {

    margin: 0;
    padding: 0;
    list-style: none;

}

.sub-menu-option li {
    border-left: transparent solid 2px;

}

.sub-menu-option a {
    text-decoration: none;
    display: block;
    padding: 3px 0 3px 9px;
    color: #a0a0a0;


}

.sub-menu-option a:hover {
    color: #707070;

}


.sub-menu-option li.active {
    color: #006DB4;
    border-left-color: red;

}

.sub-menu-option li.active a {
    color: #006DB4;

}

button {

    border: 0 solid black;
}

.column-row {

    display: flex;
    align-items: center;

}

.column-double {

    flex: 2 !important;
}

.columns .column.no-right-margin {

    margin-right: 0 !important;

}


.columns {
    font-size: 0;
}

.columns .column {

    display: inline-block;
    outline: 0 solid black;
    border: 0 solid black;
    padding: 0;
    font-size: initial;
    vertical-align: top;

    /*
     * THE CAP THAT ACTUALLY BINDS -- and the reason the two before it did not.
     *
     * 37 pages ran off the side of a phone. Twice I capped the CHILD:
     * .gamma-cromatica-content in woods.css, and .photo-collection > div
     * above. Both shipped, both are live, and an audit confirmed the computed
     * style really does read max-width:100% -- and both are INERT, because
     * this element is their containing block and it is display:inline-block
     * with no width. An inline-block shrink-to-fits to its content's
     * preferred width, so the parent became 700px WIDE ENOUGH FOR the child,
     * and the child's "100%" then resolved to 700px and constrained nothing.
     * A percentage is only a limit if the thing it is a percentage OF is
     * already limited.
     *
     * Capping HERE resolves against the content container, which is bounded.
     * Measured on /en/woods/aria: 710px scrollWidth becomes 390px.
     *
     * It only binds when the content is wider than the space, so every
     * desktop layout is untouched.
     */
    max-width: 100%;

}

/*
 * /en/cabinets is the one page the cap above does not reach: its overflowing
 * box is an unclassed <div>, not a .column, and it shrink-wraps around a
 * 400px .photo-collection plus a 50px left margin. Cap the collection, and
 * on a screen too narrow to hold a floated column beside text, stop floating.
 */
.photo-collection {
    max-width: 100%;
}

@media (max-width: 700px) {

    .photo-collection.float-right {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    /*
     * WHY min-width, WHEN max-width IS THE OBVIOUS TOOL.
     *
     * section.columns is a flex container, and a flex item defaults to
     * min-width:auto -- it will not shrink below its own min-content width no
     * matter what max-width says. /en/cabinets holds a 400px photograph in an
     * unclassed <div>, so that div's min-content width was 400px and it stayed
     * 400px in a 390px viewport, unfloating and capping notwithstanding. This
     * is the third form of the same lesson on this page: a cap only binds when
     * the thing above it is willing to be smaller.
     *
     * Releasing the floor lets the cap on the image below do the actual work.
     * Confined to narrow screens because min-width:0 does change how flex
     * distributes space, and the desktop layout is not the one that is broken.
     */
    section.columns > * {
        min-width: 0;
    }

    .photo-collection img,
    .photo-collection .photo-caption-box {
        max-width: 100%;
        height: auto;
    }

    /*
     * /en/induction-countertops sets two 200px photographs side by side in a
     * flex row that does not wrap: 200 + 15 + 200 = 415 in a 390px viewport.
     * Nothing can be capped here without shrinking the photographs, so let the
     * row wrap and put the second one underneath instead.
     */
    .photo-collection {
        flex-wrap: wrap;
    }

    /*
     * THE FLOOR UNDER THE PHOTOGRAPHS, RELEASED -- and the only !important
     * on this page, so here is why it earns it.
     *
     * cabinets.css, veneers.css, wood-floors.css and induction-countertops.css
     * each carry the identical rule
     *
     *     .page-<name> .photo-collection > div > img { min-width: 200px }
     *
     * A min-width beats a max-width outright: the image stayed 200px inside a
     * 165px box however it was capped, which is why /en/induction-countertops
     * survived three rounds of capping. Those selectors are more specific than
     * anything global.css can write, and their files load after this one, so
     * specificity alone cannot reach them. The alternative is the same
     * override pasted into four page stylesheets, where the fifth page to
     * copy the pattern would silently miss it.
     *
     * Narrow screens only. The 200px floor is right on a desktop, where there
     * is room for it.
     */
    .photo-collection > div > img {
        min-width: 0 !important;
    }

    /*
     * COLUMNS STOP BEING COLUMNS ON A PHONE.
     *
     * section.columns is display:flex with .column at flex:1, and nothing ever
     * turned that off. On a 390px screen that produced two 165px columns side
     * by side -- a column too narrow to set a paragraph in, and the reason the
     * photographs inside looked cramped and pushed to one side. Reported from
     * a Pixel 10 and reproduced at 360, 390, 412 and 428.
     *
     * :first-of-type carries a 40px right margin for the desktop gutter, which
     * becomes a 40px indent once the columns are stacked; it becomes vertical
     * space instead.
     */
    section.columns {
        flex-direction: column;
    }

    section.columns > * {
        width: 100%;
    }

    section.columns .column:first-of-type {
        margin-right: 0;
        margin-bottom: 30px;
    }

    /*
     * A 40px gap is a desktop measurement. On a phone it ate a quarter of the
     * row, so a row of photographs ended ~50px short of the right edge while
     * starting 10px from the left -- the lopsided margin reported alongside.
     */
    .photo-collection {
        gap: 12px;
    }

}

.columns .column.column-full {

    width: 100%;

}


.columns .column.column-half, .columns .column.column-one-half {

    width: 50%;

}


.columns .column.column-third, .columns .column.column-one-third {

    width: 33%;

}


.columns .column.column-two-third {

    width: 66%;

}

.columns .column.column-fourth, .columns .column.column-one-fourth {

    width: 25%;

}

.columns .column.column-three-fourth {

    width: 75%;

}

.columns .column.column-fifth, .columns .column.column-one-fifth {

    width: 20%;

}

.columns .column.column-two-fifth {

    width: 40%;

}

.columns .column.column-three-fifth {

    width: 60%;

}

.columns .column.column-four-fifth {

    width: 80%;

}

.columns .column.column-tenth, .columns .column.column-one-tenth {

    width: 10%;

}

.columns .column.column-three-tenth {

    width: 30%;

}

.columns .column.column-three-tenth {

    width: 30%;

}

.columns .column.column-seven-tenth {

    width: 30%;

}

.center-underline {
    text-align: center;

}

.center-underline::after {
    content: '';
    background-color: var(--accent-color-main);
    width: 70px;
    height: 1px;
    display: block;
    margin: 30px auto;
}

/* A paragraph area under a section heading (2026-10-29). Centered section, left-aligned prose, as in the About
   section. Left blank in the editor it is an empty div (the panel saves a cleared box as ''): no space at all. */
.section-paragraph {
    max-width: 820px;
    margin: -10px auto 28px;
    padding: 0 18px;
    text-align: left;
    line-height: 1.65;
}

.section-paragraph:empty {
    display: none;
}

.section-paragraph p {
    margin: 0 0 16px;
}

.section-paragraph p:last-child {
    margin-bottom: 0;
}

.texture-woodscard {

    height: 200px;
    width: 200px;
    min-width: 200px;
    position: relative;
}

.texture-woodscard-image {
    display: block;
    height: 100%;
    min-height: 150px;
    width: 100%;
    min-width: 150px;
    margin: 0 auto;
    background-image: url(../../assets/images/simpatico-gc-plumbing-logo-stacked-white.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
    background-color: var(--main-background-color);
    cursor: pointer;
    box-sizing: border-box;
    /*border-bottom: 30px white solid;*/
}

.texture-woodscard-button {

    color: #333333;
    font-weight: bold;
    text-transform: capitalize;
    padding: 12px 0;
    margin: -1px;
    text-align: center;
    display: block;
    position: relative;
    top: -41px;
    background-color: #ffffff;
    border: solid white 1px;
}

.texture-colorscard {

    height: 200px;
    width: 200px;
    min-width: 200px;
    position: relative;
}

.texture-colorscard-image {
    display: block;
    height: 100%;
    min-height: 150px;
    width: 100%;
    min-width: 150px;
    margin: 0 auto;
    background-image: url(../../assets/images/simpatico-gc-plumbing-logo-stacked-white.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
    background-color: var(--main-background-color);
    cursor: pointer;
    box-sizing: border-box;
    /*border-bottom: 30px white solid;*/
}

.texture-colorscard-button {

    color: #333333;
    font-weight: bold;
    text-transform: capitalize;
    padding: 12px 0;
    margin: -1px;
    text-align: center;
    display: block;
    position: relative;
    top: -41px;
    background-color: #ffffff;
    border: solid white 1px;
}

.grow {
    transition: all .2s ease-in-out;
}

.grow:hover {
    transform: scale(1.05);
}

.wide-banner-showcase {

    min-height: 300px;
    background-color: black;
    margin: 40px 0;
    overflow: hidden;

}

.wide-banner-showcase img {
    max-width: 100vw;
    min-width: 480px;
    display: block;
    border: 0;
    padding: 0;

}

/* A contact line that is long enough to wrap (an address with its label, on a phone) must grow, not spill onto the next line:
   footer li is a fixed 32px row. 22px lines + 5px above and below = the same 32px for a one-line row (2026-10-30, found on the
   first day live). */
.footer-column-contact-list li {
    height: auto;
    min-height: 32px;
    line-height: 22px;
    padding: 5px 0;
    box-sizing: border-box;
}

.footer-column-contact-list i {
    display: inline-block;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background-color: var(--accent-color-3);
    color: #ffffff;
    border-radius: 10px;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 10px;
}


.form-error {

    border-left-color: red;
    border-left-width: 3px;


}

.photo-collection:not(:has(img)) {
    display: none;
    visibility: hidden;

}

.photo-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.photo-collection h3 {

    color: var(--simpatico-red-dark);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 0;

}

.photo-collection > div {
    width: 400px;
    /* Same fault as .gamma-cromatica-content: a fixed desktop width with no
       mobile override, so these columns pushed 5 pages 20-70px sideways. */
    max-width: 100%;
    /*flex: 0 0 auto;*/
    flex: 1;
}

/*
 * EMBEDS, universally.
 *
 * /en/exhibitions/simpatico-2021 carries <iframe width="1000"> written into
 * the page content, which dragged the layout 620px past a phone screen -- the
 * worst overflow on the site. The width lives in the CONTENT, so no per-page
 * stylesheet can reach it and an editor pasting the next YouTube embed would
 * reintroduce it. Capping every embed here fixes the one that exists and the
 * ones nobody has pasted yet.
 */
iframe,
video,
embed,
object {
    max-width: 100%;
}

.photo-collection > div > img {
    width: 100%;
    height: auto;
    display: block;
}

.photo-caption-content {
    padding: 2px 7px;
}

.fa.fa-file-pdf {
    color: var(--simpatico-red-dark);
}

.accent-dark {
    color: var(--simpatico-red-dark);
}

.accent-light {
    color: var(--simpatico-red);
}

.colors-all {
    background-size: 500px;
}

.image-box {

    background-color: #f8f8f8;
    background-image: url(/assets/images/simpatico-gc-plumbing-logo-stacked-transparent.png);
    background-color: #f8f8f8;
    background-image: url(/assets/images/simpatico-gc-plumbing-logo-stacked-transparent.png);
    background-repeat: no-repeat;
    background-position: center;


}
/* ---- editor text colors (v54) ---------------------------------------------
   The fixed palette the content manager's rich-text toolbar can apply. A
   CLASS rather than an inline style, because the sanitizer strips `style` from
   stored content on purpose: this site must keep style-src-attr
   'unsafe-inline' for Google's tags, so an injected style attribute would take
   effect, and allowing editors to store one would make that hole reachable.

   Defined in terms of the variables above, so changing the brand red here
   moves every page that uses it. */
.oweux-text-red{color:var(--simpatico-red)}
.oweux-text-red-dark{color:var(--simpatico-red-dark)}
.oweux-text-blue{color:var(--accent-color-3)}
.oweux-text-orange{color:var(--accent-color-2)}

/* ---- the editor's toolbar on the public site (v83) -------------------------
 *
 * Injected by assets/js/admin-toolbar.js only for somebody signed in to
 * /content-management/. It is NEVER in the served HTML, so these rules match
 * nothing for an ordinary visitor and cost them one unused selector.
 *
 * STATIC, not fixed. The site has a sticky header; a fixed bar would sit on
 * top of it at every scroll position. Sitting in the normal flow pushes the
 * page down by its own height and cannot overlap anything.
 */
/*
 * THE COLLAPSED TOOLBAR, and the handle that brings it back.
 *
 * Pressing x used to REMOVE the bar, which left the only way back as "close
 * the tab" -- true, and not something anybody should have to be told. The bar
 * now shrinks to this handle instead, so the way back is on the screen.
 *
 * The handle is inside the bar rather than a sibling: one element to insert,
 * one to remove, and no chance of the two drifting apart in the DOM.
 */
.oweux-admin-handle {
    display: none;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 6px 12px;
    border: 0;
    border-bottom-right-radius: 6px;
    background: #182025;
    color: #e8edef;
    cursor: pointer;
}

.oweux-admin-bar.is-collapsed {
    /* Not display:none -- the handle lives in here and has to stay reachable. */
    background: transparent;
    padding: 0;
    gap: 0;
}

.oweux-admin-bar.is-collapsed > * {
    display: none;
}

.oweux-admin-bar.is-collapsed > .oweux-admin-handle {
    display: inline-block;
}

.oweux-admin-bar {
    /*
     * max-width, but NOT overflow:hidden.
     *
     * The overflow stopped the identity chip widening the page on a phone, and
     * it also CLIPPED the "Preview layout" dropdown, which is absolutely
     * positioned below the bar: the menu opened and was invisible, so the
     * button looked dead. The chip is already constrained by its own
     * min-width:0 and ellipsis, which is where that belongs -- clipping the
     * whole row to contain one child was too broad a fix.
     */
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: #182025;
    color: #e8edef;
    font: 600 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    border-bottom: 2px solid #c9a227;
}

.oweux-admin-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.oweux-admin-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #2a353c;
    border-radius: 4px;
    color: #93a1a9;
    text-decoration: none;
    white-space: nowrap;
    /*
     * The identity chip carries an email, so nowrap made it as wide as the
     * address: 386px of chip starting at x=16 pushed a 390px phone to 402 and
     * clipped "super_admin". Measured, on the same day the site's other fixed
     * widths were capped for exactly this reason — adding a new overflow while
     * fixing the old ones would have been a poor joke.
     */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The two that go somewhere are the ones worth seeing. --ink on the panel's
   own ground measures about 14:1, the same choice made for the (?) button
   after the first attempt shipped at 1.8:1. */
.oweux-admin-chip.go {
    color: #e8edef;
    border-color: #e8edef;
}

.oweux-admin-chip.go:hover,
.oweux-admin-chip.go:focus {
    background: rgba(232, 237, 239, .14);
    color: #e8edef;
}

.oweux-admin-hide {
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 3px 9px;
}

.oweux-admin-chip:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

/*
 * THE TOOLBAR ON A PHONE.
 *
 * Reported as "breaks on mobile", and measured at 123px tall on a Pixel 10 --
 * three stacked rows. Not an overlap (the bar is static, it cannot cover
 * anything) but it was eating an eighth of the screen before the page began.
 *
 * The cause is margin-left:auto on the action group: it forces a break as soon
 * as the identity chip and the actions cannot share a line, and the identity
 * chip -- an email address -- never can. Dropping the auto margin lets them
 * share, and the email ellipsises into whatever is left instead of demanding a
 * row of its own.
 */
@media (max-width: 700px) {

    .oweux-admin-bar {
        gap: 8px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .oweux-admin-right {
        margin-left: 0;
        gap: 6px;
    }

    /*
     * The email takes row one alone, and the buttons take row two together.
     *
     * flex-basis:100% is the wrong way to say that: the chip has its own
     * padding, so 100% of the row plus that padding made the BAR 12px wider
     * than the screen -- a fix for a layout complaint that introduced the
     * layout complaint. Growing from a zero basis reaches the same full row
     * and cannot exceed it.
     */
    .oweux-admin-bar > .oweux-admin-chip:first-child {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .oweux-admin-right {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

}

@media print {
    .oweux-admin-bar { display: none; }
}

/* the "Preview layout" menu in the editor's toolbar (v84) */
.oweux-admin-swapwrap { position: relative; }
.oweux-admin-swapwrap summary { cursor: pointer; list-style: none; }
.oweux-admin-swapwrap summary::-webkit-details-marker { display: none; }
.oweux-admin-swapmenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100001;
    background: #1d262b;
    border: 1px solid #2a353c;
    border-radius: 4px;
    padding: 4px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.oweux-admin-swapopt {
    padding: 5px 9px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    color: #cfd8dc;
    text-decoration: none;
}
.oweux-admin-swapopt:hover { background: #25313a; color: #fff; }
.oweux-admin-swapback {
    border-top: 1px solid #2a353c;
    margin-top: 3px;
    padding-top: 7px;
    color: #c9a227;
}

/*
 * THE PAGE'S GALLERIES, on the admin toolbar, opening on hover.
 *
 * Hover and :focus-within together -- hover alone puts the list behind a mouse,
 * and this bar is used from a keyboard often enough that a control only a mouse
 * can reach is one some people do not have.
 *
 * Positioned out of flow so opening it never pushes the page down; z-index above
 * the bar's own stacking so it is not clipped by the chrome around it.
 */
.oweux-admin-galleries {
    position: relative;
    display: inline-block;
}

.oweux-admin-galleries-menu {
    display: none;
    position: absolute;
    z-index: 100000;
    top: 100%;
    left: 0;
    min-width: 210px;
    margin: 4px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #182025;
    border: 1px solid #2c3a42;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.oweux-admin-galleries:hover .oweux-admin-galleries-menu,
.oweux-admin-galleries:focus-within .oweux-admin-galleries-menu {
    display: block;
}

.oweux-admin-galleries-menu li { margin: 0; padding: 0; }

.oweux-admin-galleries-menu a {
    display: block;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1.3;
    color: #e8edef;
    text-decoration: none;
    white-space: nowrap;
}

.oweux-admin-galleries-menu a:hover,
.oweux-admin-galleries-menu a:focus {
    background: #24313a;
    text-decoration: underline;
}

/*
 * A CONTROL THAT DOES SOMETHING LOOKS LIKE IT.
 *
 * Fernando: "the clear cache button mouse over cursor does not change when the
 * mouse is over." Measured across the whole bar: Edit this page, Preview
 * layout, Content manager, x and the restore handle all showed a pointer;
 * Clear cache showed `default` and Galleries showed `auto`. Both are controls I
 * added, and both are the two that are not links -- a <button> and a <span>
 * neither of which the browser styles as clickable on its own.
 *
 * Targeted rather than blanket: .oweux-admin-chip is also the identity chip
 * ("Signed in as ..."), which does nothing and should keep the ordinary
 * cursor. A pointer on inert text is its own small lie.
 */
button.oweux-admin-chip,
.oweux-admin-galleries > .oweux-admin-chip {
    cursor: pointer;

    /*
     * And not selectable. `auto` over a run of text gives the I-beam, which is
     * what Fernando saw on Galleries -- it looked like a caption rather than a
     * control. The pointer fixes the cursor; this stops a click-and-drag
     * highlighting the label instead of opening the menu.
     */
    user-select: none;
    -webkit-user-select: none;
}

/*
 * THE GAP BETWEEN THE BUTTON AND THE LIST HAS TO BE HOVERABLE.
 *
 * Fernando: "when the mouse moved from 'galleries' down to the gallery, most of
 * the time the options disappear. Seems like there is a gap that users need to
 * traverse carefully or very fast."
 *
 * Exactly that: the menu sits 4px below the button, and those 4px belonged to
 * neither, so the pointer left the wrapper on its way down and the menu shut.
 * A menu you have to be quick to use is a menu that does not work.
 *
 * This fills the gap with part of the MENU -- invisible, but inside the
 * element, so crossing it keeps the wrapper hovered. Positioned, not sized with
 * margin, so nothing on screen moves.
 */
.oweux-admin-galleries-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
}

/*
 * THE (?) ON THE TOOLBAR, AND WHAT IT OPENS.
 *
 * Fernando asked for "a (?) button on the front end with the manual on how to
 * use the top menu there". The panel has had per-screen help behind a question
 * mark since v81; the bar on the website carries six controls and had none.
 *
 * The button is a circle so it reads as a question mark rather than as a
 * seventh label competing with the six words beside it.
 */
.oweux-admin-help {
    background: transparent;
    color: #e8edef;
    border-color: #e8edef;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    justify-content: center;
    font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    flex: 0 0 auto;
}

.oweux-admin-help:hover,
.oweux-admin-help:focus {
    background: rgba(232, 237, 239, .14);
}

/*
 * The dialog. `dialog` is centered and given its backdrop by the browser, so
 * what is set here is only its size and its colors.
 *
 * READABLE ON A PHONE FIRST: min() against the viewport rather than a fixed
 * width, and a max-height with its own scroll, because this section is long --
 * six controls, each explained. A cap without a capped parent has shipped inert
 * here before, so the height is on the dialog itself, which IS the scrolling
 * box.
 */
.oweux-admin-help-box {
    width: min(640px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 24px;
    border: 1px solid #2a353c;
    border-radius: 6px;
    background: #182025;
    color: #e8edef;
    font: 400 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.oweux-admin-help-box::backdrop {
    background: rgba(0, 0, 0, .55);
}

.oweux-admin-help-box h2 {
    margin: 0 0 12px;
    color: #e8edef;
    font: 700 17px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

.oweux-admin-help-body p { margin: 0 0 12px; color: #e8edef; }
.oweux-admin-help-body ul { margin: 0 0 12px; padding-left: 20px; }
.oweux-admin-help-body li { margin: 0 0 8px; color: #c8d2d7; }

.oweux-admin-help-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #2a353c;
}

.oweux-admin-help-foot .oweux-admin-chip {
    font: 600 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
}

/*
 * AN EDITABLE PARAGRAPH ABOVE A GALLERY OR A CATALOG.
 *
 * Gina asked for one on the projects page, then Fernando for the same on the
 * colors and engineered wood pages: a place to say what the pictures below are,
 * in words the client writes.
 *
 * IN global.css, NOT IN A PAGE STYLESHEET, and that is the point of the class.
 * The projects page used .material-content, which is defined in
 * pages/colors.css -- so the rule reached projects only by accident of never
 * being loaded there, and a fourth page wanting an intro would have needed a
 * fourth stylesheet edit. Three separate things on this site are keyed on the
 * page's name (template, logic file, stylesheet) and that has broken a page
 * once already; a shared class is one fewer of them.
 *
 * max-width against a parent that is wider: the sections these sit in run the
 * full width of the page, so the cap is what centers the text. A cap under a
 * parent that is already narrower would do nothing, which has shipped here
 * before -- so the check measures the rendered width rather than the rule.
 */
.page-intro {
    max-width: 1000px;
    margin: 0 auto 28px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Empty until the client writes something. Without this the margin still
   applies and pushes the gallery down by 28px of nothing. */
.page-intro:empty {
    display: none;
}

/*
 * THE DOWNLOAD LINK ON A COLOR OR WOOD PAGE.
 *
 * Fernando: "the pdf/download icons on the Download area look too tiny and
 * stuck together. make them larger and add a little space between the two."
 *
 * MEASURED BEFORE CHANGING ANYTHING: the two icons rendered 12x14 and 13x14
 * with a gap of exactly ZERO between them, inside a link 25x16. They are not
 * merely small, they are touching -- two glyphs at 14px with nothing between
 * them read as one smudge, which is what "stuck together" describes.
 *
 * IN global.css, NOT IN colors.css. The same block is on the wood pages, and
 * those load woods.css instead -- so a fix written into either stylesheet would
 * have fixed half the catalog and looked complete. Both sections render
 * .colors-downloads; that class is the thing they share, so it is where the
 * rule goes.
 *
 * inline-flex with a gap rather than a margin on the first icon: the icons come
 * from a constant in lib-colors.php and lib-woods.php, and a rule that depends
 * on which one is first breaks the day a third is added.
 *
 * The size also fixes something nobody reported. A 25x16 link is far below the
 * 24px minimum a finger can reliably hit, so on a phone this was a target you
 * aimed at rather than pressed. It is about 50x28 now.
 */
.colors-downloads li span a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    line-height: 1;
    padding: 3px 2px;
    vertical-align: middle;
}

/*
 * A SHORTER DROPDOWN ON A SHORT SCREEN.
 *
 * Fernando: "on smaller screens the porcelain menu, when opened may be too
 * tall. it is nice on larger screens because the primary menu items have ample
 * spacing above and below... if we reduced the height on nav.menu-top ul > li
 * from 60px to 50px that would make it better on those smaller screens."
 *
 * MEASURED: twelve rows at 60px make a 740px panel that starts 60px down, so it
 * ends at 800. It fits a 900 or 800 tall window and runs off a 768 by 32px, a
 * 720 by 80 and a 640 by 160. At 50px the panel is 620 and ends at 680, which
 * fits 768 and 720 with room and cuts the 640 overflow from 160 to 40.
 *
 * A HEIGHT QUERY, NOT A WIDTH ONE. "Smaller screens" here means a short window
 * -- the fault is vertical and a wide 768-tall laptop has it just as badly as a
 * narrow one. Keyed on the thing that actually runs out.
 *
 * AND ONLY THE DROPDOWN ROWS. He named `nav.menu-top ul > li`, which also
 * styles the items in the bar itself; those would become 50px tall inside a bar
 * still 60px high, with their text riding 5px above center. The rows in the
 * dropdown are what make the panel tall -- twelve of them against seven in the
 * bar -- so the bar keeps the spacing he says he likes at every size.
 */
@media (max-height: 820px) {

    nav.menu-top > ul > li:hover > ul > li,
    nav.menu-top > ul > li > ul > li:hover > ul > li {
        height: 50px;
        line-height: 50px;
    }
}

/*
 * TWO PIXELS, ON THE COMMONEST LAPTOP THERE IS.
 *
 * 50px leaves the panel ending at 722 in a 720-tall window -- because the bar
 * does not start at the top of the page at that size, it starts at 42, which
 * the arithmetic from the taller windows does not show. Missing by two pixels
 * is missing.
 *
 * 46px puts the bottom at 674 and 720 fits properly.
 *
 * WHY NOT MAKE IT SCROLL, which would settle every size at once: the flyout is
 * absolutely positioned INSIDE this panel and reaches past its bottom and its
 * right, so overflow:auto here would clip the thing the menu exists to show.
 * That is the same trap that made .oweux-admin-bar drop its overflow rule.
 *
 * Below about 660 tall, twelve rows do not fit however they are sized. Left
 * alone rather than shrunk to illegibility.
 */
@media (max-height: 740px) {

    nav.menu-top > ul > li:hover > ul > li,
    nav.menu-top > ul > li > ul > li:hover > ul > li {
        height: 46px;
        line-height: 46px;
    }
}

/*
 * A GALLERY SECTION THAT IS WAITING FOR PHOTOGRAPHS TAKES NO SPACE.
 *
 * /en/our-showroom has an empty gallery on it so Gina can add photographs
 * herself -- upload them in the panel and they appear, with no code change and
 * nobody to ask. Until she does, the gallery renders nothing.
 *
 * NOTHING IS NOT THE SAME AS NO SPACE. Measured: the token substitutes to zero
 * bytes and .photo-collection is 0px tall, and the page still grew 92px --
 * 1207 to 1299 -- because the <section> wrapping it keeps its own margins. A
 * 92px band of blank under the warehouse address is worse than the page as it
 * was, and it is precisely the kind of thing that ships because the check was
 * "does the gallery render nothing" rather than "is the page the same height".
 *
 * :has() rather than a hardcoded page rule, so this holds for any page given a
 * gallery before its pictures -- and it stops applying by itself the moment the
 * first photograph is uploaded.
 */
section:has(> .column > .photo-collection:empty),
section:has(> div > .photo-collection:empty) {
    display: none;
}

/* ONE LINK PER CARD. The picture and the label are spans inside a single
   <a>, so the card has one link, one anchor text, and one tab stop -- rather
   than two links to the same URL with the empty one first.

   height:100% IS load-bearing, and this comment has been wrong in both
   directions. The picture is height:100%, which resolves against THIS
   element; without a definite height here it falls back to its min-height
   and shrinks from 200px to 150px on desktop -- measured against live,
   card by card.

   I briefly removed it after the suite stayed green without it. The suite
   was wrong, not the declaration: it asserted the picture was at least
   140px tall, and 150px clears that. A floor cannot detect a shrink. The
   check compares against live now.

   text-decoration:none belongs here too, not on the label: a decoration set
   on an ancestor is drawn through its descendants and cannot be removed by
   them, so the label's own `text-decoration:none` would not stop the
   underline. */
.texture-colorscard-link,
.texture-woodscard-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}