/* ============================================================
   2BE CLOTHING WORLD — PHASE 5 STANDALONE PAGES
   /2be-trade (wholesale) today. Scoped like premium.css: components used
   by one page family, not sitewide, so they don't bloat shop.css.
   ============================================================ */

/* ============ WHOLESALE TABLE ============ */
.wtable{ border:1px solid var(--hairline); }
.wtable__head,
.wtable__row{
  display:grid; grid-template-columns:2fr 1fr 1fr 0.6fr; gap:16px;
  align-items:center; padding:12px 16px;
}
.wtable__head{
  background:var(--dark); color:var(--ink-on-dark);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.wtable__row{ border-top:1px solid var(--hairline); }
.wtable__item{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wtable__line{ display:block; }
/* The one deliberate accent use on this page: the wholesale number is the
   reason a trade buyer is here, same "accent marks the number that matters"
   rule as the sale badge (guide §09.1). */
.wtable__wholesale{ color:var(--accent); font-weight:600; }
@media (max-width:640px){
  .wtable__head{ display:none; }              /* labels move into each row */
  .wtable__row{ grid-template-columns:1fr 1fr; row-gap:4px; }
  .wtable__row > [data-retail]::before{ content:"Retail "; color:var(--muted); }
  .wtable__row > [data-wholesale]::before{ content:"Wholesale "; color:var(--muted); }
  .wtable__row > [data-moq]::before{ content:"MOQ "; color:var(--muted); }
  .wtable__item{ grid-column:1 / -1; }
}

/* ============ WHOLESALE INQUIRY FORM ============ */
.wform label{ display:block; margin-bottom:8px; }
.wform input,
.wform textarea{
  width:100%; padding:12px; border:1px solid var(--hairline);
  background:transparent; font:inherit; resize:vertical;
}
.wform__status{ margin-top:12px; min-height:1.5em; }

/* ============ ACCOUNT (Phase 7) ============ */
/* An author `display` DEFEATS the [hidden] attribute — the same trap
   shop.css documents for .drawer. Without this the signed-out forms render
   underneath the signed-in view (caught in a Phase 7 screenshot; the DOM
   .hidden property was true the whole time, which is why a property-only
   assertion missed it). */
.acct[hidden], .acct-me[hidden]{ display:none; }
.acct{ display:grid; gap:48px; grid-template-columns:1fr; max-width:840px; }
@media (min-width:768px){ .acct{ grid-template-columns:1fr 1fr; gap:64px; } }
/* Review round 5 (P9): sign-in and sign-up are now separate pages, each
   with exactly one .acct__col — the two-column grid above was built for
   both forms sitting side by side and would otherwise leave a single
   form stranded in the left half of an 840px-wide row on desktop. */
.acct--single{ grid-template-columns:1fr; max-width:440px; }
@media (min-width:768px){ .acct--single{ grid-template-columns:1fr; } }
.acctform label{ display:block; margin-bottom:8px; }
.acctform input{
  width:100%; padding:12px; border:1px solid var(--hairline);
  background:transparent; font:inherit;
}
.acctform__status{ margin-top:12px; min-height:1.5em; color:var(--accent); }
/* The seam notice is information, not an error — muted, never accent. */
.acct__seam{ max-width:56ch; margin-top:32px; }

.acct-me{ max-width:840px; }
.acct-me__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:24px; border-bottom:1px solid var(--hairline);
}
.acct-me__email{ font-size:18px; margin-top:4px; overflow-wrap:anywhere; }
.acct-me__grid{ display:grid; gap:48px; grid-template-columns:1fr; padding-top:32px; }
@media (min-width:768px){ .acct-me__grid{ grid-template-columns:1fr 1.4fr; gap:64px; } }
.acct-me__stat{ font-size:28px; font-weight:600; }

.ordrow{
  display:grid; grid-template-columns:1fr auto; gap:4px 16px;
  padding-block:12px; border-bottom:1px solid var(--hairline); color:var(--ink);
}
.ordrow__id{ font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.ordrow__meta{ grid-column:1; }
.ordrow__total{ grid-column:2; grid-row:1 / span 2; align-self:center; font-weight:600; }
.ordrow:hover{ background:rgba(17,17,17,.03); }

/* ============ COLLECTION — EDITORIAL (Phase 8) ============
   Lives in pages.css, NOT shop.css: /shop/ must not download layout for a
   page it never renders (the Phase 3 perf budget is per commerce route).
   /collection/ and /community/ load this file; /shop/ does not. */
.lookbook__split{ display:grid; gap:32px; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .lookbook__split{ grid-template-columns:1.6fr 1fr; gap:48px; }
  .lookbook__split--flip > .frame{ order:2; }
}
.lookbook__copy p + p{ margin-top:16px; }

/* ---------- STYLING FILMS ----------
   9:16 posters in a snap rail. No player: see the seam note in
   collection.js. Deliberately quiet — this is editorial, and an accent
   here would compete with the Shop CTAs above it (guide §09.1). */
.reels__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,220px);
  gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding-bottom:8px;
}
.reels__rail > *{ scroll-snap-align:start; }
.reel__btn{
  display:block; width:100%; padding:0; text-align:left; cursor:pointer;
  background:transparent; border:0; color:inherit;
}
.reel__frame{
  position:relative; display:block; aspect-ratio:9/16; overflow:hidden;
  background:var(--media-b,#DBDDE2); margin-bottom:8px;
}
.reel__frame > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1);
}
.reel__tag{ display:block; color:var(--muted); margin-bottom:4px; }
.reel__title{ display:block; font-size:14px; line-height:1.3; overflow-wrap:anywhere; }
.reels__status{ margin-top:16px; min-height:1.5em; }

