/* strapping-tool.com on top of the shared batterystrapping theme (design A + B, 6 Nov 2026).
   Colours: ink #15191E, page #F6F7F8, line #E2E5E9, accent #D9580D (text on light: #B4430A, 4.9:1). Fonts: the theme's
   self-hosted Poppins for headings (mu-plugins/bs-poppins.php), the system font for text - no font from another host. */
body.stt { --stt-ink: #15191E; --stt-text: #3D4651; --stt-muted: #5A6470; --stt-page: #F6F7F8; --stt-line: #E2E5E9;
	--stt-accent: #D9580D; --stt-accent-text: #B4430A; --stt-ok: #1D6B3A; --stt-warn: #8A4A00; }

/* word mark: the domain, its ending in the accent colour */
.stt .stt-wordmark, .stt #masthead .logo-text::before, .stt #masthead .logo-text::after {
	font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; color: var(--stt-ink); text-decoration: none; }
.stt .stt-wordmark { font-size: 24px; line-height: 1.2; white-space: nowrap; }
.stt .stt-wordmark span, .stt #masthead .logo-text::after { color: var(--stt-accent); }
.stt #masthead .logo-text::before, .stt #masthead .logo-text::after { font-size: 20px; }
.stt .site-branding .site-title, .stt .site-branding .site-description { display: none; }

/* the shop's blue (#1B99D7) in the header becomes this site's ink and accent; the same selectors as robomatis.com's
   rbm-brand.css, which recolours the same theme */
