/* ═══════════════════════════════════════════════════════════════
   Eastcrust OS — site layer (WordPress + Shopify)
   Sits on top of ecos-core.css; every colour comes from the theme
   variables so all 10 colour themes (incl. Aqua / Aqua Dark) apply.
   ═══════════════════════════════════════════════════════════════ */

html { background: var(--crust); scroll-padding-top: 90px; }
body.ecos-site { color: var(--text); font-size: 12px; line-height: 1.6; min-height: 100vh; min-height: var(--app-h, 100dvh); }
:where(.ecos-site) a { color: var(--arch); text-decoration: none; }
:where(.ecos-site) a:hover { text-decoration: underline; text-underline-offset: 2px; }
:where(.ecos-site) img { max-width: 100%; height: auto; }
.ecos-site ::selection { background: rgba(var(--arch-rgb), .35); color: var(--text); }
.ecos-site :focus-visible { outline: 2px solid var(--arch); outline-offset: 2px; }

.screen-reader-text, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus { position: fixed !important; top: 4px; left: 4px; width: auto; height: auto; clip: auto; z-index: 99999;
  background: var(--arch); color: #fff !important; padding: 6px 12px; border-radius: 5px; }

/* ── shell: polybar + app pills stay put, page scrolls underneath ── */
.ecos-site #polybar { position: sticky; top: 0; }
.ecos-site .h2-desktop { flex: 1; display: flex; flex-direction: column; padding-top: 16px; min-width: 0; }
.ecos-site .h2-win { flex: 1; display: flex; flex-direction: column; min-width: 0; border-top: none; }
.ecos-site .h2-desktop, .ecos-site .h2-win { max-width: 100%; }
body.ecos-site { overflow-x: clip; }
.ecos-site .h2-nav { min-width: 0; max-width: 100%; position: sticky; top: 26px; z-index: 90; border-top: 1px solid var(--surface0); }
.ecos-site .h2-pill { text-decoration: none !important; }
.ecos-site .h2-nav .h2-open { text-decoration: none !important; }
.h2-nav .pill-sep { width: 1px; height: 16px; background: var(--surface1); margin: 0 4px; flex-shrink: 0; }
.h2-nav .h2-pill .pc { font-size: 9px; color: var(--overlay0); margin-left: 2px; }
.h2-nav .h2-pill.on .pc { color: inherit; }
.ecos-app { flex: 1; min-width: 0; width: 100%; }
.ecos-app > .content { overflow: visible; padding: 16px 18px 28px; }
.ecos-site .statusbar { position: sticky; bottom: 0; z-index: 80; }
.ecos-site .statusbar a { color: inherit; }
.ecos-site .statusbar a:hover { color: var(--arch); }
.ecos-site .em-item, .ecos-site .menu-item { text-decoration: none !important; }
.ecos-site .ws-item { text-decoration: none !important; cursor: pointer; }
.ecos-site .ascii-art { margin: 0; }
.ecos-site .app-hd { flex-wrap: wrap; }
.ecos-site .app-name { line-height: 1.25; }
.ecos-site .app-name a { color: inherit; }
.ecos-site .app-name a:hover { text-decoration: none; }
.ecos-site .app-sub { word-break: break-word; }
.ecos-site .chip a { color: inherit; }
.ecos-site .sec-tab { text-decoration: none !important; }
.cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--arch); color: #fff !important; font-size: 9px; font-weight: 700; margin-left: 3px; }

/* Shopify wraps every section in a div; let the header/footer groups sit directly in the layout
   so the polybar and status bar stay sticky. */
.ecos-group, .shopify-section-group-header-group, .shopify-section-group-footer-group { display: contents; }
.ec-sort select { cursor: pointer; }
.ec-pay-icon { height: 18px; width: auto; }
.ecos-site .ec-cart-row .nm { color: var(--text); }

/* ── panels, buttons, inputs ── */
.ec-panel { background: var(--mantle); border: 1px solid var(--surface0); border-radius: 8px; overflow: hidden; }
.ec-panel + .ec-panel { margin-top: 12px; }
.ec-panel-hd { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--surface0);
  font-size: 9px; letter-spacing: .7px; text-transform: uppercase; color: var(--overlay0); }
.ec-panel-hd .sl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--arch); }
.ec-panel-bd { padding: 12px; }

.ecos-site .fb-btn { text-decoration: none !important; display: inline-flex; align-items: center; gap: 5px; line-height: 1.5; }
.ecos-site .fb-btn[disabled], .ecos-site .fb-btn.is-disabled { opacity: .45; pointer-events: none; }
.fb-btn.lg { font-size: 11.5px; padding: 8px 16px; border-radius: 6px; font-weight: 600; justify-content: center; }
.fb-btn.block { width: 100%; }

