/* Shared site styles: base, responsive layout, components, and interior pages. */
:where(body:not(.ratings-page)) table { font-family: Tahoma, sans-serif; border: 1px solid rgb(153, 153, 153); }
:where(body:not(.ratings-page)) caption { font-weight: bold; padding: 5px 3px; }
:where(body:not(.ratings-page)) th { text-align: left; font-weight: bold; color: black; }
:where(body:not(.ratings-page)) td { vertical-align: top; }
:where(body:not(.ratings-page)) tr.grey { background-color: rgb(204, 204, 204); }
:where(body:not(.ratings-page)) h1 { font-family: Verdana; margin: 0px; }
:where(body:not(.ratings-page)) p { font-family: Tahoma, sans-serif; color: rgb(0, 0, 0); }
:where(body:not(.ratings-page)) p.pSmall { color: rgb(0, 0, 0); }
:where(body:not(.ratings-page)) div#outerDiv { margin: 0px auto; }
:where(body:not(.ratings-page)) div#header { position: relative; }
:where(body:not(.ratings-page)) div#header a { display: block; }
:where(body:not(.ratings-page)) #mainMenu { width: 100%; position: relative; }
:where(body:not(.ratings-page)) #mainMenu ul { clear: left; list-style: none; margin: 0px; padding: 0px; }
:where(body:not(.ratings-page)) #mainMenu ul li { display: block; list-style: none; margin: 0px; padding: 0px; }
:where(body:not(.ratings-page)) #mainMenu ul li a { display: block; color: rgb(255, 255, 255); text-decoration: none; }
:where(body:not(.ratings-page)) div#topcontent { margin: 0px auto; }
:where(body:not(.ratings-page)) div#content { margin: 0px auto; background: rgb(255, 255, 255); }
:where(body:not(.ratings-page)) div#leftColumnWithBorder, :where(body:not(.ratings-page)) div#singleColumn { background: rgb(255, 255, 255); }
:where(body:not(.ratings-page)) #content h4 { font-family: Tahoma, sans-serif; }
:where(body:not(.ratings-page)) #content h5 { font-size: 1em; color: rgb(17, 17, 17); margin: 1ex 0px; }
:where(body:not(.ratings-page)) #content table { border: 1px solid rgb(153, 153, 153); }
:where(body:not(.ratings-page)) #content caption { font-weight: bold; padding: 5px 3px; }
:where(body:not(.ratings-page)) #content th { text-align: left; font-weight: bold; color: black; }
:where(body:not(.ratings-page)) #content td { vertical-align: top; }
:where(body:not(.ratings-page)) #content tr.lightgrey { background-color: rgb(238, 238, 238); }
:where(body:not(.ratings-page)) div#footer { clear: both; background: transparent; margin: 0px auto; }
:where(body:not(.ratings-page)) #footer p { font-family: "Trebuchet MS", sans-serif; margin: 0px; padding: 0px; text-align: center; }
:where(body:not(.ratings-page)) .floatimgleft { float: left; margin: 5px 10px 10px 0px; }
:where(body:not(.ratings-page)) .clear { clear: both; }
:where(body:not(.ratings-page)) * { box-sizing: border-box; }
html:where(:has(body:not(.ratings-page))) { text-size-adjust: 100%; }
body:where(:not(.ratings-page)) { margin: 0px; background-color: rgb(255, 255, 255); font-family: Tahoma, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: rgb(36, 33, 36); }
:where(body:not(.ratings-page)) div#outerDiv { width: 100%; max-width: 1120px; border: 0px; background: rgb(255, 255, 255); }
:where(body:not(.ratings-page)) div#header { height: auto; min-height: 145px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgb(255, 255, 255); color: rgb(92, 21, 24); }
:where(body:not(.ratings-page)) div#header a { position: static; color: inherit; }
:where(body:not(.ratings-page)) .site-brand { text-decoration: none; max-width: 700px; }
:where(body:not(.ratings-page)) .site-brand strong { display: block; font-size: clamp(23px, 4vw, 36px); line-height: 1.2; }
:where(body:not(.ratings-page)) .site-brand span { display: block; margin-top: 8px; font-size: 15px; color: rgb(92, 21, 24); }
:where(body:not(.ratings-page)) div#header a#butterflylink { position: static; width: auto; height: auto; flex-shrink: 0; font-size: 14px; }
:where(body:not(.ratings-page)) #butterflylink img { display: block; width: 130px; max-width: 100%; height: auto; }
:where(body:not(.ratings-page)) #mainMenu { float: none; overflow: visible; border: 0px; background: rgb(92, 21, 24); }
:where(body:not(.ratings-page)) #mainMenu ul { display: flex; flex-wrap: wrap; float: none; position: static; text-align: center; }
:where(body:not(.ratings-page)) #mainMenu ul li { float: none; position: static; flex: 1 0 auto; }
:where(body:not(.ratings-page)) #mainMenu ul li a { margin: 7px 6px; padding: 5px 7px; min-height: 34px; border: 1px solid transparent; border-radius: 6px; background: transparent; line-height: 1.4; font-family: Tahoma, Arial, sans-serif; font-weight: 700; }
/* Touch browsers can retain :hover after Back; only enable it for a mouse/trackpad. */
@media (hover: hover) and (pointer: fine) {
  :where(body:not(.ratings-page)) #mainMenu ul li a:hover { background: rgb(255, 255, 255); color: rgb(92, 21, 24); }
}
:where(body:not(.ratings-page)) #mainMenu ul li a:focus-visible { background: rgb(255, 255, 255); color: rgb(92, 21, 24); }
:where(body:not(.ratings-page)) #mainMenu ul li a.active { background: rgb(255, 255, 255); color: rgb(92, 21, 24); }
:where(body:not(.ratings-page)) .menu-toggle { display: none; }
:where(body:not(.ratings-page)) a { color: rgb(51, 68, 155); text-underline-offset: 3px; overflow-wrap: anywhere; }
:where(body:not(.ratings-page)) a:focus-visible, :where(body:not(.ratings-page)) button:focus-visible, :where(body:not(.ratings-page)) .table-scroll:focus-visible { outline: rgb(231, 169, 40) solid 3px; outline-offset: 3px; }
:where(body:not(.ratings-page)) .skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 12px; background: white; }
:where(body:not(.ratings-page)) .skip-link:focus { top: 12px; }
:where(body:not(.ratings-page)) div#topcontent, :where(body:not(.ratings-page)) div#content { width: 100%; padding: 24px 32px; }
:where(body:not(.ratings-page)) div#content { display: flex; flex-wrap: wrap; gap: 32px; }
:where(body:not(.ratings-page)) div#leftColumnWithBorder { width: auto; flex: 2 1 0px; }
:where(body:not(.ratings-page)) .content-panel { width: calc(100% + 20px); min-width: 0px; float: none; margin: 0px 0px 0px -20px; background: rgb(247, 244, 241); padding: 20px; border: 0px; border-radius: 8px; }
:where(body:not(.ratings-page)) div#leftColumnWithBorder, :where(body:not(.ratings-page)) div#singleColumn { float: none; min-width: 0px; padding: 0px; margin: 0px; border: 0px; }
:where(body:not(.ratings-page)) div#singleColumn { width: 100%; }
:where(body:not(.ratings-page)) #content p, :where(body:not(.ratings-page)) p, :where(body:not(.ratings-page)) #content p.pIndent { font-size: 1rem; line-height: 1.65; margin: 0px 0px 16px; }
:where(body:not(.ratings-page)) #content p.pSmall, :where(body:not(.ratings-page)) p.pSmall { font-size: 0.875rem; line-height: 1.6; }
:where(body:not(.ratings-page)) #content h4 { color: rgb(92, 21, 24); font-size: 1.2rem; padding-bottom: 8px; margin: 28px 0px 16px; border-bottom: 1px solid rgb(221, 213, 207); }
:where(body:not(.ratings-page)) img { max-width: 100%; height: auto; }
:where(body:not(.ratings-page)) iframe, :where(body:not(.ratings-page)) video { max-width: 100%; }
:where(body:not(.ratings-page)) iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
:where(body:not(.ratings-page)) div[style*="display:flex"] > * { min-width: 0px; }
:where(body:not(.ratings-page)) table { max-width: 100%; border-collapse: collapse; font-size: 1rem; }
:where(body:not(.ratings-page)) #content td, :where(body:not(.ratings-page)) td, :where(body:not(.ratings-page)) #content th, :where(body:not(.ratings-page)) th { padding: 10px; }
:where(body:not(.ratings-page)) .table-scroll { max-width: 100%; overflow-x: auto; margin: 16px 0px; }
:where(body:not(.ratings-page)) .table-scroll table { margin: 0px auto; }
:where(body:not(.ratings-page)) div#footer { max-width: 1120px; padding: 24px 16px; }
:where(body:not(.ratings-page)) #footer p { font-size: 0.875rem; color: rgb(92, 21, 24); }
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) div#header { padding: 24px 20px; min-height: 0px; flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) #mainMenu ul { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); text-align: left; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) #mainMenu ul li { min-width: 0px; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .menu-toggle { display: block; width: 100%; text-align: left; border: 0px; padding: 14px 20px; min-height: 48px; background: rgb(92, 21, 24); color: white; font: 700 16px Tahoma, Arial, sans-serif; cursor: pointer; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) div#topcontent, :where(body:not(.ratings-page)) div#content { padding: 20px; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) div#content { display: flex; flex-direction: column; gap: 24px; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) div#content > div { width: 100%; flex: 1 1 auto; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) div[style*="display:flex"] { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) div[style*="display:flex"] > video { flex: 1 1 100% !important; width: 100% !important; height: auto !important; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .floatimgleft { float: none; display: block; margin: 0px 0px 16px; }
}
:where(body:not(.ratings-page)) .menu-toggle:hover, :where(body:not(.ratings-page)) .menu-toggle:focus-visible, :where(body:not(.ratings-page)) .menu-toggle:active, :where(body:not(.ratings-page)) .menu-toggle[aria-expanded="true"] { background: rgb(92, 21, 24); }
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) #mainMenu ul li a { min-height: 44px; }
}
:where(body:not(.ratings-page)) .header-details { min-width: 0px; }
:where(body:not(.ratings-page)) div#header { flex-wrap: wrap; gap: 24px; }
:where(body:not(.ratings-page)) .header-details { flex: 1 1 300px; }
:where(body:not(.ratings-page)) .visit-card { flex: 0 0 100%; min-width: 0px; padding: 18px 22px; background: rgb(250, 248, 246); border-width: 3px 1px 1px; border-style: solid; border-color: rgb(92, 21, 24) rgb(228, 220, 214) rgb(228, 220, 214); border-image: none; border-radius: 12px; color: rgb(0, 0, 0); }
:where(body:not(.ratings-page)) .visit-card h2 { margin: 0px 0px 14px; font-size: 18px; line-height: 1.3; color: rgb(92, 21, 24); }
:where(body:not(.ratings-page)) .visit-grid { display: grid; grid-template-columns: 1.25fr 1.1fr 1fr 0.75fr; }
:where(body:not(.ratings-page)) .visit-row { display: flex; align-items: flex-start; gap: 12px; padding: 0px 20px; min-width: 0px; border-left: 1px solid rgb(228, 220, 214); }
:where(body:not(.ratings-page)) .visit-row:first-child { padding-left: 0px; border-left: 0px; }
:where(body:not(.ratings-page)) .visit-row:last-child { padding-right: 0px; }
:where(body:not(.ratings-page)) .visit-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: rgb(240, 227, 226); color: rgb(92, 21, 24); }
:where(body:not(.ratings-page)) .visit-icon svg { width: 21px; height: 21px; }
:where(body:not(.ratings-page)) .visit-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 4px; }
:where(body:not(.ratings-page)) .visit-card .visit-row a { color: rgb(0, 0, 0); font-size: 15px; font-weight: 700; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; }
:where(body:not(.ratings-page)) .visit-secondary { display: block; font-weight: 400; }
:where(body:not(.ratings-page)) .visit-value { display: block; color: rgb(0, 0, 0); font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .visit-card { padding: 18px; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .visit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .visit-row, :where(body:not(.ratings-page)) .visit-row:first-child, :where(body:not(.ratings-page)) .visit-row:last-child { padding: 14px 0px; border-left: 0px; border-top: 1px solid rgb(228, 220, 214); }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .visit-row:first-child { border-top: 0px; padding-top: 0px; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .visit-row:last-child { padding-bottom: 0px; }
}
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .visit-card .visit-row a { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
}
:where(body:not(.ratings-page)) .photo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: start; gap: 16px; width: 100%; max-width: 816px; margin: 0px 0px 24px; }
:where(body:not(.ratings-page)) .photo-gallery-single { grid-template-columns: minmax(0px, 1fr); max-width: 440px; }
:where(body:not(.ratings-page)) .photo-gallery-three { grid-template-columns: repeat(3, minmax(0px, 1fr)); max-width: 1056px; }
:where(body:not(.ratings-page)) .photo-gallery > a { display: block; min-width: 0px; }
:where(body:not(.ratings-page)) .photo-gallery img { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid rgb(204, 204, 204); }
@media (max-width: 760px) {
  :where(body:not(.ratings-page)) .photo-gallery { grid-template-columns: minmax(0px, 1fr); max-width: 440px; }
}

/* Shared visual theme and interior-page design. */
:is(.site-page, .home-page) { background: rgb(255, 255, 255); color: rgb(40, 36, 34); font-family: Arial, Helvetica, sans-serif; }
:is(.site-page, .home-page) #outerDiv { max-width: 1200px; }
:is(.site-page, .home-page) #header { padding: 26px 36px 22px; gap: 22px; }
:is(.site-page, .home-page) .site-brand strong { font-family: Arial, Helvetica, sans-serif; font-size: clamp(24px, 3vw, 32px); letter-spacing: -1px; }
:is(.site-page, .home-page) .site-brand span { font-size: 13px; letter-spacing: 0.02em; }
:is(.site-page, .home-page) .visit-card { background: rgb(255, 255, 255); border: 1px solid rgb(232, 225, 220); border-radius: 12px; box-shadow: rgba(57, 37, 26, 0.043) 0px 5px 18px; padding: 15px 20px; }
:is(.site-page, .home-page) .visit-card h2 { font-size: 16px; margin-bottom: 12px; }
:is(.site-page, .home-page) #mainMenu { border-radius: 8px; margin: 0px 24px; width: calc(100% - 48px); box-shadow: rgba(92, 21, 24, 0.082) 0px 5px 12px; }
:is(.site-page, .home-page) #mainMenu ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.site-page .page-intro { margin: 32px 36px; padding: 30px 32px; border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(233, 225, 219) rgb(233, 225, 219) rgb(233, 225, 219) rgb(145, 82, 87); border-image: none; border-radius: 0px 16px 16px 0px; background: linear-gradient(110deg, rgb(247, 241, 237), rgb(255, 255, 255)); }
.site-page .page-intro .eyebrow { color: rgb(122, 51, 52); font: 700 11px / 1.6 Arial, Helvetica, sans-serif; letter-spacing: 0.13em; text-transform: uppercase; margin: 0px 0px 12px; }
.site-page .page-intro h1 { font: 700 clamp(32px, 4vw, 46px) / 1.1 Arial, Helvetica, sans-serif; letter-spacing: -1.5px; color: rgb(52, 36, 37); margin: 0px 0px 12px; }
.site-page .page-intro .page-tagline { font: italic 24px / 1.4 Georgia, serif; color: rgb(124, 41, 46); margin: 0px 0px 12px; }
.site-page .page-intro p:last-child { margin: 0px; max-width: 700px; font-size: 15px; line-height: 1.7; color: rgb(98, 88, 81); }
.site-page #topcontent { width: calc(100% - 72px); margin: 0px 36px 28px; padding: 24px 30px; background: rgb(247, 244, 241); border: 1px solid rgb(233, 225, 219); border-radius: 12px; }
.site-page #topcontent.empty-intro { display: none; }
.site-page #content { padding: 0px 36px 40px; align-items: flex-start; }
.site-page .section-card { display: flow-root; padding: 26px 30px; margin: 0px 0px 24px; border: 1px solid rgb(233, 225, 219); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(57, 37, 26, 0.035) 0px 7px 25px; }
.site-page #content h4 { font: 700 24px / 1.3 Arial, Helvetica, sans-serif; letter-spacing: -0.5px; color: rgb(92, 21, 24); margin: 26px 0px 18px; padding-bottom: 14px; border-bottom: 1px solid rgb(238, 230, 224); }
.site-page #content .section-card > h4:first-child { margin-top: 0px; }
.site-page #content h5 { font: 700 18px / 1.4 Arial, Helvetica, sans-serif; margin: 24px 0px 12px; }
.site-page #content p, .site-page #topcontent p { font: 400 15px / 1.75 Arial, Helvetica, sans-serif; color: rgb(69, 62, 57); }
.site-page #content p:empty, .site-page #topcontent p:empty { display: none; }
.site-page #content .content-panel { border: 0px; box-shadow: rgb(232, 224, 218) 0px 0px 0px 1px inset; }
.site-page #content img { border-radius: 8px; }
.site-page #content .floatimgleft { max-width: min(100%, 220px); margin-right: 22px; }
.site-page #content table, .site-page #topcontent table { width: 100%; border: 1px solid rgb(229, 220, 214); background: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.site-page #content th, .site-page #topcontent th { background: rgb(240, 230, 226); color: rgb(92, 21, 24); padding: 12px; }
.site-page #content td, .site-page #topcontent td { padding: 12px; border-bottom: 1px solid rgb(234, 226, 220); }
.site-page #content tr:nth-child(2n), .site-page #topcontent tr:nth-child(2n) { background: rgb(250, 248, 245); }
.site-page caption { padding: 12px; text-align: left; color: rgb(92, 21, 24); }
.site-page #content iframe { border-radius: 10px; }
.site-page #footer { max-width: 1200px; border-top: 1px solid rgb(233, 225, 219); padding: 26px; }
.ratings-page { max-width: 850px; margin: 30px auto; padding: 0px 20px 30px; color: rgb(40, 36, 34); font: 15px / 1.6 Arial, Helvetica, sans-serif; }
.ratings-page h1 { color: rgb(92, 21, 24); font-size: 34px; letter-spacing: -1px; margin: 15px 0px; }
.ratings-page > a { display:inline-block; padding:10px 0; color: rgb(92, 21, 24); font-weight: 700; min-height: 44px; }
.ratings-page .date { font-weight:700; margin-bottom:12px; color: rgb(103, 93, 86); font-size: 16px; }
.ratings-page .table-scroll { max-width:100%; overflow-x:auto; border: 1px solid rgb(229, 220, 214); border-radius: 12px; box-shadow: rgba(57, 37, 26, 0.043) 0px 6px 22px; }
.ratings-page table { border-collapse:collapse; table-layout:auto; width: 100%; border: 0px; }
.ratings-page th { background: rgb(92, 21, 24); color: rgb(255, 255, 255); }
.ratings-page th, .ratings-page td { padding: 10px 14px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(233, 225, 219); border-image: none; }
.ratings-page tbody tr:nth-child(2n) { background: rgb(247, 244, 241); }
@media (max-width: 900px) and (min-width: 761px) {
  :is(.site-page, .home-page) .visit-row { padding: 0px 10px; gap: 8px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .site-page .section-card { padding: 22px; }
}
@media (max-width: 760px) {
  :is(.site-page, .home-page) #header { padding: 24px 20px; gap: 18px; }
}
@media (max-width: 760px) {
  :is(.site-page, .home-page) #mainMenu { margin: 0px; width: 100%; border-radius: 0px; }
}
@media (max-width: 760px) {
  .site-page .page-intro { margin: 24px 20px; padding: 24px 20px; }
}
@media (max-width: 760px) {
  .site-page .page-intro h1 { font-size: 34px; }
}
@media (max-width: 760px) {
  .site-page .page-intro .page-tagline { font-size: 22px; }
}
@media (max-width: 760px) {
  .site-page #topcontent { margin: 0px 20px 24px; width: calc(100% - 40px); padding: 20px; }
}
@media (max-width: 760px) {
  :is(.site-page, .home-page) #content { padding: 0px 20px 28px; }
}
@media (max-width: 760px) {
  .site-page .W { padding: 22px 20px; }
}
@media (max-width: 760px) {
  .site-page #content h4 { font-size: 22px; }
}
@media (max-width: 760px) {
  .site-page #content .floatimgleft { margin: 0px 0px 18px; }
}
@media (max-width: 760px) {
  .site-page #content th, .site-page #content td, .site-page #topcontent th, .site-page #topcontent td { padding: 10px; }
}
@media (max-width: 760px) {
  .ratings-page { margin: 16px auto; padding: 0px 12px 24px; }
}
@media (max-width: 760px) {
  .ratings-page h1 { font-size: 28px; }
}
@media (max-width:760px) { #mainMenu ul[hidden] { display:none; } }
/* Layout states created by the responsive navigation script. */
@media (max-width:760px) {
  #outerDiv > .visit-card { margin:20px; }
}
:where(body:not(.ratings-page)) #content p.pSmall { margin:1ex 0; }
/* Pro shop: a separate photo and evenly spaced brand logos. */
.pro-shop-layout { display:grid; grid-template-columns:minmax(0,314px) minmax(0,1fr); align-items:center; gap:28px; }
.pro-shop-photo { display:block; width:100%; height:auto; }
.brand-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0; margin:0; list-style:none; }
.brand-grid li { display:flex; align-items:center; justify-content:center; min-width:0; min-height:96px; padding:16px; border:1px solid #e9e1db; border-radius:10px; background:#fff; }
.site-page #content .brand-grid img { display:block; width:auto; height:auto; max-width:100%; max-height:63px; border-radius:0; }
@media(max-width:900px) {
  .pro-shop-layout { grid-template-columns:1fr; gap:20px; }
  .pro-shop-photo { max-width:314px; }
}
@media(max-width:600px) {
  .brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .brand-grid li { min-height:82px; padding:12px; }
}
/* Keep the phone menu visible while scrolling. */
@media (max-width: 760px) {
  #outerDiv > #mainMenu {
    position: sticky;
    top: 0;
    z-index: 100;
  }
}
/* Ratings columns: keep names intact and align numbers for comparison. */
.ratings-page th:nth-child(1), .ratings-page td:nth-child(1), .ratings-page th:nth-child(3), .ratings-page td:nth-child(3) { text-align:right; white-space:nowrap; }
.ratings-page th:nth-child(2), .ratings-page td:nth-child(2) { white-space:nowrap; }


/* Large introductory heading, reusable on any page. */
.feature-intro {
  padding: 40px 36px;
}

.feature-intro .intro-label {
  margin: 0 0 14px;
  color: #7a3334;
  font: 700 11px/1.6 Arial, Helvetica, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.feature-intro h1 {
  margin: 0 0 22px;
  color: #342425;
  font: 700 clamp(36px, 4.5vw, 58px)/1.04 Arial, Helvetica, sans-serif;
  letter-spacing: -2px;
}

.feature-intro h1 em {
  color: #7c292e;
  font-family: Georgia, serif;
  font-weight: 400;
}

.feature-intro .intro-description {
  max-width: 460px;
  margin: 0;
  color: #5f5752;
  font: 400 17px/1.7 Arial, Helvetica, sans-serif;
}

@media (max-width: 760px) {
  .feature-intro {
    padding: 28px 20px;
  }
}
/* Slim phone contact strip; the full Visit us card remains at the bottom. */
:is(.site-page, .home-page) .mobile-contact-summary { display: none; }
@media (max-width: 760px) {
  :is(.site-page, .home-page) #header { row-gap: 14px; padding-top: 12px; }
  :is(.site-page, .home-page) .mobile-contact-summary {
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 5px;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e1dc;
  }
  :is(.site-page, .home-page) .mobile-contact-row {
    color: #342425;
    font: 700 clamp(11px, 3vw, 12px)/1.6 Arial, Helvetica, sans-serif;
    white-space: nowrap;
  }
  :is(.site-page, .home-page) .mobile-contact-summary .visit-icon,
  :is(.site-page, .home-page) .mobile-contact-summary .visit-label { display: none; }
  :is(.site-page, .home-page) #header .mobile-contact-summary a {
    display: inline-block; padding: 3px 0;
    color: #342425; font: inherit;
    text-decoration: underline; text-decoration-color: #c5b6af; text-underline-offset: 3px;
  }
  :is(.site-page, .home-page) .mobile-contact-summary .visit-secondary,
  :is(.site-page, .home-page) .mobile-contact-summary .visit-value { display: inline; color: inherit; font: inherit; }
  :is(.site-page, .home-page) #header .mobile-contact-summary a:hover { color: #7c292e; }
  :is(.site-page, .home-page) #header .mobile-contact-summary a:focus-visible { outline: 2px solid #7c292e; outline-offset: 3px; border-radius: 3px; }
}

/* Original club logo and shop badge share one row at every screen size. */
:is(.site-page, .home-page) #header .header-details { flex: 1 1 0; min-width: 0; }
:is(.site-page, .home-page) #header .site-brand { display: block; width: 371px; max-width: 100%; }
:is(.site-page, .home-page) #header .club-logo { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  :is(.site-page, .home-page) #header { column-gap: 20px; row-gap: 8px; padding: 12px 16px 8px; }
  :is(.site-page, .home-page) #header .mobile-contact-summary { padding-bottom: 0; border-bottom: 0; }
  :is(.site-page, .home-page) #header #butterflylink { flex: 0 0 90px; width: 90px; }
  :is(.site-page, .home-page) #header #butterflylink img { width: 90px; }
  :is(.site-page, .home-page) .menu-toggle { padding: 12px 16px; }
}