/* ax-settings.css - the ONLY host-specific file of the Tienda modules (ax-core, ax-youtube-bar, ax-share, ax-tienda, ax-rotation-fx).
   Maps the module tokens to speclang.pro's own CSS variables (site.css :root + [data-theme=dark]) so light/dark/high-contrast follow the site.
   To use the modules on another site, copy this file and point the tokens at that site's colours; channel id, strings and shop links
   live in the page's <script type="application/json" id="ax-module-settings">. */
:root {
  --ax-surface: var(--sheet);
  --ax-surface-soft: var(--wash);
  --ax-text: var(--ink);
  --ax-muted: var(--muted);
  --ax-line: var(--line);
  --ax-accent: var(--accent);
  --ax-rail: var(--rail, 0px);          /* width of the fixed left rail (0 on phones) */
  --ax-shell: var(--gutter, 1.5rem);    /* side padding of the page content */
  /* dark panel colours = speclang.pro's own shop panel (shop.css .shop-storefront) */
  --ax-panel-a: #0d293a;
  --ax-panel-b: #134b55;
  --ax-panel-text: #f8fbf5;
  --ax-panel-accent: #a9e4c0;
  --ax-youtube: #c4161c;
}

/* compact phone top area (ax-compact.js, owner 2026-10-08): the top rail keeps the brand, "Solicitar cotización" and a menu button;
   the utility block (language, Personalizar, Privacidad, rain sound, share row, Menu) opens under it */
.axc-toggle { display: none; }
@media (max-width: 850px) {   /* the horizontal top rail (site.css switches to the left menu rail above 850 px) */
  header.edge-rail > .axc-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px;
    padding: 0 .75rem; margin-inline-start: .5rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit;
    font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
  header.edge-rail > .axc-toggle[aria-expanded="true"] { background: color-mix(in srgb, currentColor 14%, transparent); }
  header.edge-rail > .axc-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  html.axc-ready:not(.axc-open) .utility { display: none !important; }
  header.edge-rail > .brand { flex: 0 0 auto; }   /* the brand keeps its width; a long quote link (id: "Minta penawaran") wraps instead of running under it */
  header.edge-rail > .rail-contact { flex: 0 1 auto; min-inline-size: 0; margin-inline-start: auto; text-align: end; white-space: normal; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* up to two lines; only longer text (Binary) ends in an ellipsis */   /* only once the button exists: never locked out */
}
@media (max-width: 400px) {   /* narrow phones: the palm logo (it carries the Speclang name) stays, the wordmark is kept for screen readers only */
  header.edge-rail > .brand > strong { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* YouTube bar on narrow phones: one line (icon, live count, Subscribe); the channel name stays for screen readers.
   (selectors carry [data-ax-ytbar] because ax-youtube-bar.css loads after this file) */
@media (max-width: 480px) {
  .ax-ytbar[data-ax-ytbar] { column-gap: .5rem; }   /* round E: the row may wrap - a long Subscribe word (ta, Binary) takes a second line instead of being cut */
  .ax-ytbar[data-ax-ytbar] .ax-ytbar__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ax-ytbar[data-ax-ytbar] .ax-ytbar__yt { display: none; }
  .ax-ytbar[data-ax-ytbar] .ax-ytbar__cta { display: inline-block; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center;
    padding: .45rem .6rem; font-size: .74rem; line-height: 1.2; }   /* round E: never cut (was: ellipsis after 11rem); long words wrap inside the button */
}