.ecos-site input[type=text], .ecos-site input[type=search], .ecos-site input[type=email], .ecos-site input[type=password],
.ecos-site input[type=url], .ecos-site input[type=tel], .ecos-site input[type=number], .ecos-site select, .ecos-site textarea {
  background: var(--surface0); border: 1px solid var(--surface1); border-radius: 5px; color: var(--text);
  font-family: var(--font); font-size: 11px; padding: 6px 9px; outline: none; transition: border-color .15s; max-width: 100%;
}
.ecos-site input:focus, .ecos-site select:focus, .ecos-site textarea:focus { border-color: var(--arch); }
.ecos-site input::placeholder, .ecos-site textarea::placeholder { color: var(--surface2); }
.ecos-site textarea { width: 100%; min-height: 110px; line-height: 1.5; }
.ecos-site label { font-size: 10px; color: var(--overlay1); letter-spacing: .3px; }
.ec-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ec-field input, .ec-field select, .ec-field textarea { width: 100%; }
.ec-search { display: flex; gap: 6px; }
.ec-search input { flex: 1; min-width: 0; }
.ec-note { font-size: 10px; color: var(--overlay0); }
.ec-err { font-size: 10.5px; color: var(--red); background: rgba(243,139,168,.08); border: 1px solid rgba(243,139,168,.3);
  border-radius: 5px; padding: 6px 10px; margin-bottom: 10px; }
.ec-ok { font-size: 10.5px; color: var(--green); background: rgba(166,227,161,.08); border: 1px solid rgba(166,227,161,.3);
  border-radius: 5px; padding: 6px 10px; margin-bottom: 10px; }

/* ── sidebar + main split (files-app layout) ── */
.ec-split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; }
.ec-side { background: var(--crust); border: 1px solid var(--surface0); border-radius: 8px; padding: 4px 0 8px;
  position: sticky; top: 92px; max-height: calc(var(--app-h, 100vh) - 130px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--surface1) transparent; }
.ec-side .sb-item { min-height: 32px; text-decoration: none !important; color: var(--subtext0); }
.ec-side .sb-item:hover { color: var(--text); }
.ec-side .sb-item.active { color: var(--arch); }
.ec-side .ec-search { padding: 6px 8px 2px; }
.ec-side .ec-search input { font-size: 10px; padding: 4px 7px; }
.ec-side .widget { padding: 0 8px 6px; font-size: 10.5px; color: var(--subtext0); }
.ec-side .widget ul { list-style: none; }
.ec-side .widget li { padding: 3px 0; }
.ec-side .widget select { width: 100%; }
.ec-side .widget h2, .ec-side .widget h3, .ec-side .widget .wp-block-heading, .ec-side .widget .widget-title {
  padding: 10px 0 4px; font-size: 8.5px; color: var(--overlay0); text-transform: uppercase; letter-spacing: .6px; font-weight: 400; }
.ec-side .widget a { color: var(--subtext0); }
.ec-side .widget a:hover { color: var(--arch); }
.ec-side .widget .wp-block-search__label { display: none; }
.ec-side .widget .wp-block-search__inside-wrapper { display: flex; gap: 4px; }
.ec-side .widget .wp-block-search__input { flex: 1; min-width: 0; font-size: 10px; padding: 4px 7px; }
.ec-side .widget .wp-block-search__button, .ec-search button { background: var(--surface0); border: 1px solid var(--surface1); border-radius: 4px;
  color: var(--subtext0); font-family: var(--font); font-size: 10px; padding: 3px 9px; cursor: pointer; }
.ec-side .widget .wp-block-latest-comments { padding: 0; }
.ec-side .widget .wp-block-latest-comments__comment { margin: 0 0 6px; font-size: 10px; line-height: 1.5; }
.ec-side .widget li { line-height: 1.5; }

/* toolbar above a listing */
.ec-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ec-toolbar .fb-path { max-width: none; }
.ec-toolbar .grow { flex: 1; }
.ecos-site .fb-path a { color: var(--subtext0); }
.ecos-site .fb-path a:hover { color: var(--arch); text-decoration: none; }

/* ── cards grid (posts / products) ── */
.ec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ec-card { background: var(--mantle); border: 1px solid var(--surface0); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; position: relative; color: inherit !important; text-decoration: none !important;
  transition: border-color .15s, transform .12s, box-shadow .15s; }
.ec-card:hover { border-color: rgba(var(--arch-rgb), .5); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.ec-card::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--arch-rgb), .05) 0%, transparent 60%); opacity: 0; transition: opacity .2s; }
.ec-card:hover::before { opacity: 1; }
.ec-thumb { aspect-ratio: 16/10; background: var(--surface0); overflow: hidden; position: relative; flex-shrink: 0; }
.ec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ec-card:hover .ec-thumb img { transform: scale(1.03); }
.ec-thumb.square { aspect-ratio: 1/1; }
.ec-thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--arch); opacity: .55;
  background-image: radial-gradient(circle, var(--wp-dots) 1px, transparent 1px); background-size: 14px 14px; }