/* ============ COMMUNITY WALL (Phase 8) ============ */
.wall{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .wall{ grid-template-columns:repeat(3,1fr); gap:24px; } }
@media (min-width:1200px){ .wall{ grid-template-columns:repeat(4,1fr); } }
.post{ min-width:0; }
.post__frame{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--media-b,#DBDDE2); }
.post__frame > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); }
.post__caption{ display:block; font-size:13px; line-height:1.4; margin-top:8px; overflow-wrap:anywhere; }
.post__tag{
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:8px; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--hairline); padding:0 12px; color:var(--ink);
}
.post__tag:hover{ border-color:var(--ink); }
.wall__submit{ margin-top:48px; padding-top:32px; border-top:1px solid var(--hairline); max-width:56ch; }

/* ============ LEGAL PAGES (/privacy/, /terms/) ============
   Long-form prose, so the only job here is a comfortable measure and
   enough air between sections to find a heading while scanning. Everything
   else comes from the shared tokens. */
.legal{ max-width:68ch; }
.legal h1{ margin-bottom:8px; }
.legal__stamp{ margin:0 0 40px; }
.legal h2{ margin:40px 0 8px; }
.legal p{ margin:0 0 16px; }
.legal .lead{ margin-bottom:32px; }
.legal__list{ margin:0 0 16px; padding-left:20px; }
.legal__list li{ margin-bottom:10px; }
.legal a{ text-decoration:underline; }

/* The lookbook's text CTA is the whole of its own line — a control, not a
   link inside a sentence — so it takes the 44px floor like the rest.
   See the tap-target note in site.css for where that line is drawn. */
.lookbook__copy .small a{ display:inline-flex; align-items:center; min-height:44px; }

/* ---------- SOCIAL ACCOUNTS, NOT YET CONFIRMED ----------
   An account with no handle is rendered as TEXT, never as a link — see
   window.socialLinks() in storefront.js. It still has to look deliberate
   rather than broken, so it gets the same quiet treatment a real link
   would and says plainly that it is not up yet. */
