/* R356 package-only design preview. No JS, idle animation, blur or checkout changes.
   :has(#package-filters) plus #packages uses two existing IDs to outrank the
   older bundled one-ID rules without repeating layout attributes. */
html body[data-ui-layout]:has(#package-filters) #packages.packages {
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:not([hidden]) {
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  grid-auto-rows:min-content!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:9px!important;
  row-gap:3px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:104px!important;
  height:auto!important;
  padding:10px!important;
  border:1px solid #355a72!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#12334a,#0d263a)!important;
  box-shadow:inset 0 1px 0 #d7f3ff0a!important;
  text-align:left!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack .pack-artplate {
  grid-column:1!important;
  grid-row:1 / span 3!important;
  justify-self:start!important;
  align-self:center!important;
  width:44px!important;
  height:44px!important;
  min-width:0!important;
  margin:0!important;
  border-radius:10px!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack > .pack-ribbon {
  grid-column:2!important;
  grid-row:1!important;
  justify-self:start!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:2px 4px!important;
  border:1px solid #35566c!important;
  border-radius:5px!important;
  background:#15384d!important;
  color:#a9cadb!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack > b {
  grid-column:2!important;
  grid-row:2!important;
  display:block!important;
  min-width:0!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  color:#e6f3fb!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.4!important;
  text-align:left!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
  text-shadow:none!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack > strong {
  grid-column:2!important;
  grid-row:3!important;
  min-width:0!important;
  margin:0!important;
  font-size:14px!important;
  font-weight:750!important;
  line-height:1.35!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-shadow:none!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:not(.has-discount-preview) > strong {
  color:#f4d58d!important;
}
/* Preserve the existing small availability explanation and discount badge. */
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack > small {
  grid-column:2!important;
  grid-row:4!important;
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:is(.selected,[aria-pressed="true"]):not([hidden]) {
  border-color:#6ad2ec!important;
  background:linear-gradient(145deg,#17445b,#102f44)!important;
  box-shadow:inset 0 0 0 1px #6ad2ec50!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:disabled:not([hidden]) {
  border-style:dashed!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > .package-section-heading {
  grid-column:1 / -1!important;
  min-height:34px!important;
  margin:8px 0 2px!important;
  padding:5px 0 7px!important;
  border:0!important;
  border-bottom:1px solid #2d5066!important;
  background:transparent!important;
  box-shadow:none!important;
  gap:10px!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages .package-section-title {
  min-width:0!important;
  gap:6px!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:0!important;
  white-space:normal!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages .package-section-mark {
  flex-basis:19px!important;
  width:19px!important;
  height:19px!important;
  background:#153b51!important;
  border-color:#3a718b!important;
  box-shadow:none!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages .package-section-count {
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#8fafc3!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  box-shadow:none!important;
}
html body[data-ui-layout]:has(#packages.packages) #package-filters.package-filters {
  gap:6px!important;
  margin:8px 0 12px!important;
}
html body[data-ui-layout]:has(#packages.packages) #package-filters.package-filters > button:not([hidden]) {
  min-width:44px!important;
  min-height:44px!important;
  padding:8px 12px!important;
  border:1px solid #345a71!important;
  border-radius:10px!important;
  background:#102e43!important;
  color:#b5d0df!important;
  font-size:12px!important;
  line-height:1.4!important;
}
html body[data-ui-layout]:has(#packages.packages) #package-filters.package-filters > button:is(.active,[aria-pressed="true"]):not([hidden]) {
  border-color:#5ebbd9!important;
  background:#173d53!important;
  color:#e2f5ff!important;
}
/* Native hidden remains authoritative for category counts and cards. */
html body[data-ui-layout]:has(#package-filters) #packages.packages > [hidden],
html body[data-ui-layout]:has(#packages.packages) #package-filters[hidden],
html body[data-ui-layout]:has(#packages.packages) #package-filters > [hidden] {
  display:none!important;
}
html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack .ht-sheen-beam-r217 {
  display:none!important;
}
@media(max-width:359px) {
  html body[data-ui-layout]:has(#package-filters) #packages.packages {grid-template-columns:minmax(0,1fr)!important;}
  html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:not([hidden]) {min-height:96px!important;}
}
@media(min-width:760px) {
  html body[data-ui-layout]:has(#package-filters) #packages.packages {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
}
@media(min-width:1200px) {
  html body[data-ui-layout]:has(#package-filters) #packages.packages {grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media(forced-colors:active) {
  html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:not([hidden]) {background:Canvas!important;color:CanvasText!important;border-color:ButtonText!important;box-shadow:none!important;}
  html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:is(.selected,[aria-pressed="true"]):not([hidden]) {background:Canvas!important;color:CanvasText!important;border-color:Highlight!important;outline:2px solid Highlight!important;outline-offset:-2px!important;}
  html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack > b,
  html body[data-ui-layout]:has(#package-filters) #packages.packages > button.pack:not(.has-discount-preview) > strong {color:CanvasText!important;}
}