/* Shared Shop and homepage child-category navigation. */
.sunxi-subnav {
  margin: 0 auto 70px;
  padding: 24px 0 0;
  border-top: 1px solid rgb(29 28 25 / 18%);
  color: #1d1c19;
}
.sunxi-subnav__eyebrow {
  margin: 0 0 28px;
  font: 700 10px/1.35 Arial, Helvetica, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.sunxi-subnav__families {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3.2vw, 48px);
}
.sunxi-subnav__family {
  min-width: 0;
  border-top: 1px solid rgb(29 28 25 / 18%);
}
.sunxi-subnav__family summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 79px;
  padding: 19px 0 12px;
  list-style: none;
  cursor: pointer;
}
.sunxi-subnav__family summary::-webkit-details-marker { display: none; }
.sunxi-subnav__family summary:focus { outline: none; }
.sunxi-subnav__family summary:focus-visible { outline: 2px solid #853b36; outline-offset: 3px; }
.sunxi-subnav__number { flex: none; color: #77736d; font: 400 10px/1.3 Arial, Helvetica, sans-serif; }
.sunxi-subnav__name { flex: 1; font: 400 clamp(21px, 2.1vw, 30px)/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.sunxi-subnav__count { color: #77736d; font: 400 10px/1.3 Arial, Helvetica, sans-serif; white-space: nowrap; }
.sunxi-subnav__toggle { display: none; color: #706d66; font: 400 19px/1 Arial, Helvetica, sans-serif; }
.sunxi-subnav__links { display: flex; flex-direction: column; gap: 0; padding: 0 0 20px 22px; }
.sunxi-subnav__links > * {
  display: block;
  padding: 8px 0;
  color: #57534e;
  font: 400 12px/1.4 Arial, Helvetica, sans-serif;
  text-decoration: none;
}
.sunxi-subnav__links > a { width: fit-content; margin-bottom: 3px; padding-bottom: 4px; border-bottom: 1px solid #77736d; color: #1d1c19; font-weight: 700; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.sunxi-subnav__links > a:hover { color: #853b36; border-bottom-color: #853b36; }
.sunxi-subnav__links > a:not(:first-child) { width: auto; margin: 0; padding: 8px 0; border: 0; color: #57534e; font: 400 12px/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; }
.sunxi-subnav__links > a:not(:first-child):hover { color: #853b36; text-decoration: underline; text-underline-offset: 3px; }
.sunxi-subnav__secondary { display: flex; gap: clamp(22px, 4vw, 58px); margin-top: 13px; border-top: 1px solid rgb(29 28 25 / 18%); }
.sunxi-subnav__secondary a { display: inline-flex; align-items: baseline; gap: 10px; padding: 18px 0 0; color: #1d1c19; font: 400 18px/1.3 Georgia, "Times New Roman", serif; text-decoration: none; }
.sunxi-subnav__secondary a span { color: #77736d; font: 400 10px/1.3 Arial, Helvetica, sans-serif; }
.sunxi-subnav__secondary a:hover { color: #853b36; }

/* Homepage Shop menu review: four product families, then the two small types. */
.site-header .nav-panel-shop-review {
  left: 50%;
  width: min(980px, calc(100vw - 48px));
  padding: 26px 30px 24px;
  color: #1d1c19;
  background: rgb(255 255 255 / 98%);
  text-shadow: none;
  box-shadow: 0 22px 54px rgb(20 20 18 / 14%);
  transform: translate(-35%, -8px);
}
.site-header .nav-dropdown:hover .nav-panel-shop-review,
.site-header .nav-dropdown:focus-within .nav-panel-shop-review,
.site-header .nav-dropdown.is-open .nav-panel-shop-review { transform: translate(-35%, 0); }
.shop-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; padding: 23px 0 20px; }
.shop-review-group { min-width: 0; }
.shop-review-group > a { display: inline-block; margin-bottom: 13px; color: #1d1c19; font: 400 21px/1.15 Georgia, "Times New Roman", serif; text-decoration: none; letter-spacing: -.025em; }
.shop-review-group > a:hover { color: #853b36; }
.shop-review-group > span { display: block; padding: 5px 0; color: #5c5853; font: 400 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; }
.shop-review-group > a.shop-review-child { display: block; margin: 0; padding: 5px 0; color: #5c5853; font: 400 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0; text-decoration: none; text-transform: none; }
.shop-review-group > a.shop-review-child:hover { color: #853b36; text-decoration: underline; text-underline-offset: 3px; }
.shop-review-extra { display: flex; gap: 24px; padding-top: 15px; border-top: 1px solid rgb(29 28 25 / 14%); }
.shop-review-extra a { color: #1d1c19; font: 700 10px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.shop-review-extra a:hover { color: #853b36; }
.site-header .mobile-shop-review:not([hidden]) { display: block; }
.site-header .mobile-shop-review[hidden] { display: none; }
.mobile-shop-review > a,
.mobile-shop-review details > summary { display: block; width: 100%; padding: 12px 0; color: inherit; border-bottom: 1px solid rgb(255 255 255 / 20%); font: 400 17px/1.2 Georgia, "Times New Roman", serif; letter-spacing: 0; text-decoration: none; text-transform: none; list-style: none; cursor: pointer; }
.mobile-shop-review details > summary::-webkit-details-marker { display: none; }
.mobile-shop-review details > summary::after { content: '+'; float: right; font: 400 19px/1 Arial, Helvetica, sans-serif; }
.mobile-shop-review details[open] > summary::after { content: '−'; }
.mobile-shop-review details > div { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 18px 13px; border-bottom: 1px solid rgb(255 255 255 / 20%); }
.mobile-shop-review details > div a,
.mobile-shop-review details > div span { color: rgb(255 255 255 / 78%); font: 400 11px/1.35 Arial, Helvetica, sans-serif; letter-spacing: .04em; text-decoration: none; text-transform: none; }
.mobile-shop-review details > div a { color: #fff; font-weight: 700; }
.mobile-shop-review details > div a:not(:first-child) { color: rgb(255 255 255 / 78%); font-weight: 400; }

@media (max-width: 1050px) {
  .sunxi-subnav__families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .sunxi-subnav { margin-bottom: 43px; padding-top: 20px; }
  .sunxi-subnav__eyebrow { margin-bottom: 18px; }
  .sunxi-subnav__families { display: block; }
  .sunxi-subnav__family summary { align-items: center; min-height: 65px; padding: 14px 0; }
  .sunxi-subnav__name { font-size: 22px; }
  .sunxi-subnav__count { font-size: 9px; }
  .sunxi-subnav__toggle { display: block; }
  .sunxi-subnav__family[open] .sunxi-subnav__toggle { transform: rotate(45deg); }
  .sunxi-subnav__links { padding: 0 0 18px 22px; }
  .sunxi-subnav__links > * { font-size: 12px; }
  .sunxi-subnav__secondary { gap: 0; margin-top: 0; border-top: 0; flex-direction: column; }
  .sunxi-subnav__secondary a { justify-content: space-between; padding: 18px 0; border-top: 1px solid rgb(29 28 25 / 18%); font-size: 22px; }
}
