#content .sectortiles,
#content .agripanel,
#content .tradeaccount,
#content .talktous {
max-width: var(--pagewidth);
margin: 0 auto;
box-sizing: border-box;
}
#content .agripanel,
#content .tradeaccount,
#content .talktous,
#content .sectortiles .sectortile {
border-radius: 4px;
}
#content .buttons.secondary {
background-color: var(--panel-bg);
color: var(--hdred);
border: 2px solid var(--hdred);
box-sizing: border-box;
}
#content .buttons.secondary:hover {
background-color: var(--hdred);
color: var(--white);
}
#content .pl-strip__rail.sectortiles {
display: flex;
flex-wrap: nowrap;
gap: 1em;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 0 1.2em;
}
#content .pl-strip__rail.sectortiles::-webkit-scrollbar {
display: none;
}
#content .pl-strip__rail.sectortiles .sectortile {
flex: 1 0 15em;
}
@media screen and (max-width: 699px) {
#content .pl-strip__rail.sectortiles .sectortile {
flex: 0 0 76%;
box-sizing: border-box;
}
}
#content .sectortiles .sectortile {
background: var(--panel-bg);
padding: 1.3em var(--rail);
text-decoration: none;
color: inherit;
display: block;
border-bottom: 4px solid transparent;
}
#content .sectortiles .sectortile:hover {
text-decoration: none;
border-bottom-color: var(--hdred);
}
#content .sectortiles .sectoricon {
width: 3em;
height: 3em;
border-radius: 50%;
background: var(--pink-paler);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.7em;
}
#content .sectortiles .sectoricon .icon {
fill: var(--hdred);
width: 1.5em;
height: 1.5em;
}
#content .sectortiles .featured .sectoricon {
background: var(--agri-wash-warm);
}
#content .sectortiles .featured .sectoricon .icon {
fill: var(--agri-dark);
}
#content .sectortiles .featured:hover {
border-bottom-color: var(--agri-dark);
}
#content .sectortiles .sectortile h3 {
margin: 0 0 0.3em;
font-size: 1.25em;
}
#content .sectortiles .sectortile p {
margin: 0;
color: var(--text-soft);
font-size: 0.95em;
line-height: 150%;
}
#content .agripanel {
margin-top: var(--sectiongap);
background: var(--agri-dark);
color: var(--white);
position: relative;
overflow: hidden;
}
#content .agripanel::before {
content: "";
position: absolute;
inset: 0;
background: url("/images/agri-tracks.svg") no-repeat right bottom;
background-size: contain;
opacity: 0.14;
pointer-events: none;
}
#content .agripanel > * {
position: relative;
}
#content .agripanel .agrihead {
display: grid;
grid-gap: 0.4em 1.4em;
}
@media screen and (min-width: 700px) {
#content .agripanel .agrihead {
grid-template-columns: auto 1fr;
align-items: start;
}
}
#content .agripanel .agriintro h2 {
margin-top: 0;
}
#content .agripanel .agriintro p:last-child {
margin-bottom: 0;
}
#content .agripanel .agrimark {
display: block;
width: auto;
height: 3.4em;
margin-bottom: 0.5em;
}
#content .agripanel .agriproducts {
padding: 0 var(--rail) 2em;
}
#content .agripanel .heroslidename {
color: var(--agri-pale);
}
#content .agripanel .heroslide:hover .heroslidename {
color: var(--white);
}
#content .agripanel .herodot {
background: var(--agri-light);
}
#content .agripanel .herodot[aria-selected="true"] {
background: var(--white);
}
#content .agripanel .herodot:focus-visible {
outline-color: var(--white);
}
@media screen and (min-width: 700px) {
#content .agripanel.agripanelsplit {
display: grid;
grid-template-columns: 5fr 4fr;
align-items: center;
gap: 2.5em;
}
#content .agripanel.agripanelsplit .agricopy {
padding-right: 0;
}
#content .agripanel.agripanelsplit .agrilist {
grid-template-columns: 1fr;
}
#content .agripanel .agriproducts {
padding: 2.1em var(--rail) 2.1em 0;
}
#content .agripanel .heroslide img {
height: 16em;
}
#content .agripanel::before {
background-position: right center;
background-size: auto 100%;
}
}
@media screen and (min-width: 700px) and (max-width: 999px) {
#content .agripanel .heroslide img {
height: 11em;
}
#content .agripanel.agripanelsplit h2 {
font-size: 1.6em;
}
#content .agripanel.agripanelsplit {
gap: 1.5em;
}
}
#content .agripanel .agricopy {
padding: 1.6em 1.4em;
}
#content .agripanel .agribadge {
display: inline-block;
margin: 0 0 0.7em;
padding: 0.25em 0.8em;
background: var(--agri-light);
color: var(--agri-darkest);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75em;
}
#content .agripanel h2 {
margin: 0 0 0.5em;
color: var(--white);
font-size: 1.9em;
line-height: 120%;
}
#content .agripanel p {
color: var(--agri-pale);
max-width: 46em;
}
#content .agripanel .agrilist {
list-style: none;
margin: 0.9em 0 0;
padding: 0;
display: grid;
grid-gap: 0.5em;
}
#content .agripanel .agrilist li {
display: flex;
align-items: flex-start;
gap: 0.6em;
color: var(--agri-wash);
}
#content .agripanel .agrilist .icon {
fill: var(--agri-light);
width: 1.2em;
height: 1.2em;
flex-shrink: 0;
margin-top: 0.15em;
}
@media screen and (max-width: 999px) {
#content .agripanel .agrilist {
display: none;
}
}
#content .agripanel .agriactions {
margin: 1em 0 0;
display: flex;
flex-wrap: wrap;
gap: 0.7em;
}
#content .agripanel .agriactions .buttons {
display: inline-block;
background-color: var(--agri-light);
color: var(--agri-darkest);
}
#content .agripanel .agriactions .buttons:hover {
background-color: var(--white);
color: var(--agri-darkest);
}
#content .agripanel .agriactions .buttons.secondary {
background-color: transparent;
color: var(--white);
border-color: var(--agri-muted);
}
#content .agripanel .agriactions .buttons.secondary:hover {
background-color: var(--white);
color: var(--agri-darkest);
border-color: var(--white);
}
#content .tradeaccount {
margin-top: var(--sectiongap);
background: var(--panel-bg);
}
#content .tradeaccount .tradeaccountcopy {
padding: 1.6em 1.4em 0;
}
#content .tradeaccount h2 {
margin: 0 0 0.5em;
font-size: 1.9em;
line-height: 120%;
color: var(--hdred);
}
#content .tradeaccount p {
max-width: 44em;
}
#content .tradeaccount .tradeaccountactions {
display: flex;
flex-wrap: wrap;
gap: 0.7em;
margin: 1.3em 0 0;
}
#content .tradeaccount .tradeaccountactions .buttons {
display: inline-block;
}
#content .tradeaccount .tradeaccountlist,
#content .talktous .talktouslist {
list-style: none;
margin: 0;
padding: 1.4em;
display: grid;
grid-gap: 0.5em;
}
#content .tradeaccount .tradeaccountlist li,
#content .talktous .talktouslist li {
display: flex;
align-items: center;
gap: 0.6em;
}
#content .tradeaccount .tradeaccountlist .icon,
#content .talktous .talktouslist .icon {
fill: var(--hdred);
width: 1.2em;
height: 1.2em;
flex-shrink: 0;
}
#content .talktous {
margin-top: var(--sectiongap);
background: var(--panel-bg);
}
#content .talktous .talktouscopy {
padding: 1.6em 1.4em 0;
}
#content .talktous h2 {
margin: 0 0 0.5em;
font-size: 1.9em;
line-height: 120%;
color: var(--hdred);
}
#content .talktous p {
max-width: 40em;
}
#content .talktous .talktousactions {
display: flex;
flex-wrap: wrap;
gap: 0.7em;
margin: 1.3em 0 0;
}
#content .talktous .talktousactions .buttons {
display: inline-block;
}
#content .talktous .talktousactions .icon {
fill: var(--white);
margin-right: 0.3em;
}
#content .talktous .talktousactions .secondary .icon {
fill: var(--hdred);
}
@media screen and (min-width: 700px) {
#content .agripanel .agricopy {
padding: 2.1em 2em;
}
#content .agripanel .agrilist {
grid-template-columns: 1fr 1fr;
grid-gap: 0.35em 1.5em;
}
#content .tradeaccount,
#content .talktous {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
grid-gap: 1em;
align-items: center;
}
#content .tradeaccount .tradeaccountcopy,
#content .talktous .talktouscopy {
padding: 2.2em 0 2.2em 2em;
}
#content .tradeaccount .tradeaccountlist,
#content .talktous .talktouslist {
padding: 2.2em 2em 2.2em 0;
}
}
#content .welcomeback {
max-width: var(--pagewidth);
margin: 1rem auto 0;
padding: 0.9em 1.2em;
box-sizing: border-box;
background: var(--panel-bg);
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6em 1.5em;
}
#content .welcomeback + .promopanel {
margin-top: 1rem;
}
#content .welcomeback .welcomebackgreeting {
margin: 0;
font-size: 1.4em;
}
#content .welcomeback .welcomebackmeta {
display: block;
margin-top: 0.2em;
font-size: 0.9em;
color: var(--text-quiet);
}
#content .welcomeback .welcomebackactions {
display: flex;
align-items: center;
gap: 1em;
flex: 0 0 auto;
}
#content .sameagain {
max-width: var(--pagewidth);
margin: 1rem auto 0;
background: var(--panel-bg);
box-sizing: border-box;
border-radius: 4px;
overflow: clip;
}
#content .sameagain .sameagainhead {
background: var(--hdred);
color: var(--white);
padding: 0.8em 1.2em;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4em 1em;
}
#content .sameagain .sameagainhead h2 {
margin: 0;
color: var(--white);
font-size: 1.4em;
}
#content .sameagain .sameagainmeta {
color: var(--pink-pale);
font-size: 0.9em;
}
#content .sameagain .sameagainforget {
margin-left: auto;
color: var(--pink-pale);
font-size: 0.85em;
}
#content .sameagain .sameagainforget:hover {
color: var(--white);
}
#content .sameagain .sameagainline {
display: grid;
grid-template-columns: 3.5em 1fr auto;
grid-gap: 0.3em 0.9em;
align-items: center;
padding: 0.7em 1.2em;
border-bottom: 1px solid var(--rule-faint);
}
#content .sameagain .sameagainline:last-child {
border-bottom: 0;
}
#content .sameagain .salimg {
width: 3.5em;
height: 3.5em;
background: var(--warm-wash);
}
#content .sameagain .salimg img {
width: 100%;
height: 100%;
object-fit: contain;
}
#content .sameagain .salname {
display: inline;
font-weight: bold;
line-height: 140%;
}
#content .sameagain .salmeta {
display: block;
font-size: 0.85em;
color: var(--text-quiet);
}
#content .sameagain .salmeta > span + span::before {
content: " \00b7 ";
color: var(--text-quiet);
}
@media screen and (max-width: 699px) {
#content .sameagain .salcode {
display: none;
}
}
#content .sameagain .salstock {
color: var(--agri);
}
#content .sameagain .saldue {
color: var(--hdred);
font-weight: bold;
}
#content .sameagain .salinbasket {
color: var(--agri);
font-weight: bold;
}
#content .sameagain .salqty {
grid-column: 2 / 3;
font-size: 0.9em;
color: var(--grey-44);
font-variant-numeric: tabular-nums;
display: flex;
align-items: center;
gap: 0.5em;
}
#content .sameagain .salqtybox {
font-size: 1.2em;
width: 2em;
height: 1em;
margin: 0;
padding: 0.5em;
box-sizing: content-box;
line-height: 1;
border: 1px solid var(--field-border, var(--rule));
border-radius: 4px;
background: var(--field-bg, var(--panel-bg));
color: var(--text);
appearance: textfield;
-moz-appearance: textfield;
text-align: center;
font-variant-numeric: tabular-nums;
}
#content .sameagain .salqtybtn {
background: var(--brightblue);
color: var(--white);
border: 1px solid var(--brightblue);
border-radius: 4px;
cursor: pointer;
font-size: 1.2em;
width: 1em;
height: 1em;
padding: 0.5em;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
}
#content .sameagain .salqtyminus {
background: var(--grey-99);
border-color: var(--grey-99);
}
#content .sameagain .salqtybtn,
#content .sameagain .salqtybox {
font-size: 1.02rem;
}
#content .sameagain .salqtybtn:hover {
background: var(--darkblue);
border-color: var(--darkblue);
}
#content .sameagain .salqtybtn svg.icon {
width: 0.9em;
height: 0.9em;
fill: var(--white);
}
#content .sameagain .saloption {
display: inline-block;
background: var(--blue-tint-pale);
border: 1px solid var(--dustyblue-wash);
border-radius: 3px;
padding: 0 0.45em;
margin-left: 0.4em;
font-size: 0.85em;
font-weight: bold;
color: var(--darkblue);
vertical-align: 2%;
}
#content .sameagain .salusual {
display: block;
font-size: 0.85em;
font-weight: normal;
white-space: normal;
color: var(--text-quiet);
}
#content .sameagain .salunit {
display: block;
font-size: 0.9em;
color: var(--text);
}
#content .sameagain .saladd {
margin: 0;
padding: 0.35em 1em;
line-height: 1.4;
min-height: 44px;
}
#content .sameagain .salalert {
margin: 0;
padding: 0.7em 1.2em;
background: var(--agri-wash-cool);
border-bottom: 1px solid var(--agri-paler);
color: var(--agri);
font-weight: bold;
}
#content .sameagain .saltotalnote {
display: block;
font-size: 0.8em;
color: var(--text-quiet);
margin: -0.4em 0 0.8em;
}
#content .sameagain .salzero {
margin: 0.6em 0 0;
font-size: 0.85em;
color: var(--text-soft);
line-height: 150%;
}
#content .sameagain .salprice {
grid-column: 3 / 4;
grid-row: 1 / 2;
font-weight: bold;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#content .sameagain .salpriceeach {
font-weight: normal;
font-size: 0.8em;
color: var(--text-quiet);
}
#content .sameagain .sameagainside {
padding: 1.2em;
background: var(--warm-wash);
}
#content .sameagain .saltotallabel {
display: block;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-quiet);
}
#content .sameagain .saltotal {
display: block;
font-size: 1.9em;
font-weight: bold;
line-height: 1.1;
margin-bottom: 0.6em;
font-variant-numeric: tabular-nums;
}
#content .sameagain .sameagainside .buttons {
display: block;
width: 100%;
box-sizing: border-box;
}
#content .sameagain .salsignin {
margin: 0.8em 0 0;
font-size: 0.85em;
color: var(--text-soft);
line-height: 150%;
}
@media screen and (min-width: 700px) {
#content .sameagain .sameagainbody {
display: grid;
grid-template-columns: 1fr 17em;
}
#content .sameagain .sameagainlines {
border-right: 1px solid var(--rule-faint);
}
#content .sameagain .sameagainline {
grid-template-columns: 3.5em 1fr auto auto;
}
#content .sameagain .salprice {
grid-column: 3 / 4;
text-align: right;
}
#content .sameagain .salqty {
grid-column: 4 / 5;
grid-row: 1 / 2;
justify-content: flex-end;
}
}