/* ========================================================================
   Arch International — three additions, loaded after editorial.css

     1. the floating action rail  (counterfeit guide + WhatsApp)
     2. phone verification on the enquiry form
     3. the catalogue's two scrolling panes

   Everything here borrows the tokens already declared in site.css and
   editorial.css, so the additions read as part of the same interface
   rather than bolted on beside it.
   ======================================================================== */


/* Older engines do not honour the plain `hidden` attribute from their own
   default stylesheet, and the verification controls rely on it heavily, so
   state it once here rather than trusting the browser. */
[hidden] { display: none !important; }


/* ===================== 1. floating action rail ========================== */

.float-rail {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
}

/* The WhatsApp pill keeps its own colour and shape from site.css; this
   resets only the fixed positioning now that the rail owns it. */
.float-rail .whatsapp-float { position: static; right: auto; bottom: auto; }

.float-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.float-btn:hover { transform: translateY(-3px); }

/* The guide reads as a document, not a chat: translucent white card so the
   page shows through, with a blur behind it to keep the text legible over
   photographs and dark sections. */
.float-guide {
  padding: 9px 17px 9px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 14px 34px rgba(0, 0, 0, .11);
}
.float-guide:hover {
  background: rgba(255, 255, 255, .85);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .07), 0 20px 42px rgba(0, 0, 0, .16);
}
/* Where the blur is unsupported the panel would be almost see-through, so
   fall back to something closer to solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-guide { background: rgba(255, 255, 255, .93); }
}
.float-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--brand);
}
.float-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.float-text { display: grid; gap: 1px; line-height: 1.25; }
.float-text b { font-size: .84rem; font-weight: 600; letter-spacing: -.01em; }
.float-text i {
  color: var(--ink-3);
  font-size: .7rem;
  font-style: normal;
  font-weight: 500;
}

/* A quiet pull on first arrival, once, so the guide gets noticed without
   turning into a permanently blinking badge. */
@media (prefers-reduced-motion: no-preference) {
  .float-guide { animation: guideNudge 1.1s var(--ease-out) 1.6s 2; }
}
@keyframes guideNudge {
  0%, 100% { transform: none; }
  35%      { transform: translateY(-5px); }
  70%      { transform: translateY(-1px); }
}

@media (max-width: 640px) {
  .float-rail { right: 14px; bottom: 14px; gap: 9px; }
  .float-text i { display: none; }
  .float-text b { font-size: .78rem; }
  .float-guide { padding: 8px 14px 8px 8px; }
  .float-icon { width: 34px; height: 34px; flex-basis: 34px; }
}
/* On the narrowest phones the wording stays: an unlabelled shield tells
   nobody what it opens. It wraps onto two lines instead of disappearing. */
@media (max-width: 420px) {
  .float-guide { padding: 7px 13px 7px 7px; max-width: calc(100vw - 34px); }
  .float-text { gap: 0; }
  .float-text b { font-size: .72rem; line-height: 1.2; white-space: normal; }
  .float-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .float-icon svg { width: 18px; height: 18px; }
}


/* ===================== 2. phone verification =========================== */

.field-phone .phone-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.field-phone .phone-row input { flex: 1 1 auto; min-width: 0; }
.otp-trigger {
  flex: 0 0 auto;
  align-self: stretch;
  white-space: nowrap;
  border-radius: 13px;
}

.otp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 13px;
  border-radius: 100px;
  background: #edf8ef;
  color: #1c6b32;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.otp-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.otp-panel {
  margin: -4px 0 20px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--surface-2);
}
.otp-panel[hidden] { display: none; }

.otp-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.otp-panel-head strong {
  display: block;
  font-size: .9rem;
  letter-spacing: -.01em;
}
.otp-panel-head p {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: .82rem;
  line-height: 1.45;
}
.otp-panel.is-bad .otp-panel-head p { color: var(--brand); font-weight: 550; }
.otp-step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: #fff;
}
.otp-step svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.otp-entry { display: flex; gap: 9px; align-items: stretch; }
.otp-entry input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid #c8c8cd;
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-align: center;
}
.otp-entry input::placeholder { color: #c9c9ce; letter-spacing: .34em; }
.otp-entry input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(29, 29, 31, .08);
  outline: 0;
}
.otp-entry .btn { flex: 0 0 auto; align-self: stretch; border-radius: 13px; }