.ec-thumb .badge { position: absolute; top: 8px; left: 8px; font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase;
  background: var(--crust); color: var(--yellow); border: 1px solid rgba(249,226,175,.35); border-radius: 3px; padding: 1px 6px; }
.ec-thumb .badge.sale { color: var(--red); border-color: rgba(243,139,168,.4); }
.ec-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ec-title { font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.ec-sub { font-size: 9.5px; color: var(--overlay0); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.ec-excerpt { font-size: 10px; color: var(--overlay1); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-price { font-size: 12px; font-weight: 600; color: var(--arch); }
.ec-price s, .ec-price .was { color: var(--overlay0); font-weight: 400; font-size: 10px; margin-left: 5px; }
.ec-arrow { position: absolute; top: 8px; right: 9px; font-size: 10px; color: var(--arch); opacity: 0; transition: opacity .12s; z-index: 2; }
.ec-card:hover .ec-arrow { opacity: 1; }
.ecos-site .tag { text-decoration: none !important; }
.ec-tags { display: flex; gap: 3px; flex-wrap: wrap; }

/* list view — same cards, laid out as file rows */
.ec-grid.is-list { grid-template-columns: 1fr; gap: 4px; }
.ec-grid.is-list .ec-card { flex-direction: row; align-items: center; border-color: transparent; background: transparent; border-radius: 6px; }
.ec-grid.is-list .ec-card:hover { background: var(--surface0); transform: none; box-shadow: none; border-color: var(--surface1); }
.ec-grid.is-list .ec-thumb { width: 72px; aspect-ratio: 16/10; border-radius: 5px; margin: 6px 0 6px 8px; }
.ec-grid.is-list .ec-thumb .ph { font-size: 14px; }
.ec-grid.is-list .ec-thumb .badge { display: none; }
.ec-grid.is-list .ec-meta { flex-direction: row; align-items: center; gap: 12px; padding: 6px 12px; }
.ec-grid.is-list .ec-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ec-grid.is-list .ec-excerpt { display: none; }
.ec-grid.is-list .ec-sub { margin-top: 0; flex-shrink: 0; }

/* pagination */
.ec-pager { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 18px 0 4px; }
.ec-pager .fb-btn { min-width: 30px; justify-content: center; }
.ec-pager .current { pointer-events: none; }
.ec-empty { padding: 40px 14px; text-align: center; color: var(--overlay0); font-size: 11px; }
.ec-empty .big { font-size: 26px; color: var(--arch); opacity: .5; display: block; margin-bottom: 6px; }

/* ── reading window (posts, pages, products' description) ── */
.ec-doc { max-width: 920px; margin: 0 auto; }
.ec-doc .term-win { max-width: none; max-height: none; overflow: visible; }
.ec-doc .titlebar { border-radius: 8px 8px 0 0; }
.ec-doc .tab { max-width: 60vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; cursor: default; }
.ec-doc-bd { padding: 22px 26px 28px; background: var(--base); border-radius: 0 0 8px 8px; }
.ec-doc-hd { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--surface0); }
.ec-doc-hd h1 { font-size: 22px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; color: var(--text); }
.ec-doc-hd .chips { margin-top: 10px; }
.ec-hero { margin: 0 0 18px; border-radius: 7px; overflow: hidden; border: 1px solid var(--surface0); }
.ec-hero img { display: block; width: 100%; }

.ec-prose { font-size: 12.5px; line-height: 1.8; color: var(--subtext0); overflow-wrap: break-word; }
.ec-prose > * + * { margin-top: 1em; }
.ec-prose h1, .ec-prose h2, .ec-prose h3, .ec-prose h4, .ec-prose h5, .ec-prose h6 { color: var(--text); line-height: 1.35; font-weight: 600; margin-top: 1.6em; }
.ec-prose h2 { font-size: 17px; } .ec-prose h3 { font-size: 14.5px; } .ec-prose h4 { font-size: 13px; }
.ec-prose h5, .ec-prose h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.ec-prose h2::before { content: '## '; color: var(--arch); }
.ec-prose h3::before { content: '### '; color: var(--arch); opacity: .8; }
.ec-prose strong, .ec-prose b { color: var(--text); }
.ec-prose a { color: var(--arch); text-decoration: underline; text-decoration-color: rgba(var(--arch-rgb), .4); text-underline-offset: 2px; }
.ec-prose ul, .ec-prose ol { padding-left: 1.6em; }
.ec-prose li + li { margin-top: .3em; }
.ec-prose li::marker { color: var(--arch); }
.ec-prose blockquote, .ec-prose .wp-block-quote { border-left: 3px solid var(--arch); background: var(--mantle); padding: 10px 16px;
  border-radius: 0 6px 6px 0; color: var(--text); font-style: italic; }
.ec-prose blockquote cite { display: block; font-size: 10px; color: var(--overlay0); font-style: normal; margin-top: 6px; }
.ec-prose code, .ec-prose kbd { background: var(--surface0); border: 1px solid var(--surface1); border-radius: 4px; padding: 1px 5px;
  font-size: .9em; color: var(--peach); font-family: var(--font); }
.ec-prose pre { background: var(--crust); border: 1px solid var(--surface0); border-radius: 7px; padding: 12px 14px; overflow-x: auto;
  font-size: 11px; line-height: 1.6; color: var(--text); }
.ec-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.ec-prose hr { border: 0; height: 1px; background: var(--surface0); margin: 2em 0; }
.ec-prose img, .ec-prose video, .ec-prose iframe { border-radius: 6px; max-width: 100%; }
.ec-prose figure { margin-left: 0; margin-right: 0; }
.ec-prose figcaption, .ec-prose .wp-caption-text, .ec-prose .wp-element-caption { font-size: 10px; color: var(--overlay0); text-align: center; margin-top: 6px; }
.ec-prose table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ec-prose th, .ec-prose td { border: 1px solid var(--surface0); padding: 6px 9px; text-align: left; }
.ec-prose th { background: var(--mantle); color: var(--text); font-weight: 600; }
.ec-prose iframe[src*="youtube"], .ec-prose iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16/9; height: auto; }
.ec-prose .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.ec-prose .alignright { float: right; margin: .3em 0 1em 1.4em; }
.ec-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.ec-prose .alignwide, .ec-prose .alignfull { margin-left: 0; margin-right: 0; }
.ec-prose::after { content: ''; display: table; clear: both; }
.ec-prose .wp-block-image img { height: auto; }
.ec-prose .wp-block-gallery, .ec-prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ec-prose .gallery-item { margin: 0; }
.ec-prose .wp-block-button__link, .ec-prose .button { display: inline-block; background: rgba(var(--arch-rgb), .18); border: 1px solid var(--arch);
  color: var(--arch); border-radius: 5px; padding: 6px 14px; text-decoration: none; font-size: 11px; }
.ec-prose .wp-block-embed__wrapper { position: relative; }
.ec-prose .wp-block-separator { border: 0; height: 1px; background: var(--surface0); }
.ec-prose .has-text-align-center { text-align: center; }
.ec-prose .wp-block-pullquote { border-top: 2px solid var(--arch); border-bottom: 2px solid var(--arch); padding: 1em 0; text-align: center; }

/* post footer: tags + prev/next */
.ec-doc-ft { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--surface0); display: flex; flex-direction: column; gap: 12px; }
.ec-nav2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ec-nav2 a { display: block; background: var(--mantle); border: 1px solid var(--surface0); border-radius: 7px; padding: 10px 12px;
  color: var(--text) !important; text-decoration: none !important; transition: border-color .15s, transform .12s; min-width: 0; }
