/* ============================================================
   HomeZ — admin dashboard styles
   ============================================================ */
.ashell{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:var(--paper)}
.aside{background:#fff;border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;
  height:100vh;display:flex;flex-direction:column;gap:3px}
.aside img{height:32px;margin:0 8px 18px}
.anav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);width:100%;
  text-align:left;font-size:13.5px;font-weight:500;color:var(--ink-2);transition:.16s}
.anav:hover{background:var(--paper);color:var(--green-mid)}
.anav[aria-current="true"]{background:var(--mint);color:var(--green);font-weight:700}
.anav .n{margin-left:auto;font-size:11px;font-weight:700;background:var(--sale);color:#fff;
  padding:1px 7px;border-radius:999px}
.aside-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
.amain{padding:28px 34px 56px;max-width:1400px;width:100%}
.ahead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.ahead h2{font-size:26px;font-weight:800}
.ahead p{color:var(--ink-2);margin:4px 0 0;font-size:13.5px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:18px}
.stat span{font-size:12px;color:var(--ink-3);font-weight:600}
.stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:25px;font-weight:800;margin:6px 0 2px}
.stat em{font-style:normal;font-size:11.5px;color:var(--ink-2)}
.panel-head{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.panel-head h3{font-size:15px;font-weight:700}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;color:var(--ink-3);font-weight:700;padding:12px 20px;
  background:var(--paper);border-bottom:1px solid var(--line)}
td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
tr:last-child td{border:0}
td .sub{display:block;font-size:11.5px;color:var(--ink-3)}
.t-r{text-align:right}
.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tmb{width:42px;height:42px;border-radius:var(--r);overflow:hidden;background:var(--paper);flex:none}
.tmb img{width:100%;height:100%;object-fit:cover}

/* image manager */
.imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.slot{position:relative;aspect-ratio:1/1;border-radius:var(--r-m);overflow:hidden;background:var(--paper);
  border:2px dashed var(--line-2);display:grid;place-items:center;transition:.18s}
.slot.filled{border-style:solid;border-color:var(--line);cursor:grab}
.slot.drag{opacity:.35}
.slot.over{border-color:var(--green-mid);background:var(--mint);transform:scale(1.03)}
.slot img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.slot .n{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:6px;background:#fff;
  font-size:10.5px;font-weight:700;box-shadow:var(--sh);z-index:2}
.slot .x{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--sale);box-shadow:var(--sh);z-index:2}
.slot .ph{color:var(--ink-3);font-size:11px;text-align:center;padding:6px;pointer-events:none}
.drop{border:2px dashed var(--line-2);border-radius:var(--r-m);padding:16px;text-align:center;
  color:var(--ink-2);font-size:13px;transition:.18s;cursor:pointer;display:grid;place-items:center;gap:4px}
.drop.over{border-color:var(--green-mid);background:var(--mint);color:var(--green)}

@media (max-width:900px){
  .ashell{grid-template-columns:1fr}
  .aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .aside img{margin:0 10px 0 4px}
  .anav{width:auto}
  .aside-foot{margin-left:auto;border:0;padding-top:0;display:flex;gap:4px;align-items:center}
  .amain{padding:20px 16px 48px}
  .imgs{grid-template-columns:repeat(2,1fr)}
}

/* settings and payment configuration */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.setting-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:22px}
.setting-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.setting-card .hint{font-size:12.5px;color:var(--ink-2);margin:0 0 16px}
.gateway-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.gateway-pick button{flex:1;min-width:120px;border:1.5px solid var(--line);border-radius:var(--r-m);
  padding:13px;text-align:left;transition:.18s}
.gateway-pick button:hover{border-color:var(--green-mid)}
.gateway-pick button[aria-pressed="true"]{border-color:var(--green-mid);background:var(--mint)}
.gateway-pick b{display:block;font-size:13.5px}
.gateway-pick small{font-size:11.5px;color:var(--ink-2)}
.secret-set{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--green-mid);background:var(--mint);padding:3px 9px;border-radius:999px;margin-left:8px}
.warn-box{background:var(--sun-soft);border:1px solid #F3D9AC;color:#7A4E07;border-radius:var(--r);
  padding:12px 14px;font-size:13px;margin-bottom:14px}
