/* ================================================================
   MGS STOREFRONT LAYER
   This file contains the new shop/account/cart UI so it stays easy
   to find and edit without mixing store logic into the legacy styles.
   ================================================================ */

:root {
  --mgs-blue: #0b46a3;
  --mgs-blue-deep: #073775;
  --mgs-ink: #101827;
  --mgs-muted: #64748b;
  --mgs-border: #e2e8f0;
  --mgs-pale: #f4f7fb;
  --mgs-radius: 14px;
  --mgs-card-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}

/* Use one font family across old and new pages. */
html, body, button, input, select, textarea,
h1, h2, h3, h4, .logo, .nav-links a, .btn, .eyebrow,
.card-kicker, .text-link, .stat strong, .stat span,
.glass-badge, .footer-title, .product-price, label {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { color: var(--mgs-ink); letter-spacing: 0; }
p { line-height: 1.7; }
h1, h2, h3 { letter-spacing: -.025em; }

/* Header sizing and navigation order styling. */
.site-header { background: rgba(255,255,255,.97); }
.nav-wrap { min-height: 96px; gap: 20px; }
.site-header .logo { gap: 14px; flex: 0 1 auto; min-width: 0; }
.site-header .logo-image { width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain; }
.site-header .brand-name { color: #13213a; font-size: clamp(.96rem, 1.25vw, 1.23rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 750; }
.site-header .brand-initial { color: var(--mgs-blue); }
.nav-links { gap: 4px; flex: 0 0 auto; }
.nav-links a { padding: 12px 13px; border-radius: 8px; color: #263449; font-size: .75rem; font-weight: 700; letter-spacing: .025em; transition: color .18s ease, background .18s ease, transform .18s ease; }
.nav-links a::after { display: none; }
.nav-links a:hover, .nav-links a.active { color: var(--mgs-blue); background: #edf4ff; transform: translateY(-1px); }
.nav-links .nav-cta { border: 0; color: #263449; }
.nav-links .nav-cta:hover { background: #edf4ff; color: var(--mgs-blue); }
.header-utilities { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.utility-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--mgs-border); border-radius: 9px; color: #23334d; font-size: .75rem; font-weight: 700; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.utility-link:hover { border-color: #b8cdee; color: var(--mgs-blue); background: #f4f8ff; }
.cart-count { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 5px; border-radius: 999px; color: white; background: var(--mgs-blue); font-size: .68rem; }
.menu-toggle { border-radius: 8px; }
.site-footer .logo { gap: 15px; color: #6fa7ff; font-size: 1.5rem; font-weight: 800; }
.site-footer .logo-image { width: 76px; height: 76px; flex: 0 0 76px; padding: 4px; border-radius: 10px; background: #fff; }
.site-footer .footer-brand p { margin-top: 15px; line-height: 1.75; }

/* The homepage hero image is now a modern European business-district backdrop. */
.hero { background: linear-gradient(108deg, rgba(7, 17, 35, .84) 0%, rgba(7, 17, 35, .63) 55%, rgba(7, 17, 35, .35) 100%), url("../assets/images/global-container-port.jpg") center / cover; }
.shop-hero { background: linear-gradient(110deg, rgba(7, 17, 35, .89), rgba(11, 70, 163, .57)), url("../assets/images/global-container-port.jpg") center / cover; }
.page-hero h1, .hero h1 { text-wrap: balance; }
.shop-hero h1 { max-width: 850px; font-size: clamp(2.7rem, 5.2vw, 4.8rem); margin: 20px 0; }
.shop-hero p { max-width: 700px; }

/* Shop toolbar and category shortcuts. */
.shop-section { padding-top: 52px; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.shop-search-wrap { position: relative; width: min(620px, 100%); }
.shop-search-wrap .search-box { min-height: 52px; padding: 14px 48px 14px 17px; margin: 0; border: 1px solid #d7dfeb; border-radius: 10px; background: white; box-shadow: 0 3px 12px rgba(15,23,42,.025); }
.shop-search-wrap .search-box:focus { border-color: #7ca7eb; box-shadow: 0 0 0 4px rgba(11,70,163,.09); }
.search-symbol { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); color: #66758b; font-size: 1.5rem; pointer-events: none; }
.currency-control { display: flex; align-items: center; gap: 10px; color: #55657b; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.currency-control select { border: 1px solid #d7dfeb; border-radius: 9px; background: white; padding: 10px 12px; color: var(--mgs-ink); font-weight: 700; }
.category-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 0 0 58px; }
.category-shortcuts a { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 15px; padding: 20px 22px; border: 1px solid var(--mgs-border); border-radius: 13px; background: white; box-shadow: 0 5px 18px rgba(15,23,42,.025); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.category-shortcuts a:hover { transform: translateY(-3px); border-color: #c0d4f5; box-shadow: var(--mgs-card-shadow); }
.shortcut-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 12px; color: var(--mgs-blue); background: #edf4ff; font-size: 1.5rem; }
.category-shortcuts strong, .category-shortcuts small { display: block; }
.category-shortcuts strong { color: var(--mgs-ink); font-size: .98rem; }
.category-shortcuts small { margin-top: 4px; color: #6a788d; font-size: .8rem; }
.category-shortcuts a > span:last-child { color: var(--mgs-blue); font-size: 1.2rem; }
.shop-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin: 0 0 22px; scroll-margin-top: 120px; }
.shop-section-heading .eyebrow { color: var(--mgs-blue); }
.shop-section-heading h2 { margin: 11px 0 7px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.shop-section-heading p { max-width: 720px; margin: 0; color: #65758b; font-size: .92rem; }
.result-count { flex-shrink: 0; padding: 7px 11px; border-radius: 999px; color: #42536c; background: #eef2f7; font-size: .75rem; font-weight: 800; }
.storage-heading { margin-top: 70px; }
.storage-subheading { display: flex; align-items: baseline; gap: 16px; margin: 34px 0 16px; }
.storage-subheading h3 { font-size: 1.15rem; }
.storage-subheading p { margin: 0; color: #718096; font-size: .82rem; }

/* Five items in each desktop row, with tablet/mobile fallbacks. */
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 15px; }
.product-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #e1e7f0; border-radius: 13px; background: #fff; box-shadow: 0 4px 15px rgba(13,30,55,.035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-card:hover { transform: translateY(-4px); border-color: #c8d8f0; box-shadow: 0 14px 30px rgba(13,30,55,.09); }
.product-visual { position: relative; display: grid; place-items: center; min-height: 170px; padding: 13px; background: linear-gradient(145deg, #f8fbff, #edf2f8); }
.product-visual img { display: block; width: 100%; height: 150px; object-fit: contain; mix-blend-mode: multiply; }
.product-badge { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 5px 7px; overflow: hidden; border-radius: 5px; color: #2f4b73; background: rgba(255,255,255,.91); font-size: .59rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.product-copy { display: flex; flex: 1; flex-direction: column; padding: 13px 13px 14px; }
.product-kicker { color: #67809f; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.product-title-button { display: block; width: 100%; margin: 7px 0 6px; padding: 0; border: 0; color: #16243a; background: none; text-align: left; font-size: .92rem; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; }
.product-title-button:hover { color: var(--mgs-blue); }
.product-short { flex: 1; margin: 0 0 12px; color: #607086; font-size: .76rem; line-height: 1.5; }
.product-price { display: block; margin: auto 0 12px; color: #152b48; font-size: .89rem; font-weight: 800; letter-spacing: -.01em; }
.product-price--quote { color: #315b91; font-size: .79rem; }
.product-card-actions { display: grid; gap: 7px; }
.product-card .btn { width: 100%; min-height: 39px; padding: 0 8px; border-radius: 7px; font-size: .64rem; letter-spacing: .025em; }
.btn-blue { color: white; background: var(--mgs-blue); box-shadow: none; }
.btn-blue::after { background: var(--mgs-blue-deep); }
.btn-blue:hover { color: white; box-shadow: 0 8px 18px rgba(11,70,163,.15); }
.btn-light { border-color: #d8e0eb; color: #334761; background: white; }
.btn-light::after { background: #edf4ff; }
.btn-light:hover { border-color: #bed0ec; color: var(--mgs-blue); }
.catalog-note { margin-top: 52px; padding: 24px 26px; border: 1px solid #dbe7f6; border-radius: 12px; background: #f2f7fd; }
.catalog-note strong { color: #1e3a61; }
.catalog-note p { margin: 8px 0; color: #5e718a; font-size: .87rem; }
.catalog-note a, .legal-copy a, .panel-heading a { color: var(--mgs-blue); font-weight: 700; }
.catalog-note a:hover, .legal-copy a:hover { text-decoration: underline; }

/* Product details modal. */
.modal-backdrop { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 22px; background: rgba(6,15,30,.66); backdrop-filter: blur(5px); }
.modal-backdrop[hidden] { display: none; }
.product-modal { position: relative; width: min(890px, 100%); max-height: min(90vh, 900px); overflow: auto; border: 1px solid rgba(255,255,255,.45); border-radius: 18px; background: white; box-shadow: 0 35px 90px rgba(0,0,0,.28); }
.modal-close { position: sticky; z-index: 2; top: 12px; float: right; width: 38px; height: 38px; margin: 12px 12px -50px 0; border: 1px solid #dce4ef; border-radius: 50%; color: #40546e; background: white; font-size: 1.5rem; line-height: 1; }
.modal-close:hover { color: var(--mgs-blue); background: #f0f6ff; }
.modal-product-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; padding: 36px; }
.modal-product-image { display: grid; align-self: start; min-height: 300px; place-items: center; padding: 18px; border-radius: 13px; background: #f3f6fb; }
.modal-product-image img { width: 100%; max-height: 330px; object-fit: contain; mix-blend-mode: multiply; }
.modal-product-content .eyebrow { color: var(--mgs-blue); }
.modal-product-content h2 { margin: 12px 0; font-size: 2rem; }
.modal-product-content p { color: #52647c; font-size: .91rem; }
.detail-list { display: grid; gap: 9px; margin: 18px 0; padding: 0; list-style: none; }
.detail-list li { display: flex; gap: 9px; color: #334761; font-size: .85rem; }
.detail-list li::before { content: "✓"; color: #0f8a63; font-weight: 900; }
.license-note { margin: 18px 0; padding: 14px; border-left: 3px solid #4f82cb; border-radius: 0 8px 8px 0; color: #435876; background: #f1f6fd; font-size: .82rem; line-height: 1.6; }
.source-link { display: inline-block; margin: 8px 0 18px; color: var(--mgs-blue); font-size: .82rem; font-weight: 800; }

/* Basket and checkout. */
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.8fr); align-items: start; gap: 26px; }
.cart-items-panel, .summary-card, .form-panel, .auth-panel { border: 1px solid var(--mgs-border); border-radius: 14px; background: white; box-shadow: var(--mgs-card-shadow); }
.cart-items-panel { padding: 24px; }
.panel-heading, .admin-toolbar, .account-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.panel-heading { padding-bottom: 17px; border-bottom: 1px solid #edf0f5; }
.panel-heading h2, .summary-card h2, .checkout-form h2, .form-panel h2, .admin-toolbar h2, .account-toolbar h2 { font-size: 1.35rem; }
.panel-heading a { font-size: .83rem; }
.cart-row { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 18px 0; border-bottom: 1px solid #edf0f5; }
.cart-row:last-child { border-bottom: 0; }
.cart-row-image { display: grid; width: 84px; height: 84px; place-items: center; overflow: hidden; border-radius: 9px; background: #f2f5fa; }
.cart-row-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-row h3 { margin-bottom: 5px; font-size: .95rem; }
.cart-row p { margin: 0; color: #6b7b91; font-size: .78rem; }
.cart-row-price { margin-top: 6px; color: #233a5a; font-size: .83rem; font-weight: 800; }
.cart-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.qty-button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dce4ef; border-radius: 7px; background: white; color: #324966; }
.qty-button:hover { border-color: #9ebce8; color: var(--mgs-blue); }
.qty-value { min-width: 21px; color: #2d3e56; text-align: center; font-size: .86rem; font-weight: 800; }
.remove-button { margin-top: 7px; padding: 0; border: 0; color: #a63d46; background: transparent; font-size: .72rem; font-weight: 700; }
.summary-card { padding: 24px; }
.summary-card h2 { margin-bottom: 20px; }
.summary-line { display: flex; justify-content: space-between; gap: 18px; margin: 12px 0; color: #64748b; font-size: .86rem; }
.summary-line strong { color: #20334d; text-align: right; }
.summary-total { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--mgs-border); color: #1b2f4a; font-weight: 800; }
.summary-card .btn { width: 100%; margin-top: 16px; border-radius: 8px; }
.muted-small { color: #77869a; font-size: .79rem; line-height: 1.6; }
.empty-state { padding: 36px 20px; text-align: center; }
.empty-state .empty-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 14px; place-items: center; border-radius: 50%; color: var(--mgs-blue); background: #edf4ff; font-size: 1.6rem; }
.empty-state h3 { margin-bottom: 7px; font-size: 1.15rem; }
.empty-state p { max-width: 440px; margin: 0 auto 17px; color: #68798f; font-size: .87rem; }
.checkout-form { padding: 30px; }
.checkout-form h2 { margin-bottom: 8px; }
.checkout-form .form-grid { margin-top: 22px; }
.checkout-form .form-field textarea { min-height: 95px; }
.checkout-form .btn { border-radius: 8px; }
.notice { margin: 20px 0; padding: 15px 17px; border: 1px solid; border-radius: 9px; font-size: .82rem; line-height: 1.65; }
.notice strong { display: inline-block; margin-bottom: 3px; }
.notice-info { border-color: #cbdcf4; color: #365778; background: #f0f6ff; }
.notice-warning { border-color: #f0d7a0; color: #75521a; background: #fff9e9; }
.form-status { min-height: 22px; margin-top: 12px; color: #0a7958; font-size: .84rem; font-weight: 700; }
.form-status a { color: var(--mgs-blue); text-decoration: underline; }

/* Login, account and orders. */
.compact-hero { padding-top: 70px; padding-bottom: 62px; }
.auth-wrap { display: flex; justify-content: center; }
.auth-panel { width: min(490px, 100%); padding: 34px; }
.auth-panel h2 { margin-bottom: 8px; }
.auth-panel .form-field { margin-top: 19px; }
.auth-panel .btn { margin-top: 22px; border-radius: 8px; }
.auth-switch { margin: 18px 0 0; color: #687a91; text-align: center; font-size: .84rem; }
.auth-switch a { color: var(--mgs-blue); font-weight: 800; }
.account-toolbar { padding: 24px; border: 1px solid var(--mgs-border); border-radius: 14px; background: white; }
.account-toolbar h2 { margin-bottom: 4px; }
.account-toolbar p { margin: 0; }
.compact-actions { margin: 0; }
.compact-actions .btn { min-height: 42px; border-radius: 7px; padding: 0 15px; }
.account-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 23px; }
.account-card { display: block; padding: 24px; border: 1px solid var(--mgs-border); border-radius: 12px; background: white; transition: border-color .2s, transform .2s, box-shadow .2s; }
.account-card:hover { transform: translateY(-3px); border-color: #c5d7f2; box-shadow: var(--mgs-card-shadow); }
.account-icon { display: grid; width: 42px; height: 42px; margin-bottom: 17px; place-items: center; border-radius: 10px; color: var(--mgs-blue); background: #edf4ff; font-size: 1.3rem; }
.account-card h3 { margin-bottom: 8px; font-size: 1rem; }
.account-card p { margin: 0; color: #6c7e93; font-size: .82rem; }
.account-demo-notice { margin-top: 24px; }
.orders-list { display: grid; gap: 15px; margin-bottom: 25px; }
.order-card { padding: 22px; border: 1px solid var(--mgs-border); border-radius: 12px; background: white; box-shadow: 0 4px 15px rgba(13,30,55,.025); }
.order-card-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #edf0f5; }
.order-card-header h3 { margin-bottom: 4px; font-size: 1rem; }
.order-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #365778; background: #edf4ff; font-size: .68rem; font-weight: 800; }
.order-product-list { padding: 0; list-style: none; }
.order-product-list li { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; color: #5f7085; font-size: .83rem; }
.order-product-list li strong { color: #293d59; }
.order-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #edf0f5; color: #68798f; font-size: .8rem; }

/* Admin catalogue editor. */
.admin-toolbar { margin: 28px 0 19px; }
.admin-toolbar h2 { margin-bottom: 5px; }
.admin-toolbar p { margin: 0; }
.admin-toolbar .btn { min-height: 42px; border-radius: 8px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--mgs-border); border-radius: 12px; background: white; box-shadow: var(--mgs-card-shadow); }
.admin-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 13px 14px; border-bottom: 1px solid #edf0f5; text-align: left; vertical-align: middle; font-size: .82rem; }
.admin-table th { color: #60718a; background: #f7f9fc; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-product-name { display: block; color: #1c304d; font-size: .84rem; font-weight: 800; }
.admin-product-kind { display: block; margin-top: 4px; color: #78879a; font-size: .72rem; }
.admin-price-input { width: 118px; padding: 9px 10px; border: 1px solid #d5deeb; border-radius: 7px; background: white; }
.admin-checkbox { width: 18px; height: 18px; accent-color: var(--mgs-blue); }
.admin-save { padding: 8px 11px; border: 0; border-radius: 7px; color: white; background: var(--mgs-blue); font-size: .76rem; font-weight: 800; }
.admin-save:hover { background: var(--mgs-blue-deep); }

/* License information page. */
.legal-layout { display: grid; grid-template-columns: 275px minmax(0,1fr); align-items: start; gap: 32px; }
.legal-aside { position: sticky; top: 120px; padding: 23px; border: 1px solid #d8e6f7; border-radius: 12px; background: #f1f7ff; }
.legal-aside strong { color: #1e3c66; }
.legal-aside p { margin: 10px 0 18px; color: #5e738e; font-size: .85rem; }
.legal-aside .btn { width: 100%; min-height: 43px; border-radius: 7px; padding: 0 12px; font-size: .68rem; }
.legal-copy { padding: 5px 0; }
.legal-copy h2 { margin: 0 0 9px; font-size: 1.35rem; }
.legal-copy p { margin: 0 0 30px; color: #55677e; font-size: .92rem; }
.legal-copy .legal-updated { margin-top: 35px; padding: 17px; border: 1px solid #f1dba8; border-radius: 9px; color: #73551c; background: #fff9e9; font-size: .83rem; }

@media (max-width: 1240px) {
  .site-header .logo-image { width: 66px; height: 66px; flex-basis: 66px; }
  .site-header .brand-name { font-size: .98rem; }
  .nav-links a { padding-inline: 10px; font-size: .7rem; }
  .header-utilities { gap: 5px; }
  .utility-link { padding: 8px 9px; font-size: .7rem; }
  .product-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1050px) {
  .nav-wrap { gap: 13px; }
  .site-header .brand-name { max-width: 195px; white-space: normal; }
  .nav-links { gap: 0; }
  .nav-links a { padding-inline: 8px; }
  .account-link { display: none; }
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cart-layout, .checkout-layout { grid-template-columns: minmax(0,1.3fr) minmax(260px,.8fr); }
}
@media (max-width: 768px) {
  .nav-wrap { min-height: 76px; gap: 10px; }
  .site-header .logo { gap: 8px; }
  .site-header .logo-image { width: 48px; height: 48px; flex-basis: 48px; }
  .site-header .brand-name { max-width: 130px; font-size: .79rem; line-height: 1.1; }
  .menu-toggle { order: 4; margin-left: auto; font-size: 1.4rem; }
  .nav-links { right: 12px; left: 12px; gap: 2px; border-radius: 12px; }
  .nav-links a { padding: 12px; font-size: .82rem; }
  .header-utilities { margin-left: auto; }
  .utility-link { padding: 7px 8px; font-size: .68rem; }
  .account-link { display: none; }
  .hero { background-position: center; }
  .shop-section { padding-top: 35px; }
  .shop-toolbar { align-items: stretch; flex-direction: column; }
  .shop-search-wrap { width: 100%; }
  .currency-control { justify-content: space-between; }
  .category-shortcuts { grid-template-columns: 1fr; gap: 11px; margin-bottom: 44px; }
  .category-shortcuts a { padding: 15px; }
  .shop-section-heading { align-items: start; flex-direction: column; gap: 11px; }
  .shop-section-heading h2 { font-size: 2rem; }
  .storage-subheading { align-items: start; flex-direction: column; gap: 4px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .product-visual { min-height: 140px; padding: 8px; }
  .product-visual img { height: 125px; }
  .product-copy { padding: 11px; }
  .product-title-button { font-size: .83rem; }
  .product-short { font-size: .73rem; }
  .product-card .btn { min-height: 38px; font-size: .60rem; }
  .modal-backdrop { padding: 10px; }
  .modal-product-layout { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .modal-product-image { min-height: 185px; }
  .modal-product-image img { max-height: 200px; }
  .modal-product-content h2 { font-size: 1.55rem; }
  .cart-layout, .checkout-layout, .legal-layout { grid-template-columns: 1fr; }
  .summary-card { order: -1; }
  .cart-row { grid-template-columns: 62px minmax(0,1fr); gap: 11px; }
  .cart-row-image { width: 62px; height: 62px; }
  .cart-controls { grid-column: 2; justify-content: flex-start; }
  .checkout-form, .auth-panel, .cart-items-panel { padding: 21px; }
  .account-toolbar { align-items: start; flex-direction: column; padding: 20px; }
  .account-card-grid { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .legal-copy h2 { font-size: 1.2rem; }
  .admin-toolbar { align-items: start; flex-direction: column; }
}
@media (max-width: 420px) {
  .site-header .brand-name { max-width: 112px; font-size: .72rem; }
  .site-header .logo-image { width: 42px; height: 42px; flex-basis: 42px; }
  .utility-link { padding: 7px; }
  .product-grid { gap: 9px; }
  .product-badge { left: 6px; top: 6px; font-size: .52rem; }
  .product-copy { padding: 9px; }
  .product-title-button { font-size: .78rem; }
  .product-card .btn { padding-inline: 5px; font-size: .55rem; }
}

/* Extra seller-style admin panels, still local-preview only. */
.admin-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 25px 0 38px; }
.admin-stat-card { padding: 18px; border: 1px solid var(--mgs-border); border-radius: 11px; background: white; box-shadow: 0 4px 14px rgba(15,23,42,.035); }
.admin-stat-card span, .admin-stat-card strong, .admin-stat-card small { display: block; }
.admin-stat-card span { color: #61728a; font-size: .77rem; font-weight: 700; }
.admin-stat-card strong { margin: 9px 0 5px; color: #1b3a65; font-size: 1.9rem; line-height: 1; }
.admin-stat-card small { color: #8591a2; font-size: .7rem; }
.admin-section-toolbar { margin-top: 55px; }
.admin-edit-details { margin-top: 9px; max-width: 285px; color: var(--mgs-blue); }
.admin-edit-details summary { cursor: pointer; font-size: .71rem; font-weight: 800; }
.admin-edit-details label { display: block; margin-top: 8px; color: #61728a; font-size: .69rem; font-weight: 700; }
.admin-copy-input { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid #d8e1ed; border-radius: 6px; color: #273c57; background: white; font-size: .73rem; font-weight: 400; line-height: 1.45; }
.admin-order-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 14px; }
.admin-order-tools label { color: #6b7b90; font-size: .74rem; font-weight: 800; }
.admin-order-tools select { padding: 8px 9px; border: 1px solid #d8e1ed; border-radius: 7px; background: white; color: #2b3d56; font-size: .76rem; }
.admin-order-tools .text-link { font-size: .77rem; }
.admin-customer-list-inner { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.admin-customer-card { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--mgs-border); border-radius: 10px; background: white; }
.customer-avatar { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--mgs-blue); background: #eaf2ff; font-weight: 900; }
.admin-customer-card strong, .admin-customer-card span:not(.customer-avatar), .admin-customer-card small { display: block; }
.admin-customer-card strong { color: #1c304d; font-size: .83rem; }
.admin-customer-card div > span { margin-top: 3px; color: #5f7188; font-size: .76rem; overflow-wrap: anywhere; }
.admin-customer-card small { margin-top: 4px; color: #8995a5; font-size: .68rem; }
@media(max-width: 900px) { .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-customer-list-inner { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 600px) { .admin-stats, .admin-customer-list-inner { grid-template-columns: 1fr; } .admin-stat-card { padding: 15px; } }
.contact-channel-panel { padding: clamp(24px,4vw,48px); border: 1px solid #dce6f3; border-radius: 14px; background: linear-gradient(125deg,#f4f8ff,#fff); }
.contact-channel-panel h2 { max-width: 650px; margin: 15px 0; font-size: clamp(1.7rem,3.7vw,2.7rem); }
.contact-channel-panel p { max-width: 700px; margin-bottom: 22px; color: #64748b; }
.contact-channel-panel .btn { border-radius: 8px; }
body.modal-open { overflow: hidden; }


/* ================================================================
   MGS VISUAL REFINEMENT — OCT 2026
   Safe overrides gathered in one place for easy future editing.
   ================================================================ */
:root {
  --mgs-blue: #0B46A3;
  --mgs-blue-deep: #073775;
  --mgs-ink: #13223a;
  --mgs-muted: #64748b;
  --mgs-border: #e1e7ef;
  --mgs-pale: #f5f8fc;
}
html { scroll-padding-top: 112px; }
body { background: #fff; color: var(--mgs-ink); }
.container { width: min(1240px, calc(100% - 48px)); }
.section { padding-top: 76px; padding-bottom: 76px; }

/* One consistent, responsive header and MGS wordmark on every page. */
.site-header { background: rgba(255,255,255,.97); border-bottom: 1px solid #e7ebf2; }
.site-header.scrolled { box-shadow: 0 8px 26px rgba(16,32,55,.11); }
.nav-wrap { min-height: 84px; gap: clamp(10px, 1.5vw, 22px); }
.site-header .logo { flex: 0 1 285px; min-width: 0; gap: 12px; letter-spacing: -.025em; }
.site-header .logo-image { flex: 0 0 58px; width: 58px; height: 58px; object-fit: contain; }
.site-header .brand-name { display: block; color: #10233f; font-size: clamp(.9rem, 1.1vw, 1.1rem); font-weight: 800; line-height: 1.15; white-space: normal; }
.site-header .brand-initial { color: var(--mgs-blue); }
.site-header .nav-links { flex: 1 1 auto; justify-content: center; gap: 2px; min-width: 0; }
.site-header .nav-links a { border-radius: 8px; padding: 10px clamp(8px, .8vw, 13px); color: #33435a; font-size: .72rem; font-weight: 800; letter-spacing: .035em; transition: background .18s ease, color .18s ease, transform .18s ease; }
.site-header .nav-links a::after { display: none; }
.site-header .nav-links a:hover, .site-header .nav-links a.active { background: #edf4ff; color: var(--mgs-blue); transform: translateY(-1px); }
.header-utilities { flex-shrink: 0; gap: 7px; }
.utility-link { min-height: 39px; padding: 7px 10px; border: 1px solid #dce4ef; border-radius: 9px; color: #263a57; background: #fff; font-size: .72rem; font-weight: 800; }
.utility-link:hover { border-color: #9db9e5; color: var(--mgs-blue); background: #f5f8ff; }
.cart-count { min-width: 19px; height: 19px; font-size: .65rem; }
.menu-toggle { border: 1px solid #dfe6f0; }
.site-footer { padding: 36px 0 17px; background: #101a2b; }
.footer-grid { gap: 24px; padding-bottom: 26px; }
.site-footer .logo { gap: 11px; color: white; font-size: 1.05rem; letter-spacing: -.025em; }
.site-footer .logo-image { flex: 0 0 46px; width: 46px; height: 46px; padding: 2px; border-radius: 8px; background: #fff; }
.site-footer .brand-name { color: #fff; font-size: .98rem; line-height: 1.2; font-weight: 800; }
.footer-brand p { margin-top: 10px; font-size: .78rem; }
.footer-title { margin-bottom: 10px; font-size: .78rem; }
.footer-links { gap: 6px; font-size: .75rem; }
.footer-bottom { padding-top: 13px; font-size: .68rem; }

/* Large page banners on internal pages are replaced by slim, calm page headings. */
.page-hero { padding: 25px 0 18px; color: var(--mgs-ink); background: #f7f9fc; border-bottom: 1px solid #e7edf5; }
.page-hero .breadcrumb { margin-bottom: 10px; color: #748198; }
.page-hero .breadcrumb a { color: var(--mgs-blue); }
.page-hero .eyebrow { color: var(--mgs-blue); }
.page-hero h1 { margin: 8px 0 7px; color: var(--mgs-ink); font-size: clamp(1.8rem, 3.5vw, 2.7rem); line-height: 1.12; }
.page-hero p { max-width: 800px; margin: 0; color: #64748b; font-size: .92rem; }
.shop-hero { display: none !important; }
.shop-page-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 0 28px; }
.shop-page-intro .breadcrumb { margin-bottom: 9px; }
.shop-page-intro h1 { margin: 0 0 8px; color: var(--mgs-ink); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.shop-page-intro p { max-width: 720px; margin: 0; color: #65758b; font-size: .94rem; }
.shop-help-link { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 12px 15px; border: 1px solid #dbe5f2; border-radius: 9px; color: var(--mgs-blue); background: #f9fbff; font-size: .78rem; font-weight: 800; }
.shop-help-link:hover { border-color: #b6cbed; background: #eef5ff; }
.shop-section { padding-top: 24px; }

/* Professional marketplace-style product tiles: 5 across on wide screens. */
.product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.product-card { border-radius: 12px; border-color: #e1e7f0; box-shadow: 0 3px 12px rgba(18,39,70,.035); }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(18,39,70,.09); }
.product-visual { min-height: 178px; background: #fff; border-bottom: 1px solid #f0f3f8; }
.product-visual img { height: 154px; object-fit: contain; mix-blend-mode: multiply; }
.product-copy { padding: 14px 13px 13px; }
.product-title-button { font-size: .9rem; line-height: 1.35; }
.product-short { font-size: .75rem; line-height: 1.55; }
.product-card .btn { border-radius: 7px; min-height: 38px; }
.btn-blue { background: var(--mgs-blue); }
.btn-blue::after { background: var(--mgs-blue-deep); }
.btn-primary { background: var(--mgs-blue); box-shadow: 0 8px 20px rgba(11,70,163,.12); }
.btn-primary::after { background: var(--mgs-blue-deep); }
.btn-primary:hover { color: #fff; }
.btn-secondary { border-color: #d5deeb; border-radius: 8px; }
.category-shortcuts { margin-bottom: 43px; }
.category-shortcuts a { border-radius: 12px; }
.catalog-note { margin-top: 40px; border-radius: 12px; }

/* Slimmer home hero: keep the one useful hero, remove duplicated brand heading. */
.hero { padding: 62px 0 78px; background-image: linear-gradient(108deg, rgba(10,22,40,.84), rgba(10,22,40,.56) 55%, rgba(10,22,40,.44)), url("../assets/images/mgs-data-center.jpg"); }
.hero-grid { grid-template-columns: 1.03fr .97fr; gap: clamp(28px, 4.3vw, 58px); }
.hero h1 { max-width: 650px; margin: 11px 0 17px; font-size: clamp(2.35rem, 4.3vw, 4.25rem); line-height: 1.1; }
.hero h1 span { color: #9ec2ff; font-style: normal; }
.hero-copy { max-width: 560px; font-size: 1rem; line-height: 1.75; }
.hero .eyebrow { color: #a9c8ff; }
.hero-photo { min-height: 345px; max-height: 385px; border-radius: 16px; border-color: rgba(255,255,255,.24); box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.hero-photo img { min-height: 345px; max-height: 385px; height: 100%; object-position: center; }
.glass-badge { right: 15px; bottom: 15px; border-radius: 10px; }
.actions { margin-top: 25px; }
.stats { margin-top: -28px; }
.stats-grid { border-radius: 12px; overflow: hidden; }
.stat { padding: 19px 24px; }
.card { border-radius: 12px; }
.card-image { height: 185px; }
.card-copy { padding: 23px; }

/* Login/account/cart content spacing. */
.account-toolbar { border-radius: 13px; }
.account-card, .auth-panel, .cart-items-panel, .summary-card, .checkout-form { border-radius: 13px; }
.admin-product-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 20px 0 18px; }
.admin-search-label { display: grid; gap: 7px; width: min(460px, 100%); color: #51637d; font-size: .75rem; font-weight: 800; }
.admin-search-label input { width: 100%; min-height: 44px; border: 1px solid #d7e0ed; border-radius: 8px; padding: 10px 13px; background: #fff; }
.admin-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.admin-product-card { border: 1px solid #e0e7f1; border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 4px 13px rgba(17,36,64,.03); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.admin-product-card:hover { transform: translateY(-2px); border-color: #b7cdee; box-shadow: 0 12px 27px rgba(17,36,64,.08); }
.admin-product-card-main { display: grid; grid-template-columns: 92px minmax(0,1fr) 25px; align-items: center; gap: 14px; padding: 14px; }
.admin-product-card-image { display: grid; width: 92px; height: 92px; place-items: center; overflow: hidden; border-radius: 9px; background: #f6f8fc; }
.admin-product-card-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.admin-product-card-info { display: grid; min-width: 0; gap: 5px; }
.admin-product-card-info strong { color: #172b46; font-size: .95rem; line-height: 1.3; }
.admin-product-kind { color: #7a879a; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.admin-product-price-line { color: #526680; font-size: .74rem; line-height: 1.5; }
.admin-product-status { width: fit-content; padding: 3px 7px; border-radius: 5px; color: #17694d; background: #eaf8f1; font-size: .65rem; font-weight: 800; }
.admin-product-status.is-hidden { color: #8d4e1d; background: #fff2e6; }
.admin-edit-arrow { color: var(--mgs-blue); font-size: 1.2rem; font-weight: 800; }
.admin-product-edit-link { display: block; border-top: 1px solid #edf1f6; padding: 10px 14px; color: var(--mgs-blue); background: #fbfcfe; font-size: .74rem; font-weight: 800; }
.admin-settings-panel { margin-top: 48px; padding: clamp(18px,3vw,30px); border: 1px solid #dfe7f2; border-radius: 14px; background: #f9fbfe; }
.admin-settings-panel .admin-toolbar { margin-top: 0; }
.admin-settings-panel h2 { font-size: 1.65rem; }
.site-settings-form { margin-top: 20px; }
.admin-editor-page { max-width: 1050px; }
.admin-product-form { margin-top: 24px; border: 1px solid #e1e8f2; border-radius: 15px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(19,36,61,.045); }
.admin-editor-top { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px; padding: clamp(18px,3vw,32px); }
.admin-editor-image { position: sticky; top: 115px; align-self: start; }
.admin-editor-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 12px; border: 1px solid #e9eef5; border-radius: 12px; background: #fafbfd; }
.admin-editor-image p { margin: 9px 0 0; text-align: center; }
.admin-editor-fields h2 { margin-bottom: 7px; font-size: 1.55rem; }
.admin-editor-fields > .muted-small { margin-bottom: 22px; }
.admin-editor-fields .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.admin-editor-fields .form-field textarea { min-height: 70px; }
.admin-visibility { display: flex; align-items: start; gap: 10px; margin-top: 20px; padding: 14px; border: 1px solid #dfe8f5; border-radius: 9px; background: #f7faff; }
.admin-visibility input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mgs-blue); }
.admin-visibility strong, .admin-visibility small { display: block; }
.admin-visibility strong { font-size: .82rem; }
.admin-visibility small { margin-top: 3px; color: #738197; font-size: .73rem; }
.admin-editor-actions { display: flex; justify-content: end; gap: 10px; padding: 17px 28px; border-top: 1px solid #e8edf5; background: #fafbfd; }
.admin-editor-actions .btn { min-height: 43px; }

@media (max-width: 1240px) {
  .nav-wrap { gap: 10px; }
  .site-header .logo { flex-basis: 235px; gap: 8px; }
  .site-header .logo-image { width: 50px; height: 50px; flex-basis: 50px; }
  .site-header .brand-name { font-size: .91rem; }
  .site-header .nav-links a { padding-inline: 8px; font-size: .66rem; }
  .utility-link { padding-inline: 8px; }
  .product-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 1000px) {
  .site-header .logo { flex: 1 1 auto; }
  .site-header .nav-links { justify-content: end; }
  .site-header .brand-name { max-width: 185px; }
  .header-utilities { gap: 5px; }
  .utility-link { padding: 7px; font-size: .67rem; }
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero { padding: 48px 0 62px; }
  .hero-photo, .hero-photo img { min-height: 300px; }
}
@media (max-width: 768px) {
  .container { width: min(1240px, calc(100% - 30px)); }
  .section { padding: 52px 0; }
  .nav-wrap { min-height: 72px; gap: 8px; }
  .site-header .logo { flex: 0 1 auto; gap: 7px; max-width: 45%; }
  .site-header .logo-image { width: 43px; height: 43px; flex-basis: 43px; }
  .site-header .brand-name { max-width: 115px; font-size: .76rem; line-height: 1.14; }
  .menu-toggle { display: block; order: 5; padding: 6px 8px; }
  .header-utilities { margin-left: auto; gap: 4px; }
  .utility-link { min-height: 35px; padding: 6px 7px; font-size: .65rem; }
  .site-header .nav-links { position: absolute; top: 100%; right: 12px; left: 12px; display: grid; justify-content: stretch; gap: 3px; padding: 11px; border: 1px solid #e0e7f1; border-radius: 12px; background: rgba(255,255,255,.99); box-shadow: 0 16px 40px rgba(16,32,55,.15); }
  .site-header .nav-links a { padding: 12px; font-size: .78rem; }
  .shop-page-intro { align-items: start; flex-direction: column; gap: 14px; }
  .shop-help-link { width: 100%; justify-content: center; }
  .category-shortcuts { grid-template-columns: 1fr; }
  .shop-toolbar { align-items: stretch; flex-direction: column; }
  .currency-control { justify-content: space-between; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .product-visual { min-height: 130px; padding: 8px; }
  .product-visual img { height: 112px; }
  .product-copy { padding: 10px; }
  .product-title-button { font-size: .8rem; }
  .product-card .btn { min-height: 36px; padding-inline: 4px; font-size: .58rem; }
  .hero { padding: 42px 0 50px; }
  .hero-grid { grid-template-columns: 1fr; gap: 25px; }
  .hero h1 { font-size: clamp(2.3rem, 9vw, 3.7rem); }
  .hero-photo, .hero-photo img { min-height: 230px; max-height: 270px; }
  .stats { margin-top: -17px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { padding: 13px 18px; border-right: 0; border-bottom: 1px solid var(--mgs-border); }
  .stat strong { font-size: 1.6rem; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 14px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .admin-product-grid { grid-template-columns: 1fr; }
  .admin-editor-top { grid-template-columns: 1fr; gap: 20px; }
  .admin-editor-image { position: static; max-width: 200px; }
  .admin-editor-fields .form-grid { grid-template-columns: 1fr; }
  .admin-editor-actions { justify-content: stretch; padding: 14px; }
  .admin-editor-actions .btn { flex: 1; }
  .admin-product-toolbar { align-items: stretch; flex-direction: column; }
  .admin-search-label { width: 100%; }
}
@media (max-width: 420px) {
  .site-header .brand-name { max-width: 95px; font-size: .69rem; }
  .site-header .logo-image { width: 39px; height: 39px; flex-basis: 39px; }
  .basket-link { font-size: 0; gap: 0; padding-inline: 6px; }
  .basket-link .cart-count { font-size: .63rem; }
  .account-link { font-size: .61rem; padding-inline: 6px; }
  .utility-link { border-radius: 7px; }
  .product-grid { gap: 8px; }
  .product-badge { font-size: .5rem; }
  .product-title-button { font-size: .75rem; }
  .product-card .btn { font-size: .54rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* MGS FINAL RESPONSIVE REFINEMENTS — shared site chrome and page spacing. */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #e7edf5; box-shadow: 0 5px 22px rgba(15,35,65,.055); }
.nav-wrap { min-height: 98px; gap: clamp(8px,1.2vw,18px); }
.site-header .logo { gap: 12px; flex: 0 1 auto; min-width: 245px; }
.site-header .logo-image { width: 74px; height: 74px; flex: 0 0 74px; }
.site-header .brand-name { display: block; white-space: nowrap; color: #17253d; font-size: clamp(1.08rem,1.45vw,1.42rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
.brand-initial { color: #0b46a3 !important; }
.site-footer { padding: 28px 0 12px; }
.site-footer .logo { display: flex; align-items: center; gap: 12px; color: #fff; }
.site-footer .logo-image { width: 60px; height: 60px; flex: 0 0 60px; }
.site-footer .brand-name { white-space: normal; color: #fff !important; font-size: 1.05rem; line-height: 1.25; font-weight: 800; }
.site-footer .brand-initial { color: #6fa7ff !important; }
.footer-grid { gap: 24px; padding-bottom: 20px; }
.footer-brand p { max-width: 300px; margin-top: 10px !important; }
.footer-title { margin-bottom: 10px; }
.footer-links { gap: 5px; }
.header-utilities { gap: 6px; }
.utility-link { min-height: 42px; padding: 8px 10px; }
.basket-link, .account-link { max-width: 100%; }
.hero { padding: 44px 0 50px; }
.hero h1 { font-size: clamp(2.2rem,4vw,3.75rem); }
.hero-photo, .hero-photo img { min-height: 285px; max-height: 330px; }
.shop-section { padding-top: 38px; }
.shop-page-intro { margin-bottom: 22px; }
.shop-page-intro h1 { font-size: clamp(2rem,3.5vw,2.8rem); }
.page-hero { padding: 32px 0 35px; }
.page-hero h1 { font-size: clamp(2rem,3.5vw,3.15rem); }
body[data-shop-category="software"] .shop-section-heading.storage-heading,
body[data-shop-category="software"] .storage-subheading,
body[data-shop-category="software"] #sata-grid,
body[data-shop-category="software"] #nvme-grid,
body[data-shop-category="software"] #other-storage-grid,
body[data-shop-category="software"] #other-storage-heading,
body[data-shop-category="software"] .category-shortcuts a[href="#storage"],
body[data-shop-category="storage"] .shop-section-heading#licenses,
body[data-shop-category="storage"] #software-grid,
body[data-shop-category="storage"] .category-shortcuts a[href="#licenses"] { display: none !important; }
body[data-shop-category="software"] .category-shortcuts,
body[data-shop-category="storage"] .category-shortcuts { display: none; }
body[data-shop-category="storage"] #sata-grid,
body[data-shop-category="storage"] #nvme-grid,
body[data-shop-category="storage"] #other-storage-grid { margin-bottom: 28px; }
@media (max-width: 1120px) {
 .nav-wrap { flex-wrap: wrap; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
 .site-header .logo { min-width: 0; }
 .nav-links { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
 .header-utilities { margin-left: auto; }
}
@media (max-width: 680px) {
 .nav-wrap { min-height: 0; gap: 8px; }
 .site-header .logo { gap: 8px; max-width: calc(100% - 54px); }
 .site-header .logo-image { width: 52px; height: 52px; flex-basis: 52px; }
 .site-header .brand-name { white-space: normal; font-size: clamp(.96rem,4vw,1.15rem); max-width: 235px; }
 .menu-toggle { flex: 0 0 42px; width: 42px; height: 42px; }
 .nav-links { order: 3; justify-content: flex-start; gap: 3px; }
 .nav-links a { padding: 8px 9px; font-size: .73rem; }
 .header-utilities { order: 2; width: 100%; margin: 0; justify-content: flex-end; }
 .utility-link { min-height: 39px; padding: 7px 10px; font-size: .76rem; }
 .hero { padding: 32px 0 36px; }
 .hero-grid { grid-template-columns: 1fr; }
 .hero-photo, .hero-photo img { min-height: 220px; max-height: 260px; }
 .section { padding: 64px 0; }
 .page-hero { padding: 25px 0 28px; }
 .footer-grid { grid-template-columns: 1fr 1fr; }
 .footer-brand { grid-column: 1 / -1; }
 .site-footer .logo-image { width: 50px; height: 50px; flex-basis: 50px; }
}
@media (max-width: 390px) {
 .site-header .brand-name { font-size: .9rem; }
 .site-header .logo-image { width: 46px; height: 46px; flex-basis: 46px; }
 .utility-link { padding: 6px 8px; font-size: .72rem; }
 .footer-grid { grid-template-columns: 1fr; }
 .footer-brand { grid-column: auto; }
}


/* Final patch: keep the header controls intact at every viewport width. */
.site-header .nav-wrap { display:flex; align-items:center; }
.site-header .logo { flex-shrink: 0; }
.site-header .brand-name { color:#17253d !important; }
.site-header .brand-initial { color:#0b46a3 !important; }
.site-header .nav-links { min-width:0; }
.site-header .header-utilities { flex-shrink:0; }
.site-header .utility-link { white-space:nowrap; line-height:1.15; }
.site-footer .brand-name { color:#fff !important; }
.site-footer .brand-initial { color:#6fa7ff !important; }
.product-image, .product-card img { object-fit:contain; background:#f5f8fc; }
@media (min-width:1121px) and (max-width:1320px) {
  .site-header .brand-name { font-size:1.05rem; }
  .site-header .logo { gap:8px; }
  .site-header .logo-image { width:62px; height:62px; flex-basis:62px; }
  .nav-links a { padding-left:8px; padding-right:8px; }
  .utility-link { padding-left:8px; padding-right:8px; }
}
@media (max-width:1120px) {
  .site-header .nav-wrap { display:flex; }
  .site-header .nav-links { display:flex; }
  .site-header .header-utilities { display:flex; width:auto; }
}
@media (max-width:680px) {
  .site-header .nav-wrap { align-items:center; }
  .site-header .header-utilities { width:100%; justify-content:stretch; }
  .site-header .header-utilities .utility-link { flex:1 1 0; justify-content:center; min-width:0; }
  .site-header .nav-links { width:100%; }
}


/* Product detail pages and editorial About Us experience */
.product-card { overflow:hidden; }
.product-card-open { display:block; color:inherit; }
.product-card-open:hover .product-title-button { color:var(--mgs-blue); }
.product-card-actions { display:flex; gap:9px; padding:0 18px 18px; }
.product-card-actions .btn { flex:1; min-width:0; justify-content:center; }
.product-title-button { display:block; border:0; padding:0; color:#17253d; background:transparent; font-size:1rem; font-weight:800; line-height:1.4; text-align:left; }
.product-detail-shell { padding:50px 0 76px; background:linear-gradient(180deg,#f5f8fd 0%,#fff 80%); min-height:60vh; }
.product-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,68px); align-items:start; }
.product-detail-visual { position:sticky; top:120px; min-height:500px; display:grid; place-items:center; padding:32px; border:1px solid #e1e8f2; border-radius:22px; background:radial-gradient(circle at 50% 35%,#fff 0,#f1f5fb 76%); overflow:hidden; }
.product-detail-visual img { width:100%; max-height:480px; object-fit:contain; mix-blend-mode:multiply; }
.product-detail-caption { position:absolute; left:24px; bottom:22px; padding:8px 12px; border:1px solid #dfe7f3; border-radius:999px; background:rgba(255,255,255,.86); color:#526783; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.product-detail-copy { padding:8px 0; }
.product-detail-copy .breadcrumb { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px; color:#73839a; font-size:.78rem; }
.product-detail-copy .breadcrumb a { color:#355b91; }
.product-detail-copy h1 { margin:12px 0; color:#15243b; font-size:clamp(2rem,4vw,3.3rem); line-height:1.08; letter-spacing:-.045em; }
.product-detail-short { color:#50627b; font-size:1.05rem; }
.product-detail-price { display:inline-block; margin:12px 0 16px; color:#0b46a3; font-size:1.4rem; font-weight:850; }
.product-detail-description { color:#52647c; }
.product-detail-copy h2 { margin:28px 0 12px; font-size:1.12rem; }
.product-detail-copy .license-note { margin:20px 0; }
.product-detail-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.product-detail-actions .btn { min-height:48px; padding:0 22px; }
.back-to-shop { display:inline-block; margin-top:23px; color:#315b94; font-size:.86rem; font-weight:800; }
.product-not-found { padding:60px 0; text-align:center; }
.product-not-found p { color:#64748b; }
.product-loading { padding:70px 0; }
.product-detail-page .site-header, .about-page .site-header { position:relative; z-index:5; }
.about-page { background:#f7f9fc; }
.about-hero { position:relative; overflow:hidden; padding:76px 0 82px; color:white; background:radial-gradient(ellipse at 80% 15%,rgba(30,103,206,.32),transparent 38%),linear-gradient(122deg,#071426 0%,#0c1e38 54%,#102b4f 100%); }
.about-hero:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(90deg,transparent,black); }
.about-orb { position:absolute; border-radius:50%; filter:blur(1px); pointer-events:none; }
.about-orb-one { width:340px;height:340px;right:-90px;top:-160px;background:rgba(57,126,227,.16); }
.about-orb-two { width:250px;height:250px;left:36%;bottom:-210px;background:rgba(65,190,205,.1); }
.about-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:42px; }
.about-hero-copy .breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:35px; color:#9cb0cb; font-size:.8rem; }
.about-hero-copy .breadcrumb a { color:#d7e7ff; }
.about-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#a8caff; font-size:.72rem; font-weight:800; letter-spacing:.15em; }
.about-eyebrow-dot { width:7px;height:7px;border-radius:50%;background:#5fd4c5;box-shadow:0 0 0 5px rgba(95,212,197,.12); }
.about-hero h1 { margin:22px 0; font-size:clamp(2.8rem,5.5vw,5rem); line-height:1.01; letter-spacing:-.065em; }
.about-hero h1 span,.about-section-heading h2 span,.about-global-copy h2 span,.about-cta h2 span { color:#7fb4ff; }
.about-hero-copy>p { max-width:590px; color:#c2d0e3; font-size:1.03rem; line-height:1.85; }
.about-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:30px; }
.about-hero-actions .btn { min-height:48px; padding:0 20px; }
.about-text-link { color:#d9e7fa; font-size:.88rem; font-weight:750; }
.about-text-link span { margin-left:8px; color:#8abaff; }
.about-hero-art { position:relative; min-height:420px; display:grid; place-items:center; }
.about-globe { position:relative; display:grid; width:min(290px,70vw); aspect-ratio:1; place-items:center; border:1px solid rgba(142,190,255,.55); border-radius:50%; background:radial-gradient(circle at 34% 27%,rgba(72,148,255,.5),rgba(14,50,93,.5) 48%,rgba(5,19,39,.9) 72%); box-shadow:0 0 80px rgba(41,119,222,.2),inset 0 0 55px rgba(85,160,255,.16); }
.about-globe:before,.about-globe:after { content:""; position:absolute; inset:13%; border:1px solid rgba(127,180,255,.32); border-radius:50%; }
.about-globe:after { inset:0 27%; }
.globe-lines { position:absolute; inset:0; border:1px solid rgba(127,180,255,.22); border-radius:50%; transform:rotate(58deg) scaleX(.45); }
.globe-core { font-size:3rem; font-weight:900; letter-spacing:.05em; color:white; text-shadow:0 4px 25px rgba(83,153,255,.8); }
.orbit { position:absolute; width:360px;height:180px;border:1px solid rgba(115,171,255,.35);border-radius:50%; transform:rotate(-25deg); }
.orbit-b { width:390px;height:230px;transform:rotate(52deg);border-color:rgba(96,213,207,.28); }
.float-card { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid rgba(193,216,247,.2); border-radius:13px; background:rgba(8,25,48,.82); box-shadow:0 15px 45px rgba(0,0,0,.18); backdrop-filter:blur(12px); }
.float-card-top { top:60px; right:0; }.float-card-bottom { bottom:52px; left:-3px; }
.float-card-icon { display:grid; width:38px;height:38px;place-items:center;border-radius:10px;background:#173c69;color:#9bc5ff;font-size:1.2rem; }
.float-card small,.float-card strong { display:block; }.float-card small { color:#8ea6c4;font-size:.66rem; }.float-card strong { margin-top:3px;color:#f2f7ff;font-size:.8rem; }
.orbit-label { position:absolute;color:#8aaedb;font-size:.63rem;font-weight:800;letter-spacing:.14em; }.orbit-label-one { left:0;top:46%; }.orbit-label-two { right:12%;bottom:16%; }.orbit-label-three { left:26%;top:9%; }
.about-proof-strip { position:relative; z-index:2; border-bottom:1px solid #e1e8f1; background:white; }
.about-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.about-proof-grid>div { display:flex; flex-direction:column; gap:6px; padding:26px 22px; border-right:1px solid #e8edf4; }.about-proof-grid>div:first-child { padding-left:0; }.about-proof-grid>div:last-child { border-right:0; }
.about-proof-grid strong { color:#142a49;font-size:1.25rem;letter-spacing:-.025em; }.about-proof-grid span { color:#728198;font-size:.77rem;line-height:1.5; }
.about-section { padding:94px 0; background:#f7f9fc; }
.about-section-heading { display:grid; grid-template-columns:1fr .68fr; align-items:end; gap:45px; margin-bottom:42px; }
.about-section-heading h2,.about-global-copy h2 { margin:14px 0 0; color:#14253d; font-size:clamp(2.25rem,4vw,3.65rem); line-height:1.06; letter-spacing:-.055em; }.about-section-heading h2 span { color:#3978c9; }
.about-section-heading>p { margin:0 0 4px; color:#62738a; font-size:.95rem; }
.about-capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.about-capability { position:relative; min-height:260px; overflow:hidden; padding:27px 25px 24px; border:1px solid #e2e9f2; border-radius:17px; background:white; box-shadow:0 7px 25px rgba(23,48,82,.035); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.about-capability:hover { transform:translateY(-5px);border-color:#b7d0f2;box-shadow:0 18px 38px rgba(23,48,82,.09); }
.about-capability-featured { color:white; border-color:#174c91; background:linear-gradient(145deg,#0b3670,#0c2040); }.about-capability-featured:after { content:""; position:absolute;width:180px;height:180px;right:-90px;top:-90px;border:1px solid rgba(140,191,255,.3);border-radius:50%;box-shadow:0 0 0 20px rgba(140,191,255,.04),0 0 0 40px rgba(140,191,255,.03); }
.capability-number { position:absolute;top:22px;right:23px;color:#9aabc0;font-size:.72rem;font-weight:850;letter-spacing:.1em; }.about-capability-featured .capability-number { color:#9ac5ff; }
.capability-symbol { display:grid;width:43px;height:43px;place-items:center;margin-bottom:21px;border-radius:12px;color:#2366b7;background:#edf5ff;font-size:1.4rem; }.about-capability-featured .capability-symbol { color:#c7e0ff;background:rgba(105,166,255,.16); }
.capability-tag { display:block;color:#66809e;font-size:.62rem;font-weight:850;letter-spacing:.13em; }.about-capability-featured .capability-tag { color:#8ebaff; }
.about-capability h3 { margin:9px 0;color:#152943;font-size:1.25rem;letter-spacing:-.025em; }.about-capability-featured h3 { color:white; }.about-capability p { margin:0 0 20px;color:#66768a;font-size:.83rem;line-height:1.7; }.about-capability-featured p { color:#c1d2e8; }
.about-capability a { display:inline-flex;gap:9px;align-items:center;color:#1a5caf;font-size:.78rem;font-weight:850; }.about-capability-featured a { color:#9cc8ff; }
.about-global-section { padding:92px 0; color:white; background:#0b1729; }.about-global-grid { display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:65px; }
.about-global-copy .eyebrow { color:#8dbaff; }.about-global-copy h2 { margin-bottom:23px;color:white; }.about-global-copy h2 span { color:#7fb4ff; }.about-global-copy>p { color:#b7c6da;font-size:.93rem; }
.about-location-list { display:grid;gap:19px;margin-top:29px; }.about-location-list>div { display:flex;gap:13px;align-items:flex-start; }.location-pin { display:grid;flex:0 0 27px;width:27px;height:27px;place-items:center;border-radius:8px;color:#91bfff;background:rgba(100,158,240,.15);font-size:.62rem; }.about-location-list strong,.about-location-list small { display:block; }.about-location-list strong { color:#edf5ff;font-size:.83rem; }.about-location-list small { margin-top:4px;color:#9eb0c7;font-size:.76rem;line-height:1.6; }
.global-visual { padding:20px;border:1px solid rgba(144,180,230,.19);border-radius:20px;background:linear-gradient(145deg,#101f35,#0d1a2d);box-shadow:0 24px 70px rgba(0,0,0,.16); }.global-visual-top,.global-visual-bottom { display:flex;align-items:center;justify-content:space-between;gap:10px; }.global-visual-top { color:#92a9c8;font-size:.62rem;font-weight:850;letter-spacing:.13em; }.global-status { display:flex;align-items:center;gap:7px;color:#a4e5d7; }.global-status i { width:6px;height:6px;border-radius:50%;background:#5bd1b4; }.network-map { position:relative;overflow:hidden;margin:18px 0;border-radius:13px;background:radial-gradient(ellipse at 50% 45%,#18385c,#0b1729 75%); }.network-map svg { position:relative;width:100%;height:auto;display:block; }.network-grid-lines { position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(160,193,237,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(160,193,237,.3) 1px,transparent 1px);background-size:25px 25px; }.global-visual-bottom { flex-wrap:wrap;justify-content:center;color:#c2d1e5;font-size:.72rem; }.global-visual-bottom b { color:#78b1ff; }
.about-advantage-section { padding:90px 0;background:white; }.about-advantage-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }.about-advantage-grid article { display:flex;gap:20px;padding:25px;border:1px solid #e5ebf3;border-radius:14px;background:#fbfcfe; }.about-advantage-grid article>span { flex:0 0 38px;color:#3879c8;font-size:.76rem;font-weight:900;letter-spacing:.1em; }.about-advantage-grid h3 { margin:0 0 7px;color:#172b47;font-size:1.05rem; }.about-advantage-grid p { margin:0;color:#65758b;font-size:.83rem;line-height:1.7; }
.about-cta { padding:72px 0;color:white;background:linear-gradient(110deg,#0b2d5c,#0b1c35); }.about-cta-inner { display:flex;align-items:center;justify-content:space-between;gap:45px; }.about-cta .eyebrow { color:#9bc4ff; }.about-cta h2 { margin:14px 0;color:white;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08;letter-spacing:-.05em; }.about-cta p { max-width:720px;margin:0;color:#bdcce0;font-size:.9rem; }.about-cta .btn { flex-shrink:0;min-height:50px;padding:0 20px; }
@media(max-width:1000px) { .about-hero-grid,.about-global-grid { grid-template-columns:1fr; }.about-hero-art { min-height:390px; }.about-section-heading { grid-template-columns:1fr;gap:15px; }.about-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.product-detail-visual { min-height:380px; }.product-detail-visual img { max-height:350px; } }
@media(max-width:700px) { .about-hero { padding:42px 0 48px; }.about-hero h1 { font-size:clamp(2.55rem,12vw,3.8rem); }.about-hero-art { min-height:330px; }.about-globe { width:220px; }.orbit { width:280px;height:145px; }.orbit-b { width:300px;height:190px; }.float-card { padding:10px; }.float-card-top { top:20px;right:-2px; }.float-card-bottom { bottom:16px;left:-2px; }.float-card strong { font-size:.7rem; }.float-card-icon { width:31px;height:31px; }.orbit-label { font-size:.52rem; }.about-proof-grid { grid-template-columns:repeat(2,1fr); }.about-proof-grid>div { padding:18px 13px;border-bottom:1px solid #e8edf4; }.about-proof-grid>div:first-child { padding-left:13px; }.about-proof-grid>div:nth-child(2) { border-right:0; }.about-proof-grid>div:nth-child(3),.about-proof-grid>div:nth-child(4) { border-bottom:0; }.about-section,.about-global-section,.about-advantage-section { padding:62px 0; }.about-capability-grid,.about-advantage-grid { grid-template-columns:1fr; }.about-capability { min-height:0; }.about-cta-inner { align-items:flex-start;flex-direction:column;gap:25px; }.product-detail-layout { grid-template-columns:1fr;gap:25px; }.product-detail-visual { position:relative;top:auto;min-height:300px;padding:22px; }.product-detail-visual img { max-height:280px; }.product-detail-shell { padding:28px 0 50px; }.product-detail-copy .breadcrumb { margin-bottom:22px; }.product-detail-copy h1 { font-size:2.35rem; } }
@media(max-width:390px) { .about-hero-actions { align-items:flex-start;flex-direction:column;gap:15px; }.about-capability { padding:23px 20px; }.product-card-actions { padding-inline:12px;gap:7px; }.product-card-actions .btn { padding-inline:9px;font-size:.72rem; } }


/* Product detail cross-sell block */
.related-products { margin-top: clamp(44px, 6vw, 78px); padding-top: clamp(30px, 4vw, 48px); border-top: 1px solid #dce4ee; }
.related-products-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.related-products-heading .eyebrow { display:block; margin-bottom:7px; }
.related-products-heading h2 { margin:0; font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.12; letter-spacing:-.035em; color:#15283d; }
.related-products-heading>a { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; color:#1b5da8; font-size:.88rem; font-weight:750; text-decoration:none; }
.related-products-heading>a:hover { text-decoration:underline; text-underline-offset:4px; }
.related-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.related-product-grid .product-card { min-width:0; }
.related-product-grid .product-visual { min-height:165px; }
.related-product-grid .product-copy { padding:14px 15px 15px; }
.related-product-grid .product-title-button { font-size:.98rem; }
.related-product-grid .product-short { font-size:.78rem; line-height:1.55; }
.related-product-grid .product-card-actions { padding:0 15px 15px; display:flex; gap:8px; flex-wrap:wrap; }
.related-product-grid .product-card-actions .btn { flex:1 1 110px; padding:10px 12px; font-size:.78rem; }
.product-detail-visual img { object-fit:contain; }
@media (max-width: 1000px) { .related-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .related-products-heading { align-items:flex-start; flex-direction:column; } .related-product-grid { grid-template-columns:1fr; } .related-product-grid .product-visual { min-height:210px; } }

/* ================================================================
   RESPONSIVE HARDENING — compact header, mobile-first spacing, and
   safe grid behaviour across all storefront, account, and admin pages.
   ================================================================ */
.site-header .nav-wrap { position: relative; }
.site-header .logo, .site-header .brand-name, .site-header .nav-links,
.site-header .header-utilities, .site-header .utility-link { min-width: 0; }
img, video, iframe { max-width: 100%; }
main, section, article, .container, .product-detail-copy, .product-card { min-width: 0; }
pre, code, .admin-table td, .admin-table th { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .site-header .nav-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand utilities menu";
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .site-header .logo { grid-area: brand; max-width: none; width: auto; flex: none; gap: 7px; }
  .site-header .logo-image { flex: 0 0 42px; width: 42px; height: 42px; }
  .site-header .brand-name { max-width: 205px; font-size: clamp(.76rem, 1.6vw, .98rem); line-height: 1.15; }
  .site-header .header-utilities { grid-area: utilities; display: flex; width: auto; margin: 0; gap: 5px; }
  .site-header .header-utilities .utility-link { display: inline-flex !important; flex: 0 0 auto; min-height: 36px; padding: 6px 8px; font-size: .68rem; justify-content: center; }
  .site-header .menu-toggle { grid-area: menu; display: inline-grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; order: initial; flex: 0 0 38px; border: 1px solid #dce4ef; border-radius: 8px; font-size: 1.35rem; line-height: 1; }
  .site-header .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    z-index: 1001;
    display: grid;
    grid-area: unset;
    width: 100%;
    max-height: min(75vh, 520px);
    overflow-y: auto;
    justify-content: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid #e1e7f0;
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(16,32,55,.16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .site-header .nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-header .nav-links a { display: block; padding: 12px 13px; border-radius: 7px; font-size: .8rem; }
  .site-header .nav-links a:hover, .site-header .nav-links a.active { transform: none; }
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .product-detail-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
  .product-detail-visual { min-height: 360px; padding: 20px; }
  .product-detail-visual img { max-height: 340px; }
  .hero { padding-top: 56px; padding-bottom: 64px; }
}
@media (max-width: 700px) {
  .container { width: calc(100% - 30px); }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .site-header .brand-name { max-width: 155px; font-size: clamp(.74rem, 2.5vw, .9rem); }
  .site-header .logo-image { flex-basis: 39px; width: 39px; height: 39px; }
  .site-header .header-utilities { gap: 4px; }
  .site-header .header-utilities .utility-link { min-height: 34px; padding: 5px 7px; font-size: .65rem; }
  .site-header .cart-count { min-width: 18px; height: 18px; }
  .hero { padding: 38px 0 42px; background-position: 55% center; }
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .hero h1 { max-width: 100%; font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.08; overflow-wrap: normal; }
  .hero-copy { font-size: .96rem; line-height: 1.65; }
  .hero .actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 22px; }
  .hero .actions .btn { width: 100%; min-height: 48px; padding-inline: 14px; }
  .hero-photo, .hero-photo img { min-height: 190px; max-height: 245px; }
  .stats { margin-top: 0; padding-top: 16px; }
  .stats-grid { grid-template-columns: minmax(0,1fr); }
  .stat { border-right: 0; border-bottom: 1px solid var(--mgs-border); }
  .card-grid, .solution-grid, .service-triad, .metrics-grid, .sector-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .card:nth-child(2) { margin-top: 0; }
  .trust-row { flex-wrap: wrap; gap: 12px 18px; }
  .shop-page-intro { align-items: stretch; flex-direction: column; }
  .shop-help-link { justify-content: center; }
  .shop-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .shop-search-wrap { width: 100%; }
  .currency-control { justify-content: space-between; }
  .category-shortcuts { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .category-shortcuts a { grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; padding: 13px; }
  .shortcut-icon { width: 40px; height: 40px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .product-visual { min-height: 125px; padding: 7px; }
  .product-visual img { height: 112px; }
  .product-card-actions { flex-direction: column; gap: 7px; padding: 0 9px 10px; }
  .product-card-actions .btn { width: 100%; min-height: 36px; font-size: .66rem; }
  .product-copy { padding: 10px; }
  .product-title-button { font-size: .82rem; overflow-wrap: anywhere; }
  .product-short { font-size: .72rem; }
  .product-detail-shell { padding: 24px 0 44px; }
  .product-detail-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .product-detail-visual { position: relative; top: auto; min-height: 240px; max-height: 340px; padding: 18px; border-radius: 14px; }
  .product-detail-visual img { max-height: 280px; }
  .product-detail-caption { left: 12px; bottom: 12px; font-size: .62rem; }
  .product-detail-copy .breadcrumb { gap: 6px; margin-bottom: 16px; font-size: .68rem; overflow-wrap: anywhere; }
  .product-detail-copy h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); overflow-wrap: anywhere; }
  .product-detail-short { font-size: .96rem; }
  .product-detail-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .product-detail-actions .btn { width: 100%; }
  .related-products { margin-top: 34px; }
  .related-products-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .related-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .related-product-grid .product-card-actions { padding: 0 8px 9px; }
  .cart-layout, .checkout-layout, .legal-layout, .account-card-grid { grid-template-columns: minmax(0,1fr); }
  .cart-row { grid-template-columns: 58px minmax(0,1fr); gap: 10px; }
  .cart-row-image { width: 58px; height: 58px; }
  .cart-controls { grid-column: 2; flex-wrap: wrap; }
  .checkout-form, .auth-panel, .cart-items-panel, .summary-card { padding: 16px; }
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .form-field.full { grid-column: auto; }
  .admin-stats, .admin-customer-list-inner { grid-template-columns: minmax(0,1fr); }
  .admin-product-grid { grid-template-columns: minmax(0,1fr); }
  .admin-product-card { grid-template-columns: 70px minmax(0,1fr); }
  .admin-product-card-image { width: 70px; height: 70px; }
  .admin-editor-top { grid-template-columns: minmax(0,1fr); }
  .admin-editor-actions { flex-wrap: wrap; }
  .admin-editor-actions .btn { min-width: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 12px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }
  .about-hero { padding: 44px 0 48px; }
}
@media (max-width: 420px) {
  .site-header .nav-wrap { gap: 5px; }
  .site-header .logo { gap: 5px; }
  .site-header .logo-image { flex-basis: 35px; width: 35px; height: 35px; }
  .site-header .brand-name { max-width: 98px; font-size: .7rem; letter-spacing: -.02em; }
  .site-header .header-utilities .utility-link { padding: 5px 6px; font-size: .61rem; }
  .site-header .basket-link { font-size: 0; gap: 0; padding-inline: 5px; }
  .site-header .basket-link .cart-count { font-size: .62rem; }
  .site-header .menu-toggle { width: 34px; height: 34px; flex-basis: 34px; font-size: 1.2rem; }
  .product-grid, .related-product-grid { gap: 8px; }
  .product-card-actions { padding-inline: 7px; }
  .product-card-actions .btn { font-size: .59rem; padding-inline: 4px; }
  .footer-grid { grid-template-columns: minmax(0,1fr); }
  .footer-brand { grid-column: auto; }
  .section-heading { margin-bottom: 28px; }
  .stats-grid .stat strong { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1050px) { .site-header .account-link { display: inline-flex !important; } }

/* MGS finishing pass: locally hosted Inter, comfortable type rhythm and polished forms. */
@font-face{font-family:Inter;src:url('../assets/fonts/inter-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fonts/inter-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fonts/inter-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fonts/inter-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--mgs-font:Inter,Arial,sans-serif}
html,body,button,input,select,textarea,h1,h2,h3,h4,.logo,.nav-links a,.btn,.eyebrow,.card-kicker,.text-link,.stat strong,.stat span,.glass-badge,.footer-title,.product-price,label{font-family:var(--mgs-font)!important}
body{font-size:16px;line-height:1.72;letter-spacing:.005em}
p,li{line-height:1.78;letter-spacing:.002em}
h1,h2,h3,h4{letter-spacing:-.018em;line-height:1.2}
h1{line-height:1.12;overflow-wrap:normal;word-break:normal}
.hero h1,.page-hero h1{max-width:14ch;line-height:1.12;letter-spacing:-.025em}
.hero-copy,.lead,.page-hero p{line-height:1.8}
.site-header .brand-name{letter-spacing:-.018em;line-height:1.35}
.nav-links a,.utility-link{letter-spacing:0;line-height:1.4}

/* Form fields: clear hierarchy, breathing room, useful hints and visible focus. */
.form-panel,.auth-panel,.checkout-form{padding:clamp(22px,3vw,36px);border:1px solid #dce4ef;border-radius:18px;background:#fff;box-shadow:0 18px 46px rgba(20,42,76,.075)}
.form-panel h2,.auth-panel h2,.checkout-form h2{margin:0 0 9px;line-height:1.25;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.025em}
.form-field{display:flex;flex-direction:column;gap:8px;min-width:0;margin-top:18px}
.form-grid{gap:7px 20px}
.form-field label,.admin-search-label{font-size:.86rem;font-weight:650;line-height:1.45;color:#253752;letter-spacing:.005em}
.form-field input,.form-field select,.form-field textarea,.site-settings-form input,.site-settings-form select,.site-settings-form textarea,.admin-search-label input{width:100%;min-height:52px;padding:13px 15px;border:1px solid #d5dfec;border-radius:11px;background:#f9fbfe;color:#15243b;font:400 .96rem/1.5 var(--mgs-font);letter-spacing:0;box-shadow:inset 0 1px 2px rgba(20,42,76,.025);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.form-field textarea,.site-settings-form textarea{min-height:132px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder,.site-settings-form input::placeholder,.site-settings-form textarea::placeholder,.admin-search-label input::placeholder{color:#8290a4;opacity:1}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover,.site-settings-form input:hover,.site-settings-form select:hover,.site-settings-form textarea:hover{border-color:#b9c9de}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.site-settings-form input:focus,.site-settings-form select:focus,.site-settings-form textarea:focus,.admin-search-label input:focus{outline:none;border-color:#2e67b7;background:#fff;box-shadow:0 0 0 4px rgba(11,70,163,.11)}
.form-field select{appearance:auto;cursor:pointer}
.form-field small,.muted-small{color:#66768c;line-height:1.65}
.form-panel .btn,.auth-panel .btn,.checkout-form .btn{min-height:52px;border-radius:10px;padding-inline:23px;font-size:.8rem;letter-spacing:.035em}
.form-status{margin-top:12px;line-height:1.65;overflow-wrap:anywhere}
.auth-panel{max-width:540px;width:100%;margin-inline:auto}
.auth-panel .form-field{margin-top:21px}
.auth-switch{margin:22px 0 0;padding-top:17px;border-top:1px solid #edf1f6;color:#61718a;font-size:.9rem;line-height:1.7}
.auth-switch a,.form-panel a:not(.btn){color:#0b46a3;font-weight:650;text-underline-offset:3px}
.notice{border-radius:11px;line-height:1.75}

/* Admin access is discoverable but remains protected by server-side role checks. */
@media(max-width:700px){
  body{font-size:15.5px;line-height:1.72}
  .container{width:min(var(--max),calc(100% - 32px))}
  .hero{background-position:center;background-size:cover;padding:48px 0 54px}
  .hero-grid{gap:26px}
  .hero h1,.page-hero h1{max-width:15ch;font-size:clamp(2.15rem,9.5vw,3.35rem);line-height:1.13;letter-spacing:-.025em}
  .hero-copy,.lead,.page-hero p{font-size:.98rem;line-height:1.8}
  .actions{gap:10px;margin-top:25px}
  .actions .btn{min-height:50px;padding-inline:17px;font-size:.73rem}
  .form-panel,.auth-panel,.checkout-form{padding:22px 18px;border-radius:15px}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .form-field.full{grid-column:auto}
  .form-field{margin-top:16px}
  .form-field input,.form-field select,.form-field textarea{min-height:50px;font-size:16px}
  .form-field textarea{min-height:116px}
  .nav-wrap{gap:10px}
  .site-header .logo-image{width:50px;height:50px;flex-basis:50px}
  .site-header .brand-name{font-size:clamp(.86rem,3.6vw,1.05rem);max-width:180px}
}

/* Shop portfolio banner: compact mixed image of all MGS business categories. */
.shop-portfolio-banner { position:relative; margin:0 0 34px; border:1px solid var(--mgs-border); border-radius:16px; overflow:hidden; background:#f3f6fa; box-shadow:0 8px 24px rgba(17,43,78,.06); }
.shop-portfolio-banner img { display:block; width:100%; height:clamp(170px,22vw,270px); object-fit:cover; }
.shop-portfolio-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; background:#fff; border-top:1px solid var(--mgs-border); }
.shop-portfolio-caption span { color:var(--mgs-blue); font-size:.73rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.shop-portfolio-caption strong { color:var(--mgs-ink); font-size:.83rem; font-weight:650; }
@media(max-width:640px) { .shop-portfolio-banner { margin-bottom:25px; } .shop-portfolio-banner img { height:180px; } .shop-portfolio-caption { align-items:flex-start; flex-direction:column; gap:5px; padding:12px 14px; } .shop-portfolio-caption strong { font-size:.75rem; line-height:1.55; } }

/* Director revision: compact category-first Shop page and clearly labelled storage imagery. */
.shop-landing-hero { padding: 50px 0 46px; color: #fff; background: linear-gradient(125deg,#0d294d 0%,#143f73 55%,#e7f0fb 55%,#f4f8fd 100%); }
.shop-landing-layout { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: center; gap: clamp(26px,4vw,54px); }
.shop-landing-copy { min-width: 0; }
.shop-landing-copy .breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; color:#d0def0; font-size:.75rem; }
.shop-landing-copy .breadcrumb a { color:#fff; }
.shop-landing-copy .eyebrow { color:#a9ccff; }
.shop-landing-copy h1 { margin:12px 0 16px; max-width:610px; color:#fff; font-size:clamp(2.25rem,4.2vw,3.8rem); line-height:1.06; letter-spacing:-.05em; }
.shop-landing-copy p { max-width:540px; margin:0; color:#d9e7f8; font-size:.98rem; line-height:1.75; }
.shop-landing-actions { margin-top:24px; }
.shop-landing-actions .btn-secondary { border-color:rgba(255,255,255,.42); color:#fff; }
.shop-landing-actions .btn-secondary:hover { color:#fff; }
.shop-landing-visual { position:relative; min-width:0; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:18px; background:#fff; box-shadow:0 22px 45px rgba(13,35,66,.18); }
.shop-landing-visual img { display:block; width:100%; aspect-ratio:1.42 / 1; max-height:430px; object-fit:cover; }
.shop-landing-visual figcaption { display:flex; align-items:center; gap:13px; padding:14px 17px; color:#162c49; background:rgba(255,255,255,.97); }
.shop-landing-visual figcaption span { display:grid; width:42px; height:42px; place-items:center; flex:0 0 42px; border-radius:9px; color:#fff; background:#0b46a3; font-size:.76rem; font-weight:900; letter-spacing:.04em; }
.shop-landing-visual figcaption strong { font-size:.74rem; line-height:1.5; }
.shop-category-section { padding:54px 0 62px; background:#f7f9fc; }
.shop-category-heading { max-width:720px; margin-bottom:24px; }
.shop-category-heading h2 { margin:10px 0 8px; color:#152943; font-size:clamp(1.8rem,3vw,2.55rem); line-height:1.15; }
.shop-category-heading p { margin:0; color:#66768c; font-size:.91rem; }
.shop-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:1040px; }
.shop-category-card { position:relative; display:grid; grid-template-columns:45px 54px minmax(0,1fr); align-items:center; gap:17px; min-height:160px; padding:24px; border:1px solid #dce6f2; border-radius:14px; color:#192d47; background:#fff; box-shadow:0 8px 25px rgba(16,43,80,.045); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.shop-category-card:hover { transform:translateY(-3px); border-color:#9dbce6; box-shadow:0 16px 32px rgba(16,43,80,.09); }
.shop-category-number { align-self:start; color:#6d88ac; font-size:.72rem; font-weight:850; letter-spacing:.08em; }
.shop-category-icon { display:grid; width:54px; height:54px; place-items:center; border-radius:12px; color:#0b46a3; background:#eef5ff; font-size:1.5rem; }
.shop-category-content { display:grid; gap:7px; }
.shop-category-content strong { font-size:1.08rem; line-height:1.28; }
.shop-category-content small { color:#64748b; font-size:.8rem; line-height:1.55; }
.shop-category-content b { display:flex; align-items:center; gap:8px; margin-top:3px; color:#0b46a3; font-size:.74rem; }
.shop-category-content b span { font-size:1rem; }
.shop-category-support { margin:24px 0 0; color:#64748b; font-size:.84rem; }
.shop-category-support a,.category-switch-links a { color:#0b46a3; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.category-catalogue-page { padding-top:34px; }
.category-catalogue-page .shop-section-heading { margin-top:26px; }
.category-catalogue-page .shop-toolbar { margin-bottom:28px; }
.category-product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.category-switch-links { display:flex; justify-content:space-between; gap:20px; margin-top:28px; font-size:.82rem; }
.product-visual { position:relative; }
.product-visual .product-badge { z-index:2; }
.product-image-model { position:absolute; right:8px; bottom:8px; left:8px; z-index:2; overflow:hidden; border:1px solid rgba(255,255,255,.26); border-radius:7px; padding:7px 8px; color:#fff; background:linear-gradient(100deg,rgba(7,32,65,.94),rgba(11,70,163,.86)); font-size:.67rem; font-weight:850; line-height:1.25; letter-spacing:.035em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }

/* Slim, high-contrast scrolling footer ticker; known offices and operating markets are distinguished. */
.office-ticker { width:100%; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.12); border-top:1px solid rgba(255,255,255,.08); background:#0d2e55; color:#dceaff; white-space:nowrap; }
.office-ticker-track { display:flex; width:max-content; align-items:center; animation:mgs-office-ticker 38s linear infinite; }
.office-ticker-track span { position:relative; display:inline-flex; align-items:center; min-height:43px; padding:0 24px; color:#dceaff; font-size:.67rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }
.office-ticker-track span::after { position:absolute; right:0; width:5px; height:5px; border-radius:50%; background:#6fa7ff; content:""; }
.office-ticker:hover .office-ticker-track { animation-play-state:paused; }
@keyframes mgs-office-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .office-ticker-track { animation:none; } }

/* Services absorbs the former Ventures page and keeps the key trade-assurance content compact. */
.services-page .page-hero { padding:30px 0 27px; }
.services-page .page-hero h1 { max-width:850px; margin:8px 0 9px; font-size:clamp(2rem,3.8vw,3.15rem); line-height:1.08; }
.services-page .section { padding:30px 0 36px; }
.services-page .solution-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.services-page .solution-card { border-radius:12px; }
.services-page .solution-image { min-height:145px; height:145px; }
.services-page .solution-copy { padding:19px; }
.services-page .solution-copy h2 { margin:9px 0 8px; font-size:1.3rem; line-height:1.2; }
.services-page .solution-copy p { margin-bottom:10px; font-size:.82rem; line-height:1.55; }
.services-page .solution-copy ul { gap:5px; margin-top:10px; font-size:.77rem; line-height:1.45; }
.services-page .solution-copy .btn { margin-top:14px; min-height:40px; padding:0 15px; font-size:.68rem; }
.services-page .dark-section { padding:26px 0; background:#173f75; }
.services-page .dark-section .section-heading { margin:0 auto; }
.services-page .dark-section h2 { margin:8px 0 16px; font-size:clamp(1.45rem,2.6vw,2.1rem); }
.trade-assurance-strip { padding:34px 0 38px; background:#f0f5fb; border-top:1px solid #dfe8f3; border-bottom:1px solid #dfe8f3; }
.trade-assurance-intro { max-width:830px; margin:0 auto 22px; text-align:center; }
.trade-assurance-intro .eyebrow { justify-content:center; }
.trade-assurance-intro h2 { margin:9px 0 10px; color:#132b4a; font-size:clamp(1.55rem,2.6vw,2.15rem); line-height:1.15; }
.trade-assurance-intro p { margin:0; color:#4e617a; font-size:.88rem; line-height:1.65; }
.trade-assurance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.trade-assurance-grid article { display:grid; grid-template-columns:35px minmax(0,1fr); align-content:start; column-gap:12px; padding:17px; border:1px solid #dbe5f1; border-radius:10px; background:#fff; }
.trade-assurance-mark { display:grid; grid-row:span 2; place-items:center; width:34px; height:34px; border-radius:8px; color:#fff; background:#0b46a3; font-size:.65rem; font-weight:850; }
.trade-assurance-grid h3 { margin:1px 0 6px; color:#16385f; font-size:.91rem; line-height:1.25; }
.trade-assurance-grid p { grid-column:2; margin:0; color:#5c6d81; font-size:.75rem; line-height:1.55; }

/* Use MGS blue/white palette while reducing the long dark field on About Us. */
.about-page .about-cover { padding-bottom:0; }
.about-page .about-cover-grid { padding-top:34px; padding-bottom:32px; }
.about-page .about-cover-photo-wrap { min-height:390px; }
.about-page .about-global { color:#18314f; background:#eaf2fb; padding-top:54px; }
.about-page .about-global-title h2 { color:#102b50; }
.about-page .about-global-lead { color:#4c607a; }
.about-page .about-global-lead strong { color:#173f75; }
.about-page .about-global-detail { border-top-color:#cfdeef; }
.about-page .about-global-detail h3 { color:#173f75; }
.about-page .about-global-detail p { color:#536780; }
.about-page .about-global-detail strong { color:#153d70; }
.about-page .about-detail-number { color:#1e5aa6; }
.about-page .about-global-image { height:160px; border-top-color:#2e74c8; }
.about-page .about-advantage { padding-top:58px; padding-bottom:62px; }
.about-page .about-partner { padding-top:42px; padding-bottom:46px; }

@media (max-width:1000px) {
  .shop-landing-layout { grid-template-columns:1fr 1fr; gap:22px; }
  .category-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .services-page .solution-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .services-page .solution-card:last-child { grid-column:span 2; }
  .services-page .solution-card:last-child .solution-image { height:160px; }
}
@media (max-width:680px) {
  .shop-landing-hero { padding:27px 0 30px; background:linear-gradient(165deg,#0d294d 0%,#143f73 52%,#f4f8fd 52%,#f4f8fd 100%); }
  .shop-landing-layout { grid-template-columns:1fr; gap:22px; }
  .shop-landing-copy .breadcrumb { margin-bottom:17px; }
  .shop-landing-copy h1 { font-size:clamp(2rem,9vw,2.8rem); }
  .shop-landing-copy p { font-size:.9rem; }
  .shop-landing-actions { display:grid; grid-template-columns:1fr; }
  .shop-landing-visual img { aspect-ratio:1.45 / 1; max-height:320px; }
  .shop-landing-visual figcaption { padding:11px 13px; }
  .shop-landing-visual figcaption strong { font-size:.66rem; }
  .shop-category-section { padding:36px 0 42px; }
  .shop-category-grid { grid-template-columns:1fr; gap:12px; }
  .shop-category-card { grid-template-columns:24px 45px minmax(0,1fr); gap:10px; min-height:132px; padding:17px 14px; }
  .shop-category-icon { width:44px; height:44px; }
  .shop-category-content strong { font-size:.98rem; }
  .shop-category-content small { font-size:.75rem; }
  .category-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .category-product-grid .product-card-actions { gap:6px; padding:0 9px 11px; }
  .category-product-grid .product-card-actions .btn { font-size:.55rem; }
  .product-image-model { left:5px; right:5px; bottom:5px; font-size:.56rem; padding:6px 4px; }
  .category-switch-links { flex-direction:column; gap:10px; }
  .services-page .page-hero { padding:24px 0 19px; }
  .services-page .section { padding:22px 0 26px; }
  .services-page .solution-grid { grid-template-columns:1fr; gap:12px; }
  .services-page .solution-card:last-child { grid-column:auto; }
  .services-page .solution-image,.services-page .solution-card:last-child .solution-image { height:130px; min-height:130px; }
  .services-page .solution-copy { padding:16px; }
  .services-page .solution-copy ul { grid-template-columns:1fr; }
  .trade-assurance-strip { padding:27px 0; }
  .trade-assurance-intro { text-align:left; }
  .trade-assurance-intro .eyebrow { justify-content:flex-start; }
  .trade-assurance-grid { grid-template-columns:1fr; gap:10px; }
  .trade-assurance-grid article { padding:14px; }
  .services-page .dark-section { padding:22px 0; }
  .office-ticker-track span { min-height:38px; padding:0 17px; font-size:.61rem; }
  .about-page .about-cover-photo-wrap { min-height:300px; }
  .about-page .about-global { padding-top:38px; }
  .about-page .about-global-image { height:130px; }
}
.trade-commitment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:13px; }
.trade-commitment-grid article { padding:14px 16px; border-left:3px solid #83b4f2; border-radius:0 8px 8px 0; background:#fff; }
.trade-commitment-grid h3 { margin:0 0 5px; color:#173f75; font-size:.82rem; line-height:1.25; }
.trade-commitment-grid p { margin:0; color:#5c6d81; font-size:.72rem; line-height:1.52; }
.site-footer { padding-top:0 !important; }
.site-footer > .office-ticker { margin-bottom:24px; }
@media(max-width:680px) { .trade-commitment-grid { grid-template-columns:1fr; gap:9px; } .trade-commitment-grid article { padding:12px 14px; } .site-footer > .office-ticker { margin-bottom:19px; } }


/* Customer account dashboard — clear hierarchy, balanced cards and responsive actions. */
.account-page-hero { padding-top: clamp(44px, 6vw, 70px); padding-bottom: clamp(34px, 4vw, 48px); }
.account-section { padding-top: clamp(24px, 4vw, 42px); }
.account-dashboard { max-width: 1180px; }
.account-overview { position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px; overflow:hidden; isolation:isolate; padding:clamp(23px, 3vw, 36px); border:1px solid #d9e4f2; border-radius:20px; background:linear-gradient(115deg,#fff 0%,#f7faff 68%,#edf4ff 100%); box-shadow:0 15px 40px rgba(17,45,84,.065); }
.account-overview:after { position:absolute; z-index:-1; top:-96px; right:18%; width:220px; height:220px; border-radius:50%; background:rgba(47,111,198,.055); content:""; }
.account-overview-main { display:flex; align-items:center; gap:18px; min-width:0; }
.account-status-mark { display:grid; flex:0 0 62px; width:62px; height:62px; place-items:center; border-radius:17px; background:linear-gradient(145deg,#144d9c,#2d75cc); color:#fff; box-shadow:0 8px 20px rgba(16,73,151,.2); font-size:1.8rem; font-weight:800; letter-spacing:-.07em; }
.account-overview-copy { min-width:0; }
.account-overview-copy .eyebrow { display:block; margin:0 0 7px; color:#0b46a3; font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.account-overview h2 { margin:0 0 5px; color:#142540; font-size:clamp(1.35rem,2.4vw,1.9rem); letter-spacing:-.035em; line-height:1.2; overflow-wrap:anywhere; }
.account-overview p { margin:0; max-width:560px; color:#63748b; font-size:.9rem; }
.account-overview-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; flex:0 0 auto; }
.account-overview-actions .btn { min-height:44px; padding:0 15px; border-radius:9px; white-space:nowrap; }
.account-section-heading { display:flex; align-items:end; justify-content:space-between; gap:22px; margin:clamp(34px,5vw,54px) 0 20px; }
.account-section-heading .eyebrow { display:block; margin-bottom:8px; color:#0b46a3; font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.account-section-heading h2 { margin:0; color:#142540; font-size:clamp(1.35rem,2.1vw,1.7rem); line-height:1.2; letter-spacing:-.03em; }
.account-section-heading p { max-width:410px; margin:0; color:#68798f; font-size:.87rem; line-height:1.65; }
.account-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-top:0; }
.account-card { position:relative; display:flex; flex-direction:column; min-height:225px; padding:23px 23px 20px; border-color:#dfe7f1; border-radius:15px; box-shadow:0 5px 18px rgba(19,42,74,.035); text-decoration:none; }
.account-card:before { position:absolute; top:-1px; left:22px; right:22px; height:3px; border-radius:0 0 3px 3px; background:#2e67b7; content:""; transform:scaleX(.25); transform-origin:left; opacity:0; transition:transform .2s ease,opacity .2s ease; }
.account-card:hover:before,.account-card:focus-visible:before { transform:scaleX(1); opacity:1; }
.account-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:21px; }
.account-card-number { color:#95a4b8; font-size:.72rem; font-weight:800; letter-spacing:.09em; }
.account-icon { width:45px; height:45px; margin:0; border:1px solid #dbe8fb; border-radius:13px; background:#eff5ff; color:#0b46a3; font-size:1.35rem; font-weight:700; }
.account-card h3 { margin:0 0 8px; color:#172a46; font-size:1.03rem; font-weight:750; letter-spacing:-.02em; }
.account-card p { margin:0 0 18px; color:#697b92; font-size:.84rem; line-height:1.68; }
.account-card-link { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid #edf1f6; color:#0b46a3; font-size:.78rem; font-weight:800; }
.account-demo-notice { margin-top:26px; padding:15px 18px; border:1px solid #d5e2f4; border-left:4px solid #2e67b7; border-radius:10px; background:#f7faff; color:#4f637e; font-size:.8rem; }
@media(max-width:980px){ .account-overview { align-items:flex-start; flex-direction:column; } .account-overview-actions { justify-content:flex-start; } .account-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .account-overview { padding:21px; gap:21px; border-radius:15px; } .account-overview-main { align-items:flex-start; gap:13px; } .account-status-mark { flex-basis:48px; width:48px; height:48px; border-radius:13px; font-size:1.45rem; } .account-overview h2 { font-size:1.35rem; } .account-overview-actions { display:grid; width:100%; grid-template-columns:1fr 1fr; } .account-overview-actions .btn { width:100%; min-width:0; padding-inline:8px; font-size:.75rem; } .account-section-heading { display:block; margin-top:36px; } .account-section-heading p { margin-top:9px; } .account-card-grid { grid-template-columns:minmax(0,1fr); gap:13px; } .account-card { min-height:0; padding:20px; } .account-card-top { margin-bottom:15px; } }
@media(prefers-reduced-motion:reduce){ .account-card:before { transition:none; } }

/* Keep controls marked hidden hidden even when shared button styles are applied. */
[hidden] { display: none !important; }


/* =====================================================================
   DIRECTOR REVIEW — CONSISTENT BRAND, RESPONSIVE CHROME & HOME CONTENT
   Put final cross-page refinements here so they override earlier legacy
   rules. Keep this block intact for easy future maintenance.
   ===================================================================== */
:root { --mgs-brand-blue: #0b46a3; --mgs-brand-blue-dark: #073775; }
.site-header { background: rgba(255,255,255,.98) !important; border-bottom: 1px solid #dbe4f1; }
.site-header .nav-wrap { min-height: 100px; gap: clamp(12px,1.25vw,20px); }
.site-header .logo { display:flex; align-items:center; flex: 0 1 325px; min-width:0; gap:15px; }
.site-header .logo-image { display:block; flex:0 0 78px; width:78px; height:78px; object-fit:contain; object-position:center; padding:0; background:transparent; border-radius:0; }
.site-header .brand-name { display:block; max-width:none; color:#17253d !important; white-space:normal; font-size:clamp(1.1rem,1.45vw,1.38rem); font-weight:800; line-height:1.18; letter-spacing:-.035em; }
.site-header .brand-name .brand-initial { color:var(--mgs-brand-blue) !important; }
.site-header .nav-links { display:flex; flex:1 1 auto; align-items:center; justify-content:center; flex-wrap:nowrap; gap:3px; min-width:0; }
.site-header .nav-links a { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:11px clamp(8px,.72vw,12px); color:#263449; border:0; border-radius:8px; font-size:clamp(.7rem,.78vw,.77rem); line-height:1.35; font-weight:750; letter-spacing:0; }
.site-header .nav-links a:hover, .site-header .nav-links a.active { color:var(--mgs-brand-blue); background:#edf4ff; transform:translateY(-1px); }
.site-header .header-utilities { display:flex; align-items:center; justify-content:flex-end; flex:0 0 auto; gap:8px; min-width:max-content; }
.site-header .header-utilities .utility-link { display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto; gap:6px; min-height:42px; max-width:none; padding:8px 12px; white-space:nowrap; overflow:visible; font-size:.76rem; line-height:1.25; }
.site-header .basket-link .cart-count { flex:0 0 auto; }
.site-header .menu-toggle { display:none; flex:0 0 42px; width:42px; height:42px; place-items:center; border:1px solid #dbe4f1; border-radius:9px; background:#fff; }
/* The mark in the supplied SVG is already transparent and contains no "MGS UK" tagline. */
.site-footer { padding:26px 0 14px !important; background:#101a2b !important; color:#d4deeb; }
.site-footer .footer-grid { gap:22px; padding-bottom:18px; }
.site-footer .footer-brand .logo { display:flex; align-items:center; gap:12px; color:#fff; }
.site-footer .logo-image { flex:0 0 60px; width:60px; height:60px; padding:0; border:0; border-radius:0; background:transparent; object-fit:contain; }
.site-footer .brand-name { display:block; max-width:260px; color:#fff !important; font-size:1.08rem; font-weight:800; line-height:1.22; white-space:normal; letter-spacing:-.02em; }
.site-footer .brand-name .brand-initial { color:#75adff !important; }
.site-footer .footer-brand p { max-width:300px; margin-top:10px !important; color:#c4d0df; line-height:1.65; }
.site-footer .footer-title { color:#fff; }
.site-footer .footer-links a { overflow-wrap:anywhere; }
.site-footer .footer-bottom { display:flex; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid rgba(226,232,240,.14); color:#b9c6d8; }
/* Brand initial colour is scoped to the brand lockup and headings only. */
.brand-initial { color:inherit !important; }
.site-header .brand-name .brand-initial { color:var(--mgs-brand-blue) !important; }
.site-footer .brand-name .brand-initial { color:#75adff !important; }
.about-page h1 .brand-initial, .about-page h2 .brand-initial, .about-page h3 .brand-initial { color:var(--mgs-brand-blue) !important; }
/* Homepage approved layout */
.mgs-home-hero { padding:48px 0 54px; background:linear-gradient(110deg,#0b203d 0%,#123c6b 58%,#1a4b7e 100%); }
.mgs-home-hero .hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(28px,4vw,58px); }
.mgs-home-hero .hero-copy-block { max-width:690px; }
.mgs-home-hero h1 { max-width:14ch; font-size:clamp(2.45rem,4.3vw,4.1rem); line-height:1.06; }
.mgs-home-hero .hero-copy { max-width:650px; color:#eef4fd; font-size:1.01rem; }
.mgs-home-hero .hero-photo { min-height:340px; border-radius:16px; }
.mgs-home-hero .hero-photo img { display:block; width:100%; height:100%; min-height:340px; max-height:400px; object-fit:cover; }
.mgs-home-hero .glass-badge { max-width:calc(100% - 28px); }
.mgs-home .section-heading { margin-bottom:28px; }
.mgs-home .section-heading h2 { max-width:24ch; font-size:clamp(1.95rem,3.2vw,3rem); }
.mgs-portfolio-section { background:#f6f8fc; }
.mgs-portfolio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.mgs-portfolio-tile { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #dfe6f0; border-radius:14px; background:#fff; box-shadow:0 7px 22px rgba(18,39,70,.045); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.mgs-portfolio-tile:hover { transform:translateY(-3px); border-color:#b9cdec; box-shadow:0 14px 32px rgba(18,39,70,.09); }
.mgs-portfolio-image { display:grid; place-items:center; height:190px; padding:13px; background:#fff; border-bottom:1px solid #eaf0f7; }
.mgs-portfolio-image img { display:block; width:100%; height:100%; object-fit:contain; }
.mgs-portfolio-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:18px; }
.mgs-portfolio-copy h3 { margin:7px 0 8px; color:#172b47; font-size:1.02rem; line-height:1.35; }
.mgs-portfolio-copy p { margin:0 0 16px; color:#5d6e83; font-size:.84rem; line-height:1.7; }
.mgs-portfolio-copy .text-link { margin-top:auto; color:var(--mgs-brand-blue); font-size:.78rem; font-weight:800; }
.mgs-network-section { background:#fff; }
.mgs-network-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.mgs-network-card { display:flex; flex-direction:column; gap:12px; min-width:0; padding:24px; border:1px solid #dfe6f0; border-radius:14px; background:#fff; }
.mgs-network-number { color:var(--mgs-brand-blue); font-size:.73rem; font-weight:850; letter-spacing:.12em; }
.mgs-network-card h3 { margin:0 0 6px; color:#172b47; font-size:1.1rem; }
.mgs-network-card p { margin:0; color:#586a80; font-size:.86rem; line-height:1.72; }
.mgs-network-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:7px; }
.mgs-network-tags span { padding:5px 9px; border-radius:999px; color:#234d86; background:#edf4ff; font-size:.68rem; font-weight:750; }
.mgs-region-list { display:grid; gap:6px; margin-top:auto; padding-top:8px; }
.mgs-region-list p { font-size:.78rem; line-height:1.6; }
.mgs-region-list strong { color:#172b47; }
.mgs-advantage-section { background:#f6f8fc; }
.mgs-advantage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.mgs-advantage-grid article { min-width:0; padding:25px; border:1px solid #dfe6f0; border-radius:14px; background:#fff; }
.mgs-advantage-grid article>span { color:var(--mgs-brand-blue); font-size:.74rem; font-weight:850; letter-spacing:.1em; }
.mgs-advantage-grid h3 { margin:12px 0 8px; color:#172b47; font-size:1.12rem; }
.mgs-advantage-grid p { margin:0; color:#5d6e83; font-size:.88rem; line-height:1.75; }
.mgs-home-cta { padding-top:58px; padding-bottom:58px; background:#102b50; color:#fff; }
.mgs-home-cta-inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); align-items:center; gap:36px; }
.mgs-home-cta .eyebrow { color:#a9cafa; }
.mgs-home-cta h2 { margin:10px 0 12px; color:#fff; font-size:clamp(1.9rem,3.2vw,2.7rem); }
.mgs-home-cta p { max-width:760px; margin:0; color:#d6e2f2; font-size:.94rem; }
.mgs-home-cta .actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.mgs-home-cta .btn-secondary { color:#fff; border-color:#6d87a9; background:transparent; }
.mgs-home-cta .btn-secondary:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.08); }
/* Shop landing image is supporting artwork, not a second hero takeover. */
.shop-landing-hero { padding:28px 0 25px; background:linear-gradient(115deg,#0d294d 0%,#143f73 57%,#f4f8fd 57%,#f4f8fd 100%); }
.shop-landing-layout { grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:clamp(22px,3vw,42px); }
.shop-landing-visual { max-width:520px; justify-self:end; width:100%; border-radius:14px; }
.shop-landing-visual img { width:100%; aspect-ratio:1.7/1; max-height:260px; object-fit:cover; }
.shop-category-section { padding-top:36px; padding-bottom:52px; }
/* About Us: lighter and less visually heavy while retaining clear brand contrast. */
.about-page .about-brand-center { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; margin:24px 0 18px; text-align:center; }
.about-page .about-brand-center img { display:block; width:118px; height:80px; object-fit:contain; }
.about-page .about-brand-center>span { color:#172b47; font-size:.86rem; font-weight:800; }
/* Header keeps its generous brand sizing on desktop; tablet/mobile have a two-row utility layout. */
@media (max-width:1240px) and (min-width:1101px) {
 .site-header .logo { flex-basis:290px; gap:12px; }
 .site-header .logo-image { width:70px; height:70px; flex-basis:70px; }
 .site-header .brand-name { font-size:1.13rem; }
 .site-header .nav-links a { padding-inline:8px; font-size:.69rem; }
 .site-header .header-utilities .utility-link { padding-inline:9px; font-size:.7rem; }
}
@media (max-width:1100px) {
 .site-header .nav-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand menu" "utilities utilities"; gap:9px 12px; min-height:0; padding-top:10px; padding-bottom:10px; }
 .site-header .logo { grid-area:brand; width:auto; max-width:100%; min-width:0; gap:12px; }
 .site-header .logo-image { width:64px; height:64px; flex:0 0 64px; }
 .site-header .brand-name { max-width:none; font-size:clamp(1rem,2.2vw,1.25rem); white-space:normal; }
 .site-header .menu-toggle { display:inline-grid; grid-area:menu; }
 .site-header .nav-links { display:grid; grid-area:unset; position:absolute; top:calc(100% + 1px); right:0; left:0; z-index:1001; width:100%; max-height:min(75vh,520px); overflow-y:auto; justify-content:stretch; gap:3px; padding:10px; border:1px solid #dfe7f1; border-radius:0 0 12px 12px; background:#fff; box-shadow:0 16px 32px rgba(16,32,55,.16); opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .18s ease,transform .18s ease; }
 .site-header .nav-links.open { opacity:1; pointer-events:auto; transform:translateY(0); }
 .site-header .nav-links a { display:flex; justify-content:flex-start; white-space:normal; padding:12px; font-size:.82rem; }
 .site-header .header-utilities { grid-area:utilities; width:100%; justify-content:flex-end; margin:0; }
 .site-header .header-utilities .utility-link { min-height:40px; padding:7px 12px; font-size:.76rem; }
 .mgs-home-hero { padding:40px 0 46px; }
 .mgs-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mgs-network-grid { grid-template-columns:1fr; }
 .shop-landing-visual { max-width:460px; }
}
@media (max-width:700px) {
 .mgs-home-hero { padding:32px 0 36px; }
 .mgs-home-hero .hero-grid { grid-template-columns:minmax(0,1fr); gap:22px; }
 .mgs-home-hero h1 { max-width:100%; font-size:clamp(2rem,8vw,3rem); }
 .mgs-home-hero .hero-photo, .mgs-home-hero .hero-photo img { min-height:210px; max-height:260px; }
 .mgs-home .section-heading h2 { font-size:clamp(1.75rem,7vw,2.5rem); }
 .mgs-portfolio-grid, .mgs-advantage-grid { grid-template-columns:minmax(0,1fr); }
 .mgs-portfolio-image { height:210px; }
 .mgs-home-cta-inner { grid-template-columns:minmax(0,1fr); gap:20px; }
 .mgs-home-cta .actions { justify-content:stretch; }
 .mgs-home-cta .actions .btn { flex:1 1 100%; }
 .shop-landing-hero { padding:24px 0; background:linear-gradient(180deg,#0d294d 0%,#143f73 55%,#f4f8fd 55%,#f4f8fd 100%); }
 .shop-landing-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
 .shop-landing-visual { justify-self:start; max-width:520px; }
 .shop-landing-visual img { aspect-ratio:1.75/1; max-height:220px; }
 .about-page .about-cover { padding:20px 20px 0; background:#edf3fa; color:#172b47; }
 .about-page .about-cover-top { border-bottom-color:#d6e2f0; }
 .about-page .about-cover-top .about-kicker, .about-page .about-kicker { color:#0b46a3; }
 .about-page .about-cover-grid { grid-template-columns:minmax(0,1fr); gap:22px; padding:30px 0 32px; }
 .about-page .about-cover-copy h1 { font-size:clamp(2.25rem,10vw,3.4rem); color:#172b47; }
 .about-page .about-cover-copy h1 em { color:#0b46a3; }
 .about-page .about-lead, .about-page .about-intro-support { color:#41536b; }
 .about-page .about-lead strong { color:#172b47; }
 .about-page .about-cover-photo-wrap { min-height:260px; }
 .about-page .about-cover-link { color:#172b47; border-bottom-color:#0b46a3; }
 .about-page .about-cover-link span { color:#0b46a3; }
}
@media (max-width:420px) {
 .site-header .nav-wrap { grid-template-columns:minmax(0,1fr) 38px; gap:8px; }
 .site-header .logo { gap:8px; }
 .site-header .logo-image { flex:0 0 54px; width:54px; height:54px; }
 .site-header .brand-name { font-size:.94rem; max-width:none; line-height:1.17; }
 .site-header .menu-toggle { width:38px; height:38px; flex-basis:38px; }
 .site-header .header-utilities { justify-content:stretch; gap:8px; }
 .site-header .header-utilities .utility-link { flex:1 1 0; min-width:0; white-space:nowrap; font-size:.76rem; }
 .site-footer .logo-image { flex-basis:54px; width:54px; height:54px; }
 .site-footer .brand-name { font-size:1rem; }
}


/* =========================================================
   FINAL DIRECTOR REVIEW FIXES (2026-10-11)
   Keep this block at the bottom so these scoped corrections
   win over older page-specific rules above.
   ========================================================= */

/* Prevent portrait product artwork (especially software boxes) from spilling
   out of the fixed portfolio image area and covering card labels or copy. */
.mgs-portfolio-tile { isolation: isolate; }
.mgs-portfolio-image {
  position: relative;
  display: block;
  flex: 0 0 176px;
  width: 100%;
  height: 176px;
  min-height: 176px;
  max-height: 176px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.mgs-portfolio-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  max-width: 100%;
  padding: 10px;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
}

/* Home hero uses the locally generated full-portfolio collage. Keep it cropped
   neatly within its frame at desktop and mobile sizes. */
.mgs-home-hero .hero-photo { overflow: hidden; }
.mgs-home-hero .hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* The Shop master image should support the copy, not dominate the landing page. */
.shop-landing-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1.9 / 1;
  height: auto;
  max-height: 215px;
  object-fit: cover;
}

/* Partner heading: black/dark brand wording, M/G/S initials in MGS blue. */
.about-page .about-partner-content h2,
.about-page .about-partner-content h2 em {
  color: #111827 !important;
  font-style: normal;
}
.about-page .about-partner-content h2 .brand-initial {
  color: #0b46a3 !important;
}
.about-page .about-brand-center { gap: 0; }
.about-page .about-brand-center img { width: 118px; height: 80px; object-fit: contain; }

@media (max-width: 700px) {
  .mgs-portfolio-image {
    flex-basis: 188px;
    height: 188px;
    min-height: 188px;
    max-height: 188px;
  }
  .shop-landing-visual img {
    aspect-ratio: 1.85 / 1;
    max-height: 175px;
  }
}


/* ================================================================
   MGS consistent responsive polish — shared across all site pages
   ================================================================ */
:root { --mgs-blue: #0b46a3; }
/* The registered name must never wrap; reduce its size before allowing a second line. */
.site-header .logo { flex: 0 0 auto; min-width: 0; white-space: nowrap; flex-wrap: nowrap; }
.site-header .brand-name {
  display: inline-block;
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none !important;
  color: #000 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  line-height: 1.15 !important;
}
.brand-spelling { color:#000 !important; }
.brand-spelling .brand-initial,
.brand-name .brand-initial,
.site-footer .brand-name .brand-initial { color:#0b46a3 !important; }
.logo-image,
.site-header .logo-image,
.site-footer .logo-image {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* A moving glass surface for the location ticker, now placed after the page intro. */
.office-ticker { position: relative; z-index: 2; margin: 0 !important; background:rgba(9,42,82,.94); border-top:1px solid rgba(255,255,255,.24); border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 8px 25px rgba(20,55,100,.09); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.office-ticker-track span { text-shadow:0 1px 6px rgba(255,255,255,.08); }
/* Required one-line headings. Fluid type keeps the lines intact on narrow screens. */
.mgs-home-hero .home-hero-title {
  display: block;
  max-width: none !important;
  margin: 17px 0 19px;
  font-size: clamp(1.65rem, 3.2vw, 2.85rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.045em !important;
}
.mgs-home-hero .home-hero-title span { display:block; white-space:nowrap; opacity:1; animation:mgs-title-fade .68s ease-out both; }
.mgs-home-hero .home-hero-title span:first-child { animation-delay:.08s; }
.mgs-home-hero .home-hero-title span:nth-child(2) { animation-delay:.28s; color:#fff; }
.mgs-home-hero .home-hero-title span:nth-child(2)::first-letter { color:inherit; }
@keyframes mgs-title-fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.mgs-portfolio-section .section-heading h2 {
  width:max-content; max-width:100%; white-space:nowrap;
  font-size:clamp(.84rem, 2.0vw, 1.65rem) !important;
  letter-spacing:-.045em;
}
.mgs-home .mgs-network-heading h2,
.mgs-home h2.connected-network-heading {
  width:max-content; max-width:100%; white-space:nowrap;
  font-size:clamp(.85rem, 2.25vw, 1.9rem) !important;
  letter-spacing:-.045em;
}
.services-page .page-hero h1.services-one-line-title {
  max-width:none !important; width:max-content; max-width:100% !important;
  white-space:nowrap; font-size:clamp(.82rem, 3.3vw, 3.05rem) !important;
  letter-spacing:-.045em;
}
.contact-one-line-title, .contact-one-line-subtitle, .contact-detail-one-line {
  white-space:nowrap; max-width:none !important; width:max-content; max-width:100% !important;
  letter-spacing:-.04em;
}
.contact-one-line-title { font-size:clamp(.9rem,3.15vw,2.7rem) !important; }
.contact-one-line-subtitle { font-size:clamp(.95rem,2.5vw,1.9rem) !important; }
.contact-detail-one-line { font-size:clamp(.78rem,2.15vw,1.7rem) !important; }
.contact-honeypot { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important; }
/* Frosted cards with a restrained sweep/flash on hover. */
.mgs-portfolio-tile, .about-portfolio-card, .solution-card, .sector-card,
.metric-card, .shop-category-card, .mgs-advantage-grid article, .card,
.contact-channel-panel, .form-panel, .product-card, .category-card {
  background-color:rgba(255,255,255,.84);
  border-color:rgba(185,205,232,.76);
  box-shadow:0 10px 28px rgba(16,45,85,.075);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease, background-color .26s ease;
}
.mgs-portfolio-tile, .about-portfolio-card, .solution-card, .sector-card,
.metric-card, .mgs-advantage-grid article, .card { position:relative; isolation:isolate; overflow:hidden; }
.mgs-portfolio-tile::after, .about-portfolio-card::after, .solution-card::after,
.sector-card::after, .metric-card::after, .mgs-advantage-grid article::after, .card::after {
  content:""; position:absolute; z-index:5; top:-35%; bottom:-35%; left:-85%; width:35%;
  pointer-events:none; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
}
.mgs-portfolio-tile:hover::after, .about-portfolio-card:hover::after, .solution-card:hover::after,
.sector-card:hover::after, .metric-card:hover::after, .mgs-advantage-grid article:hover::after, .card:hover::after {
  animation:mgs-card-flash .8s ease-out;
}
@keyframes mgs-card-flash { from { left:-85%; } to { left:145%; } }
.mgs-portfolio-tile:hover, .about-portfolio-card:hover, .solution-card:hover, .sector-card:hover,
.metric-card:hover, .shop-category-card:hover, .mgs-advantage-grid article:hover, .card:hover,
.product-card:hover, .category-card:hover {
  transform:translateY(-5px); border-color:rgba(11,70,163,.42); box-shadow:0 18px 40px rgba(14,52,102,.14); background-color:rgba(255,255,255,.94);
}
/* Keep the no-text Shop portfolio image clean and cropped consistently. */
.shop-landing-visual { background:rgba(255,255,255,.35); }
.shop-landing-visual img { display:block; width:100%; aspect-ratio:1.7/1; max-height:280px; object-fit:cover; }
/* One-line brand/navigation across desktops and laptops; hamburger kicks in before there is crowding. */
@media (max-width: 1100px) {
  .site-header .brand-name { font-size:clamp(.83rem,2.25vw,1.08rem) !important; }
  .site-header .logo-image { width:52px; height:52px; flex-basis:52px; }
  .site-header .logo { gap:9px; }
}
@media (max-width: 700px) {
  .site-header .nav-wrap { grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; }
  .site-header .brand-name { font-size:clamp(.7rem,2.85vw,1rem) !important; }
  .site-header .logo-image { width:36px; height:36px; flex-basis:36px; }
  .site-header .logo { gap:6px; }
  .mgs-home-hero .hero-grid { grid-template-columns:minmax(0,1fr); }
  .mgs-home-hero { padding:28px 0 31px !important; }
  .mgs-home-hero .home-hero-title { font-size:clamp(.98rem,4.5vw,1.8rem) !important; letter-spacing:-.04em !important; }
  .mgs-portfolio-section .section-heading h2 { font-size:clamp(.8rem,3vw,1.25rem) !important; }
  .mgs-home .mgs-network-heading h2, .mgs-home h2.connected-network-heading { font-size:clamp(.78rem,3vw,1.25rem) !important; }
  .services-page .page-hero h1.services-one-line-title { font-size:clamp(.78rem,3.5vw,1.45rem) !important; }
  .contact-one-line-title { font-size:clamp(.78rem,3.5vw,1.4rem) !important; }
  .contact-one-line-subtitle { font-size:clamp(.84rem,3.7vw,1.25rem) !important; }
  .contact-detail-one-line { font-size:clamp(.68rem,3vw,1rem) !important; }
}
@media (max-width:420px) {
  .site-header .nav-wrap { gap:5px; }
  .site-header .logo { gap:5px; }
  .site-header .logo-image { width:31px; height:31px; flex-basis:31px; }
  .site-header .brand-name { font-size:clamp(.65rem,2.7vw,.75rem) !important; letter-spacing:-.035em !important; }
  .site-header .menu-toggle { width:32px; height:32px; flex-basis:32px; }
  .mgs-home-hero .home-hero-title { font-size:clamp(.82rem,4.3vw,1.1rem) !important; }
  .mgs-portfolio-section .section-heading h2 { font-size:clamp(.74rem,2.9vw,.9rem) !important; }
  .mgs-home .mgs-network-heading h2, .mgs-home h2.connected-network-heading { font-size:clamp(.72rem,2.85vw,.9rem) !important; }
  .services-page .page-hero h1.services-one-line-title { font-size:clamp(.7rem,3.1vw,.85rem) !important; }
  .contact-one-line-title { font-size:clamp(.69rem,3.0vw,.85rem) !important; }
  .contact-one-line-subtitle { font-size:clamp(.76rem,3.1vw,.95rem) !important; }
  .contact-detail-one-line { font-size:clamp(.6rem,2.6vw,.82rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mgs-home-hero .home-hero-title span { opacity:1; animation:none; }
  .mgs-portfolio-tile::after, .about-portfolio-card::after, .solution-card::after,
  .sector-card::after, .metric-card::after, .mgs-advantage-grid article::after, .card::after { display:none; }
}

/* Footer palette: preserve contrast while using the registered black-and-blue name style. */
.site-footer {
  background:rgba(246,249,253,.97) !important;
  color:#1b2d46 !important;
  border-top:1px solid #d9e4f2;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-footer .brand-name,
.site-footer .brand-spelling { color:#000 !important; }
.site-footer .brand-name .brand-initial,
.site-footer .brand-spelling .brand-initial { color:#0b46a3 !important; }
.site-footer .footer-title { color:#172b47 !important; }
.site-footer .footer-links a,
.site-footer .footer-brand p,
.site-footer .footer-bottom { color:#4e6078 !important; }
.site-footer .footer-links a:hover { color:#0b46a3 !important; }
.site-footer .footer-bottom { border-top:1px solid #dce5f0; }
.about-page .about-registered-name,
.about-page .about-partner-content h2,
.about-page .about-advantage-heading h2 { color:#000 !important; }
.about-page .about-registered-name .brand-initial,
.about-page .about-partner-content h2 .brand-initial,
.about-page .about-advantage-heading h2 .brand-initial { color:#0b46a3 !important; }

/* Final homepage hero sizing: compact like the Shop landing banner on desktop too. */
.mgs-home-hero { padding:22px 0 24px !important; }
.mgs-home-hero .hero-photo { min-height:270px !important; max-height:285px; }
.mgs-home-hero .hero-photo img { min-height:0 !important; max-height:none; }
.mgs-home-hero .home-hero-title { font-size:clamp(1.55rem,2.5vw,2.15rem) !important; margin-top:14px; margin-bottom:14px; }
.mgs-home-hero .actions { margin-top:20px; }

/* The full business name is black with blue initials on light surfaces. On dark hero/CTA panels, preserve readable contrast while keeping the same MGS blue initials. */
.mgs-home-hero .brand-spelling,
.mgs-home-cta .brand-spelling,
.shop-landing-hero .brand-spelling { color:#fff !important; }
.mgs-home-hero .brand-spelling .brand-initial,
.mgs-home-cta .brand-spelling .brand-initial,
.shop-landing-hero .brand-spelling .brand-initial { color:#0b46a3 !important; }

/* On the dark blue home/shop hero, place the registered name on a light glass strip so the black wording and exact blue initials remain legible. */
.mgs-home-hero .hero-copy .brand-spelling,
.shop-landing-hero .shop-landing-copy p .brand-spelling {
  display:inline;
  padding:1px 4px;
  border-radius:4px;
  background:rgba(255,255,255,.94);
  color:#000 !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  box-shadow:0 1px 8px rgba(5,24,50,.12);
}
.mgs-home-hero .hero-copy .brand-spelling .brand-initial,
.shop-landing-hero .shop-landing-copy p .brand-spelling .brand-initial { color:#0b46a3 !important; }
/* updated Later /*



/* Home hero: show the entire combined-products image */
.mgs-home-hero .hero-photo {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 742 / 280;
    overflow: hidden;
    background: #edf3fa;
}

.mgs-home-hero .hero-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
    background: #edf3fa;
}




/* =========================================
   MGS HOME HERO — FINAL IMAGE FIX
   ========================================= */

.mgs-home-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 0 !important;

    /* Fallback colour */
    background-color: #09264a !important;

    /* Show the PNG directly as the section background */
    background-image:
        linear-gradient(
            90deg,
            rgba(4, 22, 48, 0.28) 0%,
            rgba(4, 22, 48, 0.10) 65%,
            rgba(4, 22, 48, 0.02) 100%
        ),
        url("../assets/images/home-hero-bg.png") !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Disable the old decorative hero line and pseudo overlays */
.mgs-home-hero::before,
.mgs-home-hero::after {
    content: none !important;
    display: none !important;
}

/* Keep the content above the background */
.mgs-home-hero .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}


/* Text panel */
.mgs-home-hero .hero-copy-block {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 680px !important;
    padding: 24px !important;

    background: rgba(7, 27, 53, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 16px !important;

    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Heading */
.mgs-home-hero .home-hero-title {
    color: #fff !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.mgs-home-hero .home-hero-title span:first-child {
    color: #83bdff !important;
}

.mgs-home-hero .home-hero-title span:nth-child(2) {
    color: #fff !important;
}

/* Supporting text */
.mgs-home-hero .eyebrow {
    color: #bcdcff !important;
}

.mgs-home-hero .hero-copy,
.mgs-home-hero .hero-copy p {
    color: #f1f6ff !important;
    line-height: 1.7;
}

/* Mobile layout */
@media (max-width: 700px) {
    .mgs-home-hero {
        padding: 22px 16px !important;
        background-position: 58% center !important;
    }

    .mgs-home-hero .hero-copy-block {
        max-width: 100% !important;
        padding: 20px !important;
        background: rgba(5, 25, 49, 0.78) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .mgs-home-hero .home-hero-title {
        font-size: clamp(1.7rem, 6vw, 2.35rem) !important;
    }
}


/* HOME HERO: floating product image over harbour background */
.mgs-home-hero .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important;
    align-items: center;
    gap: 32px !important;
}

.mgs-home-hero .hero-copy-block {
    max-width: 680px !important;
}

/* Restore the image as a floating visual */
.mgs-home-hero .hero-photo {
    display: block !important;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28);
    transform: translateY(0);
    transition: transform .35s ease, box-shadow .35s ease;
}

.mgs-home-hero .hero-photo:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.34);
}

.mgs-home-hero .hero-photo img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: 320px;
    aspect-ratio: 742 / 280;
    object-fit: cover !important;
    object-position: center;
    border-radius: inherit;
}

/* Tablet and mobile: stack image under the text */
@media (max-width: 800px) {
    .mgs-home-hero .hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    .mgs-home-hero .hero-photo {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
    }

    .mgs-home-hero .hero-photo img {
        max-height: none;
    }
}

/* Force the combined-products image in the Home hero */
.mgs-home-hero .hero-photo img {
    content: url("../assets/images/shop-hero.jpeg") !important;
    display: block;
    width: 100%;
    height: auto !important;
    max-height: 320px;
    aspect-ratio: 742 / 280;
    object-fit: contain !important;
    object-position: center;
    border-radius: inherit;
}

@media (max-width: 800px) {
    .mgs-home-hero .hero-photo img {
        max-height: none;
    }
}


/* =============================================================
   MGS visual finish — product packshots + glassmorphism on heroes
   Scoped to existing page hero classes; layouts and wording retained.
   ============================================================= */

/* Let the supplied Office packshot colours and typography render naturally. */
.product-visual img[src*="office-"],
.product-visual img[src*="o-24hb-"],
.modal-product-image img[src*="office-"],
.modal-product-image img[src*="o-24hb-"],
.product-detail-visual img[src*="office-"],
.product-detail-visual img[src*="o-24hb-"] {
    mix-blend-mode: normal !important;
    object-fit: contain !important;
    background: #ffffff;
    border-radius: 8px;
}

/* Product image panel: cleaner neutral stage and a restrained hover lift. */
.product-visual {
    background: linear-gradient(145deg, #fbfdff 0%, #eef4fb 100%);
}
.product-visual img {
    transition: transform .28s ease, filter .28s ease;
}
.product-card:hover .product-visual img {
    transform: scale(1.025);
    filter: saturate(1.035);
}

/* HOME hero already has its harbour background; strengthen its glass card. */
.mgs-home-hero .hero-copy-block {
    border: 1px solid rgba(255,255,255,.28) !important;
    background: rgba(7,27,53,.58) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}
.mgs-home-hero .hero-photo {
    border: 1px solid rgba(255,255,255,.48) !important;
    background: rgba(255,255,255,.16) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* SHOP hero: glass panel behind its copy and frosted image frame. */
.shop-landing-hero {
    position: relative;
    isolation: isolate;
}
.shop-landing-copy {
    padding: clamp(18px, 2.3vw, 30px);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    background: rgba(9,34,67,.30);
    box-shadow: 0 18px 45px rgba(7,25,50,.14), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.shop-landing-visual {
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(255,255,255,.46);
    box-shadow: 0 20px 48px rgba(10,35,70,.18), inset 0 1px 0 rgba(255,255,255,.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.shop-landing-visual img {
    transition: transform .35s ease, filter .35s ease;
}
.shop-landing-visual:hover img {
    transform: scale(1.025);
    filter: saturate(1.04);
}

/* Shared slim page heroes: Services, Contact, Industries, Account, Cart, etc. */
.page-hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(120deg, rgba(237,244,253,.96), rgba(248,251,255,.88)) !important;
}
.page-hero .container {
    position: relative;
    z-index: 1;
    padding: 16px clamp(16px, 2.5vw, 28px);
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 16px;
    background: rgba(255,255,255,.54);
    box-shadow: 0 12px 32px rgba(18,52,91,.07), inset 0 1px 0 rgba(255,255,255,.75);
    backdrop-filter: blur(13px) saturate(125%);
    -webkit-backdrop-filter: blur(13px) saturate(125%);
}

/* The category listing intro acts as the heading panel on Licences/Storage pages. */
.category-catalogue-page .shop-page-intro {
    padding: clamp(16px, 2.2vw, 25px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 16px;
    background: rgba(255,255,255,.66);
    box-shadow: 0 12px 30px rgba(18,52,91,.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
    .shop-landing-copy { padding: 18px; border-radius: 15px; }
    .page-hero .container { padding: 13px 15px; border-radius: 13px; }
    .category-catalogue-page .shop-page-intro { padding: 15px; border-radius: 13px; }
}


/* Business customers can enter bulk quantities without repeated button presses. */
.cart-controls input.qty-value{width:4.5rem;min-width:0;padding:.4rem .15rem;border:1px solid #cbd5e1;border-radius:.35rem;text-align:center;font:inherit;}