.wall__social{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:16px; align-items:center; }
.soclink{ display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; }
.soclink--soon{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--muted); cursor:default;
}
.soclink--soon em{
  font-style:normal; margin-left:8px;
  /* 12px is the phone legibility floor; this pill was 11px. Letter-spacing
     trimmed so the wider glyphs still fit the same badge. */
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid currentColor; padding:2px 8px;
}

/* ============ FIND US (moved from site.css, Phase-12 fix round) ============
   Highest-intent page on the site: somebody reading it is deciding whether
   to get in a car. It should answer "which one is nearer me, and how do I
   get there" without a paragraph.

   What was wrong, measured at 360/390/768/1024/1440 before anything changed:

     - THE TWO CARDS DID NOT READ AS A PAIR. Jabi's address is one line and
       Wuse's is two, so the map frames started 23px apart and the action
       buttons landed 24px apart. Equal card heights hid it; the insides were
       never aligned. The address row now reserves two lines, so every row
       below it starts on the same baseline in both cards.

     - THE PLACEHOLDER MAP DOMINATED. At 1440 the 16:9 frame was 61% of the
       card — the largest thing on a page where it is the one element that
       is not real yet. Now a flatter band with a height cap: still plainly
       visible and still honest that a map is coming, no longer the loudest
       thing in the card.

     - THE BUTTONS WERE RAGGED. 193px and 213px side by side, stacking into
       two different widths below 1024. They share the row evenly now, so
       they stack as a matched pair.

     - THE RHYTHM WAS OFF THE GRID: 12px and 20px margins, 12px gaps. All on
       8s now.

     - THE TRUST ROW FLOATED. 16px under the cards and 640px wide against a
       1160px card row, reading as an orphan rather than the close of the
       page. Separated properly and matched to the grid it sits under. */
.locations{ display:grid; gap:24px; grid-template-columns:1fr; }
/* A grid item's automatic minimum is its MIN-CONTENT, so a card whose
   widest button cannot shrink pushes the whole track past the viewport —
   400px of content in a 390px window. The same trap orderdesk.css documents
   for .oddetail and site.css for .pgrid; the same one-line answer. */
.locations > *{ min-width:0; }
@media (min-width:768px){
  .locations{ grid-template-columns:1fr 1fr; gap:32px; }
  /* SUBGRID is what actually makes the two cards a pair. The min-height
     below reserves two lines for the address, which was enough at 1024 and
     above and NOT enough at 768, where the narrower column wraps Wuse onto
     three lines and pushed its map and buttons 45px below Jabi's.
     Guessing a line count per breakpoint is a losing game — the addresses
     are real and can change. Subgrid makes every row line up across both
     cards whatever the content does. */
  .location{
    grid-row:span 5;
    grid-template-rows:subgrid;
  }
}

.location{
  display:grid; align-content:start; gap:16px;
  border:1px solid var(--hairline); padding:24px;
}
@media (min-width:768px){ .location{ padding:32px; } }
.location__label{ display:block; margin:0; }
.location__address{
  font-size:15px; line-height:1.6; margin:0;
  overflow-wrap:anywhere;   /* long real-world addresses, no overflow */
  /* Two lines reserved. Wuse wraps and Jabi does not, and without this the
     map and the buttons sat at different heights in the two cards. */
  min-height:calc(2 * 1.6 * 15px);
}
.location__hours{ font-size:13px; color:var(--muted); margin:0; }
.location__actions{ display:flex; flex-wrap:wrap; gap:8px; }
/* Equal shares of the row, so they never stack as two different widths. */
/* Equal basis + equal grow = the two buttons end the same width whether
   they share a row or stack, which is the whole point of a matched pair.
   min-width:0 keeps a long label from forcing the card past its track. */
.location__actions .btn{ flex:1 1 10rem; min-width:0; padding-inline:16px; }

