/* Reference 1: light glass, restrained shadow, clear blue selected state. */
:root { --gpg-glass:linear-gradient(180deg,#ffffffed,#edf5ffda);--gpg-glass-blue:linear-gradient(180deg,#278fff,#0867ed);--gpg-glass-ink:#12304f;--gpg-glass-shadow:inset 0 1px 2px #fff,0 4px 10px #2f72b326; }
html body :is(.size-tab,.category-tab,.card-btn,.variant-choice,.size-option>span,.tc-size-option>span,.cta,.detail-buy-online,.detail-quote,.purchase-checkout,.tc-call,.detail-call,.op-size-filter button,.op-card-actions button,.op-card-actions a,.op-primary,.op-secondary,.op-color-options button,.op-quantity-options button) { border:1px solid #c6d8ed!important;border-radius:999px!important;background:var(--gpg-glass)!important;color:var(--gpg-glass-ink)!important;box-shadow:var(--gpg-glass-shadow)!important;backdrop-filter:blur(8px);transition:background .18s,box-shadow .18s,transform .18s; }
html body :is(.size-tab[aria-selected="true"],.category-tab[aria-pressed="true"],.variant-choice[aria-pressed="true"],.card-btn.primary,.cta.primary,.detail-buy-online,.detail-quote,.purchase-checkout,.tc-call,.detail-call,.op-primary,.op-card-actions button:last-child,.op-size-filter button.is-active,.op-color-options button.is-active,.op-quantity-options button.is-active,.size-option input:checked+span,.tc-size-option input:checked+span) { background:var(--gpg-glass-blue)!important;color:#fff!important;border-color:#63a9fa!important;box-shadow:inset 0 1px 2px #ffffff73,0 4px 12px #0867ed38!important; }
html body .roman-color-options .size-option span.dot { border-radius:50%!important;background:var(--swatch)!important;box-shadow:none!important;border:1px solid #0003!important; }
html body .size-tab { min-height:56px;padding-inline:23px;font-weight:850; }
html body :is(.size-tabs,.roman-view-tabs,.variant-choices,.op-size-filter>div) { gap:12px;padding-block:8px; }
html body .size-tabs { padding-inline:5px; }
html body .shop-controls { display:block;margin-bottom:26px; }
html body .shop-label { margin-bottom:8px; }
html body :is(.card-btn,.category-tab) { min-height:46px; }
html body :is(.card-actions,.op-card-actions) { gap:10px;padding:2px 4px 9px; }
html body :is(.size-tab,.category-tab,.card-btn,.variant-choice,.op-size-filter button,.op-card-actions button,.op-primary,.op-secondary):hover:not(:disabled) { transform:translateY(-2px);box-shadow:inset 0 1px 2px #fff,0 7px 15px #286fc33b!important; }
html body :is(.size-tab,.category-tab,.card-btn,.variant-choice,.op-size-filter button,.op-primary):active:not(:disabled) { transform:translateY(0) scale(.98); }
html body :is(.size-tab,.category-tab,.card-btn,.variant-choice,.op-size-filter button,.op-primary):focus-visible { outline:3px solid #004dba!important;outline-offset:3px; }
html body :is(button,a)[disabled],html body button:disabled { cursor:not-allowed;opacity:.55;transform:none!important; }
@media(prefers-reduced-motion:reduce) { html body :is(button,a,label span) { transition:none!important;transform:none!important; } }

/* Product keywords use the same capsule silhouette as the purchase controls. */
html body :is(.tag,.feature-tag,.op-tags>span) { border-radius:999px!important;padding-inline:12px; }

/* The supplied artwork is framed directly, without modifying the source image. */
html body :is(.desktop-nav,.op-nav>ul) { gap:8px; }
html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a) {
  --nav-art-x:2.19%;--nav-art-width:305.92%;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;flex-shrink:0;
  width:var(--nav-width,clamp(80px,9vw,142px));min-height:var(--nav-height,44px);padding:0;
  border:0!important;border-radius:8px;
  background:transparent!important;color:transparent!important;font-size:0;
  box-shadow:none!important;white-space:nowrap;text-decoration:none;
  transition:transform .18s;
}
html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a)::before {
  content:"";display:block;position:absolute;left:0;right:0;top:50%;
  aspect-ratio:710/222;transform:translateY(-50%);pointer-events:none;
  border-radius:6% / 20%;
  background-image:url('/site/assets/brand/navigation-buttons.jpg');
  background-repeat:no-repeat;background-size:var(--nav-art-width) 326.13%;
  background-position:var(--nav-art-x) 48.6%;
  box-shadow:0 3px 8px #12304f26;
  transition:box-shadow .18s;
}
html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a)[href*="/ezup"] { --nav-art-x:50.7%;--nav-art-width:320.35%; }
html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a)[href*="/accessories"] { --nav-art-x:98.3%;--nav-art-width:311.62%; }
html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a)[aria-current="page"]::before,
html body .op-mobile-route-nav>a.active::before {
  outline:2px solid #0867ed;outline-offset:2px;
}
html body :is(.mobile-route-nav,.mobile-nav,.op-mobile-route-nav) { --nav-width:100%;--nav-height:max(44px,10vw);gap:10px;padding:8px 12px; }
html body :is(.mobile-route-nav>a,.mobile-nav>a,.op-mobile-route-nav>a) { min-width:0; }
/* Phones keep a separate row; tablets share the desktop header layout. */
@media(max-width:760px) {
  html body :is(.desktop-nav,.op-nav) { display:none; }
  html body :is(.mobile-route-nav,.mobile-nav,.op-mobile-route-nav) { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border-bottom:1px solid #ddd; }
}
@media(min-width:761px) and (max-width:1250px) {
  html body :is(.header,.op-header) { height:auto;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:12px;row-gap:0;padding:0 3vw; }
  html body .header:has(>.promo) { grid-template-rows:auto 76px; }
  html body .header>.promo { margin-inline:-3vw; }
  html body .header>.desktop-nav { display:flex;grid-column:1;justify-self:start;padding-left:0;gap:6px;--nav-width:clamp(68px,8.5vw,106px); }
  html body .header>a.brand { display:flex;grid-column:2;justify-self:center;font-size:clamp(20px,2.3vw,26px); }
  html body .header .brand img { width:40px;height:40px;flex-basis:40px; }
  html body .header>.header-tools { grid-column:3; }
  html body .header:has(>.promo)>.header-tools { grid-row:2; }
  html body :is(.mobile-route-nav,.mobile-nav,.op-mobile-route-nav) { display:none; }
  html body .op-header { height:76px; }
  html body .op-nav { display:block;grid-column:1;grid-row:1;--nav-width:clamp(68px,8.5vw,106px); }
  html body .op-nav>ul { gap:6px; }
  html body .op-header>a.op-brand { grid-column:2;grid-row:1;justify-self:center;font-size:clamp(20px,2.3vw,26px); }
  html body .op-brand img { width:40px;height:40px; }
  html body .op-tools { grid-column:3; }
}
@media(hover:hover) {
  html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a):hover {
    transform:translateY(-2px);
  }
  html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a):hover::before {
    box-shadow:0 6px 12px #12304f40;
  }
}
html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a):active { transform:translateY(0) scale(.98); }
html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a):focus-visible { outline:3px solid #004dba;outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
  html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a)::before { transition:none; }
}
@media(forced-colors:active) {
  html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a) { font-size:11px;color:LinkText!important;border:1px solid ButtonText!important; }
  html body :is(.desktop-nav>a,.mobile-route-nav>a,.mobile-nav>a,.op-nav>ul>li>a,.op-mobile-route-nav>a)::before { display:none; }
}