.otp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 550;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--brand); }
.linkish[disabled] {
  color: var(--ink-3);
  text-decoration: none;
  cursor: default;
}
.otp-timer { color: var(--ink-3); font-size: .76rem; font-variant-numeric: tabular-nums; }

/* Only ever visible while no SMS gateway is configured. */
.otp-devcode {
  margin: 0 0 13px;
  padding: 10px 13px;
  border: 1px dashed #d3ac4f;
  border-radius: 12px;
  background: #fdf8ec;
  color: #6d5312;
  font-size: .8rem;
  line-height: 1.5;
}
.otp-devcode span {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: #e8c96f;
  color: #4a3a08;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.otp-devcode b {
  font-family: var(--mono);
  font-size: 1.02rem;
  letter-spacing: .16em;
}

.enquiry-form .btn[data-submit][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
  .field-phone .phone-row { flex-wrap: wrap; }
  .otp-trigger, .otp-badge { width: 100%; justify-content: center; }
  .otp-entry { flex-direction: column; }
  .otp-entry .btn { width: 100%; }
}


/* ===================== 3. the catalogue's two panes ===================== */

.catalogue-split { align-items: start; }
.catalogue-main { min-width: 0; }

.scrollpane { position: relative; min-width: 0; }
.scrollpane-view {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #c3c3c9 transparent;
}
.scrollpane-view:focus-visible { outline-offset: 0; }

.scrollpane-view::-webkit-scrollbar { width: 9px; }
.scrollpane-view::-webkit-scrollbar-track { background: transparent; }
.scrollpane-view::-webkit-scrollbar-thumb {
  border: 2.5px solid transparent;
  border-radius: 100px;
  background-clip: content-box;
  background-color: #cdcdd3;
}
.scrollpane-view::-webkit-scrollbar-thumb:hover { background-color: #a9a9b1; }

/* The panes used to carry gradient fades at their top and bottom edges. They
   made the cards look blurred or washed out as they scrolled past, so the
   content now runs to the edge and scrolls as a solid block. The scrollbar
   itself is the signal that there is more to see. */

/* ---- the category pane ---- */
.catpane .scrollpane-view {
  max-height: calc(100vh - 310px);
  min-height: 220px;
  padding-right: 5px;
  padding-bottom: 2px;
}

/* The listing's own heading. Deliberately compact: it names the page for
   search engines and screen readers without eating the height the product
   pane needs. */
.listing-title {
  margin: 18px 2px 0;
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.4;
}
/* Margins rather than flex gap: this is three inline scraps of text, and
   margins behave the same everywhere. */
.listing-title span,
.listing-title a { margin-left: 10px; font-size: .8rem; }
.listing-title span { color: var(--ink-3); font-weight: 450; }
.listing-title a { color: var(--ink-3); font-weight: 500; }
.listing-title a:hover { color: var(--brand); }

/* ---- the product grid ----
   No longer a scroller. Boxing the cards into a fixed-height window meant a
   visitor saw three at a time above a band of empty space, and had to scroll
   inside a small area to find anything. The grid now runs the length of the
   page, so every card is part of one continuous list, while the category list
   beside it stays put and keeps its own scroller. */
.catalogue-main .grid { margin: 0; padding-bottom: 8px; }

/* Awareness card under the category list. */
.sidebar-guide {
  display: grid;
  gap: 2px;
  margin-top: 16px;
  padding: 14px 15px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.sidebar-guide:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .09);
}
.sidebar-guide span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  border-radius: 50%;
  background: var(--brand-tint);
}
.sidebar-guide svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-guide b { font-size: .82rem; font-weight: 600; }
.sidebar-guide i {
  color: var(--ink-3);
  font-size: .74rem;
  font-style: normal;
  line-height: 1.4;
}

/* Below the two-column breakpoint the sidebar is hidden and the chip row takes
   over, so the category pane hands scrolling back to the page. */