body.stt .bs-tb, body.stt .top-bar, body.stt footer, body.stt .site-footer { background: var(--stt-ink) !important; }
body.stt .bs-tb, body.stt .bs-tb a { color: #D5DAE0 !important; }
body.stt .bs-tb a:hover { color: #fff !important; }
body.stt .bs-tb a.bs-tb__btn--ghost:hover, body.stt .bs-tb a.bs-tb__btn--ghost:focus-visible, body.stt .bs-tb a.bs-tb__btn--solid,
body.stt .bs-tb a.bs-tb__btn--solid:hover { color: var(--stt-ink) !important; }
body.stt .bs-tb .bs-tb__menu { background: #fff !important; }
body.stt .bs-tb .bs-tb__menu a { color: var(--stt-ink) !important; }
body.stt #masthead .menu-toggle, body.stt #masthead .menu-toggle svg, body.stt #masthead .cart-icon, body.stt #masthead .cart-icon svg,
body.stt #masthead .header-actions svg, body.stt .search-close-container { color: var(--stt-ink) !important; stroke: currentColor; }
body.stt .cart-count { background: var(--stt-accent) !important; color: #fff !important; }
body.stt #primary-menu > li > a:hover, body.stt #primary-menu > li.current-menu-item > a { color: var(--stt-accent-text) !important; }

/* the shop's newsletter band (Zoho Campaigns) is not this site's: hidden until the shared footer has a switch for it */
.stt .footer-newsletter-band { display: none; }

/* home page */
.stt-home { background: var(--stt-page); color: var(--stt-ink); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.stt-home h1, .stt-home h2, .stt-home h3 { font-family: 'Poppins', system-ui, sans-serif; color: var(--stt-ink); }
.stt-find, .stt-facts, .stt-compare { max-width: 1240px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
@media (min-width: 768px) { .stt-find, .stt-facts, .stt-compare { padding-left: 24px; padding-right: 24px; } }

.stt-find { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 48px; padding-bottom: 32px; }
.stt-find__intro { flex: 1 1 380px; min-width: 0; }
.stt-find__result { flex: 1 1 520px; min-width: 0; background: #fff; border: 1px solid var(--stt-line); border-radius: 10px; padding: 20px; }
.stt-eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--stt-accent-text); }
.stt-find h1 { margin: 0 0 16px; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; font-weight: 700; }
.stt-lead { margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: var(--stt-text); }
.stt-muted { font-size: 14px; color: var(--stt-muted); }

.stt-pick { border: 0; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stt-pick legend { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0; float: none; width: auto; }
.stt-pill { min-height: 44px; padding: 10px 16px; border-radius: 22px; font: 500 15px system-ui, sans-serif; cursor: pointer;
	background: #fff; color: var(--stt-ink); border: 1px solid #C3C9D0; }
.stt-pill[aria-pressed="true"] { background: var(--stt-ink); color: #fff; border-color: var(--stt-ink); }
.stt-pill:focus-visible { outline: 3px solid var(--stt-accent); outline-offset: 2px; }
/* a width no tool of the chosen material takes is not offered (stt.js); the theme styles buttons, so say it plainly */
.stt-pill[hidden] { display: none !important; }
/* number of tools that take this width */
.stt-pill__n { display: inline-block; min-width: 20px; margin-left: 8px; padding: 1px 6px; border-radius: 10px;
	font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; background: #EEF1F4; color: var(--stt-muted); }
.stt-pill__n:empty { display: none; }
.stt-pill[aria-pressed="true"] .stt-pill__n { background: rgba(255, 255, 255, .2); color: #fff; }

.stt-find__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.stt-result-title { margin: 0; font-size: 22px; }
.stt-none { margin: 0 0 12px; padding: 20px; background: #FFF4EC; border-radius: 8px; font-size: 16px; line-height: 1.5; }
.stt-none a { color: var(--stt-accent-text); }
.stt-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.stt-card[hidden] { display: none; }
.stt-card a { display: flex; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--stt-line); border-radius: 8px; color: var(--stt-ink); text-decoration: none; }
.stt-card a:hover { border-color: var(--stt-accent); }
.stt-card img { width: 88px; height: 88px; flex: 0 0 88px; object-fit: contain; background: var(--stt-page); border-radius: 6px; }
.stt-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.stt-card__model { font-family: 'Poppins', system-ui, sans-serif; font-size: 18px; font-weight: 700; }
.stt-card__spec { font-size: 14px; color: var(--stt-muted); }
.stt-card__buy { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.stt-card__price { font-size: 19px; font-weight: 600; white-space: nowrap; }
.stt-stock { font-size: 13px; }
.stt-stock--in { color: var(--stt-ok); }
.stt-stock--order, .stt-stock--out { color: var(--stt-warn); }
@media (max-width: 480px) {
	.stt-card a { flex-wrap: wrap; }
	.stt-card img { width: 64px; height: 64px; flex-basis: 64px; }
	.stt-card__buy { text-align: left; flex-direction: row; gap: 12px; align-items: baseline; width: 100%; }
}

.stt-facts { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; padding-bottom: 48px; }
.stt-facts > div { flex: 1 1 240px; background: #fff; border: 1px solid var(--stt-line); border-radius: 10px; padding: 20px; }
.stt-facts h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.stt-facts p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--stt-text); }

/* the table (design B): own height so both scroll bars stay on screen, sticky head (CLAUDE.md UX rules) */
.stt-compare { padding-bottom: 56px; }
.stt-compare h2, .stt-compare h1 { margin: 0 0 10px; font-size: clamp(26px, 3.5vw, 36px); }
/* comparison on its own page (compare-page.php); the home page keeps one button to it */
.stt-compare-page { padding-top: 40px; }
.stt-compare-back { max-width: 1240px; margin: 0 auto 56px; padding: 0 16px; box-sizing: border-box; }
.stt-compare-back a { color: var(--stt-accent-text); }
.stt-compare-link { max-width: 1240px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
@media (min-width: 768px) { .stt-compare-link { padding: 0 24px; } }
.stt-btn { display: inline-block; min-height: 44px; padding: 12px 22px; border-radius: 22px; background: var(--stt-ink); color: #fff;
	font-weight: 600; text-decoration: none; }
.stt-btn:hover, .stt-btn:focus-visible { background: var(--stt-accent-text); color: #fff; }
.stt-table-wrap { overflow: auto; max-height: calc(100vh - 140px); background: #fff; border: 1px solid var(--stt-line); border-radius: 8px; margin-bottom: 12px; }
.stt-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 15px; }
.stt-table thead th { position: sticky; top: 0; z-index: 1; background: var(--stt-ink); color: #fff; text-align: left; font-weight: 600; padding: 12px 14px; white-space: nowrap; }
.stt-table td, .stt-table tbody th { padding: 8px 14px; border-top: 1px solid var(--stt-line); text-align: left; vertical-align: middle; }
.stt-table tbody th a { display: flex; align-items: center; gap: 12px; color: var(--stt-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.stt-table tbody th a:hover { color: var(--stt-accent-text); }
.stt-table img { width: 48px; height: 48px; object-fit: contain; background: var(--stt-page); border-radius: 4px; }
.stt-table .stt-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stt-table .stt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stt-table tbody tr:nth-child(even) { background: #FAFBFC; }

/* ---- home page blocks after the selector (Tilen 7 Nov 2026, robomatis.com's home page as the pattern) ---- */
.stt-ico { width: 24px; height: 24px; flex: 0 0 auto; }
.stt-sec, .stt-banner { max-width: 1240px; margin: 0 auto; padding: 40px 16px; box-sizing: border-box; }
@media (min-width: 768px) { .stt-sec, .stt-banner { padding-left: 24px; padding-right: 24px; } }
.stt-sec--soft { max-width: none; background: #fff; border-top: 1px solid var(--stt-line); border-bottom: 1px solid var(--stt-line);
	padding-left: max(16px, calc((100% - 1240px) / 2 + 24px)); padding-right: max(16px, calc((100% - 1240px) / 2 + 24px)); }
.stt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stt-head h2, .stt-map-sec h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); }
.stt-head p { margin: 0; color: var(--stt-text); }
.stt-more { color: var(--stt-accent-text); font-weight: 600; text-decoration: none; }
.stt-more:hover { text-decoration: underline; }

/* banner with product photos */
.stt-banner { padding-top: 24px; padding-bottom: 0; }
.stt-banner__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
	border-radius: 12px; background: #fff; border: 1px solid var(--stt-line); }
.stt-banner__track::-webkit-scrollbar { display: none; }
.stt-banner__slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px; box-sizing: border-box; }
@media (min-width: 768px) { .stt-banner__slide { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 32px 40px; min-height: 320px; } }
.stt-banner__title { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; }
.stt-banner__sub { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--stt-text); }
.stt-banner__facts { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stt-banner__facts li { padding: 4px 12px; border-radius: 14px; background: var(--stt-page); font-size: 14px; color: var(--stt-text); }
.stt-banner__img { display: flex; justify-content: center; }
.stt-banner__img img { width: 100%; max-width: 380px; height: 260px; object-fit: contain; }
.stt-banner__dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
.stt-banner__dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: #C3C9D0; cursor: pointer; }
.stt-banner__dots button[aria-selected="true"] { background: var(--stt-accent); width: 26px; border-radius: 5px; }

/* trust bar, right under the banner */
.stt-usp-sec { padding-top: 16px; padding-bottom: 0; }
/* the selector's result list gets its own height on wide screens: 14 cards made the page a long empty column on the left */
@media (min-width: 900px) { .stt-find__result .stt-cards { max-height: 640px; overflow-y: auto; padding-right: 4px; } }
.stt-usp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.stt-usp li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #fff; border: 1px solid var(--stt-line); border-radius: 10px; }
.stt-usp .stt-ico { color: var(--stt-accent); }
.stt-usp b { display: block; font-size: 15px; }
.stt-usp span { font-size: 14px; color: var(--stt-muted); }

/* search */
.stt-search label { display: block; font-weight: 600; margin-bottom: 8px; }
.stt-search__row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #C3C9D0; border-radius: 26px; padding: 4px 4px 4px 16px; }
.stt-search__row .stt-ico { color: var(--stt-muted); }
.stt-search__row input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; padding: 10px 0; box-shadow: none; }
.stt-search__row .stt-btn { border: 0; cursor: pointer; }
.stt-search__popular { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; font-size: 14px; color: var(--stt-muted); }
.stt-search__popular a { color: var(--stt-accent-text); }

/* categories */
.stt-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.stt-cat { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--stt-line); border-radius: 10px;
	color: var(--stt-ink); text-decoration: none; }
.stt-cat:hover { border-color: var(--stt-accent); }
.stt-cat img { width: 100%; height: 130px; object-fit: contain; }
.stt-cat b { display: block; font-size: 15px; }
.stt-cat small { font-size: 13px; color: var(--stt-muted); }

/* product grids */
.stt-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stt-pcard { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #fff; border: 1px solid var(--stt-line); border-radius: 10px;
	color: var(--stt-ink); text-decoration: none; }
.stt-pcard:hover { border-color: var(--stt-accent); }
.stt-pcard__img img { width: 100%; height: 150px; object-fit: contain; }
.stt-pcard__name { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.stt-pcard__price { font-size: 15px; font-weight: 600; }
.stt-pcard__price del { color: var(--stt-muted); font-weight: 400; margin-right: 4px; }
.stt-pcard__price ins { text-decoration: none; }
.stt-pcard__price small { font-weight: 400; color: var(--stt-muted); font-size: 12px; }

/* deliveries map */
.stt-map-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .stt-map-grid { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.stt-map { height: 420px; border-radius: 10px; border: 1px solid var(--stt-line); background: var(--stt-page); }
.stt-map.is-failed { display: none; }
.stt-countries { list-style: none; margin: 14px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stt-countries li { padding: 3px 10px; border-radius: 12px; background: var(--stt-page); font-size: 13px; }
.stt-map-sec h3 { margin: 0 0 10px; font-size: 17px; }
.stt-brands { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stt-brands a { display: flex; align-items: center; justify-content: center; height: 48px; padding: 6px 12px; border: 1px solid var(--stt-line);
	border-radius: 8px; background: #fff; color: var(--stt-ink); text-decoration: none; font-weight: 600; }
.stt-brands img { max-height: 36px; max-width: 120px; object-fit: contain; }
.stt-pin { background: none; border: 0; }
.stt-pin img { width: 40px; height: 40px; object-fit: contain; background: #fff; border: 2px solid var(--stt-accent); border-radius: 50%; padding: 2px; box-sizing: border-box; }
.stt-pin--group img { width: 44px; height: 44px; border-width: 3px; }
.stt-pin i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--stt-accent); margin: 15px; }
.stt-pop { display: flex; flex-direction: column; gap: 6px; max-width: 200px; }
.stt-pop img { width: 100%; height: 110px; object-fit: contain; }
.stt-pop a { color: var(--stt-accent-text); }

/* how to choose */
.stt-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.stt-guide > div { padding: 18px; background: #fff; border: 1px solid var(--stt-line); border-radius: 10px; }
.stt-guide .stt-ico { color: var(--stt-accent); }
.stt-guide h3 { margin: 8px 0 6px; font-size: 17px; }
.stt-guide p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--stt-text); }
.stt-guide__go { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 20px 0 0; }

/* after the purchase */
.stt-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.stt-after a { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--stt-page); border-radius: 10px; color: var(--stt-ink); text-decoration: none; }
.stt-after a:hover { outline: 2px solid var(--stt-accent); }
.stt-after .stt-ico { color: var(--stt-accent); }
.stt-after span { font-size: 14px; color: var(--stt-text); }

/* questions */
.stt-faq details { background: #fff; border: 1px solid var(--stt-line); border-radius: 10px; margin-bottom: 8px; }
.stt-faq summary { cursor: pointer; padding: 14px 18px; font-weight: 600; }
.stt-faq p { margin: 0; padding: 0 18px 16px; line-height: 1.55; color: var(--stt-text); }
.stt-contact { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 16px 0 0; }
.stt-contact a { display: inline-flex; gap: 6px; align-items: center; color: var(--stt-accent-text); font-weight: 600; }
.stt-contact .stt-ico { width: 18px; height: 18px; }