.ec-nav2 a:hover { border-color: rgba(var(--arch-rgb), .5); transform: translateY(-2px); }
.ec-nav2 .lbl { display: block; font-size: 8.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--overlay0); margin-bottom: 3px; }
.ec-nav2 .ttl { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-nav2 .next { text-align: right; grid-column: 2; }

/* comments */
.ec-comments { margin-top: 22px; }
.ec-comments ol, .ec-comments ul { list-style: none; padding: 0; }
.ec-comments .children { padding-left: 18px; border-left: 1px solid var(--surface0); margin-left: 6px; }
.ec-comment { background: var(--mantle); border: 1px solid var(--surface0); border-radius: 7px; padding: 10px 12px; margin-bottom: 8px; }
.ec-comment-hd { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--overlay0); margin-bottom: 6px; }
.ec-comment-hd img { border-radius: 50%; width: 24px; height: 24px; }
.ec-comment-hd .who { color: var(--text); font-weight: 600; font-size: 10.5px; }
.ec-comment .ec-prose { font-size: 11.5px; }
.ec-comment .reply a { font-size: 9.5px; }
.comment-respond { margin-top: 14px; }
.comment-respond .comment-reply-title { font-size: 12px; color: var(--text); margin-bottom: 8px; }
.comment-form p { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: center; gap: 6px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url] { width: 100%; }
.comment-form .submit { background: rgba(var(--arch-rgb), .18); border: 1px solid var(--arch); color: var(--arch); border-radius: 5px;
  font-family: var(--font); font-size: 11px; padding: 6px 16px; cursor: pointer; }
.comment-form .submit:hover { background: rgba(var(--arch-rgb), .3); }