/* INTEGRATION-SEAM: Google Maps Embed API key — RESOLVED. .mapframe now
   holds a real <iframe>; the height cap stays so a map (real or not) is
   never the biggest thing on the card, which was the point of capping it
   even in its placeholder days.

   The dashed "not wired" look is still here, scoped to the case where a
   future location ships without a key yet — :has() lets one class serve
   both states without a second class name to keep in sync. Solid border,
   no dashed pattern, once an iframe is actually inside. */
/* aspect-ratio + max-height with no explicit width means the browser
   derives the box's WIDTH from the height cap (176 * 21/9 ~= 411px)
   instead of stretching it to the grid column, so it renders narrower than
   the button row below it and sits flush left instead of centred in the
   space it's occupying. width:100% pins it back to the column's full
   width — matching the button row exactly, so their centres coincide —
   and max-height still crops the taller-than-176px result the aspect
   ratio would otherwise want. */
.mapframe{
  aspect-ratio:21/9; max-height:176px; width:100%;
  border:1px solid var(--hairline);
  overflow:hidden;
}
.mapframe:not(:has(iframe)){
  border-style:dashed;
  background:repeating-linear-gradient(45deg, var(--media-a,#F3F3F4) 0 10px, transparent 10px 20px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:16px;
}
.mapframe iframe{ width:100%; height:100%; border:0; display:block; }

/* The trust row closes the page rather than floating under it. */
.locations + .trust{
  margin-top:48px; padding-top:32px;
  border-top:1px solid var(--hairline);
  max-width:none;
}
@media (min-width:768px){
  .locations + .trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
}

/* ============ WHOLESALE CARD ROWS (Phase-12 rebuild) ============
   The card itself is shop.css's .card, unchanged — proportions, type scale
   and hover all come from there so /2be-trade/ and /shop/ cannot drift.
   The only thing this page adds is the three-value block underneath.

   Retail, trade and MOQ stay SEPARATELY LABELED and are never folded into
   one price: the distinction is the whole point of a trade page, and a
   single "from" figure would hide which of the three a buyer is looking at.
   Tabular figures so the column scans. */
/* .card__body is a flex ROW on the PLP (site.css) — name on the left,
   price on the right. A wholesale card has four things to say, not two, so
   its body stacks. Without this the four children laid out side by side and
   the product name was squeezed to one character per line at 1440, which a
   green suite did not notice and a screenshot did immediately. */
.wcard{ display:flex; flex-direction:column; }
.wcard .card__body{ display:flex; flex-direction:column; flex:1 1 auto; }
/* Product names differ in length, so without this the price block and the
   CTA sat at a different height in every card of a row. The cards already
   stretch to the row height; this just puts the action on the floor of each
   one, which is what makes a row of them scan as a price list. */
.wcard__add{ margin-top:auto; }
.wprice{ display:grid; gap:4px; margin:12px 0 16px; font-size:13px; }
.wprice__row{ display:flex; justify-content:space-between; gap:16px; }
.wprice__row dt{ color:var(--muted); }
.wprice__row dd{ margin:0; font-variant-numeric:tabular-nums; }
/* The trade price is the number this page exists to show. */
.wprice__row--trade dd{ font-weight:600; }
.wprice__row--trade dt{ color:var(--ink); }
/* Full-width so it reads as one action per card rather than a floating
   control, and it clears the 44px floor like every other button. */
.wcard__add{ width:100%; }
/* The wholesale grid is denser than the PLP — a trade buyer is scanning a
   price list, not browsing. */
@media (min-width:900px){
  .shopgrid[data-wgrid]{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1200px){
  .shopgrid[data-wgrid]{ grid-template-columns:repeat(4,1fr); }
}

/* The one phone line on the site (/find-us/ contact section). An author
   `display` would defeat the [hidden] the page sets when there is no number
   to show — the same trap .acct and .paychoice already document. */
.contactline{ display:none; margin-top:24px; align-items:baseline; gap:12px; }
.contactline:not([hidden]){ display:flex; }
.contactline a{
  font-variant-numeric:tabular-nums; letter-spacing:.04em; font-size:18px;
}