/* Business home, storyline sections of round 13 (business/content_r13_story.py):
 * the paradox of choice,
 * "See it on your shop" (sample shops with a before and after) and the
 * shop-address demo. Square cards on white, Mist or Ink; Signal only for the
 * split bar, the anchor and the one highlight. Behaviour: js/r13_story.js.
 */

/* ---- The paradox of choice ------------------------------------------------ */
/* ---- See it on your shop ----------------------------------------------- */
.r13-shop { --shop-font: 'DM Sans', system-ui, sans-serif; --shop-title-font: var(--shop-font); --shop-ink: #121110; --shop-soft: #F2F2F2;
  --shop-line: #E6E4E1; --shop-btn: #121110; --shop-btn-text: #fff; --shop-title-weight: 500; --shop-title-case: none; --shop-name-spacing: .22em;
  background: #fff; color: var(--shop-ink); font-family: var(--shop-font); border: 1px solid #121110; min-width: 0; }
.r13-shop-shoes { --shop-font: Georgia, 'Times New Roman', serif; --shop-ink: #2B1D1F; --shop-btn: #5A1F2B; --shop-title-weight: 400; --shop-name-spacing: .04em; }
.r13-shop-multi { --shop-font: Arial, Helvetica, sans-serif; --shop-ink: #0E2A47; --shop-btn: #0E3B66; --shop-line: #D8E0E8; --shop-title-weight: 700; --shop-title-case: uppercase; --shop-name-spacing: .08em; }
.r13-shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--shop-line); font-size: 12px; }
.r13-shop-name { font-weight: 700; letter-spacing: var(--shop-name-spacing); font-size: 13px; }
.r13-shop-nav { display: none; gap: 14px; opacity: .8; }
.r13-shop-nav span { margin-left: 14px; }
.r13-shop-top { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 16px; align-items: center; font-size: 13px; }
.r13-shop-buy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.r13-shop-title { font-family: var(--shop-title-font); font-weight: var(--shop-title-weight); text-transform: var(--shop-title-case); font-size: 16px; line-height: 1.2; }
.r13-shop-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; background: var(--shop-btn); color: var(--shop-btn-text); font-size: 12px; font-weight: 500; }
.r13-sizes { display: flex; flex-wrap: wrap; gap: 4px; }
.r13-sizes span { min-width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #8E8A85; font-size: 11px; }
.r13-brand { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #5E5B57; }
.r13-sq { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--shop-soft, #F2F2F2); overflow: hidden; }
.r13-sq img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }

/* The before and after: "with" is the base layer and sets the height;
   "today" lies on top, cut off at the split (--x, set by r13_story.js). */
.r13-ba { --x: 50%; position: relative; overflow: hidden; border-top: 1px solid var(--shop-line); touch-action: pan-y; }
.r13-layer { background: #fff; padding: 34px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.r13-today { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.r13-band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-weight: 400; }
.r13-band-sub { font-size: 12px; opacity: .75; }
.r13-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.r13-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11px; line-height: 1.25; }
.r13-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r13-card-price { font-family: 'DM Mono', ui-monospace, monospace; }
.r13-card.is-anchor .r13-sq { outline: 2px solid var(--shop-btn); outline-offset: -2px; }
.r13-tryon { display: block; aspect-ratio: 1 / 1; background: var(--shop-soft); overflow: hidden; }
.r13-tryon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.r13-more { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: #5E5B57; gap: 6px; border: 1px solid #8E8A85; background: #fff; }
.r13-more span { font-size: 18px; }
.r13-band-actions { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.r13-band-actions span { border: 1px solid #8E8A85; padding: 5px 9px; }
.r13-band-actions span.is-main { background: var(--shop-btn); color: var(--shop-btn-text); border-color: var(--shop-btn); }
.r13-pill { position: absolute; top: 8px; z-index: 3; font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; padding: 3px 8px; pointer-events: none; }
.r13-pill-today { left: 8px; background: #121110; color: #fff; }
.r13-pill-with { right: 8px; background: #F5B82E; color: #121110; }
.r13-split { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1px; background: #F5B82E; z-index: 3; pointer-events: none; }
.r13-split::after { content: '\2194'; position: absolute; top: 50%; left: -17px; width: 36px; height: 36px; margin-top: -18px; display: flex; align-items: center; justify-content: center; background: #F5B82E; color: #121110; font-size: 18px; }
.r13-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.r13-ba:focus-within .r13-split::after { outline: 2px solid #121110; outline-offset: 2px; }
@media (min-width: 768px) {
  .r13-shop-nav { display: inline-flex; }
  .r13-shop-top { grid-template-columns: 150px minmax(0, 1fr); padding: 16px 20px; }
  .r13-shop-bar { padding: 10px 20px; }
  .r13-layer { padding: 36px 20px 16px; }
  .r13-band { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr); align-items: start; }
  .r13-band-today { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr); }
  .r13-card-tryon { grid-row: span 1; }
  .r13-tryon { aspect-ratio: 3 / 4; }
}
@media (min-width: 1024px) {
  .r13-shop-top { grid-template-columns: 170px minmax(0, 1fr); }
}

/* ---- The shop-address demo ---------------------------------------------- */
.r13-urlbar { display: flex; flex-wrap: wrap; gap: 8px; }
.r13-urlbar input, .r13-input { min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #8E8A85; background: #fff; color: #121110;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 15px; width: 100%; }
.r13-urlbar input { flex: 1 1 240px; width: auto; }
.r13-urlbar .btn { height: 48px; }
.r13-demo-form [aria-invalid="true"] { border-color: #A8321F; border-width: 2px; }
.r13-demo-form.is-dark a { color: #fff; }
.r13-demo-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.r13-demo-page { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.r13-demo-page:nth-child(2) { margin-top: 32px; }
.r13-demo-page:nth-child(3) { margin-top: 64px; }
.r13-demo-tryon { display: block; aspect-ratio: 3 / 4; background: #F2F2F2; overflow: hidden; }
.r13-demo-tryon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.r13-demo-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.r13-demo-pieces .r13-sq { background: #fff; }
@media (min-width: 640px) {
  .r13-demo-pages { gap: 16px; }
  .r13-demo-pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The "with" side reads from the right, so the title and the actions show
   while the split sits in the middle. */
.r13-with .r13-band-head { flex-direction: column; align-items: flex-end; text-align: right; max-width: 50%; margin-left: auto; padding-left: 14px; }
.r13-today .r13-band-head { flex-direction: column; align-items: flex-start; max-width: 50%; padding-right: 14px; }
.r13-with .r13-band-actions { justify-content: flex-end; }