/**
 * Artwork Product Showcase — the wholesale price list.
 *
 * The same tokens and the same card language as the rest of the suite, arranged for a different
 * job: a reseller scanning down a column of prices rather than a customer browsing pictures. So
 * the prices are set in tabular figures and given a fixed column of their own, and the whole thing
 * has a print stylesheet, because a trade partner will print it.
 */

.has-apw{
  --has-apw-text:#0f172a;
  --has-apw-heading:#111827;
  --has-apw-muted:#64748b;
  --has-apw-soft-text:#475569;
  --has-apw-border:#e2e8f0;
  --has-apw-border-strong:#d7dee9;
  --has-apw-soft:#f8fafc;
  --has-apw-retail:#475569;
  --has-apw-wholesale:#0b1f40;
  --has-apw-radius:16px;

  box-sizing:border-box;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(14px,2.4vw,26px) 0 clamp(30px,4vw,52px);
  color:var(--has-apw-text);
  font-family:inherit;
  line-height:1.5;
}
.has-apw *,
.has-apw *:before,
.has-apw *:after{ box-sizing:border-box; }

.has-apw .screen-reader-text{
  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;white-space:nowrap !important;border:0 !important;
}

.has-apw :where(button),
.has-apw :where(select),
.has-apw :where(input){
  margin:0;
  font-family:inherit;
  line-height:1.2;
  letter-spacing:normal;
  text-transform:none;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
.has-apw :where(button):before,
.has-apw :where(button):after{ content:none; }

.has-aps-notice{
  border:1px dashed #cbd5e1;border-radius:16px;background:#fff;
  padding:18px;color:#475569;font-size:14px;line-height:1.5;
}

/* ---------- Head ---------- */

.has-apw-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:2px solid var(--has-apw-border-strong);
}
.has-apw-titles{ min-width:0; }
.has-apw-head h2{
  margin:0;
  color:var(--has-apw-heading);
  font-size:clamp(22px,3.2vw,32px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.15;
}
.has-apw-head > .has-apw-titles > p{ margin:7px 0 0;color:var(--has-apw-soft-text);font-size:15px;max-width:62ch; }
.has-apw-meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  margin:10px 0 0 !important;
  color:var(--has-apw-muted) !important;
  font-size:13px !important;
  font-weight:650;
}
.has-apw-meta strong{ color:var(--has-apw-heading);font-weight:900; }

