/* ==========================================================================
   Dāstān ACCESSORIES page (/accessories): the card grid (rendered by accessories.js from accessories-data.js) and, while that list is empty,
   the "coming soon" panel. Loaded after chrome.css, menu.css and listing.css (tokens, hero, page switch, footer).
   Same card pattern as the Blend page (coloured panel, photo, pixel name, one line, optional price, link), under its own ax- names.
   Sections: 1 list, 2 cards, 3 coming-soon panel, 4 phones, 5 Persian, 6 motion.
   ========================================================================== */

/* 1. list ------------------------------------------------------------------- */
.ls-hero{padding-bottom:clamp(28px,4vw,56px)}
.ax-list{padding:0 var(--inset) var(--sec)}
.ax-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
@media (max-width:1199px){.ax-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 2. cards ----------------------------------------------------------------------- */
.ax-card{--c:var(--coral);--ink:#000;--focus:#000;position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(14px,1.6vw,22px);min-width:0;padding:clamp(18px,1.9vw,28px);background:var(--c);color:var(--ink)}
.ax-coral{--c:var(--coral)}
.ax-mint{--c:var(--mint)}
.ax-green{--c:var(--green);--ink:var(--cream);--focus:var(--cream)}
.ax-cream{--c:var(--cream);--ink:var(--green);--focus:var(--green)}
.ax-pic{display:flex;justify-content:center;align-items:flex-end;height:clamp(200px,19vw,290px)}
.ax-pic img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.ax-card:hover .ax-pic img{translate:0 -8px}
/* a card without a photo shows a brand shape (a quarter circle) instead */
.ax-pic.is-empty{align-items:center}
.ax-shape{display:block;height:78%;aspect-ratio:1;background:currentColor;opacity:.16;border-radius:100% 0 0 0}
.ax-txt{min-width:0;container-type:inline-size}
/* a name never breaks inside a word: the size follows the width of the text column (the longest word, AEROPRESS, is 9 letters) */
.ax-name{font:400 clamp(15px,11.5cqw,34px)/1.05 var(--mc);letter-spacing:.005em;text-transform:uppercase;overflow-wrap:normal;word-break:normal;hyphens:none}
.ax-kind{margin-top:8px;font:700 clamp(14px,1.15vw,17px)/1.2 var(--nian);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
.ax-short{margin-top:clamp(10px,1.2vw,16px);font:400 clamp(13px,1.1vw,15px)/1.3 var(--nian);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.ax-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;padding-top:12px;border-top:2px solid currentColor}
.ax-price{flex:0 0 100%;min-height:1.2em;font:400 clamp(14px,1.15vw,17px)/1.2 var(--mc);letter-spacing:.03em;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.ax-price:empty{display:none}
.ax-go{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:400 clamp(14px,1.15vw,17px)/1 var(--mc);letter-spacing:.05em;text-transform:uppercase}
.ax-go:after{content:"";position:absolute;inset:0;z-index:1}
.ax-go:focus-visible{outline:0}
.ax-card:has(.ax-go:focus-visible){outline:3px solid var(--th-ring);outline-offset:4px}
.ax-card:hover .ls-ar{translate:5px 0}
html[dir=rtl] .ax-card:hover .ls-ar{translate:-5px 0}
.ax-badge{position:absolute;z-index:2;top:0;inset-inline-start:0;padding:8px 12px 6px;background:#000;color:var(--cream);font:400 13px/1 var(--mc);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}

/* 3. coming soon: a green panel, the text on one side and a brand mosaic (squares, circles, quarter circles) on the other ------------------------- */
.ax-soon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vw,64px);background:var(--green);color:var(--cream);--focus:var(--cream)}
.ax-tag{display:inline-block;padding:8px 12px 6px;background:var(--coral);color:#000;font:400 clamp(12px,1.1vw,15px)/1 var(--mc);letter-spacing:.1em;text-transform:uppercase}
.ax-line{margin-top:clamp(12px,1.6vw,22px);font:400 clamp(20px,2.5vw,39px)/1.05 var(--mc);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}
.ax-sub{margin-top:clamp(12px,1.4vw,20px);max-width:32em;font:400 clamp(14px,1.35vw,19px)/1.3 var(--nian)}
.ax-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,32px)}
.ax-links a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--cream);font:400 clamp(13px,1.1vw,15px)/1 var(--mc);letter-spacing:.06em;text-transform:uppercase;transition:background-color .2s,color .2s}
.ax-links a:hover,.ax-links a:focus-visible{background:var(--cream);color:#000}
.ax-links a:focus-visible{outline-offset:4px}
.ax-mos{display:grid;grid-template:repeat(3,1fr) / repeat(4,1fr);gap:0;aspect-ratio:4/3;width:100%;background:#000;overflow:hidden}
.ax-mos i{display:block;animation:ax-pop .3s steps(4,end) backwards;animation-delay:calc(var(--d,0) * 70ms + 150ms)}
.ax-mos .c{background:var(--coral)}.ax-mos .m{background:var(--mint)}.ax-mos .e{background:var(--cream)}.ax-mos .k{background:#000}
.ax-mos .sq{border-radius:0}.ax-mos .ci{border-radius:50%}
.ax-mos .q1{border-radius:100% 0 0 0}.ax-mos .q2{border-radius:0 100% 0 0}.ax-mos .q3{border-radius:0 0 100% 0}.ax-mos .q4{border-radius:0 0 0 100%}
.ax-mos i:nth-child(1){grid-area:1/1;--d:0}
.ax-mos i:nth-child(2){grid-area:1/2;--d:1}
.ax-mos i:nth-child(3){grid-area:1/3/span 2/span 2;--d:2}
.ax-mos i:nth-child(4){grid-area:2/1;--d:1}
.ax-mos i:nth-child(5){grid-area:2/2;--d:2}
.ax-mos i:nth-child(6){grid-area:3/1/span 1/span 2;--d:3}
.ax-mos i:nth-child(7){grid-area:3/3;--d:4}
.ax-mos i:nth-child(8){grid-area:3/4;--d:5}
@keyframes ax-pop{from{scale:0}}
html[dir=rtl] .ax-mos{direction:ltr}
@media (max-width:899px){
  .ax-soon{grid-template-columns:minmax(0,1fr);padding:20px}
  .ax-mos{order:-1;aspect-ratio:4/3;max-width:420px}
}

/* 4. phones: one column, the photo beside the text (as the Blend cards) ----------------------------------------------------------- */
@media (max-width:599px){
  .ax-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .ax-card{grid-template-columns:minmax(80px,32%) minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:8px;padding:12px}
  .ax-pic{height:auto;aspect-ratio:1;align-items:center}
  .ax-pic img{height:100%;width:100%;object-fit:contain}
  .ax-shape{height:auto;width:100%}
  .ax-txt{align-self:center}
  .ax-foot{grid-column:1 / -1}
  .ax-go{flex:none}
  .ax-links a{flex:1 1 100%;justify-content:center}
}

/* 5. Persian: Persian names and lines use Nian Black; a Latin name inside a Persian page (lang=en) keeps the pixel face ------------------------- */
html[lang=fa] .ax-name:not([lang=en]),html[lang=fa] .ax-kind:not([lang=en]),html[lang=fa] .ax-go,html[lang=fa] .ax-price,html[lang=fa] .ax-badge,
html[lang=fa] .ax-tag,html[lang=fa] .ax-line,html[lang=fa] .ax-links a{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none}
html[lang=fa] .ax-name:not([lang=en]){line-height:1.25}
html[lang=fa] .ax-kind:not([lang=en]),html[lang=fa] .ax-line{line-height:1.3}
html[lang=fa] .ax-short,html[lang=fa] .ax-sub{line-height:1.45}
html[lang=fa] .ax-links a{font-size:clamp(15px,1.3vw,17px)}
html[dir=rtl] .ax-price{direction:rtl}

/* 6. motion: the mosaic builds itself once; listing.css section 9 switches animation and transition off under prefers-reduced-motion ----------------- */

/* the card's link sits at the END of the row (right in English, left in Persian), the way its arrow points */
.ax-go{margin-inline-start:auto}