/* SI Products mega menu (si-products-menu.php). Built 2026-10-18 from the ProductsMenu board.
   Desktop: a panel under the bar, right-aligned with the header container and as wide as it (1232 px max).
   It opens on :hover / :focus-within with no script at all; once menu.js runs (.si-pm-js on the item) it is
   driven by the shared hover engine (.si-nav-open) and by click / keyboard (.si-pm-open) instead.
   A closed panel is hidden AND not hit-testable, like the other mega panels in the header.
   Phones: an Astra .sub-menu (.si-pm-m).
   Since 2026-11-06 the panel is a platform switcher: its rules are at the end of this file (.si-pc).
   This file is menu.css under a new name (2.1.0, the navy Rentals & Bookings card): WP Rocket reuses a minified
   file for as long as its path exists, so an edit to a file it already knows never reaches visitors. */

.si-pm-sr{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important;}
.si-pm-i{display:block;flex:none;}
.si-pm-pill{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;white-space:nowrap;letter-spacing:0;text-transform:none;}
.si-pm-pill-kind{background:#ECF2F9;color:#2F6099;}
.si-pm-pill-soon{background:#FDF3E0;color:#965E00;}
.si-pm-pill-new{background:#FEF1EB;color:#C73E0C;}
.si-pm-pill-free{background:#E8F5EE;color:#1E7A46;}

/* ------------------------------------------------------------------ desktop */
@media (min-width:922px){
  .ast-desktop .main-navigation{position:relative;}
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li{position:static;}
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li > a.menu-link .si-pm-chev{display:inline-flex;align-items:center;margin:0;padding:0;line-height:1;}
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li > a.menu-link .si-pm-chev svg{width:11px !important;height:11px !important;margin:0 !important;fill:currentColor;transition:transform .18s ease;}
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-pm-open > a.menu-link .si-pm-chev svg,
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-nav-open > a.menu-link .si-pm-chev svg{transform:rotate(180deg);}
  body.si-hdr.ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-pm-open > a.menu-link,
  body.si-hdr.ast-desktop #ast-hf-menu-1 > li.si-pm-li:not(.si-pm-js):focus-within > a.menu-link{color:var(--sih-hi,#C73E0C) !important;background:var(--sih-hibg,rgba(16,36,61,.06));}

  #masthead .si-pm{position:absolute;top:100%;right:0;left:auto;z-index:100000;width:min(1232px,calc(100vw - 48px));max-height:calc(100vh - var(--sih-h,76px) - 12px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;margin:0;padding:0;background:#fff;border:1px solid #E4E9F0;border-top:0;border-radius:0 0 16px 16px;box-shadow:0 28px 56px rgba(16,36,61,.18);text-align:left;font-family:inherit;font-weight:400;line-height:1.4;letter-spacing:normal;text-transform:none;white-space:normal;color:#242424;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .12s linear,visibility 0s linear 0s,transform .18s ease;}
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li:not(.si-pm-js):hover > .si-pm,
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li:not(.si-pm-js):focus-within > .si-pm,
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-nav-open > .si-pm,
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-pm-open > .si-pm{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-nav-shut:not(.si-pm-open) > .si-pm{opacity:0;visibility:hidden;pointer-events:none;}
  body.admin-bar #masthead .si-pm{max-height:calc(100vh - var(--sih-h,76px) - 44px);} /* the admin bar sits above the sticky header */

  #masthead .si-pm *{box-sizing:border-box;}
  #masthead .si-pm a{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;}
  #masthead .si-pm a:focus-visible{outline:2px solid #F85112 !important;outline-offset:2px;}
  #masthead .si-pm ul,#masthead .si-pm li{list-style:none;margin:0;padding:0;border:0;}
  #masthead .si-pm p{margin:0;}

  #masthead .si-pm-in{padding:22px 28px 0;}
  #masthead .si-pm-eb{display:block;margin:0 0 12px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#5B5F66;}
  #masthead .si-pm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}

  /* Platform columns */
  #masthead .si-pm-c{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px;background:#fff;border:1px solid #E4E9F0;border-radius:14px;transition:border-color .2s ease,box-shadow .2s ease;}
  #masthead .si-pm-c:hover,#masthead .si-pm-c:focus-within{border-color:#F8B79C;box-shadow:0 10px 24px rgba(16,36,61,.08);}
  #masthead .si-pm-badge{position:absolute;top:12px;right:12px;line-height:1;}
  #masthead .si-pm a.si-pm-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0;color:#111 !important;text-decoration:none;background:none;}
  #masthead .si-pm-logo{display:flex;align-items:center;height:36px;}
  #masthead .si-pm-logo-svg{display:block;flex:none;}
  #masthead .si-pm-nm{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
  #masthead .si-pm-n{font-size:17px;font-weight:700;line-height:1.2;color:#111;}
  #masthead .si-pm a.si-pm-head:hover .si-pm-n{color:#C73E0C;}
  #masthead .si-pm .si-pm-lead{margin:0;font-size:13.5px;line-height:1.55;color:#5B5F66;}
  #masthead .si-pm a.si-pm-main{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:14px;font-weight:700;line-height:1.3;color:#C73E0C !important;text-decoration:none;}
  #masthead .si-pm a.si-pm-main:hover{color:#10243D !important;text-decoration:underline;}
  #masthead .si-pm .si-pm-subs{display:flex;flex-direction:column;padding-top:8px;border-top:1px solid #EEF2F6;}
  #masthead .si-pm a.si-pm-s{display:flex;align-items:center;gap:8px;min-height:32px;font-size:14px;font-weight:600;line-height:1.3;color:#242424 !important;text-decoration:none;}
  #masthead .si-pm a.si-pm-s .si-pm-i{color:#94A3B8;}
  #masthead .si-pm a.si-pm-s:hover{color:#C73E0C !important;text-decoration:underline;}

  /* "Not sure which platform?" */
  #masthead .si-pm-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px;border-radius:14px;background:#10243D;color:#fff;}
  #masthead .si-pm-card-ic{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.08);color:#FF8A3D;}
  #masthead .si-pm-card-t{font-size:17px;font-weight:700;line-height:1.25;color:#fff;}
  #masthead .si-pm-card-d{font-size:13.5px;line-height:1.55;color:#CBD5E1;}
  #masthead .si-pm-card-l{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:8px;border-top:1px solid #24405F;}
  #masthead .si-pm a.si-pm-w{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:36px;font-size:14px;font-weight:700;line-height:1.3;color:#FF8A3D !important;text-decoration:none;}
  #masthead .si-pm a.si-pm-w:hover{color:#fff !important;text-decoration:underline;}

  /* Add-ons */
  #masthead .si-pm-add{margin-top:18px;padding-top:16px;border-top:1px solid #E4E9F0;}
  #masthead .si-pm-add .si-pm-eb{margin-bottom:10px;}
  #masthead .si-pm-addg{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:12px 24px;}
  #masthead .si-pm-ag{display:flex;flex-direction:column;gap:4px;min-width:0;}
  #masthead .si-pm-agl{display:block;padding:0 10px 4px;font-size:12px;font-weight:700;line-height:1.3;color:#10243D;}
  #masthead .si-pm-agi{display:grid;gap:2px 12px;}
  #masthead .si-pm-ag3 .si-pm-agi{grid-template-columns:repeat(3,minmax(0,1fr));}
  #masthead .si-pm-ag1 .si-pm-agi{grid-template-columns:minmax(0,1fr);}
  #masthead .si-pm-ag4{grid-column:1 / -1;}
  #masthead .si-pm-ag4 .si-pm-agi{grid-template-columns:repeat(4,minmax(0,1fr));}
  #masthead .si-pm a.si-pm-a{display:flex;align-items:flex-start;gap:12px;padding:7px 10px;border-radius:10px;color:#242424 !important;text-decoration:none;background:transparent;}
  #masthead .si-pm a.si-pm-a:hover,#masthead .si-pm a.si-pm-a:focus-visible{background:#F6F8FB;}
  #masthead .si-pm-a-ic{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:8px;background:#F6F8FB;color:#C73E0C;}
  #masthead .si-pm a.si-pm-a:hover .si-pm-a-ic{background:#fff;}
  #masthead .si-pm-a-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
  #masthead .si-pm-a-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  #masthead .si-pm-a-t{font-size:14px;font-weight:700;line-height:1.3;color:#111;}
  #masthead .si-pm a.si-pm-a:hover .si-pm-a-t{color:#C73E0C;}
  #masthead .si-pm-a-d{font-size:12.5px;line-height:1.4;color:#5B5F66;}

  /* Bottom bar */
  #masthead .si-pm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:18px;padding:14px 28px;background:#F6F8FB;border-top:1px solid #E4E9F0;border-radius:0 0 15px 15px;}
  #masthead .si-pm-bar-l{font-size:13px;font-weight:700;line-height:1.3;color:#5B5F66;}
  #masthead .si-pm a.si-pm-p{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font-size:13px;font-weight:700;line-height:1.2;color:#10243D !important;text-decoration:none;background:#fff;border:1px solid #CBD5E1;border-radius:999px;}
  #masthead .si-pm a.si-pm-p:hover{background:#FEF1EB;border-color:#F85112;color:#10243D !important;}
  #masthead .si-pm a.si-pm-cust{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-left:auto;font-size:14px;font-weight:700;line-height:1.3;color:#C73E0C !important;text-decoration:none;}
  #masthead .si-pm a.si-pm-cust:hover{color:#10243D !important;text-decoration:underline;}
}
@media (min-width:922px) and (max-width:1220px){
  #masthead .si-pm{width:min(1232px,calc(100vw - 32px));}
}
/* 922-1100 px: three platform columns with the navy card as a row under them, and the two add-on groups
   stacked at full width, so the panel stays about as short as at full size. */
@media (min-width:922px) and (max-width:1100px){
  #masthead .si-pm-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
  #masthead .si-pm-card{grid-column:1 / -1;display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ic t l" "ic d l";gap:4px 16px;align-items:start;}
  #masthead .si-pm-card-ic{grid-area:ic;}
  #masthead .si-pm-card-t{grid-area:t;}
  #masthead .si-pm-card-d{grid-area:d;}
  #masthead .si-pm-card-l{grid-area:l;align-self:center;margin:0;padding:0 0 0 16px;border-top:0;border-left:1px solid #24405F;}
  #masthead .si-pm-addg{grid-template-columns:minmax(0,1fr);}
  #masthead .si-pm-ag1 .si-pm-agi,#masthead .si-pm-ag4 .si-pm-agi{grid-template-columns:repeat(3,minmax(0,1fr));}
  #masthead .si-pm-in{padding:22px 20px 0;}
  #masthead .si-pm-bar{padding:14px 20px;}
}

/* Screens too short for the full panel (it needs about 1,210 px): tighter spacing, and the platform leads and
   add-on one-liners go, so the whole panel, bottom bar included, fits under the bar at 900 px. It still scrolls
   inside itself (max-height) when it does not. */
@media (min-width:922px) and (max-height:1219px){
  #masthead .si-pm .si-pm-lead{display:none;}
  #masthead .si-pm-in{padding-top:18px;}
  #masthead .si-pm-eb{margin-bottom:10px;}
  #masthead .si-pm-c{gap:10px;padding:16px;}
  #masthead .si-pm-card{padding:18px;}
  #masthead .si-pm-logo{height:30px;}
  #masthead .si-pm a.si-pm-s{min-height:30px;}
  #masthead .si-pm-add{margin-top:14px;padding-top:12px;}
  #masthead .si-pm-add .si-pm-eb{margin-bottom:6px;}
  #masthead .si-pm a.si-pm-a{align-items:center;padding:5px 10px;}
  #masthead .si-pm-a-d{display:none;}
  #masthead .si-pm-bar{margin-top:12px;padding-top:10px;padding-bottom:10px;}
}

/* Laptops about 768 px high: tighter again, so every add-on link shows without scrolling. */
@media (min-width:922px) and (max-height:820px){
  #masthead .si-pm-in{padding-top:12px;}
  #masthead .si-pm-eb{margin-bottom:6px;}
  #masthead .si-pm-c{gap:6px;padding:12px 14px;}
  #masthead .si-pm a.si-pm-head{gap:6px;}
  #masthead .si-pm-logo{height:26px;}
  #masthead .si-pm a.si-pm-main{min-height:26px;}
  #masthead .si-pm .si-pm-subs{padding-top:4px;}
  #masthead .si-pm a.si-pm-s{min-height:26px;}
  #masthead .si-pm-card{gap:8px;padding:14px 16px;}
  #masthead .si-pm-card-ic{display:none;}
  #masthead .si-pm a.si-pm-w{min-height:28px;}
  #masthead .si-pm-add{margin-top:10px;padding-top:8px;}
  #masthead .si-pm-add .si-pm-eb{margin-bottom:4px;}
  #masthead .si-pm-addg{gap:6px 24px;}
  #masthead .si-pm-agl{padding-bottom:2px;}
  #masthead .si-pm a.si-pm-a{padding:3px 10px;}
  #masthead .si-pm-bar{margin-top:6px;padding-top:4px;padding-bottom:4px;}
}

/* ------------------------------------------------------------------- phones */
@media (max-width:921px){
  #ast-hf-mobile-menu > li.si-pm-li > .sub-menu.si-pm-m{width:auto !important;margin:0 !important;padding:0 16px 10px !important;border:0 !important;background:transparent !important;box-shadow:none !important;}
  #ast-hf-mobile-menu > li.si-pm-li.ast-submenu-expanded > a.menu-link{color:#C73E0C !important;}
  #ast-hf-mobile-menu .si-pm-m-li{margin:0;padding:0;border:0 !important;list-style:none;}
  #ast-hf-mobile-menu .si-pm-m ul,#ast-hf-mobile-menu .si-pm-m li{list-style:none;margin:0;padding:0;border:0;}
  #ast-hf-mobile-menu .si-pm-m p{margin:0;}
  #ast-hf-mobile-menu .si-pm-md{border-bottom:1px solid #EEF2F6;}
  #ast-hf-mobile-menu .si-pm-md > summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 4px;cursor:pointer;list-style:none;color:#10243D;-webkit-tap-highlight-color:transparent;}
  #ast-hf-mobile-menu .si-pm-md > summary::-webkit-details-marker{display:none;}
  #ast-hf-mobile-menu .si-pm-md > summary::marker{content:"";}
  #ast-hf-mobile-menu .si-pm-md > summary:focus-visible{outline:2px solid #F85112;outline-offset:2px;border-radius:8px;}
  #ast-hf-mobile-menu .si-pm-m-logo,#ast-hf-mobile-menu .si-pm-m-ic{display:flex;align-items:center;flex:none;width:64px;}
  #ast-hf-mobile-menu .si-pm-m-ic{color:#C73E0C;}
  #ast-hf-mobile-menu .si-pm-m-nm{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1 1 auto;min-width:0;}
  #ast-hf-mobile-menu .si-pm-m-n{font-size:16px;font-weight:700;line-height:1.25;color:#10243D;}
  #ast-hf-mobile-menu .si-pm-md > summary .si-pm-i-down{color:#64748B;transition:transform .2s ease;}
  #ast-hf-mobile-menu .si-pm-md[open] > summary .si-pm-i-down{transform:rotate(180deg);}
  #ast-hf-mobile-menu .si-pm-m-list{padding:0 0 8px;}
  #masthead #ast-hf-mobile-menu .si-pm-m a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-size:15px;font-weight:600;line-height:1.3;color:#242424 !important;text-decoration:none;background:transparent;border:0;}
  #masthead #ast-hf-mobile-menu .si-pm-m a:focus-visible{outline:2px solid #F85112;outline-offset:-2px;border-radius:8px;}
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pm-m-main{font-weight:700;color:#C73E0C !important;}
  #ast-hf-mobile-menu .si-pm-m a.si-pm-m-a .si-pm-i{color:#C73E0C;}
  #ast-hf-mobile-menu .si-pm-m-gl{padding:12px 4px 2px !important;font-size:13px;font-weight:700;line-height:1.3;color:#5B5F66;}
  #ast-hf-mobile-menu .si-pm-m-sec{padding-top:10px;border-bottom:1px solid #EEF2F6;}
  #ast-hf-mobile-menu .si-pm-m-sec:last-child{border-bottom:0;}
  #ast-hf-mobile-menu .si-pm-m-sl{display:block;padding:6px 4px 2px;font-size:13px;font-weight:700;line-height:1.3;color:#5B5F66;}
}

@media (prefers-reduced-motion:reduce){
  #masthead .si-pm,#masthead .si-pm *,#ast-hf-mobile-menu .si-pm-m *{transition:none !important;}
}

/* ------------------------------------------------------- platform switcher */
.si-pc-chip{display:flex;align-items:center;justify-content:center;flex:none;background:#fff;border-radius:8px;}
.si-pc-js .si-pc-v:not(.is-on),.si-pc-js .si-pc-mv:not(.is-on){display:none;}
.si-pc-mark{display:none;flex:none;}
/* The art has no box until a panel opens, so its lazy image is not fetched on every page: a closed desktop panel is
   only invisible, and an invisible image with a box would load. Space for it is held by .si-pc-art, so nothing moves. */
.si-pc-img{display:none;}

@media (min-width:922px){
  #masthead .si-pc p{margin:0;}
  #masthead .si-pc-g{display:grid;grid-template-columns:308px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"rail views" "help views";}

  /* The choice: three separate buttons under a line that says what they are for. */
  #masthead .si-pc-rail{grid-area:rail;padding:20px 16px 0 20px;background:#F6F8FB;}
  #masthead .si-pc .si-pc-ask{margin:0 0 10px;font-size:15px;font-weight:700;line-height:1.25;color:#10243D;}
  #masthead .si-pc-tabs{display:grid;grid-auto-rows:1fr;gap:8px;}
  #masthead .si-pc button.si-pc-t{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:64px;margin:0;padding:8px 10px;box-sizing:border-box;font:inherit;font-weight:400;line-height:1.25;letter-spacing:normal;text-align:left;text-transform:none;color:#10243D;background:#fff;border:1.5px solid #CBD5E1;border-radius:10px;box-shadow:none;cursor:pointer;transition:border-color .12s ease,background-color .12s ease;}
  #masthead .si-pc button.si-pc-t:hover{color:#10243D;background:#FEF1EB;border-color:#F85112;}
  #masthead .si-pc button.si-pc-t:focus-visible{outline:2px solid #F85112;outline-offset:2px;}
  #masthead .si-pc button.si-pc-t[aria-pressed="true"],
  #masthead .si-pc button.si-pc-t[aria-pressed="true"]:hover{color:#fff;background:#10243D;border-color:#10243D;}
  #masthead .si-pc button.si-pc-t[aria-pressed="true"]::after{content:"";position:absolute;top:50%;right:-9px;width:16px;height:16px;margin-top:-8px;background:#10243D;border-radius:3px;transform:rotate(45deg);}
  #masthead .si-pc .si-pc-chip{width:68px;height:40px;}
  #masthead .si-pc-tx{display:flex;flex:1 1 auto;flex-direction:column;gap:1px;min-width:0;}
  #masthead .si-pc-n{font-size:15px;font-weight:700;line-height:1.25;}
  #masthead .si-pc-k{font-size:13px;font-weight:400;line-height:1.3;color:#5B5F66;}
  #masthead .si-pc button.si-pc-t[aria-pressed="true"] .si-pc-k{color:#CBD5E1;}
  #masthead .si-pc button.si-pc-t[aria-pressed="false"] .si-pc-go{display:flex;color:#5B5F66;}
  #masthead .si-pc button.si-pc-t[aria-pressed="true"] .si-pc-yes{display:flex;color:#FF8A3D;}

  #masthead .si-pc-help{grid-area:help;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:14px 16px 10px 20px;background:#F6F8FB;}
  #masthead .si-pc a.si-pc-w{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;line-height:1.3;color:#C73E0C !important;text-decoration:none;}
  #masthead .si-pc a.si-pc-w:hover{color:#10243D !important;text-decoration:underline;}

  /* What is showing: a heading that names the platform, then its links. */
  #masthead .si-pc-views{grid-area:views;position:relative;min-width:0;padding:20px 24px 14px 28px;background:#fff;border-left:1px solid #E4E9F0;}
  /* The navy card. The art runs off its bottom edge (board Icon2). 162 px high with three lines of text on every
     platform, so the links stay put when the platform changes: the Magento text needs 434 px for that, which is why
     the art's column stops at the calendar's edge (198; only its faint shadow carries on, under the text) and the
     buttons are 176 wide. */
  #masthead .si-pc-card{display:grid;grid-template-columns:198px minmax(0,1fr) 176px;grid-template-areas:"art hd act" "art ct act";column-gap:16px;align-content:center;min-height:162px;padding:20px 20px 20px 0;overflow:hidden;background:#10243D;border-radius:14px;}
  #masthead .si-pc-art{grid-area:art;position:relative;align-self:stretch;margin:-20px 0;}
  #masthead .si-pc-img{position:absolute;left:0;bottom:-14px;width:206px;height:176px;max-width:none;}
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li:not(.si-pm-js):hover .si-pc-img,
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li:not(.si-pm-js):focus-within .si-pc-img,
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-nav-open .si-pc-img,
  .ast-desktop #ast-hf-menu-1 > li.si-pm-li.si-pm-open .si-pc-img{display:block;}
  #masthead .si-pc-hd{grid-area:hd;position:relative;min-width:0;}
  #masthead .si-pc .si-pc-cn{font-size:24px;font-weight:700;line-height:1.2;color:#fff;}
  #masthead .si-pc .si-pc-cf{margin-top:2px;font-size:15px;font-weight:700;line-height:1.3;color:#FF8A3D;}
  #masthead .si-pc .si-pc-ct{grid-area:ct;position:relative;min-width:0;margin-top:8px;font-size:14px;font-weight:400;line-height:1.5;color:#CBD5E1;}
  #masthead .si-pc-act{grid-area:act;position:relative;display:flex;flex-direction:column;gap:8px;align-self:center;min-width:0;}
  #masthead .si-pc a.si-pc-main,
  #masthead .si-pc a.si-pc-price{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;box-sizing:border-box;font-size:14px;line-height:1.2;white-space:nowrap;text-decoration:none;border-radius:8px;}
  #masthead .si-pc a.si-pc-main{gap:6px;font-weight:700;color:#fff !important;background:linear-gradient(135deg,#C73E0C,#D2450E);box-shadow:0 8px 20px rgba(199,62,12,.30);}
  #masthead .si-pc a.si-pc-main:hover{background:linear-gradient(135deg,#B23609,#C73E0C);}
  #masthead .si-pc a.si-pc-price{font-weight:600;color:#fff !important;border:1px solid rgba(255,255,255,.35);}
  #masthead .si-pc a.si-pc-price:hover{background:rgba(255,255,255,.12);}
  html:not(.si-pc-js) #masthead .si-pc-v + .si-pc-v{margin-top:16px;} /* no script: the three platforms sit one under the other */
  #masthead .si-pc-lists{display:grid;grid-template-columns:216px minmax(0,1fr);gap:24px;padding-top:14px;}
  #masthead .si-pc-col{min-width:0;}
  #masthead .si-pc .si-pc-l{padding:0 8px 4px;font-size:13px;font-weight:700;line-height:1.3;color:#5B5F66;}
  #masthead .si-pc-help .si-pc-l{padding:0 0 2px;color:#10243D;}
  #masthead .si-pc ul.si-pc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
  #masthead .si-pc a.si-pc-r{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;box-sizing:border-box;font-size:14px;font-weight:600;line-height:1.25;color:#242424 !important;text-decoration:none;border-radius:8px;}
  #masthead .si-pc a.si-pc-r .si-pm-i{color:#C73E0C;}
  #masthead .si-pc a.si-pc-r:hover{color:#C73E0C !important;background:#F6F8FB;}
}
/* 1280-1299 can be a window with a classic scrollbar, a little narrower than the full panel: a slimmer rail keeps the
   card as it is. */
@media (min-width:1280px) and (max-width:1299px){
  #masthead .si-pc-g{grid-template-columns:292px minmax(0,1fr);}
  #masthead .si-pc .si-pc-chip{width:60px;}
}
/* Under the full panel width the text would run to more lines beside the buttons, so the buttons move under it. */
@media (min-width:922px) and (max-width:1279px){
  #masthead .si-pc-card{grid-template-columns:198px minmax(0,1fr);grid-template-areas:"art hd" "art ct" "art act";min-height:217px;}
  #masthead .si-pc-act{flex-direction:row;flex-wrap:wrap;align-self:start;margin-top:12px;}
  #masthead .si-pc a.si-pc-main,
  #masthead .si-pc a.si-pc-price{padding:0 16px;}
}
@media (min-width:922px) and (max-width:1100px){
  #masthead .si-pc-g{grid-template-columns:276px minmax(0,1fr);}
  #masthead .si-pc-rail{padding-right:14px;padding-left:14px;}
  #masthead .si-pc-help{padding-left:14px;}
  #masthead .si-pc .si-pc-chip{width:56px;}
  #masthead .si-pc .si-pc-chip svg{max-width:50px;height:auto;}
  #masthead .si-pc-views{padding:16px 16px 12px 20px;}
  #masthead .si-pc-card{grid-template-columns:176px minmax(0,1fr);padding-right:16px;}
  #masthead .si-pc-img{bottom:-12px;width:184px;height:157px;}
  #masthead .si-pc a.si-pc-main,
  #masthead .si-pc a.si-pc-price{padding:0 14px;}
  #masthead .si-pc-lists{grid-template-columns:190px minmax(0,1fr);gap:12px;}
}
@media (min-width:922px) and (max-width:1023px){
  #masthead .si-pc-card{grid-template-columns:154px minmax(0,1fr);}
  #masthead .si-pc-img{bottom:-11px;width:160px;height:137px;}
}
/* Four lines of text start here on some platforms: keep every card as tall as the tallest. */
@media (min-width:922px) and (max-width:1000px){
  #masthead .si-pc-card{min-height:238px;}
}

@media (max-width:921px){
  #ast-hf-mobile-menu .si-pm-m p.si-pc-m-ask{margin:6px 4px 0;font-size:15px;font-weight:700;line-height:1.25;color:#10243D;}
  /* The three stay together and in view while the links scroll under them. */
  #ast-hf-mobile-menu .si-pc-m-tabs{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px 0 14px;background:var(--si-pc-bg,#fff);border-bottom:1px solid #E4E9F0;}
  #ast-hf-mobile-menu button.si-pc-mt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:80px;margin:0;padding:8px 4px;box-sizing:border-box;font:inherit;line-height:1.2;letter-spacing:normal;text-transform:none;color:#10243D;background:#fff;border:1.5px solid #CBD5E1;border-radius:10px;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  #ast-hf-mobile-menu button.si-pc-mt:hover{color:#10243D;background:#fff;border-color:#CBD5E1;}
  #ast-hf-mobile-menu button.si-pc-mt:focus-visible{outline:2px solid #F85112;outline-offset:2px;}
  #ast-hf-mobile-menu button.si-pc-mt[aria-pressed="true"],
  #ast-hf-mobile-menu button.si-pc-mt[aria-pressed="true"]:hover{color:#fff;background:#10243D;border-color:#10243D;}
  #ast-hf-mobile-menu button.si-pc-mt[aria-pressed="true"]::after{content:"";position:absolute;bottom:-7px;left:50%;width:13px;height:13px;margin-left:-6px;background:#10243D;border-radius:2px;transform:rotate(45deg);}
  #ast-hf-mobile-menu .si-pc-mt .si-pc-chip{width:100%;max-width:92px;height:32px;}
  #ast-hf-mobile-menu .si-pc-mn{font-size:clamp(11.5px,3.4vw,13px);font-weight:700;line-height:1.2;white-space:nowrap;}
  #ast-hf-mobile-menu button.si-pc-mt[aria-pressed="true"] .si-pc-yes{position:absolute;top:-7px;right:-5px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#10243D;background:#FF8A3D;border:2px solid #fff;border-radius:999px;box-sizing:border-box;}
  /* The card on a phone: name, text, then the art beside the two buttons, running off the card's bottom edge as it
     does on desktop. The art takes the width the buttons leave, and shows the same part of the picture at any size. */
  #ast-hf-mobile-menu .si-pc-card{display:grid;grid-template-columns:minmax(0,1fr) 176px;grid-template-areas:"hd hd" "ct ct" "art act";margin:14px 0 2px;padding:18px;overflow:hidden;background:#10243D;border-radius:14px;}
  #ast-hf-mobile-menu .si-pc-art{grid-area:art;position:relative;align-self:end;aspect-ratio:206/162;margin:12px 8px -18px -18px;}
  #ast-hf-mobile-menu .si-pc-img{display:block;position:absolute;left:0;bottom:-8.6%;width:100%;height:auto;max-width:none;}
  #ast-hf-mobile-menu .si-pc-hd{grid-area:hd;min-width:0;}
  #ast-hf-mobile-menu .si-pm-m p.si-pc-cn{font-size:21px;font-weight:700;line-height:1.2;color:#fff;}
  #ast-hf-mobile-menu .si-pm-m p.si-pc-cf{margin-top:2px;font-size:14px;font-weight:700;line-height:1.3;color:#FF8A3D;}
  #ast-hf-mobile-menu .si-pm-m p.si-pc-ct{grid-area:ct;min-width:0;margin-top:10px;font-size:14px;font-weight:400;line-height:1.5;color:#CBD5E1;}
  #ast-hf-mobile-menu .si-pc-act{grid-area:act;position:relative;display:flex;flex-direction:column;gap:8px;align-self:center;min-width:0;margin-top:12px;}
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-main,
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-price{justify-content:center;min-height:44px;padding:0 8px;box-sizing:border-box;font-size:14px;line-height:1.2;white-space:nowrap;border-radius:8px;}
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-main{gap:6px;font-weight:700;color:#fff !important;background:linear-gradient(135deg,#C73E0C,#D2450E);box-shadow:0 8px 20px rgba(199,62,12,.30);}
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-price{font-weight:600;color:#fff !important;border:1px solid rgba(255,255,255,.35);}
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-main:focus-visible,
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-price:focus-visible{outline-offset:2px;}
}

/* Under 360 px: the buttons give up their side padding, so the art keeps a readable width. */
@media (max-width:359px){
  #ast-hf-mobile-menu .si-pc-card{grid-template-columns:minmax(0,1fr) 160px;padding:16px;}
  #ast-hf-mobile-menu .si-pc-art{margin:12px 6px -16px -16px;}
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-main,
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-price{padding:0 4px;}
}
/* Tablets use the phone menu but have the room of a narrow desktop: art on the left, text and buttons beside it. */
@media (min-width:560px) and (max-width:921px){
  #ast-hf-mobile-menu .si-pc-card{grid-template-columns:154px minmax(0,1fr);grid-template-areas:"art hd" "art ct" "art act";column-gap:16px;padding:18px 18px 18px 0;}
  #ast-hf-mobile-menu .si-pc-art{align-self:stretch;aspect-ratio:auto;margin:-18px 0;}
  #ast-hf-mobile-menu .si-pc-img{bottom:-11px;width:160px;height:137px;}
  #ast-hf-mobile-menu .si-pc-act{flex-direction:row;flex-wrap:wrap;align-self:start;}
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-main,
  #masthead #ast-hf-mobile-menu .si-pm-m a.si-pc-price{padding:0 16px;}
}