.switch-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px}
.switch-row input{width:17px;height:17px}

/* ============================================================
   ADMIN ON A PHONE
   ------------------------------------------------------------
   The panel overflowed the screen by between 12 and 450 px at
   360 px wide. Two causes: the shell collapsed to a `1fr` column,
   whose minimum size is its content, so a wide table dragged the
   whole page past the viewport; and the settings grid asked for
   columns at least 340 px wide, which does not fit a 360 px
   screen once padding is taken off.

   Tables keep their shape and scroll inside their own panel. A
   stock figure next to the wrong product name is worse than a
   sideways swipe, so the columns are not stacked.
   ============================================================ */
@media (max-width:900px){
  .ashell{grid-template-columns:minmax(0,1fr)}
  /* Two rows, the first only as tall as the tab strip. Without
     this the grid stretches both rows to share the full height
     and the strip floats in the middle of an empty band. */
  .ashell{grid-template-rows:auto minmax(0,1fr)}
  /* The half of the fix that the single-column rule needs. */
  .aside,.amain{min-width:0}

  /* The sidebar becomes a scrolling strip of tabs along the top.
     `.anav` is each tab, not a container, so the strip has to be
     the sidebar itself. Its desktop height of 100vh also has to
     go, or it leaves most of the screen blank above the page. */
  .aside{position:sticky;top:0;z-index:40;height:auto;
    flex-direction:row;align-items:center;flex-wrap:nowrap;gap:6px;
    padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .aside::-webkit-scrollbar{display:none}
  /* The logo sits inside a link, and that link is the flex item.
     It was being squeezed to 12px by the tabs beside it, which
     then clamped the image through max-width, so the wordmark
     rendered as a sliver. The wrapper is what must not shrink. */
  .aside>a:not(.anav){flex:0 0 auto;display:flex;align-items:center}
  .aside img{width:60px;height:26px;object-fit:contain;margin:0 10px 0 2px}
  /* Each tab keeps its own width and its full label. */
  .anav{width:auto;flex:0 0 auto;white-space:nowrap;padding:10px 13px;min-height:44px}
  .anav .n{margin-left:7px}
  .aside-foot{margin:0 0 0 auto;border:0;padding:0;flex:0 0 auto;
    display:flex;gap:6px;align-items:center;white-space:nowrap}

  .amain{padding:18px 14px 44px}
  .ahead{flex-direction:column;align-items:flex-start;gap:12px}
  .ahead h2{font-size:21px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}

  /* Tables scroll inside the panel instead of widening the page.
     `.panel` clips with overflow:hidden by default, which would
     cut the columns off instead of letting them be reached. */
  .panel{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .panel table{min-width:580px}
  .panel-head{flex-wrap:wrap;gap:10px}

  .imgs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  /* minmax(340px,1fr) cannot fit a 360 px screen, so the track
     stayed 340 px wide and took the page with it. */
  .settings-grid{grid-template-columns:minmax(0,1fr)}
  .setting-card{padding:16px}
  .setting-card[style*="grid-column"]{grid-column:auto!important}
  .gateway-pick{flex-direction:column}
  .gateway-pick button{width:100%;min-width:0}
}

@media (max-width:480px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .amain{padding:14px 12px 40px}
}

/* Touch targets in the panel. Keyed on width for the same reason
   as the storefront: pointer detection is not dependable. */
@media (max-width:900px){
  .anav button,.anav a{min-height:44px;padding:10px 14px}
  .panel-head .btn,.aside-foot a,.aside-foot button{min-height:42px}
  td .btn,td button{min-height:38px}
}

/* An admin table cell holding an email address or a long product
   name should wrap rather than force the table wider still.
   `break-word` rather than `anywhere`: `anywhere` also tells the
   browser a column may shrink to one character, which collapsed
   every heading into a vertical stack of letters. */
td,th{overflow-wrap:break-word}