/* 2026-10-10 Bill approved: new Sail Store look, shared header/menu/footer/columns for every page except the homepage. */
body{background:#ecf0f1;color:#2c3e50;font:16px/1.6 Lato,Roboto,"Helvetica Neue",Arial,sans-serif;}
/* hero header: existing header photo, bigger and cleaner */
#headerwrapper{height:auto !important;min-height:300px;background-size:cover !important;background-position:center 40% !important;padding:30px 16px 36px !important;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -80px 120px -60px rgba(0,30,60,.45);position:relative;overflow:hidden;}
#headerwrapper:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 60%) no-repeat;background-size:300% 100%;background-position:120% 0;animation:ssmshine 10s ease-in-out 1.5s infinite;}
@keyframes ssmshine{0%{background-position:120% 0}35%,100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){#headerwrapper:after{display:none;animation:none}}
#headerwrapper .searchbox{position:relative;z-index:1;width:100%;max-width:560px;margin:0 auto;}
#headerwrapper .searchbox h2{font:900 56px/1.1 Lato,Roboto,Arial,sans-serif !important;letter-spacing:.01em;text-shadow:0 3px 14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6);margin:0 0 18px !important;}
#headerwrapper .searchBox{background:rgba(255,255,255,.95);border:0;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.35);padding:20px 26px 16px;width:auto;max-width:520px;text-align:center;}
#headerwrapper .searchBox h3{font:700 21px/1.3 Lato,Roboto,Arial,sans-serif;margin:0 0 12px;}
#headerwrapper form[name=quick_find]{margin:0 0 6px !important;display:flex;justify-content:center;align-items:center;gap:8px;font-size:0;}
#headerwrapper form[name=quick_find] input[type=search]{flex:1 1 auto;max-width:360px;height:48px;padding:6px 14px;font:17px Lato,Roboto,Arial,sans-serif;border:1px solid #b9c4cc;border-radius:10px;box-sizing:border-box;margin:0;}
#headerwrapper form[name=quick_find] input[type=search]:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px rgba(52,152,219,.25);}
#headerwrapper form[name=quick_find] .btn{height:48px;min-width:56px;border-radius:10px;font-size:20px;margin:0;}
#headerwrapper .searchBox h4{margin:8px 0 0;line-height:1.3;}
#headerwrapper .searchBox h4 a{font-weight:700;}
#headerwrapper .searchBox h4 a[href^="tel:"]{color:#2c3e50;text-decoration:none;font-weight:800;}
#headerwrapper .searchBox h4 a[href^="tel:"]:hover{color:#c0392b;}
/* FX byline (cross-brand) */
#fxcb-byline{background:#fff;border-bottom:1px solid #dfe6ea;font-family:Lato,Roboto,Arial,sans-serif;}
#fxcb-byline a{color:#2c3e50;}
/* breadcrumb + cart/checkout/account bar */
header .infoBoxHeading{background:#3498db !important;border:0 !important;padding:8px 10px;color:#fff;font:700 15px/1.6 Lato,Roboto,Arial,sans-serif;display:flex;flex-wrap:wrap;align-items:center;}
header .infoBoxHeading:before,header .infoBoxHeading:after{display:none;}
header .infoBoxHeading>.col-md-6{float:none;flex:1 1 300px;padding:4px 8px;}
header .infoBoxHeading a.headerNavigation{color:#fff;font-weight:700;}
#headerShortcuts .btn-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;float:none;}
#headerShortcuts .btn-group>.btn{float:none;border-radius:8px !important;margin:0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);color:#fff;font:700 15px/1.4 Lato,Roboto,Arial,sans-serif;padding:7px 14px;text-shadow:none;}
#headerShortcuts .btn-group>.btn:hover{background:#fff;color:#2471a3;}
/* page layout: left nav | products | right column */
#bodyWrapper{width:auto !important;background:transparent !important;}
section[role=main]{clear:both;}
section[role=main]>#bodyWrapper{max-width:1320px;margin:0 auto;padding:26px 20px 10px;}
section[role=main]>#bodyWrapper>.row{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;grid-template-areas:"left main right";gap:26px;margin:0;}
section[role=main]>#bodyWrapper>.row:before,section[role=main]>#bodyWrapper>.row:after{display:none;}
#bodyContent{grid-area:main;}
#columnLeft{grid-area:left;}
#columnRight{grid-area:right;}
#bodyContent,#columnLeft,#columnRight{width:auto !important;float:none !important;left:auto !important;right:auto !important;padding:0 !important;min-width:0;}
/* product category tiles */
/* side boxes */
:is(#columnLeft,#columnRight) .infoBoxContainer{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 3px 14px rgba(44,62,80,.10);margin:0 0 20px;border:0;}
:is(#columnLeft,#columnRight) .infoBoxContainer>.ui-widget-header.infoBoxHeading{background:#3498db !important;border:0 !important;color:#fff !important;font:900 15px/1.4 Lato,Roboto,Arial,sans-serif;letter-spacing:.03em;padding:11px 16px !important;border-radius:0 !important;}
:is(#columnLeft,#columnRight) .infoBoxContainer>.ui-widget-header.infoBoxHeading a{color:#fff !important;}
:is(#columnLeft,#columnRight) .infoBoxContainer>.ui-widget-content{background:#fff !important;border:0 !important;padding:12px 16px 14px !important;font:16px/1.95 Lato,Roboto,Arial,sans-serif;color:#2c3e50;}
:is(#columnLeft,#columnRight) .infoBoxContainer>.ui-widget-content a{color:#1f6fb2;font-weight:700;}
:is(#columnLeft,#columnRight) .infoBoxContainer>.ui-widget-content a:hover{color:#c0392b;}
#columnRight .infoBoxContents p{font-size:15px;line-height:1.55;margin:0 0 8px;}
#columnRight .infoBoxContents hr{margin:12px 0;border-color:#e3e9ed;}
#columnRight select{height:38px;border-radius:8px;border:1px solid #b9c4cc;font-size:15px;}
/* footer */
footer{background:#2c3e50;color:#cdd7df;margin-top:26px;padding:26px 16px 30px;font:15px/1.9 Lato,Roboto,Arial,sans-serif;}
footer p{margin:0;color:#cdd7df;}
footer a{color:#fff;font-weight:700;}
footer a:hover{color:#f1c40f;}
@media (max-width:1100px){
 section[role=main]>#bodyWrapper>.row{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"left main" "left right";}
}
@media (max-width:760px){
 #headerwrapper{min-height:0;padding:22px 12px 26px !important;}
 #headerwrapper .searchbox h2{font-size:40px !important;margin-bottom:14px !important;}
 #headerwrapper .searchBox{padding:16px 16px 12px;}
 #headerwrapper .searchBox h3{font-size:18px;}
 #headerwrapper .searchBox h4,#headerwrapper .searchBox h4 a{font-size:19px !important;}
 header .infoBoxHeading>.col-md-6{flex:1 1 100%;text-align:center;}
 #headerShortcuts .btn-group{justify-content:center;}
 #headerShortcuts .btn-group>.btn{font-size:14px;padding:8px 10px;}
 section[role=main]>#bodyWrapper{padding:18px 12px 6px;}
 section[role=main]>#bodyWrapper>.row{display:block;}
 #bodyContent,#columnLeft,#columnRight{margin-bottom:20px;}
}
/* refinements */
header .infoBoxHeading a.headerNavigation{font:700 15px/1.6 Lato,Roboto,Arial,sans-serif;}
:is(#columnLeft,#columnRight) .infoBoxContainer>.ui-widget-header.infoBoxHeading a{font:inherit;}
footer p,footer a{font-size:15px !important;line-height:1.9 !important;font-family:Lato,Roboto,Arial,sans-serif !important;}
@media (min-width:1101px){
 section[role=main]>#bodyWrapper>.row{grid-template-columns:210px minmax(0,1fr) 240px;}
}
/* 2026-10-10 banner v2/v3: light panel, transparent logo (no card), 15%-smaller search card */
#headerwrapper{background:linear-gradient(100deg,#ffffff 0%,#f5f9fd 36%,#dbeaf6 100%) !important;min-height:0;padding:30px 24px 34px !important;gap:40px;box-shadow:none;border-bottom:3px solid #0d8d99;}
#headerwrapper:after{display:none;}
#headerwrapper .searchbox{flex:0 0 450px;max-width:450px;margin:0;}
#headerwrapper .searchbox h2#ssm-logo{display:block;margin:0 0 14px !important;padding:0;line-height:0 !important;font-size:0 !important;background:none;box-shadow:none;text-shadow:none;}
#ssm-logo img{display:block;width:360px;max-width:100%;height:auto;margin:0 auto;}
#headerwrapper .searchBox{zoom:.85;box-shadow:0 10px 30px rgba(0,43,83,.16);border:1px solid #e1ebf3;}
/* 2026-10-10 banner v3: two photos feathered into the banner (no boxes) */
#headerwrapper{gap:34px;padding:22px 24px 24px !important;}
.ssm-ph{display:block;flex:0 0 auto;line-height:0;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 68%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 68%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%);mask-composite:intersect;}
.ssm-ph img{display:block;height:100%;width:auto;}
.ssm-ph-l{order:-1;height:310px;}
.ssm-ph-r{order:2;height:250px;}
@media (max-width:1000px){ .ssm-ph-l{height:260px;} .ssm-ph-r{height:210px;} #headerwrapper{gap:16px;} }
@media (max-width:900px){
 #headerwrapper{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;padding:22px 0 10px !important;}
 #headerwrapper .searchbox{order:0;flex:0 0 100%;width:100%;max-width:none;padding:0 12px;box-sizing:border-box;}
 #headerwrapper .searchBox{margin-left:auto;margin-right:auto;}
 .ssm-ph-l{order:1;height:200px;margin-top:6px;}
 .ssm-ph-r{order:2;height:170px;margin-top:6px;}
}
@media (max-width:760px){
 #ssm-logo img{width:290px;}
 #headerwrapper .searchBox{max-width:calc(100vw - 24px);margin-left:auto;margin-right:auto;}
 .ssm-ph-l{height:190px;} .ssm-ph-r{height:160px;}
}
/* 2026-10-10 pre-launch: bigger tap targets on phones/tablets/touch screens for the header e-mail/phone, FX byline and footer links (spacing only) */
@media (max-width:1024px),(pointer:coarse){
 #headerwrapper .searchBox h4 a{display:inline-block;padding:8px 6px;}
 #fxcb-byline a{display:inline-block;padding:8px 0;}
 footer a{display:inline-block;padding:8px 2px;}
}
/* 2026-10-10 pre-launch: pages without a right column (product, cart, checkout) use the full width instead of leaving an empty column */
section[role=main]>#bodyWrapper>.row:not(:has(#columnRight)){grid-template-columns:210px minmax(0,1fr);grid-template-areas:"left main";}
@media (max-width:1100px){ section[role=main]>#bodyWrapper>.row:not(:has(#columnRight)){grid-template-columns:220px minmax(0,1fr);} }
@media (max-width:760px){ section[role=main]>#bodyWrapper>.row:not(:has(#columnRight)){display:block;} }
/* 2026-10-10 pre-launch: side boxes whose content is a table (Shopping Cart box) keep their padding inside the box */
:is(#columnLeft,#columnRight) .infoBoxContainer>table.ui-widget-content{padding:8px 0 !important;width:100%;}
:is(#columnLeft,#columnRight) .infoBoxContainer>table.ui-widget-content td{padding:2px 6px;}
:is(#columnLeft,#columnRight) .infoBoxContainer>table.ui-widget-content td:first-child{padding-left:16px;}
:is(#columnLeft,#columnRight) .infoBoxContainer>table.ui-widget-content td:last-child{padding-right:16px;}

/* pre-launch fix: phones -- the main content contains its own floats so the side boxes below it are full width (checkout pages) */
@media (max-width:760px){ #bodyContent{display:flow-root;} #columnLeft,#columnRight{clear:both;} }