@media (max-width: 900px) {
  .scrollpane-view {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 0;
  }
}
@media (max-height: 620px) {
  .catpane .scrollpane-view { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .scrollpane-view { scroll-behavior: auto; }
  .float-guide { animation: none; }
}


/* ---- inbox: which numbers answered a code ---- */
.verified-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  background: #248a3d;
  vertical-align: middle;
}
.verified-tick svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ===================== 4. grid density ==================================
   Four category tiles to a row on a desktop, and never one lonely card to a
   row on a phone. The rules below come after editorial.css on purpose: they
   replace its column counts rather than fighting them.
   ======================================================================== */

/* ---- home page category tiles: 4 across ---- */
.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* Four columns are narrower than three, so the tile's own proportions need
   easing back a little to stop the headings wrapping awkwardly. */
.tiles .tile { padding: 26px 24px 24px; }
.tiles .tile h3 { font-size: 1.24rem; letter-spacing: -.025em; }
.tiles .tile-index { margin-bottom: 30px; }
.tiles .tile p { font-size: .875rem; line-height: 1.5; }
.tiles .tile::after { width: 76px; height: 76px; right: -28px; bottom: -28px; }

@media (max-width: 1240px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* On a phone: three across is unreadable for tiles this wordy, so two. */
@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .tiles .tile { padding: 18px 16px 16px; border-radius: 20px; }
  .tiles .tile h3 { font-size: 1.02rem; letter-spacing: -.02em; }
  .tiles .tile-index { margin-bottom: 16px; font-size: .64rem; }
  .tiles .tile p { font-size: .8rem; line-height: 1.45; }
  .tiles .tile-count { font-size: .64rem; }
  .tiles .tile::after { display: none; }
}

/* ---- product cards: two to a row on a phone ---- */
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }

  /* Two cards across a 390px screen leaves roughly 180px each, so the card
     internals tighten up and the least important lines step aside. */
  .grid .card { border-radius: 20px; }
  .grid .card-body { gap: 8px; padding: 14px 14px 16px; }
  .grid .card-title { font-size: .98rem; letter-spacing: -.02em; line-height: 1.25; }
  .grid .card-sum {
    font-size: .78rem;
    line-height: 1.45;
    /* Keep every card the same height whatever the blurb length. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .grid .card-tag { font-size: .55rem; padding: 4px 8px; }
  .grid .card-model { font-size: .68rem; }
  /* The spec table needs room the card no longer has; the full sheet is one
     tap away on the product page. */
  .grid .keyspecs { display: none; }
  .grid .card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .grid .card-foot .onreq { font-size: .58rem; text-align: center; }
  .grid .card-foot .btn { width: 100%; justify-content: center; padding: 9px 12px; font-size: .78rem; }
}

/* Below this the two columns would be too cramped to read. */
@media (max-width: 360px) {
  .grid, .tiles { grid-template-columns: 1fr !important; }
  .grid .keyspecs { display: grid; }
}

/* ---- about page: keep the values cards two across on a phone ---- */
@media (max-width: 760px) {
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .values-grid li { min-height: 132px; padding: 16px 16px 18px; border-radius: 20px; }
  .values-grid li strong { font-size: .9rem; line-height: 1.3; }
  .values-grid li span { font-size: .64rem; }
}
@media (max-width: 360px) {
  .values-grid { grid-template-columns: 1fr !important; }
}

/* The tagline is one line on a desktop; on a phone it is hidden entirely
   (see the 640px rule above), so nowrap is safe here. */
.float-text i { white-space: nowrap; }

/* The "How we work" cards share the about page with the values cards, so they
   move to two across at the same point rather than leaving the page half in
   one column and half in two. */
@media (max-width: 760px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .work-grid li { min-height: 0; padding: 16px 16px 18px; border-radius: 20px; }
  .work-grid h3 { margin: 22px 0 8px; font-size: 1rem; letter-spacing: -.02em; }
  .work-grid p { font-size: .8rem; line-height: 1.45; }
  .work-grid span { font-size: .64rem; }
}
@media (max-width: 360px) {
  .work-grid { grid-template-columns: 1fr !important; }
}


/* ===================== 5. admin additions ================================ */

/* Shown in the staff area only while no SMS gateway is connected. */
.setup-warning {
  margin-bottom: 26px;
  padding: 18px 20px;
  border: 1px solid #e3c469;
  border-left: 4px solid #d9a417;
  border-radius: 16px;
  background: #fdf8ec;
  color: #5c4708;
}
.setup-warning strong { display: block; font-size: .95rem; }
.setup-warning p { margin: 6px 0 0; font-size: .85rem; line-height: 1.55; }
.setup-warning p.small { font-size: .78rem; opacity: .9; }
.setup-warning .mono { background: rgba(0, 0, 0, .05); padding: 1px 5px; border-radius: 5px; }

