/* Bisro for clothing, saree and footwear shops: warm festive palette (marigold and deep maroon, used sparingly).
   Hero beside a tall shop photo; the season tracker as a wide band with two moving balances; top items as a clothes
   rack of hanging tags; staff. */
.cl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 5vw; align-items: center; padding-top: 124px; padding-bottom: clamp(40px, 6vh, 70px); min-height: min(90vh, 860px) }
.cl-hero .h-xl { font-size: clamp(36px, 4.4vw, 64px) }
.cl-hero .kick { color: #8B1E3F } .cl-hero .kick::before { background: #E8A317 }
.cl-photo { display: block; border-radius: 200px 200px 26px 26px; overflow: hidden; aspect-ratio: 4 / 4.8; box-shadow: 0 50px 90px -60px rgba(80,20,30,.6) }
.cl-photo img { width: 100%; height: 100%; object-fit: cover; display: block }

/* season tracker */
.ss { padding: 24px; border-radius: 22px; background: linear-gradient(135deg, #5C1428, #8B1E3F); color: #fff; box-shadow: 0 50px 90px -60px rgba(80,20,30,.7) }
.ss-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px } .ss-head .tag { margin: 0; background: #E8A317; color: #2A1500 }
.ss-head h2 { margin: 0; font: 800 clamp(22px, 2vw, 30px)/1.15 var(--font); letter-spacing: -0.02em } .ss-head .eg { margin-left: auto; color: #F3C9D3 }
.ss-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px }
.ss-stages button { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15); transition: background .15s, border-color .15s }
.ss-stages b { display: block; font-size: 16px } .ss-stages span { font-size: 13px; color: #F3C9D3 }
.ss-stages button:hover { background: rgba(255,255,255,.14) }
.ss-stages button[aria-selected="true"] { background: #FFF6E3; border-color: #E8A317; color: #3A0E1A } .ss-stages button[aria-selected="true"] span { color: #8B1E3F }
.ss-stages button:focus-visible { outline: 3px solid #E8A317; outline-offset: 2px }
.ss-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px }
.ss-panel[hidden] { display: none }
.ss-bal { padding: 16px; border-radius: 14px; background: rgba(255,255,255,.08) }
.ss-bal small { display: block; font-size: 13px; color: #F3C9D3; font-weight: 600 } .ss-bal b { display: block; font: 800 clamp(24px, 2.4vw, 34px)/1.2 var(--font); margin: 4px 0 10px }
.ss-bal i { display: block; height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden } .ss-bal em { display: block; height: 100%; border-radius: 99px }
.ss-owe em { background: #FCA5A5 } .ss-owed em { background: #F5C542 }
.w10 { width: 10% } .w20 { width: 20% } .w40 { width: 40% } .w50 { width: 50% } .w100 { width: 100% }
.ss-note { padding: 16px; border-radius: 14px; background: #FFF6E3; color: #3A0E1A } .ss-note b { font-size: 17px } .ss-note p { margin: 6px 0 10px; color: #5A3A2A; font-size: 15px }
.ss-note a { color: #8B1E3F; font-weight: 700; text-decoration: none } .ss-note a:hover { text-decoration: underline }

/* what sold: a rail with hanging tags */
.cl-sold { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 6vw; align-items: center }
.cl-link a { color: var(--link); font-weight: 700; text-decoration: none } .cl-link a:hover { text-decoration: underline }
.sd-rack { list-style: none; margin: 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; position: relative; align-items: start }
.sd-rack::before { content: ""; position: absolute; top: 0; left: -10px; right: -10px; height: 8px; border-radius: 99px; background: linear-gradient(#B8B8B8, #7A7A7A) }
.sd-rack li { position: relative; display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; padding: 16px 8px 14px; border-radius: 10px 10px 14px 14px; background: #fff; border: 1px solid #EAD9C6; box-shadow: 0 20px 34px -26px rgba(80,40,10,.5) }
.sd-rack li::before { content: ""; position: absolute; top: -26px; left: 50%; width: 16px; height: 26px; margin-left: -8px; border: 2.5px solid #8A8A8A; border-bottom: 0; border-radius: 10px 10px 0 0 }
.sd-rack li:nth-child(1) { min-height: 250px } .sd-rack li:nth-child(2) { min-height: 210px } .sd-rack li:nth-child(3) { min-height: 175px } .sd-rack li:nth-child(4) { min-height: 150px } .sd-rack li:nth-child(5) { min-height: 128px }
.sd-tag { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #FFF1D6; color: #8B5A00 }
.sd-top .sd-tag { background: #8B1E3F; color: #fff }
.sd-rack li { background: linear-gradient(180deg, #fff 0 118px, #F7E3E8 118px) } .sd-rack li.sd-top { background: linear-gradient(180deg, #fff 0 118px, #EFC6D0 118px) }
.sd-rack b { font-size: 14.5px; line-height: 1.25 } .sd-rack span.tnum { font-size: 13.5px; color: var(--muted); font-weight: 700 }

/* staff */
.cl-staff { background: linear-gradient(180deg, var(--bg), #FBF3EA 25%, #FBF3EA 75%, var(--bg)) }
.sf-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: center }
.sf-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #8B1E3F }
.sf-list li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid #EAD9C6 } .sf-list b { font-size: 18px } .sf-list span { color: var(--muted) }

@media (max-width: 980px) {
  .cl-hero { grid-template-columns: minmax(0, 1fr); padding-top: 104px; min-height: 0; gap: 22px } .cl-photo { aspect-ratio: 4 / 3; border-radius: 120px 120px 22px 22px }
  .ss { padding: 16px } .ss-head .eg { margin-left: 0 } .ss-stages { gap: 6px } .ss-stages button { padding: 10px 8px } .ss-stages b { font-size: 13.5px } .ss-stages span { font-size: 11.5px }
  .ss-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .ss-note { grid-column: 1 / -1 } .ss-bal b { font-size: 21px }
  .cl-sold, .sf-in { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .sd-rack { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px } .sd-rack b { font-size: 11.5px } .sd-rack span.tnum { font-size: 10.5px } .sd-rack li { padding: 12px 4px }
}
@media (prefers-reduced-motion: reduce) { .ss-stages button { transition: none } }