* { box-sizing: border-box; }
body { margin: 0; background: #f8f4eb; color: #172940; font: 16px/1.5 system-ui, sans-serif; }
header { background: #172940; color: white; padding: 2.5rem max(5vw, 1rem); }
header p, h1 { margin: 0; }
h1 { font: bold clamp(2.5rem, 6vw, 4.5rem)/1.15 Georgia, serif; margin: .3rem 0; }
.eyebrow { color: #ffcf9d; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: 1.5rem; padding: .85rem 5vw; }
#products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 1rem; }
article, aside { background: white; border: 1px solid #ded8ca; border-radius: 14px; padding: 1rem; }
article { display: flex; flex-direction: column; }
article h2 { font-size: 1rem; margin: .7rem 0 0; }
article p { margin: .35rem 0 1rem; }
.buy-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-top: auto; }
.buy-controls label { display: grid; gap: .2rem; font-size: .8rem; font-weight: 650; }
.buy-controls button { flex: 1; }
#cart-feedback:empty { display: none; }
aside { align-self: start; }
aside h2 { margin-top: 0; }
.cart-row { display: grid; gap: .4rem; padding: .65rem 0; border-bottom: 1px solid #ded8ca; }
.cart-row label { font-weight: 700; overflow-wrap: anywhere; }
.cart-handoff { margin-top: .75rem; border-top: 1px solid #ded8ca; padding-top: .75rem; }
.cart-handoff input { width: 100%; margin: .35rem 0; }
.cart-handoff form { margin-top: .75rem; }
#share-status:empty { display: none; }
.cart-prices, .cart-controls { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cart-prices { flex-wrap: wrap; font-variant-numeric: tabular-nums; }
#cart-summary { margin: .75rem 0; }
#cart-summary p { margin: .25rem 0; }
input, button { font: inherit; border-radius: 8px; padding: .55rem .7rem; }
input { border: 1px solid #77818c; }
input[type=number] { width: 4.6rem; }
#search { display: block; width: min(100%, 420px); }
button { cursor: pointer; border: 0; background: #9b3b17; color: white; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, input:focus-visible { outline: 3px solid #2377aa; outline-offset: 3px; }
.photo { display: grid; place-items: center; width: 100%; height: 250px; color: #172940; background: #f6f4ef; cursor: zoom-in; }
.photo img { width: 100%; height: 230px; object-fit: contain; }
dialog { max-width: 92vw; max-height: 92vh; border: 0; border-radius: 14px; color: inherit; }
dialog::backdrop { background: #142235ba; }
dialog img { display: block; width: min(680px, 78vw); height: min(63vh, 680px); object-fit: contain; }
.fine { font-size: .85rem; }
.launch { padding: 1rem; min-width: 225px; }
@media (max-width: 720px) { main { grid-template-columns: 1fr; } aside { grid-row: 1; } }
header { padding: 0; background: #fff; color: #172940; border-bottom: 1px solid #ded8ca; }
.masthead { display: grid; grid-template-columns: 1fr minmax(220px, 480px) 1fr; align-items: end; gap: 1.5rem; padding: .65rem 5vw; }
.wordmark { align-self: center; color: #172940; text-decoration: none; font: bold clamp(1.5rem, 3vw, 2.4rem)/1 Georgia, serif; }
.wordmark span { display: block; font: 700 .72rem/1.5 system-ui; letter-spacing: .2em; text-transform: uppercase; }
#search { width: 100%; }
.search-box label { display: block; font-size: .85rem; font-weight: 650; }
#cart-link { justify-self: end; align-self: center; color: #172940; font-weight: 750; white-space: nowrap; }
#departments { background: #172940; color: #fff; padding: .45rem 5vw; }
#departments, #subcategories { display: flex; flex-wrap: wrap; gap: .35rem; }
#departments button, #subcategories button { font-size: .9rem; font-weight: 650; }
#departments button { background: transparent; }
#departments button:hover, #departments button[aria-pressed=true] { background: #fff; color: #172940; }
#subcategories { margin: .75rem 0; }
#subcategories button { background: #fff; color: #172940; border: 1px solid #ded8ca; border-radius: 999px; }
#subcategories button:hover, #subcategories button[aria-pressed=true] { background: #172940; color: #fff; }
.intro { padding: 0; }
.intro p, #featured-note { margin: .2rem 0 .45rem; }
.intro h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.eyebrow { color: #9b3b17; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: .4rem .65rem; padding: .45rem 0; border-block: 1px solid #ded8ca; }
.filters label { display: grid; font-size: .85rem; font-weight: 650; }
.filters select { font: inherit; color: inherit; background: #fff; border: 1px solid #77818c; border-radius: 8px; padding: .55rem; max-width: 12rem; }
.filters .stock { display: flex; align-items: center; min-height: 2.3rem; }
#reset { background: transparent; color: #172940; text-decoration: underline; font-size: .85rem; }
#loading:empty { display: none; }
#catalog-status { margin: .55rem 0; font-size: 1.05rem; font-weight: 700; }
.sale-price { color: #9a2e19; }
article > p:first-of-type { margin: .7rem 0 0; font-size: .78rem; color: #4b5867; }
article h2 { margin-top: .15rem; }
#more { display: block; margin: 1.3rem auto; }
#more[hidden] { display: none; }
.skip { position: absolute; left: .5rem; top: .5rem; z-index: 5; padding: .6rem; background: white; transform: translateY(-200%); }
.skip:focus { transform: none; }
@media (min-width: 1050px) { aside { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } }
@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr auto; gap: .7rem; }
  .search-box { grid-column: 1 / -1; grid-row: 2; }
  aside { grid-row: auto; }
  #departments { flex-wrap: nowrap; overflow-x: auto; }
  #departments button { flex: none; }
}
/* The store's Tahoma type, navy logo, red tabs and blue-gray catalog panel. */
body { font-family: Tahoma, Verdana, sans-serif; background: #e7ebf2; color: #172f4f; }
header { background: #fff; border-bottom: 3px solid #b42f16; }
.masthead { grid-template-columns: minmax(160px, 1fr) minmax(190px, 480px) auto; align-items: center; gap: 1rem; }
.wordmark { display: block; }
.wordmark img { display: block; width: min(100%, 430px); height: auto; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: .6rem; }
.header-actions select { font: inherit; color: inherit; background: white; border: 1px solid #7a8798; padding: .4rem; }
.independence { padding: .5rem 5vw; color: #172f4f; background: #eef1f7; font-size: .82rem; font-weight: 700; }
#departments { background: #aa351e; border-top: 1px solid #912b17; }
#departments button { background: #a3311c; border-radius: 5px 5px 0 0; }
#departments button:hover, #departments button[aria-pressed=true] { background: #fff; color: #8d2a17; }
h1, .intro h1 { font-family: Tahoma, Verdana, sans-serif; font-size: clamp(1.75rem, 4vw, 2.8rem); }
article, aside { border-color: #c6cddd; border-radius: 5px; }
.photo { background: #f5f6fa; }
button { background: #ab391c; }
#subcategories button { border-color: #c6cddd; }
#zoom { padding: 1rem 1.25rem; }
#zoom form { display: flex; justify-content: end; }
#zoom img { height: min(48vh, 520px); background: #f5f6fa; }
#zoom-price { margin: .65rem 0; font-weight: bold; }
#zoom-buy .buy-controls { max-width: 350px; }
#zoom-feedback:empty { display: none; }
@media (max-width: 720px) {
  .masthead { grid-template-columns: minmax(120px, 1fr) auto; }
}
#language { display: flex; gap: .25rem; }
#language button { display: grid; place-items: center; background: transparent; padding: .35rem; border: 1px solid transparent; }
#language button[aria-pressed="true"] { border-color: #a3311c; background: #f7e9e4; }
#language svg { display: block; width: 24px; height: 15px; border-radius: 2px; }
#holiday-types { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
#holiday-types:empty { display: none; }
#holiday-types button { color: #172f4f; background: #fff; border: 1px solid #c6cddd; font-size: .85rem; }
#holiday-types button[aria-pressed="true"] { color: #fff; background: #a3311c; border-color: #a3311c; }