/* Bulk product import panel. */
.bulk-panel { margin-bottom: 26px; }
.bulk-panel h3 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -.02em; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.bulk-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.bulk-form input[type="file"] { flex: 1 1 240px; min-width: 0; font-size: .84rem; }
@media (max-width: 560px) {
  .bulk-form { flex-direction: column; align-items: stretch; }
  .bulk-form .btn { width: 100%; justify-content: center; }
}


/* ===================== 6. the home page stats bar ========================
   Three faults were visible: the cell dividers ran the full height and
   collided with the card's rounded corners, the inner element carried the
   shared .shell padding so the outer gutters did not match the gaps between
   columns, and between 540px and 760px three columns were squeezed into a
   phone. Rebuilt here rather than patched.
   ======================================================================== */

.page-index .stats-strip {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
  /* A single hairline along the bottom and nothing else. The left and right
     edges are dropped so the two inner dividers are the only vertical lines,
     and the corners are square rather than rounded. */
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .055);
}

.page-index .stats-strip-inner {
  /* It also carries .shell, whose side padding made the first and last
     columns visually wider than the middle one. The cells pad themselves. */
  max-width: none;
  width: 100%;
  padding-inline: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-index .stats-strip-inner > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  padding: 32px 34px;
  border: 0;
}

/* Dividers as insets, so they stop short of the rounded edges instead of
   running into them. */
.page-index .stats-strip-inner > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: var(--line-soft);
}

.page-index .stats-strip strong {
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.page-index .stats-strip span { color: var(--ink-2); font-size: .84rem; line-height: 1.45; }

/* Tablet: keep three across but give the type and padding some slack. */
@media (max-width: 1000px) {
  .page-index .stats-strip-inner > div { padding: 26px 22px; }
  .page-index .stats-strip span { font-size: .78rem; }
}

/* Phone: three columns cannot hold a sentence each, so they stack with
   horizontal rules and the numbers stay large enough to read. */
@media (max-width: 760px) {
  .page-index .stats-strip { width: calc(100% - 28px); border-radius: 0; }
  .page-index .stats-strip-inner { grid-template-columns: 1fr; }
  .page-index .stats-strip-inner > div { padding: 17px 20px; gap: 3px; }
  .page-index .stats-strip-inner > div + div::before {
    left: 20px;
    right: 20px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .page-index .stats-strip strong { font-size: 1.5rem; }
  .page-index .stats-strip span { font-size: .8rem; }
}


/* ---- stats bar: silence the old dark-theme borders ----------------------
   The bar was once dark, and rules from that design still target individual
   cells by position with a near-black border colour (#39393d, #303030). A
   :nth-child selector outranks the plain `> div` rule above, which is why one
   divider came out bold while the others were hairlines. Matching the
   specificity here settles it, so every divider is drawn only by the inset
   pseudo-element and they all look the same.
   ---------------------------------------------------------------------- */
.page-index .stats-strip-inner > div:first-child,
.page-index .stats-strip-inner > div:last-child,
.page-index .stats-strip-inner > div:nth-child(1),
.page-index .stats-strip-inner > div:nth-child(2),
.page-index .stats-strip-inner > div:nth-child(3),
.page-index .stats-strip-inner > div:nth-child(4) {
  border: 0;
  border-color: transparent;
}


/* ---- category tag on a card --------------------------------------------
   A long category name such as "Control Boxes/Bases and Controllers" wrapped
   to two lines inside a pill built for one, and the lines overlapped. It now
   stays on one line and truncates.
   ---------------------------------------------------------------------- */
.card-tag {
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}


/* ---- home page showcase panels ----------------------------------------
   Each panel links through to the product it shows. The link covers the whole
   card so the photograph and the caption are both clickable.
   ---------------------------------------------------------------------- */
.page-index .collage-card { position: relative; }
.collage-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.collage-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.page-index .collage-set.is-active .collage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .14);
}
.page-index .collage-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), opacity .55s ease; }