.has-apw-exports{ display:flex;gap:9px;flex-wrap:wrap; }
.has-apw-btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
  padding:10px 18px;
  border:2px solid var(--has-apw-accent,#3a7ee4);
  border-radius:999px;
  background:var(--has-apw-accent,#3a7ee4);
  color:var(--has-apw-accent-text,#fff);
  font-size:13px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.has-apw-btn:hover{ transform:translateY(-1px); }
.has-apw-btn-quiet{
  background:transparent;
  color:var(--has-apw-accent,#3a7ee4);
}
.has-apw-btn-quiet:hover{ background:var(--has-apw-accent,#3a7ee4);color:var(--has-apw-accent-text,#fff); }
.has-apw-btn:focus-visible,
.has-apw-toggle:focus-visible,
.has-apw-more:focus-visible,
.has-apw-search input:focus-visible,
.has-apw-select select:focus-visible{
  outline:3px solid color-mix(in srgb,var(--has-apw-accent,#3a7ee4) 55%,transparent);
  outline-offset:2px;
}

/* ---------- Toolbar ---------- */

.has-apw-toolbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:14px 0;
  background:#fff;
}
.has-apw-search{
  position:relative;
  display:flex;align-items:center;
  flex:1 1 240px;
  min-width:0;
}
.has-apw-search svg{ position:absolute;left:14px;color:var(--has-apw-muted);pointer-events:none; }
.has-apw-search input{
  width:100%;
  min-height:46px;
  padding:10px 14px 10px 42px;
  border:1px solid var(--has-apw-border-strong);
  border-radius:999px;
  background:#fff;
  color:var(--has-apw-text);
  font-size:15px;
}
.has-apw-search input::-webkit-search-cancel-button{ cursor:pointer; }

.has-apw-select select{
  min-height:46px;
  padding:10px 38px 10px 16px;
  border:1px solid var(--has-apw-border-strong);
  border-radius:999px;
  background:#fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/15px;
  color:var(--has-apw-text);
  font-size:14px;font-weight:650;
  cursor:pointer;
}
.has-apw-toggle{
  min-height:46px;
  padding:10px 18px;
  border:1px solid var(--has-apw-border-strong);
  border-radius:999px;
  background:#fff;
  color:var(--has-apw-soft-text);
  font-size:13px;font-weight:800;
  cursor:pointer;
}
.has-apw-toggle:hover{ background:var(--has-apw-soft);color:var(--has-apw-heading); }
.has-apw-toggle[aria-pressed="true"]{
  border-color:var(--has-apw-accent,#3a7ee4);
  color:var(--has-apw-accent,#3a7ee4);
}

.has-apw-empty{
  margin:0 0 18px;
  padding:26px;
  border:1px dashed #cbd5e1;
  border-radius:var(--has-apw-radius);
  color:var(--has-apw-muted);
  text-align:center;
}

/* ---------- The list ---------- */

.has-apw-list{ display:flex;flex-direction:column;gap:10px; }

.has-apw-item{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) auto auto;
  align-items:center;
  gap:16px;
  padding:12px 16px 12px 12px;
  border:1px solid var(--has-apw-border-strong);
  border-radius:var(--has-apw-radius);
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.has-apw-item:hover{ border-color:#94a3b8;box-shadow:0 8px 20px rgba(15,23,42,.06); }
.has-apw-item[hidden]{ display:none; }

.has-apw-photo{
  width:84px;height:84px;
  overflow:hidden;
  border-radius:11px;
  background:#fff;
  border:1px solid var(--has-apw-border);
}
.has-apw-photo img{ display:block;width:100%;height:100%;object-fit:contain; }
.has-apw-photo-none{
  display:grid;place-items:center;width:100%;height:100%;
  color:#94a3b8;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}

.has-apw-body{ min-width:0; }
.has-apw-body h3{
  margin:0;
  color:var(--has-apw-heading);
  font-size:16px;font-weight:800;line-height:1.3;
}
.has-apw-summary{
  display:-webkit-box;overflow:hidden;
  margin:4px 0 0;
  color:var(--has-apw-soft-text);
  font-size:13.5px;line-height:1.45;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.has-apw-sports{
  margin:5px 0 0;
  color:var(--has-apw-muted);
  font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}

/* Prices get a column of their own and tabular figures, so the digits line up down the page. */
.has-apw-prices{
  display:flex;
  gap:10px;
  margin:0;
}
.has-apw-price{
  min-width:104px;
  padding:8px 12px;
  border-radius:12px;
  background:var(--has-apw-soft);
  text-align:right;
}
.has-apw-price dt{
  margin:0;
  color:var(--has-apw-muted);
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.has-apw-price dd{
  margin:2px 0 0;
  color:var(--has-apw-retail);
  font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.has-apw-price.is-wholesale{ background:color-mix(in srgb,var(--has-apw-accent,#3a7ee4) 10%,#fff); }
.has-apw-price.is-wholesale dd{ color:var(--has-apw-wholesale);font-weight:900; }
.has-apw-dash{ color:#94a3b8; }

.has-apw-more{
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--has-apw-border-strong);
  border-radius:999px;
  background:#fff;
  color:var(--has-apw-soft-text);
  font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.has-apw-more:hover{ background:var(--has-apw-soft);color:var(--has-apw-heading); }
.has-apw-more svg{ transition:transform .18s ease; }
.has-apw-more .has-apw-more-close{ display:none; }
.has-apw-more[aria-expanded="true"] .has-apw-more-open{ display:none; }
.has-apw-more[aria-expanded="true"] .has-apw-more-close{ display:inline; }
.has-apw-more[aria-expanded="true"] svg{ transform:rotate(180deg); }

.has-apw-details{
  grid-column:1/-1;
  margin-top:4px;
  padding:16px 18px 6px;
  border-top:1px solid var(--has-apw-border);
  color:var(--has-apw-soft-text);
  font-size:14.5px;
  line-height:1.6;
}
.has-apw-details[hidden]{ display:none; }
.has-apw-details:after{ content:'';display:block;clear:both; }
.has-apw-details > *:first-child{ margin-top:0; }
.has-apw-details p{ margin:0 0 .9em; }
.has-apw-details h1,.has-apw-details h2,.has-apw-details h3,.has-apw-details h4{
  margin:1.2em 0 .4em;color:var(--has-apw-heading);font-weight:800;line-height:1.25;
}
.has-apw-details h1{ font-size:1.3em; }
.has-apw-details h2{ font-size:1.2em; }
.has-apw-details h3{ font-size:1.1em; }
.has-apw-details h4{ font-size:1em; }
.has-apw-details ul,.has-apw-details ol{ margin:0 0 .9em;padding-left:1.3em; }
.has-apw-details li{ margin:.25em 0; }
.has-apw-details img{ max-width:100%;height:auto;border-radius:10px; }
.has-apw-details .alignleft{ float:left;margin:.2em 1.3em .8em 0;max-width:40%; }
.has-apw-details .alignright{ float:right;margin:.2em 0 .8em 1.3em;max-width:40%; }
.has-apw-details .alignnone,
.has-apw-details .aligncenter{ display:block;margin:1em auto; }
/*
 * The product photograph the reader supplies when a description has no picture of its own — the
 * same 255 x 340 frame the "Click For Info" panel uses, floated so the text runs beside it. Scaled
 * down a little here because a list row is a narrower place to read than a full-screen panel.
 */
.has-apw-details .has-aps-info-product-image{
  float:left;
  width:200px;
  max-width:40%;
  height:266px;
  margin:.2em 1.3em .8em 0;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}
.has-apw-details .has-aps-info-product-image img{ width:100%;height:100%;margin:0;border-radius:0;object-fit:contain; }
.has-apw-details figure{ margin:1em 0; }
.has-apw-details figcaption{ margin-top:5px;color:var(--has-apw-muted);font-size:12.5px;text-align:center; }
.has-apw-details table{ width:100%;border-collapse:collapse;margin:.9em 0;font-size:13.5px; }
.has-apw-details th,.has-apw-details td{ padding:7px 9px;border:1px solid var(--has-apw-border);text-align:left; }

.has-apw-note{
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid var(--has-apw-border);
  color:var(--has-apw-muted);
  font-size:13px;
  line-height:1.55;
}

/* ---------- Narrower screens ---------- */

/*
 * The one-line layout holds down to about 680px: photo, name, two prices and the Details button
 * still fit with room for a product name. Below that the prices are what get squeezed, so the row
 * folds instead — the prices drop to a line of their own at full width rather than being crushed
 * into a column too narrow to read.
 */
@media (max-width:680px){
  .has-apw-item{ grid-template-columns:72px minmax(0,1fr);row-gap:12px; }
  .has-apw-photo{ width:72px;height:72px; }
  .has-apw-prices{ grid-column:1/-1;justify-content:flex-start; }
  .has-apw-price{ flex:1 1 0;min-width:0;text-align:left; }
  .has-apw-more{ grid-column:1/-1;justify-content:center; }
  .has-apw-details .alignleft,
  .has-apw-details .alignright{ float:none;display:block;max-width:min(100%,300px);margin:0 auto 1em; }
  .has-apw-details .has-aps-info-product-image{
    float:none;
    width:min(200px,100%);
    max-width:100%;
    height:auto;
    aspect-ratio:3/4;
    margin:0 auto 1em;
  }
}

@media (max-width:560px){
  .has-apw-head{ align-items:flex-start; }
  .has-apw-exports{ width:100%; }
  .has-apw-exports .has-apw-btn{ flex:1 1 0;justify-content:center; }
  /*
   * Stacked, the four controls are most of a phone screen. Pinned to the top they would take that
   * much of it permanently, which costs a partner more than reaching the search box costs them, so
   * on a phone the toolbar scrolls away like everything else — and the two selects share a row so
   * there is less of it to scroll past.
   */
  .has-apw-toolbar{ position:static;gap:8px;padding:10px 0 14px; }
  .has-apw-search{ flex:1 1 100%; }
  .has-apw-select{ flex:1 1 calc(50% - 4px);min-width:0; }
  .has-apw-select select{ width:100%; }
  .has-apw-toggle{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  .has-apw-btn,.has-apw-item,.has-apw-more svg{ transition:none; }
}

/* ---------- Print ---------- */

/*
 * A trade partner prints this. Everything that only makes sense on screen goes; every product is
 * kept whole on one page; open details print with their product, closed ones stay closed. The
 * heading repeats nothing, so a stapled sheet reads as one document.
 */
@media print{
  .has-apw{ max-width:none;padding:0;color:#000; }
  .has-apw-exports,
  .has-apw-toolbar,
  .has-apw-more,
  .has-apw-empty{ display:none !important; }
  .has-apw-head{ padding-bottom:10px;border-bottom:2px solid #000; }
  .has-apw-head h2{ font-size:20pt; }
  .has-apw-meta{ font-size:9pt !important; }
  .has-apw-list{ gap:0; }
  /*
   * Paper is not as wide as a laptop, so without this the narrow-screen layout would be what comes
   * out of the printer: one product taking three lines and the two prices stretched across the
   * sheet. A price list wants one product per line with the figures in a column down the right.
   */
  .has-apw-item{
    grid-template-columns:56pt minmax(0,1fr) auto;
    align-items:center;
    row-gap:0;
    break-inside:avoid;
    page-break-inside:avoid;
    border:0;
    border-bottom:1px solid #bbb;
    border-radius:0;
    padding:8pt 0;
    box-shadow:none !important;
  }
  /* A description with photographs in it can be taller than the page it lands on. Keeping that row
     whole would push it to the next sheet and leave most of one blank. */
  .has-apw-item.is-open{ break-inside:auto;page-break-inside:auto; }
  /* A few points of air on the right so the last figure is not sitting on the trim line. */
  .has-apw-prices{ grid-column:auto;justify-content:flex-end;gap:0;padding-right:5pt; }
  .has-apw-price{ flex:0 0 auto;min-width:66pt;text-align:right; }
  .has-apw-photo{ width:56pt;height:56pt;border-color:#ddd; }
  .has-apw-body h3{ font-size:11pt; }
  .has-apw-summary{ font-size:8.5pt;-webkit-line-clamp:2; }
  .has-apw-sports{ font-size:7.5pt; }
  .has-apw-price{ background:transparent !important;padding:0 0 0 14pt; }
  .has-apw-price dt{ font-size:7pt; }
  .has-apw-price dd{ font-size:11pt;color:#000; }
  .has-apw-details{ font-size:9pt;border-top:1px dotted #bbb; }
  .has-apw-details img{ max-width:180pt; }
  .has-apw-details .has-aps-info-product-image{ width:110pt;height:146pt;margin:0 12pt 6pt 0; }
  .has-apw-note{ font-size:8.5pt; }
  .has-apw-item[hidden]{ display:none !important; }
}