#content.approved-catalog #catalog-listing { box-sizing: border-box; width: 100%; padding: 0 50px 70px; margin-inline: 0; max-width: none; }
:is(#catalog-listing,.product-card-list) .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 0; border-bottom: 1px solid #e5e5e5; padding: 0; margin: 0 0 30px; min-height: 58px; }
:is(#catalog-listing,.product-card-list) .tabs { display: flex; flex-wrap: nowrap; gap: 24px; overflow-x: auto; padding: 0; min-width: 0; border: 0; }
:is(#catalog-listing,.product-card-list) .tabs button { white-space: nowrap; border: 0; border-radius: 0; background: none; padding: 16px 0; margin: 0; font-size: 13px; font-weight: 400; color: #555; }
#content :is(#catalog-listing,.product-card-list) .tabs button.active { color: #111; font-weight: 500 !important; text-decoration: none; border: 0; box-shadow: none; }
:is(#catalog-listing,.product-card-list) .catalog-sort { flex: 0 0 150px; margin: 0; display: block; }
:is(#catalog-listing,.product-card-list) .catalog-sort .select2-selection { border: 0; background: transparent; box-shadow: none; }
#content :is(#catalog-listing,.product-card-list) .catalog-sort .select2-selection__rendered,#content :is(#catalog-listing,.product-card-list) .catalog-sort select { font-size: var(--dw-size-action) !important; font-weight: 400; text-align: right; }
:is(#catalog-listing,.product-card-list) .catalog-results { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:is(#catalog-listing,.product-card-list) .product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 30px; row-gap: 44px; margin: 0; }
:is(#catalog-listing,.product-card-list) .product-card { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 10px; align-content: start; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; }
:is(#catalog-listing,.product-card-list) .product-card .product-art { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; position: relative; background: #fff; overflow: hidden; margin: 0 0 16px; border: 0; border-radius: 0; }
#content :is(#catalog-listing,.product-card-list) .product-card .product-art img { width: 100%; height: 100%; display: block; object-fit: cover; padding: 0; transform: none; mix-blend-mode: normal; }
#content :is(#catalog-listing,.product-card-list) .product-card,#content :is(#catalog-listing,.product-card-list) .product-card:hover { border: 0; outline: 0; box-shadow: none; background: transparent; }
#content :is(#catalog-listing,.product-card-list) .product-card a,#content :is(#catalog-listing,.product-card-list) .product-card a:hover { border: 0; box-shadow: none; text-decoration: none; }
#content :is(#catalog-listing,.product-card-list) .product-card h3 a { color: #222; transition: color .2s; }
#content :is(#catalog-listing,.product-card-list) .product-card h3 a:hover { color: #888; }
#content :is(#catalog-listing,.product-card-list) .product-card .product-art:hover { opacity: .9; }
#content :is(#catalog-listing,.product-card-list) .product-card a:focus-visible { outline: 1px solid #aaa; outline-offset: 3px; }
:is(#catalog-listing,.product-card-list) .product-card h3 { font-size: 13px; line-height: 1.6; font-weight: 400; margin: 0 0 12px; letter-spacing: 0; min-height: 0; }
:is(#catalog-listing,.product-card-list) .product-card .catalog-price { font-size: var(--dw-size-price-card); line-height: 1.5; color: #222; margin: 0; font-weight: 400; }
#content :is(#catalog-listing,.product-card-list) .product-card > h3 { padding: 0 !important; margin: 0 0 12px !important; font-size: 13px !important; font-weight: 400 !important; }
#content :is(#catalog-listing,.product-card-list) .product-card > .catalog-price { padding: 0 !important; margin: 0 !important; }
#content :is(#catalog-listing,.product-card-list) .product-card .product-art { border-radius: 0 !important; }
#content :is(#catalog-listing,.product-card-list) .product-card > h3 { grid-column: 1 / -1; height: 1.6em; min-height: 1.6em; line-height: 1.6; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#content :is(#catalog-listing,.product-card-list) .product-card > .catalog-price { grid-column:1; grid-row:3; display:flex; flex-wrap:wrap; align-content:start; align-items:baseline; gap:4px 10px; min-height:1.5em; }
:is(#catalog-listing,.product-card-list) .catalog-price del { color:#999; font-size:var(--dw-size-price-original); }
:is(#catalog-listing,.product-card-list) .catalog-photo-wrap { position:relative; grid-column:1 / -1; }
#content :is(#catalog-listing,.product-card-list) .catalog-wishlist { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:#d0ceca; box-shadow:none; cursor:pointer; transition:color .2s; }
#content :is(#catalog-listing,.product-card-list) .catalog-wishlist:hover { color:#918d87; background:transparent; }
#content :is(#catalog-listing,.product-card-list) .catalog-wishlist[aria-pressed=true] { color:#b6a89e; }
#content :is(#catalog-listing,.product-card-list) .catalog-wishlist[aria-pressed=true] svg { fill:currentColor; }
#content :is(#catalog-listing,.product-card-list) .catalog-wishlist:focus-visible { outline:1px solid #888; outline-offset:3px; }
#content :is(#catalog-listing,.product-card-list) .catalog-wishlist:disabled { opacity:.5; cursor:wait; }
:is(#catalog-listing,.product-card-list) .catalog-colours { grid-column:2; grid-row:3; justify-self:end; align-self:start; display: flex; flex-wrap: nowrap; justify-content:flex-end; align-items: center; gap: 5px; margin-top: 0; white-space:nowrap; }
:is(#catalog-listing,.product-card-list) .catalog-colour { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(0,0,0,.14); }
:is(#catalog-listing,.product-card-list) .catalog-colour:nth-of-type(n+5) { display:none; }
:is(#catalog-listing,.product-card-list) .catalog-colour-count { margin-left:3px; font-size:11px; line-height:20px; color:#555; }
:is(#catalog-listing,.product-card-list) .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:is(#catalog-listing,.product-card-list) .catalog-pagination{display:flex;align-items:center;justify-content:flex-end;gap:20px;margin-top:40px}
:is(#catalog-listing,.product-card-list) .catalog-pagination p{margin:0;color:#888;font-size:13px}
:is(#catalog-listing,.product-card-list) .catalog-pagination nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px}
:is(#catalog-listing,.product-card-list) .catalog-pagination nav>a,:is(#catalog-listing,.product-card-list) .catalog-pagination nav>span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:34px;padding:5px 6px;font-size:14px;text-decoration:none;color:#777;border:0;border-radius:3px}
:is(#catalog-listing,.product-card-list) .catalog-pagination nav>a:hover{background:#f5f5f2;color:#222}
:is(#catalog-listing,.product-card-list) .catalog-pagination [aria-current=page]{background:#efefeb;color:#333;font-weight:500}
:is(#catalog-listing,.product-card-list) .catalog-pagination a:focus-visible{outline:1px solid #888;outline-offset:3px}
@media(max-width:600px){:is(#catalog-listing,.product-card-list) .catalog-pagination{flex-direction:column;gap:14px}}
#content :is(#catalog-listing,.product-card-list) .catalog-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 330px; padding: 44px 24px; text-align: center; background: #fafaf8; border-radius: 12px; }
#content :is(#catalog-listing,.product-card-list) .catalog-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 20px; border-radius: 50%; background: #efefeb; color: #88867f; }
#content :is(#catalog-listing,.product-card-list) .catalog-empty-state h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.4; font-weight: 400; letter-spacing: -.02em; color: #333; }
#content :is(#catalog-listing,.product-card-list) .catalog-empty-state p { max-width: 480px; margin: 0; font-size: 15px; line-height: 1.7; color: #777; }
#content :is(#catalog-listing,.product-card-list) .catalog-empty-action { display: inline-flex; align-items: center; gap: 28px; margin-top: 26px; padding: 12px 22px; background: #292925; border: 0; border-radius: 3px; color: white; font-size: 14px; line-height: 1.5; text-decoration: none; transition: background-color .2s; }
#content :is(#catalog-listing,.product-card-list) .catalog-empty-action:hover { background: #50504a; color: white; box-shadow: none; }
#content :is(#catalog-listing,.product-card-list) .catalog-empty-action:focus-visible { outline: 2px solid #777; outline-offset: 4px; }
#content :is(#catalog-listing,.product-card-list) .catalog-empty-action .ui-arrow { display: inline-block; width: 1em; height: 1em; min-width: 1em; flex-shrink: 0; pointer-events: none; }
@media(max-width:600px){#content :is(#catalog-listing,.product-card-list) .catalog-empty-state{min-height:310px;padding:34px 20px}#content :is(#catalog-listing,.product-card-list) .catalog-empty-state h2{font-size:21px}#content :is(#catalog-listing,.product-card-list) .catalog-empty-state p{font-size:14px}}
@media(max-width: 900px) {
  :is(#catalog-listing,.product-card-list) .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 36px; }
  :is(#catalog-listing,.product-card-list) .toolbar { gap: 14px; }
  :is(#catalog-listing,.product-card-list) .tabs { gap: 18px; }
}
@media(max-width: 600px) {
  #content.approved-catalog #catalog-listing { padding: 0 22px 40px; }
  :is(#catalog-listing,.product-card-list) .catalog-sort { flex-basis: 110px; }
  :is(#catalog-listing,.product-card-list) .product-card .product-art { margin-bottom: 12px; }
  :is(#catalog-listing,.product-card-list) .product-card h3 { font-size: 12px; margin-bottom: 8px; }
  :is(#catalog-listing,.product-card-list) .catalog-colours { gap: 4px; }
  :is(#catalog-listing,.product-card-list) .catalog-colour { width: 10px; height: 10px; flex-basis: 10px; }
  :is(#catalog-listing,.product-card-list) .catalog-colour:nth-of-type(n+3) { display:none; }
  :is(#catalog-listing,.product-card-list) .catalog-colour-count { font-size:10px; margin-left:0; }
}

/* v246: active category indicator aligned with the toolbar rule. */
#content #catalog-listing .toolbar{align-items:stretch}
#content #catalog-listing .tabs{gap:4px;align-items:stretch}
#content #catalog-listing .tabs button{position:relative;flex:0 0 auto;padding:16px 10px}
#content #catalog-listing .tabs button::after{content:'';position:absolute;inset:auto 0 0;height:4px;background:transparent}
#content #catalog-listing .tabs button.active::after{background:#333}
#content #catalog-listing .catalog-sort{align-self:center}

@media(max-width:760px){#content #catalog-listing .catalog-sort{display:none!important}#content #catalog-listing .toolbar{min-height:0;gap:0;margin-bottom:24px}#content #catalog-listing .tabs{width:100%}}

/* Shared product card category and title hierarchy. */
#content :is(#catalog-listing,.product-card-list) .product-card>.catalog-category{grid-column:1/-1;grid-row:2;margin:0 0 10px;min-height:26px}
#content :is(#catalog-listing,.product-card-list) .catalog-category a{display:inline-block;padding:3px 9px;border:1px solid #e5e3df;border-radius:2px;font:400 11px/1.6 var(--dw-font-body);color:#777;background:#fff;text-decoration:none}
#content :is(#catalog-listing,.product-card-list) .catalog-category a:hover{border-color:#aaa;color:#333}
#content :is(#catalog-listing,.product-card-list) .product-card>h3{grid-row:3;font-size:17px!important;height:1.6em;min-height:1.6em;margin-bottom:14px!important}
#content :is(#catalog-listing,.product-card-list) .product-card>h3 a{font-size:inherit!important}
#content :is(#catalog-listing,.product-card-list) .product-card>.catalog-price,#content :is(#catalog-listing,.product-card-list) .product-card>.catalog-colours{grid-row:4}
@media(max-width:760px){#content :is(#catalog-listing,.product-card-list) .product-card>h3{font-size:15px!important}}
/* Keep each monetary amount and its currency together. */
#content :is(#catalog-listing,.product-card-list) .catalog-price>span,#content :is(#catalog-listing,.product-card-list) .catalog-price>del{white-space:nowrap;flex-shrink:0}
@media(max-width:760px){#content :is(#catalog-listing,.product-card-list) .product-card>.catalog-price{grid-column:1/-1}#content :is(#catalog-listing,.product-card-list) .product-card>.catalog-colours{grid-row:5;grid-column:1/-1;justify-self:start;margin-top:8px}}