/* ── store: lock / countdown card ── */
.ec-lock { display: flex; align-items: center; gap: 14px; background: var(--mantle); border: 1px solid rgba(249,226,175,.28);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 4px; position: relative; overflow: hidden; }
.ec-lock::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(249,226,175,.08) 0%, transparent 60%); }
.ec-lock .ico { width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(249,226,175,.14); border: 1px solid rgba(249,226,175,.28); }
.ec-lock .lt { font-size: 11px; font-weight: 600; color: #f9e2af; text-shadow: 0 0 8px rgba(249,226,175,.45); }
.ec-lock .ls { font-size: 9.5px; color: var(--overlay1); }
.ec-lock .cd { margin-left: auto; text-align: right; font-family: var(--font); }
.ec-lock .cd b { display: block; font-size: 14px; color: #f9e2af; letter-spacing: .5px; text-shadow: 0 0 8px rgba(249,226,175,.5); }
.ec-lock .cd span { font-size: 9px; color: rgba(249,226,175,.6); }
.is-locked .ec-lock { border-color: rgba(243,139,168,.35); }
.is-locked .ec-lock .lt, .is-locked .ec-lock .cd b { color: var(--red); text-shadow: none; }

/* ── product page ── */
.ec-product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ec-gallery .main { background: var(--crust); border: 1px solid var(--surface0); border-radius: 8px; overflow: hidden; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  background-image: radial-gradient(circle, var(--wp-dots) 1px, transparent 1px); background-size: 16px 16px; }
.ec-gallery .main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ec-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ec-thumbs button { width: 58px; height: 58px; border-radius: 6px; overflow: hidden; border: 1px solid var(--surface0); background: var(--surface0);
  padding: 0; cursor: pointer; transition: border-color .15s; }
.ec-thumbs button.on, .ec-thumbs button:hover { border-color: var(--arch); }
.ec-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-buy { position: sticky; top: 92px; }
.ec-buy .vendor { font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--overlay0); }
.ec-buy h1 { font-size: 21px; font-weight: 600; letter-spacing: -.4px; color: var(--text); line-height: 1.3; margin: 2px 0 8px; }
.ec-buy .ec-price { font-size: 17px; }
.ec-opts { border: 0; margin: 14px 0 0; padding: 0; }
.ec-opts legend { font-size: 9px; letter-spacing: .6px; text-transform: uppercase; color: var(--overlay0); margin-bottom: 6px; }
.ec-opt-row { display: flex; gap: 5px; flex-wrap: wrap; }
.ec-opt-row input { position: absolute; opacity: 0; pointer-events: none; }
.ec-opt-row label { background: var(--surface0); border: 1px solid var(--surface1); border-radius: 5px; color: var(--subtext0);
  font-size: 10.5px; padding: 5px 12px; cursor: pointer; transition: all .12s; letter-spacing: 0; }
.ec-opt-row label:hover { background: var(--surface1); color: var(--text); }
.ec-opt-row input:checked + label { background: rgba(var(--arch-rgb), .18); border-color: var(--arch); color: var(--arch); }
.ec-opt-row input:focus-visible + label { outline: 2px solid var(--arch); outline-offset: 2px; }
.ec-qty { display: inline-flex; align-items: center; border: 1px solid var(--surface1); border-radius: 5px; overflow: hidden; }
.ec-qty button { background: var(--surface0); border: 0; color: var(--text); width: 28px; height: 30px; cursor: pointer; font-family: var(--font); }
.ec-qty button:hover { background: var(--surface1); }
.ec-qty input { width: 46px; text-align: center; border: 0 !important; border-radius: 0 !important; height: 30px; -moz-appearance: textfield; }
.ec-qty input::-webkit-outer-spin-button, .ec-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ec-buy-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.ec-buy-row .fb-btn { flex: 1; }
.ec-buy .ec-prose { margin-top: 16px; font-size: 11.5px; }
.ec-stock { font-size: 10px; margin-top: 8px; display: flex; align-items: center; gap: 6px; color: var(--green); }
.ec-stock.out { color: var(--red); }

/* ── cart ── */
.ec-cart-hd, .ec-cart-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px 90px 28px; gap: 12px; align-items: center; }
.ec-cart-hd { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--overlay0); padding: 6px 12px; border-bottom: 1px solid var(--surface0); }
.ec-cart-row { padding: 10px 12px; border-bottom: 1px solid var(--surface0); }
.ec-cart-row:last-child { border-bottom: 0; }
.ec-cart-row .im { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--surface0); }
.ec-cart-row .im img { width: 100%; height: 100%; object-fit: cover; }
.ec-cart-row .nm { font-size: 11.5px; font-weight: 600; color: var(--text); }
.ec-cart-row .vr { font-size: 9.5px; color: var(--overlay0); }
.ec-cart-row .tt { text-align: right; font-weight: 600; color: var(--text); }
.ec-cart-row .rm { color: var(--overlay0) !important; font-size: 13px; text-align: center; }
.ec-cart-row .rm:hover { color: var(--red) !important; text-decoration: none; }
.ec-cart-sum { display: flex; flex-direction: column; gap: 8px; }
.ec-cart-sum .line { display: flex; justify-content: space-between; font-size: 11px; color: var(--subtext0); }
.ec-cart-sum .line.total { font-size: 14px; color: var(--text); font-weight: 600; padding-top: 8px; border-top: 1px solid var(--surface0); }
.ec-cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }

