/* Site-wide responsive safety layer. Loaded last on every page so phones (320px+), tablets
 * and laptops never scroll sideways, media scales down, and dense rows wrap. */

/* No sideways scrolling on any device. Decorative glows/rings/marquees stay clipped. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* Media and embeds never exceed their column. */
img, video, canvas, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
.entry iframe, .prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Flex/grid children may shrink; long words and URLs wrap instead of pushing the page wide. */
.wrap, .card, .grid > *, .pox-copy, .pox-art { min-width: 0; }
.wrap { box-sizing: border-box; }
h1, h2, h3, h4, p, li, td, th, a, .lead { overflow-wrap: break-word; }
.entry table, .prose table, .woocommerce-cart-form table, .woocommerce table.shop_table { display: block; max-width: 100%; overflow-x: auto; }

/* Full-bleed strips in page content and WooCommerce block grids stay inside the screen. */
.entry div[style*="-24px"], .prose div[style*="-24px"] { margin-left: 0 !important; margin-right: 0 !important; border-radius: 20px; overflow: hidden; }
.wc-block-grid__products { margin-left: 0 !important; margin-right: 0 !important; }
.wc-block-grid__product { box-sizing: border-box; }

/* Menu: third-level items (e.g. IT Help Desk → Remote Computer Repair) show inline under their parent,
   indented, instead of a sideways flyout that needs a precise mouse move. */
html .sub-menu .sub-menu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; background: transparent !important; min-width: 0 !important; padding: 0 0 4px 14px !important; margin: 0 !important; display: block !important; left: auto !important; top: auto !important; }
html .sub-menu .sub-menu a { font-size: 14px !important; padding-top: 6px; padding-bottom: 6px; }
html .sub-menu .sub-menu a::before { content: "↳ "; opacity: .55; }
html .sub-menu li.menu-item-has-children > a::after { display: none !important; }

/* AnyDesk download sits next to "Get connected" (UltraViewer) in the top bar. */
html .topbar .tb-anydesk { background: #EF443B; }
html .topbar .tb-anydesk:hover { background: #D63A31; }

/* Top bar: always fits one phone row. */
@media (max-width: 760px) {
	html .topbar .wrap { padding-left: 12px !important; padding-right: 12px !important; }
	html .topbar .tb-right { min-width: 0; flex-wrap: wrap !important; justify-content: center !important; row-gap: 6px; }
	html .topbar select { max-width: 84px; font-size: 12px; }
	html .topbar a.tb-pill { padding: 0 10px; font-size: 12px; min-height: 32px; }
	html .topbar .switcher-lang .gt_float_switcher .gt-current-lang { padding: 4px 8px; }
}
@media (max-width: 360px) {
	html .topbar select { max-width: 72px; }
	html .topbar a.tb-pill { padding: 0 8px; }
}

/* Shop and product grids: compact cards, square box art. */
html .woocommerce ul.products li.product a img { aspect-ratio: 1 / 1 !important; max-height: 280px; width: 100%; object-fit: contain !important; margin-left: auto; margin-right: auto; }
@media (max-width: 699px) {
	html .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	html .woocommerce ul.products li.product { padding: 10px !important; }
	html .woocommerce ul.products li.product a img { max-height: 170px; }
	html .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; }
	html .woocommerce ul.products li.product .cmpc-card-note { font-size: 12.5px; -webkit-line-clamp: 2; min-height: calc(1.45em * 2); }
	html .woocommerce ul.products li.product .button { width: 100%; padding-left: 6px !important; padding-right: 6px !important; font-size: 13px !important; }
}
@media (max-width: 360px) { html .woocommerce ul.products { grid-template-columns: 1fr !important; } }

/* Plan comparison tables: brand column on its own row on phones so both plans get room. */
@media (max-width: 560px) {
	html .pc-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html .pc-row > .pc-brand, html .pc-row > .pc-feat { grid-column: 1 / -1; }
	html .pc-row > .pc-feat { padding: 12px 14px 4px; }
	html .pc-row > .pc-feat span { display: block !important; }
	.pc-cell { padding: 6px 0 12px; }
	.pc-plan { border-left: 0; }
	.pc-plan + .pc-plan, .pc-cell + .pc-cell { border-left: 1px solid #EEF2F8; }
	.pc-btn { min-width: 0; width: 100%; }
}

/* Product heroes and live demos on small screens. */
@media (max-width: 600px) {
	.pox-steps { grid-template-columns: 1fr !important; }
	.pox-cta { flex-direction: column; align-items: stretch; }
	.pox-cta .pox-link { text-align: center; }
	.pox-price { flex-wrap: wrap; }
	.phases { font-size: 12px; }
	.pm-bar { height: 52px; }
	.pm-bar [data-seg] small { display: none; }
	.pm-bar [data-seg] b { font-size: 11px; }
	.pm-conv-disk { font-size: 18px; gap: 10px; }
	.drx-orbit span, .drx-types .drx-orbit span { font-size: 10px !important; }
	.stag { font-size: 10px; }
	.timeline { padding-left: 0; }
	.faq-grid { grid-template-columns: 1fr !important; }
	.help { flex-direction: column; text-align: left; }
	.svc-cta div { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
}

/* Tablets: two-column grids instead of cramped threes. */
@media (min-width: 601px) and (max-width: 960px) {
	.pox-tool-grid, .rr-steps, .rr-limit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Comfortable tap targets on touch screens. */
@media (pointer: coarse) {
	.btn, .button, .pc-btn, .tb-pill, .feat, nav a { min-height: 44px; }
}