/* ── terminal block (404, password, empty states) ── */
.ec-term { background: var(--crust); border: 1px solid var(--surface0); border-radius: 8px; padding: 16px 18px; font-size: 11.5px;
  line-height: 1.75; color: var(--subtext0); white-space: pre-wrap; overflow-x: auto; }
.ec-term .p { color: var(--green); } .ec-term .e { color: var(--red); } .ec-term .a { color: var(--arch); }
.ec-term .cur { display: inline-block; width: 8px; height: 14px; background: var(--green); vertical-align: -2px; animation: ecBlink 1s steps(1) infinite; }
@keyframes ecBlink { 50% { opacity: 0; } }

/* footer strip above the status bar */
.ec-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px 14px; border-top: 1px solid var(--surface0);
  font-size: 10px; color: var(--overlay0); }
.ec-foot nav ul { list-style: none; display: flex; gap: 12px; flex-wrap: wrap; }
.ec-foot nav a { color: var(--subtext0); }
.ec-foot .grow { flex: 1; }
.ec-foot .up { color: var(--arch); }

/* ── notification toast ── */
.ecos-site .notif { position: fixed; top: 34px; right: 12px; }

/* ═══ Aqua + Aqua Dark for the site-layer components ═══ */
[data-theme="aqua"] .ec-panel, [data-theme="aqua"] .ec-card, [data-theme="aqua"] .ec-nav2 a, [data-theme="aqua"] .ec-comment, [data-theme="aqua"] .ec-lock {
  background: linear-gradient(180deg, #ffffff, #f1f3f6) !important; border: 1px solid #c3c9d2 !important; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
[data-theme="aqua"] .ec-card:hover, [data-theme="aqua"] .ec-nav2 a:hover { border-color: #5b95e6 !important; box-shadow: 0 2px 8px rgba(42,120,222,.3); }
[data-theme="aqua"] .ec-side { background: linear-gradient(180deg, #e9edf3, #dde3eb) !important; border-color: #b8bfca !important; }
[data-theme="aqua"] .ec-panel-hd { background: repeating-linear-gradient(180deg, #f3f3f3 0px, #f3f3f3 2px, #e7e7e7 2px, #e7e7e7 4px); border-color: #b3b3b3; color: #333; }
[data-theme="aqua"] .ec-doc-bd { background: #fff; }
[data-theme="aqua"] .ec-term, [data-theme="aqua"] .ec-gallery .main { background: #fbfcfe; border-color: #c3c9d2; }
[data-theme="aqua"] .ec-opt-row label, [data-theme="aqua"] .ec-qty button {
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 45%, #e1e1e1 50%, #ececec 80%, #f7f7f7 100%) !important; border: 1px solid #9e9e9e !important; color: #1a1a1a !important; }
[data-theme="aqua"] .ec-opt-row label { border-radius: 11px !important; }
[data-theme="aqua"] .ec-opt-row input:checked + label, [data-theme="aqua"] .comment-form .submit, [data-theme="aqua"] .ec-prose .wp-block-button__link {
  background: linear-gradient(180deg, #d6ebff 0%, #8dc2fb 45%, #4f97ea 50%, #6cb0fb 80%, #a9d6ff 100%) !important; border: 1px solid #2f5fae !important; color: #06214d !important; border-radius: 11px; }
[data-theme="aqua"] .ec-lock .lt, [data-theme="aqua"] .ec-lock .cd b { color: #9a6a00; text-shadow: none; }
[data-theme="aqua"] .ec-lock .cd span { color: #8a6a20; }
[data-theme="aqua"] .ec-thumb .badge { background: #fff; color: #9a6a00; }
[data-theme="aqua"] .ec-foot { background: #f4f5f7; border-color: #c3c9d2; }
[data-theme="aqua"] .cart-badge { background: linear-gradient(180deg, #ff8a7a, #e0321e); }

[data-theme="aqua-dark"] .ec-panel, [data-theme="aqua-dark"] .ec-card, [data-theme="aqua-dark"] .ec-nav2 a, [data-theme="aqua-dark"] .ec-comment, [data-theme="aqua-dark"] .ec-lock {
  background: linear-gradient(180deg, #2b2e33, #24272c) !important; border: 1px solid #3a3e45 !important; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
[data-theme="aqua-dark"] .ec-card:hover, [data-theme="aqua-dark"] .ec-nav2 a:hover { border-color: #4d8ff0 !important; box-shadow: 0 2px 10px rgba(61,142,245,.35); }
[data-theme="aqua-dark"] .ec-side { background: linear-gradient(180deg, #24272c, #1c1e22) !important; border-color: #0f1012 !important; }
[data-theme="aqua-dark"] .ec-panel-hd { background: repeating-linear-gradient(180deg, #2d3035 0px, #2d3035 2px, #282a2f 2px, #282a2f 4px); border-color: #111214; color: #c9ced6; }
[data-theme="aqua-dark"] .ec-doc-bd { background: #23262b; }
[data-theme="aqua-dark"] .ec-opt-row label, [data-theme="aqua-dark"] .ec-qty button {
  background: linear-gradient(180deg, #5b5f66 0%, #44474e 45%, #35383e 50%, #3d4046 80%, #4a4d54 100%) !important; border: 1px solid #121315 !important; color: #eceff3 !important; }
[data-theme="aqua-dark"] .ec-opt-row label { border-radius: 11px !important; }
[data-theme="aqua-dark"] .ec-opt-row input:checked + label, [data-theme="aqua-dark"] .comment-form .submit, [data-theme="aqua-dark"] .ec-prose .wp-block-button__link {
  background: linear-gradient(180deg, #9cc9ff 0%, #4d95f0 45%, #2a6fd6 50%, #3f8cf0 80%, #6fb0ff 100%) !important; border: 1px solid #0f3a85 !important; color: #fff !important; border-radius: 11px; }

/* ═══ coupon / store countdown tab (same as eastcrust.com home) ═══ */
/* ═══ Webstore lock tab (top right of the header) ═══ */
.ecos-site .app-hd { align-items:flex-start; flex-wrap:nowrap; }
.ws-dock { margin-left:auto; flex-shrink:0; width:250px; display:flex; flex-direction:column; gap:9px; padding-top:12px; }
.ws-tab {
  position:relative; display:flex; flex-direction:column; gap:3px; text-decoration:none; cursor:pointer;
  padding:10px 12px 9px; border:4px solid var(--arch); border-radius:3px 9px 9px 9px;
  background:
    repeating-linear-gradient(0deg, rgba(var(--arch-rgb),.07) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, rgba(var(--arch-rgb),.20), rgba(var(--arch-rgb),.04) 60%), var(--mantle);
  box-shadow:0 0 8px rgba(var(--arch-rgb),.55), 0 0 22px rgba(var(--arch-rgb),.30), inset 0 0 12px rgba(var(--arch-rgb),.25);
  transition:box-shadow .2s, filter .2s, transform .12s;
}
/* corner ticks for the tech look */
.ws-tab::before, .ws-tab::after { content:''; position:absolute; width:8px; height:8px; border-color:var(--text); opacity:.55; pointer-events:none; }
.ws-tab::before { right:4px; top:4px; border-top:1px solid; border-right:1px solid; }
.ws-tab::after  { left:4px; bottom:4px; border-bottom:1px solid; border-left:1px solid; }
.ws-tab:hover, .ws-tab:focus-visible {
  outline:none; filter:brightness(1.15);
  box-shadow:0 0 12px rgba(var(--arch-rgb),.85), 0 0 34px rgba(var(--arch-rgb),.55), 0 0 60px rgba(var(--arch-rgb),.25), inset 0 0 16px rgba(var(--arch-rgb),.35);
}
.ws-tab:active, .ws-tab.pressed {
  transform:translateY(1px); filter:brightness(1.35);
  box-shadow:0 0 16px rgba(var(--arch-rgb),1), 0 0 44px rgba(var(--arch-rgb),.75), 0 0 80px rgba(var(--arch-rgb),.4), inset 0 0 22px rgba(var(--arch-rgb),.5);
}
/* the tab flag sitting on top of the box */
.wst-flag {
  position:absolute; top:-21px; left:-4px; height:18px; padding:0 9px 0 8px;
  display:flex; align-items:center; gap:6px;
  background:var(--arch); color:var(--crust); font-size:8.5px; font-weight:700; letter-spacing:1.4px;
  border-radius:4px 7px 0 0; box-shadow:0 0 12px rgba(var(--arch-rgb),.6);
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 100%, 0 100%);
}
.wst-led { width:5px; height:5px; border-radius:50%; background:var(--crust); box-shadow:0 0 0 1px rgba(0,0,0,.2); animation:wstBlink 1.4s steps(1) infinite; }
@keyframes wstBlink { 50% { opacity:.25; } }
.wst-head { display:flex; align-items:center; gap:6px; color:var(--arch); }
.wst-title { font-size:9px; letter-spacing:.2px; font-weight:700; color:var(--text); white-space:nowrap; }
.wst-time { font-size:17px; font-weight:700; letter-spacing:.5px; color:var(--text); font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(var(--arch-rgb),.8), 0 0 18px rgba(var(--arch-rgb),.4); white-space:nowrap; }
.wst-date { font-size:8.5px; color:var(--overlay1); letter-spacing:.4px; }
.ws-tab.locked .wst-time { color:var(--red); text-shadow:0 0 8px rgba(243,139,168,.7); }

/* 1×4 product strip that scrolls like a marquee */
.wst-marquee { position:relative; overflow:hidden; height:44px; border-radius:6px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); }
.wst-track { display:flex; gap:6px; width:max-content; animation:wstScroll var(--wst-dur, 24s) linear infinite; }
.wst-marquee:hover .wst-track { animation-play-state:paused; }
@keyframes wstScroll { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 3px)); } }
.wst-item { width:49px; height:44px; flex-shrink:0; border-radius:5px; overflow:hidden; display:block;
  background:var(--surface0); border:1px solid var(--surface1); transition:border-color .15s, box-shadow .15s, transform .15s; }
.wst-item img { width:100%; height:100%; object-fit:cover; display:block; }
.wst-item:hover { border-color:var(--arch); box-shadow:0 0 10px rgba(var(--arch-rgb),.6); transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .wst-track { animation:none; } .wst-led { animation:none; } }

/* Aqua: gel tab */
[data-theme="aqua"] .ws-tab { background:linear-gradient(180deg,#ffffff,#eef4fc) !important; }
[data-theme="aqua"] .wst-title, [data-theme="aqua"] .wst-time { color:#0c2a55; }
[data-theme="aqua"] .wst-flag { color:#fff; }
[data-theme="aqua-dark"] .wst-flag { color:#fff; }
[data-theme="macchiato"] .wst-flag { color:#000; }

/* narrow screens: the tab drops under the title, full width */
@media (max-width:700px) {
  .ecos-site .app-hd { flex-wrap:wrap; }
  .ws-dock { margin-left:0; width:100%; flex-basis:100%; padding-top:24px; }
  .ws-tab { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:10px; }
  .wst-head { flex:1 0 100%; }
  .wst-time { font-size:16px; }
  .wst-date { margin-left:auto; }
}

.ecos-site .ws-tab, .ecos-site .ws-tab:hover { text-decoration:none; }
.ecos-site .wst-item:hover { text-decoration:none; }
/* compact tab (product page, cart) — no flag offset needed */
.ws-dock.compact { margin:22px 0 0; width:100%; padding-top:0; }

/* ═══ phones ═══ */
@media (max-width: 900px) {
  .ec-product { grid-template-columns: 1fr; }
  .ec-buy { position: static; }
  .ec-cart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ecos-app > .content { padding: 12px 10px 22px; }
  .ecos-site .h2-desktop { padding-top: 8px; }
  .ecos-site .app-hd { gap: 10px; margin-bottom: 10px; }
  .ecos-site .ascii-art { font-size: 4.6px; }
  .ecos-site .app-name { font-size: 17px; }
  .ec-split { grid-template-columns: 1fr; gap: 10px; }
  .h2-nav .h2-pill.txt { font-size: 10.5px !important; gap: 0 !important; }
  .h2-nav .h2-pill.txt .pi { font-size: 0 !important; }
  .h2-nav .h2-pill.txt.on .pi, .h2-nav .h2-pill.txt .pi:not(:empty) { margin-right: 0; }
  .ec-toolbar .fb-path { flex-basis: 100%; }
  .ec-toolbar .grow { display: none; }
  /* sidebar becomes a row of chips, like the files app on phones */
  .ec-side { position: static; max-height: none; display: flex; gap: 5px; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .ec-side::-webkit-scrollbar { display: none; }
  .ec-side .sb-section, .ec-side .widget, .ec-side .ec-search { display: none; }
  .ec-side .sb-item { flex-shrink: 0; min-height: 30px; margin: 0; border: 1px solid var(--surface1); background: var(--surface0); white-space: nowrap; padding: 5px 10px; }
  .ec-side .sb-item.active { border-color: var(--arch); }
  .ec-side .sb-item .sb-count { margin-left: 5px; }
  .ec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ec-grid.is-list { grid-template-columns: 1fr; }
  .ec-grid.is-list .ec-sub .tag { display: none; }
  .ec-meta { padding: 8px 9px 10px; }
  .ec-doc-bd { padding: 16px 14px 20px; }
  .ec-doc-hd h1 { font-size: 18px; }
  .ec-prose { font-size: 12.5px; }
  .ec-prose .alignleft, .ec-prose .alignright { float: none; margin: 0 0 1em; }
  .ec-nav2 { grid-template-columns: 1fr; }
  .ec-nav2 .next { grid-column: 1; }
  .ec-cart-hd { display: none; }
  .ec-cart-row { grid-template-columns: 56px minmax(0, 1fr) 24px; grid-template-areas: "im nm rm" "im qt tt"; row-gap: 6px; }
  .ec-cart-row .im { grid-area: im; width: 56px; height: 56px; } .ec-cart-row .nmw { grid-area: nm; }
  .ec-cart-row .qt { grid-area: qt; } .ec-cart-row .tt { grid-area: tt; } .ec-cart-row .rm { grid-area: rm; }
  .ec-lock { flex-wrap: wrap; }
  .ec-lock .cd { margin-left: 0; text-align: left; width: 100%; }
  .ec-foot { padding: 10px 12px 12px; }
  .ecos-site .statusbar .hide-sm { display: none; }
}
@media (max-width: 380px) { .ec-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ecos-site *, .ecos-site *::before { transition: none !important; animation: none !important; } }