/* ==========================================================================
   MiGloves theme
   --------------------------------------------------------------------------
   Everything lives inside .mgs and every class starts with "mgs-".
   Colours, fonts and corner roundness are CSS variables printed by
   MiGloves_Theme::css_vars() from Appearance > MiGloves Theme > Design:

     --mgs-dark  --mgs-dark2  --mgs-dark3   dark sections, header bar, footer
     --mgs-acc   --mgs-acc2   --mgs-acc-ink accent, lighter accent, accent as text
     --mgs-bg                               light section background
     --mgs-on-dark  --mgs-on-acc  --mgs-soft text colours on dark / accent
     --mgs-hd  --mgs-tx                     heading and body font
     --mgs-r                                corner roundness

   Heading style is set with data-head on .mgs:
     normal (default) | serif (italic accents) | caps (condensed, uppercase)
   ========================================================================== */

.mgs {
  --mgs-ink: #0d1118;
  --mgs-mut: #667085;
  --mgs-line: #e4e7ec;
  --mgs-pad: clamp(16px, 4vw, 64px);
  --mgs-gap: clamp(64px, 8vw, 120px);
  --mgs-rs: calc(var(--mgs-r) * .66);
  --mgs-rl: calc(var(--mgs-r) * 1.5);
  --mgs-ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--mgs-tx);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mgs-ink);
  background: #fff;
  text-align: left;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.mgs-canvas { margin: 0; background: #fff; }

/* Reset, kept at zero specificity so the rules below always win */
:where(.mgs) *, :where(.mgs) *::before, :where(.mgs) *::after { box-sizing: border-box; }
:where(.mgs) :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
:where(.mgs) :is(ul, ol) { list-style: none; }
:where(.mgs) a { color: inherit; text-decoration: none; }
:where(.mgs) img { display: block; max-width: 100%; height: auto; }
:where(.mgs) :is(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
:where(.mgs) button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:where(.mgs) :is(i, em, b, u, small) { font-style: normal; text-decoration: none; }
.mgs [hidden] { display: none !important; }
.mgs :focus-visible { outline: 2px solid var(--mgs-acc); outline-offset: 3px; }

.mgs-wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--mgs-pad); }
.mgs-sec { padding: var(--mgs-gap) 0; }
.mgs-sec--alt { background: var(--mgs-bg); }
.mgs-sec--tight { padding-top: 0; }
.mgs-sec--flush { padding: 0; }
.mgs-center { text-align: center; }

/* ---- Type ---- */
.mgs-eye {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mgs-acc-ink);
}
.mgs-eye::before { content: ""; width: 26px; height: 3px; background: var(--mgs-acc); transform: skewX(-24deg); }
.mgs-center .mgs-eye, .mgs-sh--center .mgs-eye { justify-content: center; }
.mgs-h {
  font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.08; letter-spacing: -.025em; color: inherit; margin-top: 10px;
}
.mgs-h em { color: var(--mgs-acc-ink); }
.mgs-sub { color: var(--mgs-mut); max-width: 56ch; margin-top: 14px; font-size: 16px; }
.mgs-sh { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 38px; }
.mgs-sh--center { justify-content: center; text-align: center; }
.mgs-more {
  font-family: var(--mgs-hd); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  border-bottom: 2px solid var(--mgs-acc); padding-bottom: 3px; transition: color .3s;
}
.mgs-more:hover { color: var(--mgs-acc-ink); }

/* ---- Buttons ---- */
.mgs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mgs-hd); font-weight: 600; font-size: 14px; letter-spacing: .02em; line-height: 1.2;
  padding: 15px 28px; border: 2px solid transparent; border-radius: var(--mgs-rs);
  white-space: nowrap; cursor: pointer; transition: transform .3s var(--mgs-ease), background .3s, color .3s, border-color .3s, filter .3s;
}
.mgs-btn i { transition: transform .3s var(--mgs-ease); }
.mgs-btn:hover i { transform: translateX(5px); }
.mgs-btn--acc { background: var(--mgs-acc); color: var(--mgs-on-acc); box-shadow: 0 10px 24px -12px rgba(var(--mgs-acc-rgb), .8); }
.mgs-btn--acc:hover { filter: brightness(.9); transform: translateY(-2px); }
.mgs-btn--dark { background: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-btn--dark:hover { background: var(--mgs-dark3); transform: translateY(-2px); }
.mgs-btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.mgs-btn--ghost:hover { background: #fff; color: var(--mgs-dark); border-color: #fff; }
.mgs-btn--line { border-color: var(--mgs-dark); color: var(--mgs-dark); }
.mgs-btn--line:hover { background: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-btn[disabled] { opacity: .6; pointer-events: none; }

/* ---- Scroll reveal (only when JS is running) ---- */
.mgs.is-js .mgs-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--mgs-ease), transform .9s var(--mgs-ease); }
.mgs.is-js .mgs-rv.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.mgs-ann { background: var(--mgs-acc); color: var(--mgs-on-acc); overflow: hidden; white-space: nowrap; padding: 8px 0; font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.mgs-ann-track { display: inline-flex; animation: mgs-marquee 40s linear infinite; }
.mgs-ann:hover .mgs-ann-track { animation-play-state: paused; }
.mgs-ann-set { display: inline-flex; }
.mgs-ann span { padding: 0 28px; display: inline-flex; gap: 56px; align-items: center; }
.mgs-ann span::after { content: "★"; font-size: 10px; opacity: .8; }
@keyframes mgs-marquee { to { transform: translateX(-50%); } }

.mgs-util { background: var(--mgs-dark); color: var(--mgs-soft); font-size: 13px; }
.mgs-util .mgs-wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.mgs-util .mgs-wrap > div { display: flex; gap: 24px; align-items: center; }
.mgs-util :is(a, button):hover { color: var(--mgs-on-dark); }

.mgs-hd { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--mgs-line); transition: box-shadow .3s; }
.mgs-hd.is-stuck { box-shadow: 0 10px 30px -18px rgba(var(--mgs-dark-rgb), .35); }
.admin-bar .mgs-hd { top: 32px; }
.mgs-hb { display: flex; align-items: center; gap: 30px; height: 78px; }
.mgs-hb > nav { flex: 1; }

.mgs-logo { display: flex; align-items: center; gap: 10px; font-family: var(--mgs-hd); font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1; color: var(--mgs-ink); }
.mgs-logo img { max-height: 48px; width: auto; }
.mgs-logo b { background: var(--mgs-acc); color: var(--mgs-on-acc); width: 44px; height: 44px; border-radius: var(--mgs-rs); display: grid; place-items: center; font-size: 19px; transform: skewX(-6deg); }
.mgs-logo-t span { color: var(--mgs-acc-ink); }

.mgs-nav { display: flex; gap: 4px; }
.mgs-nav > li { position: static; }
.mgs-nav > li > a, .mgs-n { font-family: var(--mgs-hd); font-weight: 600; font-size: 14px; letter-spacing: .02em; padding: 29px 14px; display: block; position: relative; white-space: nowrap; }
.mgs-nav > li > a::after, .mgs-n::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 20px; height: 3px; background: var(--mgs-acc); transform: scaleX(0) skewX(-24deg); transform-origin: left; transition: transform .3s var(--mgs-ease); }
.mgs-nav > li:hover > a::after, .mgs-nav > li:hover > .mgs-n::after, .mgs-nav > li.current-menu-item > a::after { transform: scaleX(1) skewX(-24deg); }
.mgs-nav > li.menu-item-has-children { position: relative; }
.mgs-nav .sub-menu { position: absolute; left: 0; top: 100%; min-width: 220px; background: #fff; border: 1px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 8px; box-shadow: 0 24px 44px -22px rgba(var(--mgs-dark-rgb), .35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--mgs-ease); }
.mgs-nav li:hover > .sub-menu, .mgs-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mgs-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: calc(var(--mgs-rs) * .6); font-size: 14px; }
.mgs-nav .sub-menu a:hover { background: var(--mgs-bg); color: var(--mgs-acc-ink); }

.mgs-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--mgs-line); box-shadow: 0 30px 50px -30px rgba(var(--mgs-dark-rgb), .4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .3s var(--mgs-ease); }
.mgs-has-mega:hover .mgs-mega, .mgs-has-mega:focus-within .mgs-mega, .mgs-has-mega.is-open .mgs-mega { opacity: 1; visibility: visible; transform: none; }
.mgs-mg { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 10px 30px; padding-top: 30px; padding-bottom: 34px; }
.mgs-mg h4 { font-family: var(--mgs-hd); font-weight: 700; font-size: 17px; margin-bottom: 8px; color: var(--mgs-ink); }
.mgs-mg div > a { display: block; padding: 5px 0; color: var(--mgs-mut); font-size: 14px; }
.mgs-mg div > a:hover, .mgs-mg h4 a:hover { color: var(--mgs-acc-ink); }
.mgs-mg small { font-size: 12px; opacity: .6; margin-left: 4px; }
.mgs-promo { grid-column: 5; grid-row: 1; border-radius: var(--mgs-r); min-height: 190px; display: flex; align-items: flex-end; padding: 20px; color: var(--mgs-on-dark); background: radial-gradient(120% 120% at 100% 0, rgba(var(--mgs-acc-rgb), .55), transparent 60%), linear-gradient(140deg, var(--mgs-dark), var(--mgs-dark3)); font-family: var(--mgs-hd); font-weight: 700; font-size: 22px; line-height: 1.1; transition: transform .3s var(--mgs-ease); }
.mgs-promo:hover { transform: translateY(-3px); }

.mgs-ha { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mgs-ic { width: 44px; height: 44px; border-radius: var(--mgs-rs); display: grid; place-items: center; transition: background .25s; }
.mgs-ic:hover { background: var(--mgs-bg); }
.mgs-burger { display: none; }
.mgs-search { border-top: 1px solid var(--mgs-line); background: #fff; }
.mgs-search .mgs-wrap { display: flex; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.mgs-search input[type=search] { flex: 1; min-width: 0; height: 50px; border: 1.5px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 0 16px; font-size: 16px; outline: 0; background: #fff; }
.mgs-search input[type=search]:focus { border-color: var(--mgs-acc); }

/* ==========================================================================
   Hero
   ========================================================================== */
.mgs-hero { padding: 16px 0 0; }
.mgs-hw { position: relative; height: min(78vh, 720px); min-height: 520px; border-radius: calc(var(--mgs-rl) + 2px); overflow: hidden; background: var(--mgs-dark); color: var(--mgs-on-dark); margin: 0 var(--mgs-pad); }
.mgs-hsl { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; pointer-events: none; }
.mgs-hsl.is-on { opacity: 1; pointer-events: auto; }
.mgs-hsl-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.08); transition: transform 8s linear; }
.mgs-hsl.is-on .mgs-hsl-bg { transform: none; }
.mgs-hsl::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(var(--mgs-dark-rgb), .96) 0%, rgba(var(--mgs-dark-rgb), .82) 38%, rgba(var(--mgs-dark-rgb), .15) 72%); }
.mgs-hsl--plain::before { background: radial-gradient(70% 90% at 85% 40%, rgba(var(--mgs-acc-rgb), .38), transparent 70%), linear-gradient(120deg, var(--mgs-dark), var(--mgs-dark3)); }
.mgs-hsl::after { content: ""; position: absolute; z-index: 1; left: 44%; top: -20%; width: 14px; height: 140%; background: var(--mgs-acc); transform: rotate(14deg); opacity: .9; box-shadow: 34px 0 0 -4px rgba(var(--mgs-acc-rgb), .35); }
.mgs-hc { position: absolute; z-index: 2; left: clamp(22px, 5vw, 80px); top: 50%; transform: translateY(-50%); max-width: min(620px, 40%); }
.mgs-hc > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--mgs-ease), transform .8s var(--mgs-ease); }
.mgs-hsl.is-on .mgs-hc > * { opacity: 1; transform: none; }
.mgs-hsl.is-on .mgs-hc > :nth-child(2) { transition-delay: .12s; }
.mgs-hsl.is-on .mgs-hc > :nth-child(3) { transition-delay: .24s; }
.mgs-hsl.is-on .mgs-hc > :nth-child(4) { transition-delay: .36s; }
.mgs-star { display: inline-block; font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; background: rgba(var(--mgs-acc-rgb), .16); border: 1px solid rgba(var(--mgs-acc-rgb), .5); color: var(--mgs-acc2); padding: 7px 16px; border-radius: 99px; }
.mgs-hero-h { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(40px, 5.2vw, 82px); line-height: 1; letter-spacing: -.03em; color: inherit; margin: 20px 0 18px; }
.mgs-hero-h em { display: block; color: var(--mgs-acc2); }
.mgs-hc p { color: var(--mgs-soft); font-size: 17px; max-width: 46ch; }
.mgs-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.mgs-tag { position: absolute; z-index: 3; right: clamp(22px, 4vw, 60px); bottom: clamp(70px, 9vh, 100px); background: #fff; color: var(--mgs-ink); border-radius: var(--mgs-r); padding: 14px 22px 12px; transform: rotate(-4deg); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5); }
.mgs-tag small { display: block; font-family: var(--mgs-hd); font-weight: 600; letter-spacing: .16em; font-size: 12px; color: var(--mgs-mut); text-transform: uppercase; }
.mgs-tag b { font-family: var(--mgs-hd); font-weight: 800; font-size: 36px; line-height: 1; }
.mgs-hn { position: absolute; z-index: 3; left: clamp(22px, 5vw, 80px); right: clamp(22px, 4vw, 60px); bottom: 26px; display: flex; justify-content: space-between; align-items: center; }
.mgs-dots { display: flex; gap: 8px; }
.mgs-dots button { width: 34px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .3); transform: skewX(-24deg); transition: .4s; }
.mgs-dots button.is-on { background: var(--mgs-acc); width: 60px; }
.mgs-ar { display: flex; gap: 8px; }
.mgs-rb { width: 48px; height: 48px; border-radius: var(--mgs-rs); display: grid; place-items: center; font-size: 18px; transition: .25s; }
.mgs-hn .mgs-rb { background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); color: #fff; }
.mgs-hn .mgs-rb:hover { background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-sh .mgs-rb { border: 2px solid var(--mgs-line); background: #fff; }
.mgs-sh .mgs-rb:hover { background: var(--mgs-dark); border-color: var(--mgs-dark); color: var(--mgs-on-dark); }

/* ---- Selling points ---- */
.mgs-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.mgs-us { display: flex; gap: 16px; align-items: center; background: var(--mgs-bg); border-radius: var(--mgs-r); padding: 20px 22px; transition: background .3s, color .3s; }
.mgs-us:hover { background: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-us:hover span { color: var(--mgs-soft); }
.mgs-us svg { flex: none; width: 40px; height: 40px; stroke: var(--mgs-acc); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mgs-us b { font-family: var(--mgs-hd); font-weight: 700; font-size: 16px; display: block; line-height: 1.2; }
.mgs-us span { font-size: 13px; color: var(--mgs-mut); }

/* ==========================================================================
   Categories
   ========================================================================== */
.mgs-cg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mgs-ct { position: relative; aspect-ratio: 1 / 1.12; border-radius: var(--mgs-r); overflow: hidden; color: #fff; display: block; background: linear-gradient(150deg, var(--mgs-dark3), var(--mgs-dark)); }
.mgs-ct img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--mgs-ease); }
.mgs-ct:hover img { transform: scale(1.08); }
.mgs-ct::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--mgs-dark-rgb), .92), rgba(var(--mgs-dark-rgb), .1) 60%); transition: opacity .4s; }
.mgs-ct::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(var(--mgs-acc-rgb), .92), rgba(var(--mgs-dark-rgb), .15) 70%); opacity: 0; transition: opacity .4s; }
.mgs-ct:hover::before { opacity: 1; }
.mgs-ct--plain::after { background: radial-gradient(90% 70% at 100% 0, rgba(var(--mgs-acc-rgb), .35), transparent 70%); }
.mgs-ct > div { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; }
.mgs-ct h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; line-height: 1.05; color: #fff; }
.mgs-ct p { font-size: 13px; opacity: .85; display: flex; justify-content: space-between; margin-top: 4px; }
.mgs-ct p i { transition: transform .3s; }
.mgs-ct:hover p i { transform: translateX(6px); }

/* ==========================================================================
   Products
   ========================================================================== */
.mgs-track { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 4px 2px 20px; }
.mgs-track::-webkit-scrollbar, .mgs-tabs::-webkit-scrollbar { display: none; }
.mgs-track .mgs-pc { flex: 0 0 calc((100% - 54px) / 4); scroll-snap-align: start; }
.mgs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mgs-grid .mgs-pc { animation: mgs-up .6s var(--mgs-ease) both; }
@keyframes mgs-up { from { opacity: 0; transform: translateY(18px); } }

.mgs-pc { background: #fff; border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); padding: 10px; display: flex; flex-direction: column; min-width: 0; transition: transform .35s var(--mgs-ease), box-shadow .35s, border-color .35s; }
.mgs-pc:hover { border-color: transparent; box-shadow: 0 24px 44px -22px rgba(var(--mgs-dark-rgb), .35); transform: translateY(-5px); }
.mgs-pc-im { position: relative; aspect-ratio: 1; border-radius: var(--mgs-rs); overflow: hidden; background: var(--mgs-bg); display: block; }
.mgs-pc-im img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--mgs-ease); }
.mgs-pc:hover .mgs-pc-im img { transform: scale(1.06); }
.mgs-pc-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mgs-acc); opacity: .5; }
.mgs-pc-ph svg { width: 38%; }
.mgs-pc-flag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--mgs-acc); color: var(--mgs-on-acc); font-family: var(--mgs-hd); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; transform: skewX(-8deg); }
.mgs-pc-cat { font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-acc-ink); margin: 14px 6px 2px; }
.mgs-pc-title { font-family: var(--mgs-tx); font-weight: 600; font-size: 15px; line-height: 1.35; letter-spacing: 0; margin: 4px 6px 0; min-height: 2.7em; color: var(--mgs-ink); }
.mgs-pc-cat + .mgs-pc-title { margin-top: 0; }
.mgs-pc-title a:hover { color: var(--mgs-acc-ink); }
.mgs-pc-pr { margin: 8px 6px 12px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mgs-pc-pr b { font-family: var(--mgs-hd); font-weight: 700; font-size: 19px; line-height: 1; }
.mgs-pc-pr small, .mgs-pc-pr span { color: var(--mgs-mut); font-size: 12px; }
.mgs-pc-bt { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: auto; }
.mgs-pc-bt .mgs-btn { padding: 11px 10px; font-size: 14px; }
.mgs-pc-q { padding: 0 14px; border: 2px solid var(--mgs-line); border-radius: var(--mgs-rs); font-family: var(--mgs-hd); font-weight: 600; font-size: 13px; transition: border-color .25s, color .25s; }
.mgs-pc-q:hover { border-color: var(--mgs-acc); color: var(--mgs-acc-ink); }

.mgs-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 28px; }
.mgs-tabs button { font-family: var(--mgs-hd); font-weight: 600; font-size: 14px; letter-spacing: .02em; padding: 10px 22px; border-radius: var(--mgs-rs); border: 2px solid var(--mgs-line); white-space: nowrap; transition: .25s; }
.mgs-tabs button:hover { border-color: var(--mgs-dark); }
.mgs-tabs button[aria-selected=true] { background: var(--mgs-acc); border-color: var(--mgs-acc); color: var(--mgs-on-acc); }

/* ==========================================================================
   Advantage (dark section, optional video)
   ========================================================================== */
.mgs-nv { background: var(--mgs-dark); color: var(--mgs-on-dark); position: relative; overflow: hidden; }
.mgs-nv::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(104deg, transparent 0 120px, rgba(255, 255, 255, .022) 120px 122px); }
.mgs-nv .mgs-wrap { position: relative; }
.mgs-nv .mgs-sub { color: var(--mgs-soft); }
.mgs-nv :is(.mgs-eye, .mgs-h em) { color: var(--mgs-acc2); }
.mgs-adv { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.mgs-adv--solo { grid-template-columns: 1fr; max-width: 980px; }
.mgs-vid { position: relative; aspect-ratio: 16 / 11; border-radius: var(--mgs-rl); overflow: hidden; background: linear-gradient(140deg, var(--mgs-dark3), var(--mgs-dark2)); }
.mgs-vid[data-mgs-video] { cursor: pointer; }
.mgs-vid img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mgs-vid[data-mgs-video]::after { content: ""; position: absolute; inset: 0; background: rgba(var(--mgs-dark-rgb), .35); transition: background .3s; }
.mgs-vid[data-mgs-video]:hover::after { background: rgba(var(--mgs-dark-rgb), .15); }
.mgs-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; background: var(--mgs-acc); color: var(--mgs-on-acc); font-size: 26px; padding-left: 6px; display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(var(--mgs-acc-rgb), .28); transition: transform .3s; }
.mgs-vid:hover .mgs-play { transform: translate(-50%, -50%) scale(1.08); }
.mgs-vid-l { position: absolute; z-index: 2; left: 20px; bottom: 18px; font-family: var(--mgs-hd); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: #fff; }
.mgs-al { margin: 30px 0 34px; display: grid; gap: 12px; }
.mgs-ai { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--mgs-r); padding: 18px 20px; transition: border-color .3s, transform .3s; }
.mgs-ai:hover { border-color: var(--mgs-acc); transform: translateX(8px); }
.mgs-ai b { font-family: var(--mgs-hd); font-weight: 700; font-size: 30px; color: var(--mgs-acc2); line-height: 1; }
.mgs-ai h4 { font-family: var(--mgs-hd); font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; color: inherit; }
.mgs-ai p { color: var(--mgs-soft); font-size: 14px; }

/* ==========================================================================
   Steps
   ========================================================================== */
.mgs-steps { display: grid; grid-template-columns: repeat(var(--mgs-n, 4), 1fr); gap: 18px; }
.mgs-st { position: relative; background: var(--mgs-bg); border-radius: var(--mgs-r); padding: 34px 26px 30px; overflow: hidden; transition: background .35s, color .35s, transform .35s var(--mgs-ease); }
.mgs-st:hover { background: var(--mgs-dark); color: var(--mgs-on-dark); transform: translateY(-6px); }
.mgs-st:hover p { color: var(--mgs-soft); }
.mgs-st b { font-family: var(--mgs-hd); font-weight: 800; font-size: 90px; line-height: .8; position: absolute; right: 14px; top: 14px; color: transparent; -webkit-text-stroke: 2px rgba(var(--mgs-acc-rgb), .35); }
.mgs-st i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--mgs-rs); background: var(--mgs-acc); color: var(--mgs-on-acc); font-family: var(--mgs-hd); font-weight: 800; font-size: 22px; transform: skewX(-6deg); margin-bottom: 54px; }
.mgs-st h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 6px; color: inherit; }
.mgs-st p { color: var(--mgs-mut); font-size: 14px; }
.mgs-note { text-align: center; margin-top: 34px; font-weight: 500; }

/* ==========================================================================
   Quality
   ========================================================================== */
.mgs-ql { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.mgs-qi { position: relative; aspect-ratio: 1 / 1.02; border-radius: var(--mgs-rl); overflow: hidden; background: radial-gradient(80% 70% at 100% 0, rgba(var(--mgs-acc-rgb), .4), transparent 70%), linear-gradient(140deg, var(--mgs-dark), var(--mgs-dark3)); }
.mgs-qi--plain { aspect-ratio: 16 / 10; }
.mgs-qi img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mgs-flag { position: absolute; left: 18px; bottom: 18px; right: 18px; background: rgba(var(--mgs-dark-rgb), .86); backdrop-filter: blur(8px); color: var(--mgs-on-dark); border-radius: var(--mgs-r); padding: 16px 20px; display: flex; gap: 22px; justify-content: space-around; text-align: center; }
.mgs-qi--plain .mgs-flag { background: none; backdrop-filter: none; top: 18px; align-items: center; flex-wrap: wrap; }
.mgs-flag b { font-family: var(--mgs-hd); font-weight: 800; font-size: 26px; line-height: 1; display: block; color: var(--mgs-acc2); }
.mgs-qi--plain .mgs-flag b { font-size: clamp(28px, 3.4vw, 46px); }
.mgs-flag span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mgs-soft); }
.mgs-fl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 34px; }
.mgs-fi { border: 1px solid var(--mgs-line); background: #fff; border-radius: var(--mgs-r); padding: 20px; transition: border-color .3s; }
.mgs-fi:hover { border-color: var(--mgs-acc); }
.mgs-fi h4 { font-family: var(--mgs-hd); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.2; display: flex; gap: 10px; align-items: center; margin-bottom: 4px; color: var(--mgs-ink); }
.mgs-fi h4::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--mgs-acc); color: var(--mgs-on-acc); font-family: var(--mgs-tx); font-size: 13px; display: grid; place-items: center; }
.mgs-fi p { color: var(--mgs-mut); font-size: 14px; }

/* ==========================================================================
   Volume pricing
   ========================================================================== */
.mgs-pg { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: stretch; }
.mgs-tb { border-radius: var(--mgs-rl); overflow: hidden; border: 1px solid var(--mgs-line); background: #fff; }
.mgs-tt { background: var(--mgs-dark); color: var(--mgs-on-dark); padding: 18px 26px; font-family: var(--mgs-hd); font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mgs-tt select { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 6px 10px; font-family: var(--mgs-tx); font-size: 13px; font-weight: 400; color: var(--mgs-on-dark); max-width: 60%; }
.mgs-tt option { color: #000; }
.mgs-tr { display: grid; grid-template-columns: repeat(var(--mgs-cols, 4), 1fr); gap: 12px; padding: 18px 26px; border-top: 1px solid var(--mgs-line); align-items: center; transition: background .3s, box-shadow .3s; font-size: 14px; }
.mgs-tr--hd { font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-mut); border: 0; background: var(--mgs-bg); }
.mgs-sec--alt .mgs-tr--hd { background: #fafafa; }
.mgs-tr b, .mgs-tr u { font-family: var(--mgs-hd); font-weight: 700; font-size: 19px; }
.mgs-tr u { color: var(--mgs-acc-ink); }
.mgs-tr.is-on { background: rgba(var(--mgs-acc-rgb), .1); box-shadow: inset 5px 0 0 var(--mgs-acc); }
.mgs-es { background: var(--mgs-dark); color: var(--mgs-on-dark); border-radius: var(--mgs-rl); padding: 30px; display: flex; flex-direction: column; }
.mgs-es h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 22px; line-height: 1.1; color: inherit; }
.mgs-es label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mgs-soft); margin-top: 22px; display: flex; justify-content: space-between; align-items: baseline; }
.mgs-es label b { color: var(--mgs-on-dark); font-family: var(--mgs-hd); font-size: 20px; letter-spacing: 0; text-transform: none; }
.mgs-es input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); margin: 14px 0 6px; padding: 0; border: 0; }
.mgs-es input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 8px; background: var(--mgs-acc); cursor: pointer; border: 3px solid #fff; }
.mgs-es input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 6px; background: var(--mgs-acc); cursor: pointer; border: 3px solid #fff; }
.mgs-eo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 auto; }
.mgs-eo div { background: rgba(255, 255, 255, .06); border-radius: var(--mgs-rs); padding: 14px 16px; }
.mgs-eo span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mgs-soft); }
.mgs-eo b { font-family: var(--mgs-hd); font-weight: 700; font-size: 24px; line-height: 1.1; display: block; margin-top: 4px; }
.mgs-eo div:last-child b { color: var(--mgs-acc2); }
.mgs-es .mgs-btn { margin-top: 22px; }
.mgs-es small { color: var(--mgs-soft); opacity: .75; font-size: 12px; margin-top: 12px; }

/* ==========================================================================
   Reviews, FAQ, call to action, clients
   ========================================================================== */
.mgs-rvw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mgs-rc { background: #fff; border-radius: var(--mgs-r); padding: 28px; border: 1px solid var(--mgs-line); position: relative; display: flex; flex-direction: column; }
.mgs-rc::before { content: "”"; position: absolute; right: 22px; top: 4px; font-family: Georgia, serif; font-weight: 700; font-size: 110px; line-height: 1; color: var(--mgs-bg); }
.mgs-rc-s { color: var(--mgs-acc); letter-spacing: 3px; position: relative; }
.mgs-rc blockquote { margin: 12px 0 22px; font-size: 16px; position: relative; border: 0; font-style: normal; }
.mgs-rc figcaption { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.mgs-rc figcaption i, .mgs-rc figcaption img { flex: none; width: 44px; height: 44px; border-radius: var(--mgs-rs); object-fit: cover; }
.mgs-rc figcaption i { background: var(--mgs-dark); color: var(--mgs-on-dark); display: grid; place-items: center; font-family: var(--mgs-hd); font-weight: 700; font-size: 15px; }
.mgs-rc figcaption b { display: block; line-height: 1.2; }
.mgs-rc figcaption span { font-size: 13px; color: var(--mgs-mut); }

.mgs-fq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); }
.mgs-fq .mgs-btn { margin-top: 26px; }
.mgs-fq details { border: 1px solid var(--mgs-line); border-radius: var(--mgs-rs); margin-bottom: 10px; padding: 0 22px; transition: border-color .3s, box-shadow .3s; background: #fff; }
.mgs-fq details[open] { border-color: var(--mgs-acc); box-shadow: 0 14px 30px -20px rgba(var(--mgs-acc-rgb), .6); }
.mgs-fq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font-weight: 600; font-size: 16px; }
.mgs-fq summary::-webkit-details-marker { display: none; }
.mgs-fq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: calc(var(--mgs-rs) * .75); background: var(--mgs-bg); display: grid; place-items: center; font-size: 20px; font-weight: 400; transition: background .3s, color .3s; }
.mgs-fq details[open] summary::after { content: "–"; background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-fq details p { padding: 0 0 20px; color: var(--mgs-mut); }

.mgs-band { margin: 0 var(--mgs-pad); border-radius: calc(var(--mgs-rl) + 2px); background: linear-gradient(110deg, var(--mgs-acc), var(--mgs-acc2)); color: var(--mgs-on-acc); padding: clamp(40px, 6vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; position: relative; overflow: hidden; }
.mgs-band::before { content: ""; position: absolute; right: -60px; top: -40%; width: 320px; height: 180%; background: rgba(255, 255, 255, .12); transform: rotate(14deg); }
.mgs-band h2 { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(32px, 4vw, 60px); line-height: 1.05; letter-spacing: -.025em; position: relative; max-width: 14em; color: inherit; }
.mgs-band div { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
.mgs-band .mgs-btn--ghost { border-color: currentColor; color: inherit; }
.mgs-band .mgs-btn--ghost:hover { background: #fff; color: var(--mgs-dark); border-color: #fff; }

.mgs-sec--flush .mgs-h { font-size: clamp(26px, 2.8vw, 40px); }
.mgs-cl { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 34px; }
.mgs-cl div { border: 1px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 22px 10px; text-align: center; transition: border-color .3s, transform .3s; }
.mgs-cl div:hover { border-color: var(--mgs-dark); transform: translateY(-4px); }
.mgs-cl b { font-family: var(--mgs-hd); font-weight: 700; font-size: 18px; display: block; line-height: 1.2; }
.mgs-cl span { font-size: 12px; color: var(--mgs-mut); }

/* ==========================================================================
   Footer
   ========================================================================== */
.mgs-ft { background: var(--mgs-dark); color: var(--mgs-soft); padding: 70px 0 0; margin-top: var(--mgs-gap); font-size: 14px; }
.mgs-fg { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
.mgs-ft .mgs-logo { color: var(--mgs-on-dark); }
.mgs-ft .mgs-logo-t span { color: var(--mgs-acc2); }
.mgs-ft h4 { font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-acc2); margin-bottom: 16px; }
.mgs-ft li { margin-bottom: 9px; }
.mgs-ft a:hover { color: var(--mgs-on-dark); }
.mgs-ft p { margin-top: 16px; max-width: 36ch; }
.mgs-cp { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 50px; padding: 20px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }

/* ==========================================================================
   Overlays: veil, drawer, popups, floating buttons
   ========================================================================== */
.mgs-veil { position: fixed; inset: 0; background: rgba(var(--mgs-dark-rgb), .6); backdrop-filter: blur(4px); z-index: 99980; opacity: 0; transition: opacity .35s; }
.mgs-veil.is-on { opacity: 1; }
.mgs-dr { position: fixed; top: 0; left: 0; bottom: 0; width: min(380px, 88%); background: #fff; z-index: 99990; transform: translateX(-100%); transition: transform .45s var(--mgs-ease); display: flex; flex-direction: column; overflow: hidden; }
.mgs-dr.is-on { transform: none; }
.mgs-dh { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px 24px; background: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-dh h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 22px; line-height: 1.1; color: inherit; }
.mgs-dh small { display: block; font-size: 13px; color: var(--mgs-soft); margin-top: 6px; }
.mgs-x { flex: none; width: 38px; height: 38px; border-radius: var(--mgs-rs); background: rgba(255, 255, 255, .12); font-size: 20px; line-height: 1; color: var(--mgs-on-dark); display: grid; place-items: center; }
.mgs-x:hover { background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-dr-b { flex: 1; overflow: auto; padding: 14px 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.mgs-dr-b summary, .mgs-dr-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--mgs-line); font-family: var(--mgs-hd); font-weight: 600; font-size: 17px; cursor: pointer; }
.mgs-dr-b details ul { padding: 8px 0 8px 14px; }
.mgs-dr-b details li a { display: block; padding: 8px 0; color: var(--mgs-mut); }
.mgs-dr-b .sub-menu { display: none; }
.mgs-dr-b .mgs-btn { margin-top: 18px; }

.mgs-md { position: fixed; inset: 0; z-index: 99995; display: grid; place-items: center; padding: 16px; overflow: auto; opacity: 0; transition: opacity .35s; }
.mgs-md.is-on { opacity: 1; }
.mgs-qm { background: #fff; border-radius: var(--mgs-rl); width: min(640px, 100%); overflow: hidden; transform: translateY(20px); transition: transform .45s var(--mgs-ease); margin: auto; }
.mgs-md.is-on .mgs-qm { transform: none; }
.mgs-qm form { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mgs-qm label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mgs-mut); display: grid; gap: 6px; }
.mgs-full { grid-column: 1 / -1; }
.mgs-qm :is(input, select, textarea) { width: 100%; border: 1.5px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 12px 14px; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mgs-ink); background: #fff; outline: 0; transition: border-color .2s; box-shadow: none; height: auto; }
.mgs-qm :is(input, select, textarea):focus { border-color: var(--mgs-acc); }
.mgs-qm :is(input, textarea).is-bad { border-color: #d92d20; }
.mgs-qm small { text-align: center; color: var(--mgs-mut); font-size: 12px; }
.mgs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mgs-msg { border-radius: var(--mgs-rs); padding: 14px; font-weight: 600; text-align: center; background: #e8f7ef; color: #0c6b3a; }
.mgs-msg.is-error { background: #fdecea; color: #a1261b; }
.mgs-vb { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: var(--mgs-r); position: relative; }
.mgs-vb :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--mgs-r); }
.mgs-vb .mgs-x { position: absolute; right: 0; top: -48px; z-index: 2; }

.mgs-wa { position: fixed; left: 20px; bottom: 20px; z-index: 99970; width: 56px; height: 56px; border-radius: calc(var(--mgs-r) * .9); background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 26px -8px rgba(37, 211, 102, .7); transition: transform .3s; }
.mgs-wa:hover { transform: translateY(-3px); color: #fff; }
.mgs-mbar { display: none; }

/* ==========================================================================
   Heading style: caps (condensed, uppercase, oversized)
   ========================================================================== */
.mgs[data-head=caps] .mgs-h { font-size: clamp(38px, 5vw, 72px); text-transform: uppercase; line-height: .92; letter-spacing: .005em; font-weight: 800; }
.mgs[data-head=caps] :is(.mgs-h, .mgs-hero-h) em { font-style: italic; padding-right: .06em; }
.mgs[data-head=caps] .mgs-hero-h { font-size: clamp(52px, 7.4vw, 118px); text-transform: uppercase; line-height: .86; letter-spacing: 0; font-weight: 800; }
.mgs[data-head=caps] .mgs-band h2 { font-size: clamp(40px, 5.4vw, 84px); text-transform: uppercase; line-height: .9; letter-spacing: 0; font-weight: 800; }
.mgs[data-head=caps] :is(.mgs-btn, .mgs-more, .mgs-tabs button, .mgs-nav > li > a, .mgs-n) { font-size: 17px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.mgs[data-head=caps] .mgs-pc-bt .mgs-btn, .mgs[data-head=caps] .mgs-pc-q { font-size: 15px; }
.mgs[data-head=caps] :is(.mgs-eye, .mgs-star, .mgs-ann, .mgs-vid-l) { font-size: 15px; letter-spacing: .18em; font-weight: 700; }
.mgs[data-head=caps] :is(.mgs-pc-cat, .mgs-pc-flag, .mgs-ft h4, .mgs-tr--hd) { font-size: 14px; }
.mgs[data-head=caps] .mgs-logo { font-size: 30px; text-transform: uppercase; letter-spacing: .02em; }
.mgs[data-head=caps] .mgs-logo b { font-size: 24px; font-style: italic; }
.mgs[data-head=caps] :is(.mgs-us b, .mgs-st h3, .mgs-ai h4, .mgs-fi h4, .mgs-es h3, .mgs-dh h3, .mgs-cl b, .mgs-mg h4, .mgs-ct h3, .mgs-promo, .mgs-tt) { text-transform: uppercase; letter-spacing: .01em; font-weight: 800; }
.mgs[data-head=caps] :is(.mgs-us b, .mgs-mg h4) { font-size: 21px; line-height: 1.1; }
.mgs[data-head=caps] :is(.mgs-st h3, .mgs-ai h4, .mgs-fi h4, .mgs-cl b) { font-size: 24px; line-height: 1.05; }
.mgs[data-head=caps] .mgs-ct h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: .95; }
.mgs[data-head=caps] :is(.mgs-es h3, .mgs-dh h3) { font-size: 30px; line-height: 1; }
.mgs[data-head=caps] :is(.mgs-pc-pr b, .mgs-tr b, .mgs-tr u) { font-size: 24px; font-weight: 800; }
.mgs[data-head=caps] .mgs-ai b { font-size: 44px; font-style: italic; font-weight: 800; }
.mgs[data-head=caps] .mgs-st b { font-size: 120px; font-style: italic; }
.mgs[data-head=caps] .mgs-eo b { font-size: 34px; font-weight: 800; }
.mgs[data-head=caps] .mgs-tag b { font-size: 46px; }

/* Heading style: serif (italic accent words) */
.mgs[data-head=serif] :is(.mgs-h, .mgs-hero-h) em { font-style: italic; }
.mgs[data-head=serif] :is(.mgs-h, .mgs-hero-h, .mgs-band h2) { letter-spacing: -.01em; }

/* ==========================================================================
   Live style picker (administrators only)
   ========================================================================== */
.mgs-pk { position: fixed; right: 16px; bottom: 16px; z-index: 99975; font-family: system-ui, -apple-system, Segoe UI, sans-serif; font-size: 12px; color: #111; }
.mgs-pk-tg { background: #111; color: #fff; padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); margin-left: auto; display: block; }
.mgs-pk-b { background: #fff; border: 1px solid #ddd; border-radius: 16px; padding: 16px; width: 252px; max-height: min(78vh, 640px); overflow: auto; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .45); margin-bottom: 10px; }
.mgs-pk h5 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #777; margin: 14px 0 8px; font-weight: 600; font-family: inherit; }
.mgs-pk h5:first-child { margin-top: 0; }
.mgs-pk h5 b { color: #111; }
.mgs-pk-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mgs-pk-sw button { aspect-ratio: 1; border-radius: 10px; position: relative; overflow: hidden; outline-offset: 2px; border: 1px solid rgba(0, 0, 0, .12); }
.mgs-pk-sw button i { position: absolute; right: 0; bottom: 0; width: 50%; height: 50%; border-radius: 8px 0 0 0; }
.mgs-pk-sw button.is-on { outline: 2px solid #111; }
.mgs-pk-cu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mgs-pk-cu label { display: grid; gap: 4px; font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: .08em; }
.mgs-pk-cu input { width: 100%; height: 34px; padding: 0; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; }
.mgs-pk select { width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 10px; background: #fff; font-size: 14px; color: #111; }
.mgs-pk-sv { width: 100%; margin-top: 16px; padding: 12px; border-radius: 10px; background: #111; color: #fff; font-weight: 700; font-size: 13px; text-align: center; }
.mgs-pk-sv[disabled] { opacity: .5; }
.mgs-pk p { color: #777; margin-top: 10px; line-height: 1.4; }
.mgs-pk p a { text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .mgs-hb > nav, .mgs-util { display: none; }
  .mgs-burger { display: grid; }
  .mgs-hb { gap: 12px; }
  .mgs-usp, .mgs-cg { grid-template-columns: 1fr 1fr; }
  .mgs-steps { grid-template-columns: 1fr 1fr; }
  .mgs-track .mgs-pc { flex-basis: calc((100% - 18px) / 2.3); }
  .mgs-grid { grid-template-columns: 1fr 1fr; }
  .mgs-adv, .mgs-ql, .mgs-pg, .mgs-fq { grid-template-columns: 1fr; }
  .mgs-rvw { grid-template-columns: 1fr; }
  .mgs-cl { grid-template-columns: repeat(3, 1fr); }
  .mgs-fg { grid-template-columns: 1fr 1fr; }
  .mgs-hc { max-width: min(620px, 56%); }
}
@media (max-width: 782px) {
  .admin-bar .mgs-hd { top: 46px; }
}
@media (max-width: 640px) {
  .admin-bar .mgs-hd { top: 0; }
  .mgs-hb { height: 64px; }
  .mgs-logo { font-size: 20px; }
  .mgs-logo b { width: 38px; height: 38px; font-size: 16px; }
  .mgs[data-head=caps] .mgs-logo { font-size: 24px; }
  .mgs-ha .mgs-btn { display: none; }
  .mgs-hw { height: auto; min-height: 600px; }
  .mgs-hsl::after { display: none; }
  .mgs-hsl::before { background: linear-gradient(0deg, rgba(var(--mgs-dark-rgb), .96) 40%, rgba(var(--mgs-dark-rgb), .35)); }
  .mgs-hc { top: auto; bottom: 86px; transform: none; right: 22px; max-width: none; }
  .mgs-tag { top: 18px; bottom: auto; right: 18px; padding: 10px 16px; }
  .mgs-tag b { font-size: 28px; }
  .mgs-usp { grid-template-columns: 1fr; }
  .mgs-cg, .mgs-grid { gap: 10px; }
  .mgs-track .mgs-pc { flex-basis: 72%; }
  .mgs-pc-q { display: none; }
  .mgs-pc-bt { grid-template-columns: 1fr; }
  .mgs-steps, .mgs-fl, .mgs-fg, .mgs-qm form { grid-template-columns: 1fr; }
  .mgs-tr { grid-template-columns: 1.2fr .8fr; }
  .mgs-tr > :nth-child(n+3) { display: none; }
  .mgs-cl { grid-template-columns: 1fr 1fr; }
  .mgs-flag { gap: 10px; padding: 14px 10px; }
  .mgs-flag b { font-size: 20px; }
  .mgs-mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99960; background: #fff; padding: 8px 12px; border-top: 1px solid var(--mgs-line); }
  .mgs-mbar .mgs-btn { padding: 12px; }
  .mgs { padding-bottom: 66px; }
  .mgs-wa { bottom: 80px; left: 14px; }
  .mgs-pk { bottom: 80px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mgs *, .mgs *::before, .mgs *::after { animation: none !important; transition-duration: .01s !important; }
  .mgs.is-js .mgs-rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   Inner pages: page title band, posts and pages, glove archive, single glove
   ========================================================================== */
.mgs-inner { min-height: 50vh; }
.mgs-ph { background: var(--mgs-dark); color: var(--mgs-on-dark); margin: 16px var(--mgs-pad) 0; border-radius: calc(var(--mgs-rl) + 2px); padding: clamp(36px, 6vw, 80px) clamp(22px, 5vw, 80px); position: relative; overflow: hidden; background-image: radial-gradient(70% 120% at 100% 0, rgba(var(--mgs-acc-rgb), .35), transparent 70%); }
.mgs-ph .mgs-eye, .mgs-ph .mgs-h em { color: var(--mgs-acc2); }
.mgs-ph p { color: var(--mgs-soft); max-width: 60ch; margin-top: 12px; font-size: 16px; }
.mgs-crumb { font-size: 13px; color: var(--mgs-soft); margin-bottom: 14px; }
.mgs-crumb a:hover { color: var(--mgs-on-dark); }
.mgs-body { padding-top: clamp(36px, 5vw, 72px); }
.mgs-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.mgs-pills a { font-family: var(--mgs-hd); font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: var(--mgs-rs); border: 2px solid var(--mgs-line); transition: .25s; }
.mgs-pills a:hover { border-color: var(--mgs-dark); }
.mgs-pills a.is-on { background: var(--mgs-acc); border-color: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-empty { color: var(--mgs-mut); padding: 40px 0; }

.mgs-prose { max-width: 780px; font-size: 17px; line-height: 1.75; }
.mgs-prose--wide { max-width: none; }
.mgs-prose > * + * { margin-top: 1.1em; }
.mgs-prose :is(h2, h3, h4) { font-family: var(--mgs-hd); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin-top: 1.6em; }
.mgs-prose h2 { font-size: 30px; } .mgs-prose h3 { font-size: 23px; } .mgs-prose h4 { font-size: 19px; }
.mgs-prose a { color: var(--mgs-acc-ink); text-decoration: underline; }
.mgs-prose :is(ul, ol) { padding-left: 1.3em; } .mgs-prose ul { list-style: disc; } .mgs-prose ol { list-style: decimal; }
.mgs-prose img { border-radius: var(--mgs-r); }
.mgs-prose blockquote { border-left: 4px solid var(--mgs-acc); padding-left: 18px; color: var(--mgs-mut); }
.mgs-thumb { border-radius: var(--mgs-rl); overflow: hidden; margin-bottom: 30px; max-width: 980px; }

.mgs-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mgs-post { border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .35s var(--mgs-ease), box-shadow .35s; }
.mgs-post:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -22px rgba(var(--mgs-dark-rgb), .35); }
.mgs-post-im { aspect-ratio: 16 / 10; background: var(--mgs-bg); display: block; }
.mgs-post-im img { width: 100%; height: 100%; object-fit: cover; }
.mgs-post > div { padding: 20px; }
.mgs-post small { color: var(--mgs-mut); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mgs-post h2 { font-family: var(--mgs-hd); font-weight: 700; font-size: 20px; line-height: 1.25; margin: 6px 0 8px; }
.mgs-post p { color: var(--mgs-mut); font-size: 14px; }

.mgs-pager { margin-top: 40px; }
.mgs-pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mgs-pager .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; display: grid; place-items: center; border: 2px solid var(--mgs-line); border-radius: var(--mgs-rs); font-family: var(--mgs-hd); font-weight: 600; }
.mgs-pager .page-numbers.current { background: var(--mgs-dark); border-color: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-pager .screen-reader-text { position: absolute; left: -9999px; }

.mgs-pd { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.mgs-pd-main { aspect-ratio: 1; border-radius: var(--mgs-rl); overflow: hidden; background: var(--mgs-bg); position: relative; }
.mgs-pd-main img { width: 100%; height: 100%; object-fit: cover; }
.mgs-pd-th { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mgs-pd-th button { width: 78px; height: 78px; border-radius: var(--mgs-rs); overflow: hidden; border: 2px solid transparent; background: var(--mgs-bg); }
.mgs-pd-th button.is-on { border-color: var(--mgs-acc); }
.mgs-pd-th img { width: 100%; height: 100%; object-fit: cover; }
.mgs-pd-info .mgs-h { font-size: clamp(28px, 3vw, 44px); }
.mgs-pd-info > p { color: var(--mgs-mut); font-size: 16px; margin-top: 14px; }
.mgs-pd-price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.mgs-pd-price b { font-family: var(--mgs-hd); font-weight: 700; font-size: 32px; line-height: 1; }
.mgs-pd-price span, .mgs-pd-price small { color: var(--mgs-mut); font-size: 13px; }
.mgs-specs { margin-top: 22px; border-top: 1px solid var(--mgs-line); }
.mgs-specs div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mgs-line); font-size: 14px; }
.mgs-specs dt, .mgs-specs b { font-weight: 600; }
.mgs-feat { margin-top: 20px; display: grid; gap: 8px; }
.mgs-feat li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.mgs-feat li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--mgs-acc); color: var(--mgs-on-acc); font-size: 12px; display: grid; place-items: center; margin-top: 2px; }
.mgs-pd-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 1100px) {
  .mgs-posts { grid-template-columns: 1fr 1fr; }
  .mgs-pd { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mgs-posts { grid-template-columns: 1fr; }
  .mgs-specs div { grid-template-columns: 110px 1fr; }
}

/* ==========================================================================
   Shop page (archive) and product page
   ========================================================================== */
.mgs-bc { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--mgs-mut); padding: 22px 0 0; }
.mgs-bc a::after { content: "/"; margin-left: 8px; opacity: .5; }
.mgs-bc a:hover { color: var(--mgs-acc-ink); }
.mgs-bc span { color: var(--mgs-ink); }

.mgs-ch { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 18px 0 26px; border-bottom: 1px solid var(--mgs-line); }
.mgs-ch .mgs-h { margin-top: 0; }
.mgs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mgs-chips li { background: var(--mgs-bg); border-radius: 99px; padding: 7px 14px; font-size: 13px; color: var(--mgs-mut); }
.mgs-chips b { color: var(--mgs-ink); font-weight: 600; }
.mgs-count { color: var(--mgs-mut); font-size: 13px; margin-top: 12px; }

.mgs-bar { display: flex; align-items: center; gap: 14px; padding: 18px 0; }
.mgs-fbtn { display: none; padding: 10px 18px; }
.mgs-act { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.mgs-act a { background: var(--mgs-dark); color: var(--mgs-on-dark); border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 500; }
.mgs-act a:hover { background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-sort { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mgs-mut); margin-left: auto; }
.mgs-sort select { border: 2px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 9px 14px; background: #fff; font-family: var(--mgs-hd); font-weight: 600; font-size: 14px; color: var(--mgs-ink); }
.mgs-shop-g { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 34px; align-items: start; }
.mgs-side { position: sticky; top: 100px; border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); padding: 6px 20px 20px; background: #fff; max-height: calc(100vh - 120px); overflow: auto; }
.mgs-fgroup { padding: 16px 0; border-bottom: 1px solid var(--mgs-line); }
.mgs-fgroup h3 { font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-acc-ink); margin-bottom: 10px; }
.mgs-flinks a, .mgs-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.mgs-flinks a:hover, .mgs-flinks a.is-on { color: var(--mgs-acc-ink); font-weight: 600; }
.mgs-flinks small, .mgs-check small { margin-left: auto; color: var(--mgs-mut); font-size: 12px; }
.mgs-check input { width: 18px; height: 18px; accent-color: var(--mgs-acc); margin: 0; }
.mgs-fbtns { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; }
.mgs-fbtns .mgs-btn { padding: 11px 24px; }
.mgs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mgs-qcard { grid-column: 1 / -1; background: var(--mgs-dark); color: var(--mgs-on-dark); border-radius: var(--mgs-rl); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr auto; gap: 6px 30px; align-items: center; background-image: radial-gradient(60% 140% at 100% 0, rgba(var(--mgs-acc-rgb), .4), transparent 70%); }
.mgs-qcard .mgs-eye { color: var(--mgs-acc2); grid-column: 1; }
.mgs-qcard h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; grid-column: 1; color: inherit; }
.mgs-qcard p { color: var(--mgs-soft); grid-column: 1; }
.mgs-qcard .mgs-btn { grid-column: 2; grid-row: 1 / 4; }
.mgs-about { margin-top: var(--mgs-gap); padding-top: 40px; border-top: 1px solid var(--mgs-line); }
.mgs-about .mgs-h { font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 14px; }
.mgs-also { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 14px; }
.mgs-also a { border: 1px solid var(--mgs-line); border-radius: 99px; padding: 6px 14px; }
.mgs-also a:hover { border-color: var(--mgs-acc); color: var(--mgs-acc-ink); }

/* Product page */
.mgs-pd { grid-template-columns: 1.08fr .92fr; padding-top: 22px; }
.mgs-gal { display: grid; grid-template-columns: 84px 1fr; gap: 12px; position: sticky; top: 100px; }
.mgs-gal--one { grid-template-columns: 1fr; }
.mgs-gal .mgs-pd-th { flex-direction: column; flex-wrap: nowrap; margin: 0; max-height: 640px; overflow: auto; scrollbar-width: none; }
.mgs-gal .mgs-pd-th button { width: 84px; height: 84px; flex: none; }
.mgs-buy .mgs-eye:hover { opacity: .8; }
.mgs-buy .mgs-h { font-size: clamp(28px, 3vw, 44px); }
.mgs-sku { color: var(--mgs-mut); font-size: 13px; margin-top: 8px; }
.mgs-lead { color: var(--mgs-mut); font-size: 16px; margin-top: 12px; }
.mgs-pbox { background: var(--mgs-bg); border-radius: var(--mgs-r); padding: 20px; margin-top: 20px; }
.mgs-pbox .mgs-pd-price { margin: 0; flex-wrap: wrap; }
.mgs-pd-price em { margin-left: auto; background: var(--mgs-dark); color: var(--mgs-on-dark); border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.mgs-pd-price .mgs-por { font-size: 22px; }
.mgs-vt { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 16px; }
.mgs-vt div { background: #fff; border: 2px solid transparent; border-radius: var(--mgs-rs); padding: 10px 12px; transition: border-color .25s; }
.mgs-vt div.is-on { border-color: var(--mgs-acc); }
.mgs-vt small { display: block; font-size: 11px; color: var(--mgs-mut); }
.mgs-vt b { display: block; font-family: var(--mgs-hd); font-weight: 700; font-size: 18px; line-height: 1.3; }
.mgs-vt span { font-size: 11px; color: var(--mgs-acc-ink); font-weight: 600; }
.mgs-opt { margin-top: 20px; }
.mgs-opt > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mgs-mut); margin-bottom: 8px; }
.mgs-opt ul { display: flex; flex-wrap: wrap; gap: 8px; }
.mgs-opt li { min-width: 46px; text-align: center; border: 2px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 8px 12px; font-weight: 600; font-size: 14px; }
.mgs-qrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mgs-qty { display: inline-flex; border: 2px solid var(--mgs-line); border-radius: var(--mgs-rs); overflow: hidden; }
.mgs-qty button { width: 46px; height: 48px; font-size: 20px; text-align: center; }
.mgs-qty button:hover { background: var(--mgs-bg); }
.mgs-qty input { width: 96px; height: 48px; border: 0; text-align: center; font-family: var(--mgs-hd); font-weight: 700; font-size: 17px; background: #fff; outline: 0; -moz-appearance: textfield; padding: 0; box-shadow: none; }
.mgs-qty input::-webkit-outer-spin-button, .mgs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mgs-est { color: var(--mgs-mut); font-size: 14px; }
.mgs-est b { font-family: var(--mgs-hd); font-weight: 700; font-size: 22px; color: var(--mgs-ink); margin-left: 6px; }
.mgs-buy .mgs-pd-cta .mgs-btn--acc { flex: 1 1 100%; padding: 18px 28px; font-size: 16px; }
.mgs-buy .mgs-pd-cta .mgs-btn--line { flex: 1; }
.mgs-fine { color: var(--mgs-mut); font-size: 12px; margin-top: 10px; }
.mgs-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 22px; }
.mgs-trust li { border: 1px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 12px 14px; font-size: 13px; }
.mgs-trust b { display: block; font-family: var(--mgs-hd); font-weight: 700; font-size: 14px; }
.mgs-trust span { color: var(--mgs-mut); }
.mgs-acc { margin-top: 24px; border-top: 1px solid var(--mgs-line); }
.mgs-acc details { border-bottom: 1px solid var(--mgs-line); }
.mgs-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-family: var(--mgs-hd); font-weight: 700; font-size: 17px; }
.mgs-acc summary::-webkit-details-marker { display: none; }
.mgs-acc summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--mgs-acc-ink); }
.mgs-acc details[open] summary::after { content: "–"; }
.mgs-acc details > :not(summary) { padding-bottom: 20px; margin-top: 0; }
.mgs-acc .mgs-prose { font-size: 15px; }
.mgs-acc .mgs-specs { border-top: 0; margin: 0; }
.mgs-acc .mgs-specs div:last-child { border-bottom: 0; }
.mgs-pd-why { margin-top: var(--mgs-gap); }
.mgs-al--row { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.mgs-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99965; background: #fff; border-top: 1px solid var(--mgs-line); box-shadow: 0 -14px 30px -20px rgba(var(--mgs-dark-rgb), .4); padding: 10px 0; }
.mgs-sticky .mgs-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mgs-sticky b { font-family: var(--mgs-hd); font-weight: 700; display: block; line-height: 1.2; }
.mgs-sticky span { color: var(--mgs-mut); font-size: 13px; }
.mgs-sticky .mgs-btn { padding: 12px 24px; }

@media (max-width: 1100px) {
  .mgs-shop-g { grid-template-columns: 1fr; }
  .mgs-fbtn { display: inline-flex; }
  .mgs-side { display: none; position: static; max-height: none; }
  .mgs-side.is-open { display: block; }
  .mgs-grid--3 { grid-template-columns: 1fr 1fr; }
  .mgs-gal { position: static; }
  .mgs-al--row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mgs-gal { grid-template-columns: 1fr; }
  .mgs-gal .mgs-pd-th { flex-direction: row; order: 2; max-height: none; }
  .mgs-gal .mgs-pd-th button { width: 64px; height: 64px; }
  .mgs-qcard { grid-template-columns: 1fr; }
  .mgs-qcard .mgs-btn { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .mgs-act { display: none; }
  .mgs-sticky { bottom: 66px; }
  .mgs-sticky span { display: none; }
  .mgs-sticky b { font-size: 13px; }
}
.mgs-sticky .mgs-wrap { padding-left: max(var(--mgs-pad), 96px); }

/* ==========================================================================
   Product page v2: info column, tabs, material blocks, gallery, video, reviews
   ========================================================================== */
.mgs-catpill { display: inline-block; background: var(--mgs-dark); color: var(--mgs-on-dark); font-family: var(--mgs-hd); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; }
.mgs-catpill:hover { background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-buy .mgs-h { margin-top: 14px; }
.mgs-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.mgs-meta .mgs-sku { margin: 0; }
.mgs-rate { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.mgs-rate span { color: var(--mgs-acc); letter-spacing: 2px; }
.mgs-rate small { color: var(--mgs-mut); }
.mgs-pbox { margin-top: 16px; }
.mgs-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.mgs-svc li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mgs-line); border-radius: var(--mgs-rs); padding: 10px 12px; font-size: 13px; font-weight: 500; background: #fff; }
.mgs-svc li::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 6px; background: rgba(var(--mgs-acc-rgb), .15); color: var(--mgs-acc-ink); font-size: 11px; display: grid; place-items: center; }
.mgs-svc--wide { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.mgs-qbox { margin-top: 18px; border: 1px solid var(--mgs-line); border-left: 4px solid var(--mgs-acc); border-radius: var(--mgs-rs); padding: 16px 18px; background: var(--mgs-bg); }
.mgs-qbox h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--mgs-ink); }
.mgs-qbox p { color: var(--mgs-mut); font-size: 13px; margin-top: 4px; }
.mgs-qbox div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mgs-qbox a { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--mgs-line); border-radius: 99px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
.mgs-qbox a:hover { border-color: var(--mgs-acc); color: var(--mgs-acc-ink); }
.mgs-dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; }
.mgs-pd-cta--two { display: grid; grid-template-columns: 1fr 1fr; }
.mgs-buy .mgs-pd-cta--two .mgs-btn { padding: 17px 20px; font-size: 15px; white-space: normal; text-align: center; }
.mgs-ticks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; font-size: 13px; color: var(--mgs-mut); }
.mgs-ticks li::before { content: "✓ "; color: var(--mgs-acc-ink); font-weight: 700; }
.mgs-zoom { position: absolute; right: 14px; bottom: 14px; background: rgba(var(--mgs-dark-rgb), .8); color: var(--mgs-on-dark); border-radius: 99px; padding: 7px 14px; font-size: 12px; font-weight: 600; }

.mgs-usp--dark { margin-top: clamp(36px, 5vw, 64px); background: var(--mgs-dark); border-radius: var(--mgs-rl); padding: 10px; gap: 0; }
.mgs-usp--dark .mgs-us { background: none; color: var(--mgs-on-dark); }
.mgs-usp--dark .mgs-us:hover { background: rgba(255, 255, 255, .06); }
.mgs-usp--dark .mgs-us span { color: var(--mgs-soft); }
.mgs-usp--dark .mgs-us i { flex: none; width: 40px; height: 40px; border-radius: var(--mgs-rs); background: var(--mgs-acc); color: var(--mgs-on-acc); display: grid; place-items: center; font-size: 17px; }

.mgs-ptabs { margin-top: clamp(28px, 4vw, 48px); border: 1px solid var(--mgs-line); border-radius: var(--mgs-rl); overflow: hidden; background: #fff; scroll-margin-top: 100px; }
.mgs-tabs--bar { background: var(--mgs-dark); margin: 0; padding: 10px 12px 0; gap: 4px; }
.mgs-tabs--bar button { border: 0; border-radius: var(--mgs-rs) var(--mgs-rs) 0 0; color: var(--mgs-soft); padding: 13px 20px; }
.mgs-tabs--bar button:hover { color: var(--mgs-on-dark); }
.mgs-tabs--bar button[aria-selected=true] { background: #fff; color: var(--mgs-ink); }
.mgs-ppanel { padding: clamp(22px, 3.4vw, 48px); }
.mgs-ppanel > .mgs-h { font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 18px; }
.mgs-ppanel .mgs-prose { font-size: 16px; }
.mgs-feat--2 { grid-template-columns: 1fr 1fr; margin-top: 0; }

.mgs-mat { margin-top: var(--mgs-gap); }
.mgs-mrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.mgs-mrow + .mgs-mrow { margin-top: clamp(40px, 6vw, 90px); }
.mgs-mrow--flip > :first-child { order: 2; }
.mgs-mrow--solo { grid-template-columns: 1fr; }
.mgs-mrow .mgs-feat { margin-top: 22px; }
.mgs-mimg { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--mgs-rl); overflow: hidden; background: #fff; cursor: zoom-in; }
.mgs-mimg img, .mgs-cgal img, .mgs-fv img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--mgs-ease); }
.mgs-mimg:hover img, .mgs-cgal button:hover img { transform: scale(1.05); }

.mgs-cgal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mgs-cgal button { aspect-ratio: 1; border-radius: var(--mgs-r); overflow: hidden; background: var(--mgs-bg); cursor: zoom-in; display: block; }

.mgs-fv { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mgs-rl); overflow: hidden; background: linear-gradient(140deg, var(--mgs-dark3), var(--mgs-dark2)); cursor: pointer; }
.mgs-fv:hover .mgs-play { transform: translate(-50%, -50%) scale(1.08); }
.mgs-fv :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.mgs-fv.is-playing { cursor: default; }

.mgs-rsum { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; border: 1px solid var(--mgs-line); border-radius: var(--mgs-rl); padding: clamp(22px, 3vw, 40px); margin-bottom: 18px; }
.mgs-rsum > div { text-align: center; }
.mgs-rsum > div b { display: block; font-family: var(--mgs-hd); font-weight: 800; font-size: 72px; line-height: 1; color: var(--mgs-acc-ink); }
.mgs-rsum > div span { display: block; color: var(--mgs-acc); letter-spacing: 4px; margin: 8px 0 4px; }
.mgs-rsum > div small { color: var(--mgs-mut); }
.mgs-rsum li { display: grid; grid-template-columns: 40px 1fr 44px; gap: 12px; align-items: center; padding: 5px 0; font-size: 13px; }
.mgs-rsum li i { height: 8px; border-radius: 8px; background: var(--mgs-bg); overflow: hidden; display: block; }
.mgs-rsum li u { display: block; height: 100%; background: var(--mgs-acc); border-radius: 8px; }
.mgs-rsum li small { color: var(--mgs-mut); text-align: right; }

.mgs-band--dark { background: var(--mgs-dark); color: var(--mgs-on-dark); background-image: radial-gradient(60% 140% at 100% 0, rgba(var(--mgs-acc-rgb), .4), transparent 70%); }
.mgs-band--dark::before { display: none; }
.mgs-band-t { display: block !important; max-width: 720px; }
.mgs-band--dark .mgs-eye { color: var(--mgs-acc2); }
.mgs-band--dark h2 { margin-top: 10px; }
.mgs-band--dark p { color: var(--mgs-soft); margin-top: 14px; font-size: 16px; }
.mgs-zoomed { max-width: min(1200px, 100%); max-height: 88vh; border-radius: var(--mgs-r); position: relative; }
.mgs-vb--img { aspect-ratio: auto; width: auto; background: none; }
.mgs-vb--img img { max-height: 88vh; width: auto; max-width: 100%; border-radius: var(--mgs-r); }

@media (max-width: 1100px) {
  .mgs-mrow { grid-template-columns: 1fr; }
  .mgs-mrow--flip > :first-child { order: 0; }
  .mgs-cgal { grid-template-columns: repeat(3, 1fr); }
  .mgs-svc--wide { grid-template-columns: 1fr 1fr; }
  .mgs-usp--dark { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mgs-svc { grid-template-columns: 1fr 1fr; }
  .mgs-pd-cta--two { grid-template-columns: 1fr; }
  .mgs-cgal { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mgs-rsum { grid-template-columns: 1fr; gap: 20px; }
  .mgs-feat--2 { grid-template-columns: 1fr; }
  .mgs-usp--dark { grid-template-columns: 1fr; }
  .mgs-tabs--bar button { padding: 12px 14px; }
}

/* ---- Shop v3: banner, filter panel on top, 4 per row ---- */
.mgs-cban { position: relative; overflow: hidden; background: var(--mgs-dark); color: var(--mgs-on-dark); background-image: radial-gradient(70% 140% at 100% 0, rgba(var(--mgs-acc-rgb), .35), transparent 70%); }
.mgs-cban-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mgs-cban-f { pointer-events: none; }
.mgs-cban-f iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; }
.mgs-cban.has-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--mgs-dark-rgb), .88), rgba(var(--mgs-dark-rgb), .55) 55%, rgba(var(--mgs-dark-rgb), .25)); }
.mgs-cban-in { position: relative; z-index: 1; min-height: clamp(320px, 42vw, 480px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 40px; padding-bottom: 48px; }
.mgs-cban .mgs-bc { padding: 0 0 18px; color: var(--mgs-soft); }
.mgs-cban .mgs-bc span, .mgs-cban .mgs-bc a:hover { color: var(--mgs-on-dark); }
.mgs-cban .mgs-h { color: inherit; margin: 0; max-width: 16ch; }
.mgs-cban-t { max-width: 56ch; margin-top: 16px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--mgs-soft); }
.mgs-cban-b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mgs-cban .mgs-btn--ghost { border: 2px solid rgba(255, 255, 255, .45); color: var(--mgs-on-dark); background: transparent; }
.mgs-cban .mgs-btn--ghost:hover { background: var(--mgs-on-dark); color: var(--mgs-dark); border-color: var(--mgs-on-dark); }
#mgs-products { scroll-margin-top: 90px; }

.mgs-bar .mgs-count { margin: 0; white-space: nowrap; }
.mgs-shop-g { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
.mgs-side { padding: 4px 18px 18px; }
.mgs-inner .mgs-shop-g .mgs-grid { gap: 14px; }
.mgs-shop-g .mgs-pc-b { flex-wrap: wrap; }
.mgs-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.mgs-swatch { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--mgs-line); border-radius: 99px; padding: 5px 12px 5px 6px; font-size: 13px; cursor: pointer; position: relative; }
.mgs-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mgs-swatch i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); }
.mgs-swatch:has(input:checked) { border-color: var(--mgs-dark); background: var(--mgs-bg); font-weight: 600; }
.mgs-swatch:has(input:focus-visible) { outline: 2px solid var(--mgs-acc); outline-offset: 2px; }
.mgs-about { margin-top: 44px; }
@media (max-width: 1280px) {
  .mgs-inner .mgs-shop-g .mgs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .mgs-shop-g { grid-template-columns: 1fr; }
  .mgs-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 28px; position: static; max-height: none; }
  .mgs-side .mgs-fgroup { border-bottom: 0; }
  .mgs-side .mgs-flinks { max-height: 190px; overflow: auto; }
  .mgs-side .mgs-fbtns { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mgs-inner .mgs-shop-g .mgs-grid { grid-template-columns: 1fr 1fr; }
  .mgs-bar { flex-wrap: wrap; }
  .mgs-cban-b .mgs-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Footer: logo background + big brand name ---- */
.mgs-ft { position: relative; overflow: hidden; }
.mgs-ft > .mgs-wrap { position: relative; z-index: 1; }
.mgs-ft-bg { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
.mgs-ft-word { position: relative; z-index: 1; font-family: var(--mgs-hd); font-weight: 800; font-size: clamp(56px, 17.5vw, 330px); line-height: .78; letter-spacing: -.04em; text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--mgs-acc); padding-top: .12em; margin-bottom: -.06em; user-select: none; }

/* ---- Footer v2 + side menu: socials, description, contact ---- */
.mgs-soc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mgs-soc li { margin: 0; }
.mgs-soc a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: var(--mgs-on-dark); transition: background .25s, border-color .25s, color .25s; }
.mgs-soc a:hover { background: var(--mgs-acc); border-color: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-ft .mgs-ft-desc { max-width: none; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; line-height: 1.8; }
.mgs-ft-desc + .mgs-cp { margin-top: 26px; }
.mgs-ft .mgs-logo img { max-height: 64px; width: auto; }
.mgs-dh .mgs-logo img { max-height: 44px; width: auto; }
.mgs-dr-b { overflow-y: auto; }
.mgs-dr-c { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mgs-line); font-size: 14px; }
.mgs-dr-c h4 { font-family: var(--mgs-hd); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-acc-ink); margin-bottom: 12px; }
.mgs-dr-c li { margin-bottom: 8px; color: var(--mgs-mut); }
.mgs-dr-c .mgs-soc a { border-color: var(--mgs-line); color: var(--mgs-ink); }
.mgs-dr-c .mgs-soc a:hover { color: var(--mgs-on-acc); border-color: var(--mgs-acc); }
.mgs-dh .mgs-logo { color: inherit; }

/* ---- v1.8: product mobile, cards, carousel, FAQ, filter drawer ---- */
html.mgs-lock { overflow: hidden; }
.mgs-pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.mgs-pcards--3 { grid-template-columns: repeat(3, 1fr); }
.mgs-pcard { background: #fff; border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); padding: 26px 24px; transition: border-color .3s, transform .3s, box-shadow .3s; }
.mgs-pcard:hover { border-color: var(--mgs-acc); transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(var(--mgs-dark-rgb), .5); }
.mgs-pcard i { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--mgs-rs); background: var(--mgs-acc); color: var(--mgs-on-acc); font-family: var(--mgs-hd); font-weight: 700; font-style: normal; font-size: 15px; margin-bottom: 16px; }
.mgs-pcard h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--mgs-ink); }
.mgs-pcard p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--mgs-mut); }

.mgs-car .mgs-rvw { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
.mgs-car .mgs-rvw::-webkit-scrollbar { display: none; }
.mgs-car .mgs-rc { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
.mgs-car-n { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.mgs-car-n button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--mgs-line); background: #fff; font-size: 18px; color: var(--mgs-ink); transition: background .25s, color .25s, border-color .25s; }
.mgs-car-n button:hover { background: var(--mgs-dark); border-color: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-car-d { display: flex; gap: 6px; }
.mgs-car-d i { width: 8px; height: 8px; border-radius: 99px; background: var(--mgs-line); transition: width .3s, background .3s; }
.mgs-car-d i.is-on { width: 24px; background: var(--mgs-acc); }
.mgs-car.is-still .mgs-car-n { display: none; }
.mgs-car.is-still .mgs-rvw { justify-content: center; }
.mgs-rline { margin-top: 12px; color: var(--mgs-mut); font-size: 14px; }
.mgs-rline span { color: var(--mgs-acc); letter-spacing: 2px; }
.mgs-rline b { color: var(--mgs-ink); }

.mgs-fq .mgs-fq-a { padding: 0 0 20px; color: var(--mgs-mut); }
.mgs-fq .mgs-fq-a p { padding: 0; margin: 0 0 10px; }
.mgs-fq .mgs-fq-a p:last-child { margin-bottom: 0; }
.mgs-fq .mgs-fq-a a { color: var(--mgs-acc-ink); text-decoration: underline; }
.mgs-fq .mgs-fq-all { margin-top: 14px; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; }

.mgs-side-h, .mgs-side-veil { display: none; }
.mgs-bar .mgs-fbtn { display: none; }

@media (max-width: 1100px) {
  .mgs-pd { grid-template-columns: 1fr; }
  .mgs-gal { grid-template-columns: 1fr; position: static; }
  .mgs-gal .mgs-pd-th { flex-direction: row; order: 2; max-height: none; overflow-x: auto; }
  .mgs-pcards, .mgs-pcards--3 { grid-template-columns: 1fr 1fr; }
  .mgs-car .mgs-rc { flex-basis: calc((100% - 18px) / 2); }

  /* filters: a drawer from the left, opened by the Filters button */
  .mgs-bar .mgs-fbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; }
  .mgs-shop-g .mgs-side { display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 99990; width: min(360px, 88%); max-height: none; margin: 0; border: 0; border-radius: 0; padding: 0 22px 24px; overflow-y: auto; background: #fff; transform: translateX(-102%); transition: transform .4s var(--mgs-ease); }
  .mgs-shop-g .mgs-side.is-open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .3); }
  .mgs-side-h { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--mgs-dark); color: var(--mgs-on-dark); margin: 0 -22px 6px; padding: 16px 22px; font-family: var(--mgs-hd); font-size: 18px; }
  .mgs-side .mgs-fgroup { border-bottom: 1px solid var(--mgs-line); }
  .mgs-side .mgs-flinks { max-height: none; overflow: visible; }
  .mgs-side .mgs-fbtns { position: sticky; bottom: -24px; background: #fff; padding: 14px 0; }
  .mgs-side-veil { display: block; position: fixed; inset: 0; z-index: 99985; background: rgba(var(--mgs-dark-rgb), .6); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .mgs-shop.is-filtering .mgs-side-veil { opacity: 1; pointer-events: auto; }
}
@media (max-width: 760px) {
  .mgs-pd { gap: 22px; padding-top: 14px; }
  .mgs-pd-main { border-radius: var(--mgs-r); }
  .mgs-gal .mgs-pd-th { flex-wrap: nowrap; gap: 8px; scrollbar-width: none; }
  .mgs-gal .mgs-pd-th button { width: 62px; height: 62px; flex: none; }
  .mgs-buy .mgs-h { font-size: clamp(24px, 7vw, 32px); }
  .mgs-vt { grid-template-columns: 1fr 1fr; }
  .mgs-pd-cta--two { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .mgs-tabs--bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .mgs-tabs--bar button { white-space: nowrap; flex: none; }
  .mgs-pcards, .mgs-pcards--3 { grid-template-columns: 1fr; gap: 12px; }
  .mgs-pcard { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 20px; }
  .mgs-pcard i { grid-row: 1 / 3; margin: 0; }
  .mgs-pcard p { grid-column: 2; margin-top: 2px; }
  .mgs-car .mgs-rc { flex-basis: 86%; padding: 22px; }
  .mgs-cgal { grid-template-columns: 1fr 1fr; }
  .mgs-inner { padding-bottom: 20px; }
}

/* ---- v1.9: Contact, About and Materials page templates ---- */
.mgs-cban .mgs-eye { color: var(--mgs-acc2); margin-bottom: 10px; }
.mgs-ct2 { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.mgs-cinfo { display: grid; gap: 12px; }
.mgs-ci { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); background: #fff; transition: border-color .3s, transform .3s, box-shadow .3s; }
a.mgs-ci:hover { border-color: var(--mgs-acc); transform: translateX(4px); box-shadow: 0 16px 30px -24px rgba(var(--mgs-dark-rgb), .6); }
.mgs-ci i { flex: none; width: 48px; height: 48px; border-radius: var(--mgs-rs); background: var(--mgs-bg); color: var(--mgs-acc-ink); display: grid; place-items: center; }
.mgs-ci small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-mut); }
.mgs-ci b { display: block; font-family: var(--mgs-hd); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--mgs-ink); word-break: break-word; }
.mgs-ct2-p { margin-top: 26px; font-size: 16px; }
.mgs-ct2-s { margin-top: 26px; }
.mgs-ct2-s b { font-family: var(--mgs-hd); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-mut); }
.mgs-ct2-s .mgs-soc { margin-top: 12px; }
.mgs-ct2-s .mgs-soc a { border-color: var(--mgs-line); color: var(--mgs-ink); }
.mgs-ct2-s .mgs-soc a:hover { color: var(--mgs-on-acc); border-color: var(--mgs-acc); }
.mgs-cform { width: auto; margin: 0; transform: none; border: 1px solid var(--mgs-line); box-shadow: 0 30px 60px -40px rgba(var(--mgs-dark-rgb), .45); }
.mgs-cform > .mgs-h { font-size: clamp(24px, 2.4vw, 32px); margin: 0; padding: 28px 24px 0; }
.mgs-map { border-radius: var(--mgs-rl); overflow: hidden; border: 1px solid var(--mgs-line); height: clamp(280px, 38vw, 440px); background: var(--mgs-bg); }
.mgs-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.mgs-ab { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.mgs-ab .mgs-h { margin: 0 0 18px; }
.mgs-ab .mgs-btn { margin-top: 28px; }
.mgs-ab-img { border-radius: var(--mgs-rl); overflow: hidden; aspect-ratio: 4 / 4.400; background: var(--mgs-bg); position: relative; }
.mgs-ab-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mgs-abst { background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-abst .mgs-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.mgs-abst .mgs-wrap > div { padding: clamp(26px, 3.400vw, 44px) 20px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .22); }
.mgs-abst .mgs-wrap > div:first-child { border-left: 0; }
.mgs-abst b { display: block; font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(30px, 3.600vw, 48px); line-height: 1; letter-spacing: -.02em; }
.mgs-abst span { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }

.mgs-mt-intro { margin-inline: auto; max-width: 860px; }
.mgs-mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mgs-mat-c { background: #fff; border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s, transform .3s, box-shadow .3s; }
.mgs-mat-c:hover { border-color: var(--mgs-acc); transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(var(--mgs-dark-rgb), .55); }
.mgs-mat-i { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mgs-bg); }
.mgs-mat-i img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--mgs-ease); }
.mgs-mat-c:hover .mgs-mat-i img { transform: scale(1.06); }
.mgs-mat-i em { position: absolute; left: 12px; top: 12px; background: var(--mgs-dark); color: var(--mgs-on-dark); font-style: normal; font-family: var(--mgs-hd); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; }
.mgs-mat-c > div { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.mgs-mat-c h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--mgs-ink); }
.mgs-mat-c p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--mgs-mut); }
.mgs-mat-c .mgs-more { margin-top: auto; padding-top: 16px; align-self: flex-start; }
@media (max-width: 1000px) {
  .mgs-ct2, .mgs-ab { grid-template-columns: 1fr; }
  .mgs-mats { grid-template-columns: 1fr 1fr; }
  .mgs-ab-img { aspect-ratio: 16 / 10; order: -1; }
}
@media (max-width: 640px) {
  .mgs-mats { grid-template-columns: 1fr; }
  .mgs-abst .mgs-wrap { grid-template-columns: 1fr 1fr; }
  .mgs-abst .mgs-wrap > div:nth-child(3) { border-left: 0; }
  .mgs-abst .mgs-wrap > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .22); }
}

/* ---- v2.0: single material page ---- */
.mgs-cban .mgs-h em { font-style: normal; color: var(--mgs-acc2); }
.mgs-mp { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.mgs-mp--one { grid-template-columns: 1fr; }
.mgs-mtab { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); overflow: hidden; font-size: 15px; background: #fff; }
.mgs-mtab th, .mgs-mtab td { padding: 15px 20px; text-align: left; border-top: 1px solid var(--mgs-line); vertical-align: top; }
.mgs-mtab tr:first-child :is(th, td) { border-top: 0; }
.mgs-mtab th { width: 42%; font-family: var(--mgs-hd); font-weight: 600; color: var(--mgs-ink); background: var(--mgs-bg); }
.mgs-mtab td { color: #3c4652; }
.mgs-mpc { display: grid; gap: 16px; }
.mgs-mpc > div { border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); padding: 22px 24px; background: #fff; }
.mgs-mpc h3, .mgs-mcare h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.mgs-mpc-n ul { display: grid; gap: 8px; }
.mgs-mpc-n li { position: relative; padding-left: 22px; font-size: 15px; color: var(--mgs-mut); }
.mgs-mpc-n li::before { content: "!"; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #f5a524; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.mgs-mcl { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.mgs-mcl .mgs-h { margin-bottom: 14px; }
.mgs-mcl-i { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mgs-mcl-i--1 { grid-template-columns: 1fr; }
.mgs-mcl-i .mgs-mimg { position: relative; aspect-ratio: 1; border-radius: var(--mgs-rl); overflow: hidden; background: var(--mgs-bg); cursor: zoom-in; display: block; }
.mgs-mcl-i .mgs-mimg em { position: absolute; left: 12px; bottom: 12px; background: rgba(var(--mgs-dark-rgb), .82); color: var(--mgs-on-dark); font-style: normal; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 99px; }
.mgs-muse { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; justify-content: center; }
.mgs-muse b { font-family: var(--mgs-hd); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-mut); }
.mgs-muse .mgs-svc { margin: 0; }
.mgs-mgr { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.mgs-mgr--one { grid-template-columns: 1fr; }
.mgs-mgr .mgs-h { margin-bottom: 22px; }
.mgs-mgl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mgs-mgl > div { background: #fff; border: 1px solid var(--mgs-line); border-left: 4px solid var(--mgs-acc); border-radius: var(--mgs-rs); padding: 18px 20px; }
.mgs-mgl b { font-family: var(--mgs-hd); font-weight: 700; font-size: 16px; }
.mgs-mgl p { margin-top: 6px; font-size: 14px; color: var(--mgs-mut); }
.mgs-mcare { background: var(--mgs-dark); color: var(--mgs-on-dark); border-radius: var(--mgs-rl); padding: 28px; }
.mgs-mcare h3 { color: inherit; }
.mgs-mcare ol { counter-reset: c; display: grid; gap: 12px; }
.mgs-mcare li { counter-increment: c; position: relative; padding-left: 40px; font-size: 15px; color: var(--mgs-soft); }
.mgs-mcare li::before { content: counter(c); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 8px; background: var(--mgs-acc); color: var(--mgs-on-acc); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.mgs-art { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.mgs-art.is-solo { grid-template-columns: minmax(0, 820px); justify-content: center; }
.mgs-art-toc { position: sticky; top: 110px; border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); padding: 20px; }
.mgs-art-toc b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-acc-ink); margin-bottom: 10px; }
.mgs-art-toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--mgs-line); font-size: 14px; line-height: 1.45; color: var(--mgs-mut); }
.mgs-art-toc a:hover, .mgs-art-toc a.is-on { color: var(--mgs-ink); border-left-color: var(--mgs-acc); font-weight: 600; }
.mgs-art .mgs-h { margin: 0 0 8px; }
.mgs-art-m { font-size: 13px; color: var(--mgs-mut); margin-bottom: 18px; }
.mgs-art-b { max-width: none; position: relative; }
.mgs-art-b :is(h2, h3) { scroll-margin-top: 110px; }
.mgs-art-b.is-clip { max-height: 760px; overflow: hidden; }
.mgs-art-b.is-clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.mgs-art-more { margin-top: 22px; }
@media (max-width: 1000px) {
  .mgs-mp, .mgs-mcl, .mgs-mgr, .mgs-art { grid-template-columns: 1fr; }
  .mgs-art-toc { position: static; }
}
@media (max-width: 640px) {
  .mgs-mgl, .mgs-mcl-i { grid-template-columns: 1fr; }
  .mgs-mtab th, .mgs-mtab td { padding: 12px 14px; font-size: 14px; }
}
.mgs-muse .mgs-svc { display: flex; flex-wrap: wrap; justify-content: center; }

/* ---- v2.1: About (founder, what we do, production, quality), FAQ page, Order page ---- */
.mgs-ab .mgs-cta { margin-top: 28px; }
.mgs-ab--flip { grid-template-columns: .95fr 1.05fr; }
.mgs-ab .mgs-feat { margin-top: 22px; }
.mgs-fd { background: var(--mgs-dark); color: var(--mgs-on-dark); background-image: radial-gradient(60% 120% at 0 0, rgba(var(--mgs-acc-rgb), .28), transparent 70%); }
.mgs-fd-g { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.mgs-fd-p { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--mgs-rl); overflow: hidden; background: var(--mgs-dark2); position: relative; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.mgs-fd-p img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mgs-fd-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mgs-hd); font-weight: 800; font-size: 120px; color: rgba(var(--mgs-acc-rgb), .5); }
.mgs-fd .mgs-eye { color: var(--mgs-acc2); }
.mgs-fd-q { margin: 6px 0 22px; padding: 0; border: 0; font-family: var(--mgs-hd); font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.01em; color: var(--mgs-on-dark); position: relative; }
.mgs-fd-q::before { content: "\201C"; display: block; font-size: 80px; line-height: .6; color: var(--mgs-acc); margin-bottom: 8px; }
.mgs-fd-t { color: var(--mgs-soft); font-size: 16px; line-height: 1.8; margin-top: 12px; max-width: 62ch; }
.mgs-fd-n { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.mgs-fd-n b { display: block; font-family: var(--mgs-hd); font-size: 19px; }
.mgs-fd-n span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mgs-acc2); }
.mgs-wd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--mgs-line); border-radius: var(--mgs-rl); overflow: hidden; background: #fff; }
.mgs-wd-c { padding: clamp(24px, 3vw, 38px); border-right: 1px solid var(--mgs-line); border-bottom: 1px solid var(--mgs-line); transition: background .3s, color .3s; }
.mgs-wd-c:nth-child(3n) { border-right: 0; }
.mgs-wd-c:nth-last-child(-n+3) { border-bottom: 0; }
.mgs-wd-c i { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--mgs-bg); color: var(--mgs-acc-ink); margin-bottom: 20px; transition: background .3s, color .3s; }
.mgs-wd-c h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 19px; color: var(--mgs-ink); transition: color .3s; }
.mgs-wd-c p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--mgs-mut); transition: color .3s; }
.mgs-wd-c:hover { background: var(--mgs-dark); }
.mgs-wd-c:hover h3 { color: var(--mgs-on-dark); }
.mgs-wd-c:hover p { color: var(--mgs-soft); }
.mgs-wd-c:hover i { background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: t; position: relative; }
.mgs-tl::before { content: ""; position: absolute; left: 4%; right: 4%; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--mgs-acc) 0 10px, transparent 10px 18px); opacity: .5; }
.mgs-tl li { position: relative; text-align: center; padding: 0 8px; }
.mgs-tl i { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mgs-acc); color: var(--mgs-on-acc); font-family: var(--mgs-hd); font-weight: 700; font-size: 20px; font-style: normal; box-shadow: 0 0 0 8px var(--mgs-bg); margin-bottom: 20px; }
.mgs-tl h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 18px; }
.mgs-tl p { margin-top: 8px; font-size: 14.5px; color: var(--mgs-mut); }
.mgs-qs-g { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.mgs-certs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mgs-certs > div { border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); padding: 28px 24px; background: var(--mgs-bg); text-align: center; transition: border-color .3s, transform .3s; }
.mgs-certs > div:hover { border-color: var(--mgs-acc); transform: translateY(-3px); }
.mgs-certs b { display: block; font-family: var(--mgs-hd); font-weight: 800; font-size: clamp(28px, 3vw, 40px); color: var(--mgs-acc-ink); letter-spacing: -.02em; line-height: 1; }
.mgs-certs span { display: block; margin-top: 10px; font-size: 13px; color: var(--mgs-mut); }

.mgs-fqp { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.mgs-fqp > div > .mgs-fq { display: block; }
.mgs-fqp-tools { display: grid; gap: 16px; margin-bottom: 28px; }
.mgs-fqp-s { display: flex; align-items: center; gap: 12px; border: 2px solid var(--mgs-line); border-radius: 99px; padding: 0 20px; background: #fff; transition: border-color .25s; }
.mgs-fqp-s:focus-within { border-color: var(--mgs-acc); }
.mgs-fqp-s svg { color: var(--mgs-mut); flex: none; }
.mgs-fqp-s input { flex: 1; border: 0; outline: 0; padding: 15px 0; font: inherit; font-size: 16px; background: transparent; color: var(--mgs-ink); }
.mgs-fqp-g { display: flex; flex-wrap: wrap; gap: 8px; }
.mgs-fqp-g button { border: 1.5px solid var(--mgs-line); background: #fff; border-radius: 99px; padding: 9px 18px; font-family: var(--mgs-hd); font-weight: 600; font-size: 14px; color: var(--mgs-ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mgs-fqp-g button.is-on, .mgs-fqp-g button:hover { background: var(--mgs-dark); border-color: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-fqp-grp { margin-bottom: 30px; }
.mgs-fqp-grp[hidden] { display: none; }
.mgs-fqp-grp h2 { display: flex; align-items: center; gap: 10px; font-family: var(--mgs-hd); font-weight: 700; font-size: 22px; margin-bottom: 14px; }
.mgs-fqp-grp h2 small { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--mgs-bg); color: var(--mgs-mut); }
.mgs-fqp-grp details[hidden] { display: none; }
.mgs-fqp-help { position: sticky; top: 110px; background: var(--mgs-dark); color: var(--mgs-on-dark); border-radius: var(--mgs-rl); padding: 30px 26px; display: grid; gap: 12px; background-image: radial-gradient(80% 100% at 100% 0, rgba(var(--mgs-acc-rgb), .35), transparent 70%); }
.mgs-fqp-help .mgs-eye { color: var(--mgs-acc2); margin: 0; }
.mgs-fqp-help h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 24px; color: inherit; }
.mgs-fqp-help p { color: var(--mgs-soft); font-size: 14.5px; margin-bottom: 6px; }
.mgs-fqp-help .mgs-btn { justify-content: center; }
.mgs-fqp-mail { text-align: center; font-size: 14px; color: var(--mgs-soft); text-decoration: underline; }

.mgs-ost { background: var(--mgs-bg); border-bottom: 1px solid var(--mgs-line); }
.mgs-ost ol { display: grid; grid-template-columns: repeat(4, 1fr); }
.mgs-ost li { display: flex; gap: 14px; align-items: flex-start; padding: 26px 20px; border-left: 1px solid var(--mgs-line); }
.mgs-ost li:first-child { border-left: 0; padding-left: 0; }
.mgs-ost i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mgs-acc); color: var(--mgs-on-acc); display: grid; place-items: center; font-family: var(--mgs-hd); font-weight: 700; font-style: normal; }
.mgs-ost b { display: block; font-family: var(--mgs-hd); font-size: 15px; }
.mgs-ost span { display: block; font-size: 13px; color: var(--mgs-mut); margin-top: 2px; }
.mgs-og { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.mgs-oform form { grid-template-columns: 1fr; gap: 18px; }
.mgs-oform fieldset { border: 0; margin: 0; padding: 0 0 20px; border-bottom: 1px solid var(--mgs-line); }
.mgs-oform legend { display: flex; align-items: center; gap: 10px; font-family: var(--mgs-hd); font-weight: 700; font-size: 18px; color: var(--mgs-ink); margin-bottom: 14px; padding: 0; }
.mgs-oform legend span { width: 28px; height: 28px; border-radius: 50%; background: var(--mgs-dark); color: var(--mgs-on-dark); display: grid; place-items: center; font-size: 13px; }
.mgs-o2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mgs-oform fieldset > label.mgs-full { margin-top: 14px; }
.mgs-olines { display: grid; gap: 10px; }
.mgs-oline { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1fr .9fr 40px; gap: 10px; align-items: end; padding: 14px; border-radius: var(--mgs-rs); background: var(--mgs-bg); }
.mgs-ol-x { width: 40px; height: 46px; border-radius: var(--mgs-rs); border: 1.5px solid var(--mgs-line); background: #fff; font-size: 20px; cursor: pointer; color: var(--mgs-mut); }
.mgs-ol-x:hover { color: #d92d20; border-color: #d92d20; }
.mgs-oline:only-child .mgs-ol-x { visibility: hidden; }
.mgs-ol-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.mgs-ol-f .mgs-btn { padding: 10px 18px; font-size: 14px; }
.mgs-ol-f span { font-size: 14px; color: var(--mgs-mut); }
.mgs-ol-f b { font-family: var(--mgs-hd); font-size: 18px; color: var(--mgs-ink); }
.mgs-oside { position: sticky; top: 110px; display: grid; gap: 16px; }
.mgs-obox { border: 1px solid var(--mgs-line); border-radius: var(--mgs-r); padding: 22px; background: #fff; }
.mgs-obox h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.mgs-obox table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mgs-obox td { padding: 9px 0; border-top: 1px solid var(--mgs-line); }
.mgs-obox tr:first-child td { border-top: 0; }
.mgs-obox td:last-child { text-align: right; color: var(--mgs-acc-ink); }
.mgs-obox .mgs-feat { margin-top: 0; }
.mgs-obox--dark { background: var(--mgs-dark); color: var(--mgs-on-dark); border: 0; display: grid; gap: 10px; }
.mgs-obox--dark h3 { color: inherit; margin: 0; }
.mgs-obox--dark p { color: var(--mgs-soft); font-size: 14px; }
.mgs-obox--dark .mgs-btn { justify-content: center; }
.mgs-obox-l { font-size: 14px; color: var(--mgs-soft); }
.mgs-obox-l:hover { color: var(--mgs-on-dark); }
@media (max-width: 1100px) {
  .mgs-fd-g, .mgs-qs-g, .mgs-fqp, .mgs-og { grid-template-columns: 1fr; }
  .mgs-fd-p { max-width: 380px; }
  .mgs-fqp-help, .mgs-oside { position: static; }
  .mgs-wd { grid-template-columns: 1fr 1fr; }
  .mgs-wd-c { border-right: 1px solid var(--mgs-line) !important; border-bottom: 1px solid var(--mgs-line) !important; }
  .mgs-wd-c:nth-child(2n) { border-right: 0 !important; }
  .mgs-tl, .mgs-ost ol { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .mgs-tl::before { display: none; }
  .mgs-ost li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .mgs-wd, .mgs-tl, .mgs-ost ol, .mgs-o2 { grid-template-columns: 1fr; }
  .mgs-wd-c { border-right: 0 !important; }
  .mgs-ost li { border-left: 0; padding: 14px 0; border-top: 1px solid var(--mgs-line); }
  .mgs-ost li:first-child { border-top: 0; }
  .mgs-oline { grid-template-columns: 1fr 1fr; }
  .mgs-oline .mgs-ol-p { grid-column: 1 / -1; }
  .mgs-ol-x { width: 100%; grid-column: 1 / -1; height: 38px; }
  .mgs-certs b { font-size: 26px; }
}

/* ---- v2.2: material template - hero, detail, image cards, video banner, CTA ---- */
.mgs-mhero .mgs-cban-in { min-height: clamp(380px, 48vw, 600px); }
.mgs-mdet .mgs-prose { margin-top: 6px; font-size: 16.5px; }
.mgs-mdet .mgs-cta { margin-top: 26px; }
.mgs-icards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mgs-icards--4 { grid-template-columns: repeat(4, 1fr); }
.mgs-icard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mgs-line); border-radius: var(--mgs-rl); overflow: hidden; transition: transform .35s var(--mgs-ease), box-shadow .35s, border-color .35s; }
.mgs-icard:hover { transform: translateY(-5px); border-color: var(--mgs-acc); box-shadow: 0 30px 50px -34px rgba(var(--mgs-dark-rgb), .55); }
.mgs-icard-i { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mgs-bg); }
.mgs-icard-i img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--mgs-ease); }
.mgs-icard:hover .mgs-icard-i img { transform: scale(1.06); }
.mgs-icard-b { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; flex: 1; }
.mgs-icard-b b { font-family: var(--mgs-hd); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--mgs-ink); }
.mgs-icard-b small { font-size: 14.5px; line-height: 1.65; color: var(--mgs-mut); }
.mgs-icard-b em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--mgs-acc-ink); }
.mgs-vban { position: relative; overflow: hidden; background: var(--mgs-dark); color: var(--mgs-on-dark); min-height: clamp(380px, 46vw, 560px); display: flex; align-items: center; }
.mgs-vban-m { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mgs-vban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--mgs-dark-rgb), .85), rgba(var(--mgs-dark-rgb), .35) 60%, rgba(var(--mgs-dark-rgb), .25)); }
.mgs-vban-in { position: relative; z-index: 1; text-align: center; padding: clamp(60px, 8vw, 110px) 0; display: flex; flex-direction: column; align-items: center; }
.mgs-vban-in .mgs-h { color: inherit; max-width: 20ch; }
.mgs-vban-in p { margin-top: 16px; max-width: 60ch; color: var(--mgs-soft); font-size: clamp(15px, 1.2vw, 18px); }
.mgs-vban-in .mgs-cta { margin-top: 26px; justify-content: center; }
.mgs-mcta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; border-radius: var(--mgs-rl); padding: clamp(32px, 5vw, 64px); background: var(--mgs-acc); color: var(--mgs-on-acc); background-image: linear-gradient(120deg, var(--mgs-acc), var(--mgs-acc-ink)); }
.mgs-mcta.has-img { background: var(--mgs-dark); }
.mgs-mcta-m { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mgs-mcta.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--mgs-dark-rgb), .92), rgba(var(--mgs-dark-rgb), .55)); z-index: 1; }
.mgs-mcta > :not(img) { position: relative; z-index: 2; }
.mgs-mcta h2 { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: inherit; max-width: 22ch; }
.mgs-mcta h2 em { font-style: normal; color: var(--mgs-dark); }
.mgs-mcta.has-img h2 em { color: var(--mgs-acc2); }
.mgs-mcta p { margin-top: 10px; max-width: 54ch; opacity: .9; }
.mgs-mcta .mgs-btn--acc { background: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-mcta.has-img .mgs-btn--acc { background: var(--mgs-acc); color: var(--mgs-on-acc); }
@media (max-width: 1000px) { .mgs-icards, .mgs-icards--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mgs-icards, .mgs-icards--4 { grid-template-columns: 1fr; } .mgs-mcta .mgs-cta { width: 100%; } .mgs-mcta .mgs-btn { flex: 1 1 auto; justify-content: center; } }

/* ===== v2.4: mi-gloves photo library, B2B / B2C, gallery ===== */
/* CTA band with a photo behind it */
.mgs-band.has-img { background: linear-gradient(100deg, rgba(var(--mgs-dark-rgb), .94) 0, rgba(var(--mgs-dark-rgb), .78) 48%, rgba(var(--mgs-acc-rgb), .45) 100%), var(--mgs-band-img) center / cover no-repeat, var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-band.has-img::before { background: rgba(var(--mgs-acc-rgb), .22); }
.mgs-band.has-img .mgs-btn--dark { background: var(--mgs-acc); color: var(--mgs-on-acc); border-color: var(--mgs-acc); }
.mgs-band.has-img .mgs-btn--dark:hover { background: #fff; color: var(--mgs-dark); border-color: #fff; }
.mgs-band.has-img h2 em { font-style: normal; color: var(--mgs-acc2); }

/* B2B / B2C split */
.mgs-bb { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mgs-bbc { position: relative; overflow: hidden; border-radius: var(--mgs-rl); min-height: 520px; display: flex; align-items: flex-end; background: var(--mgs-dark); color: var(--mgs-on-dark); isolation: isolate; }
.mgs-bbc-m { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; transition: transform 1.2s var(--mgs-ease); }
.mgs-bbc:hover .mgs-bbc-m { transform: scale(1.05); }
.mgs-bbc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--mgs-dark-rgb), .15) 0, rgba(var(--mgs-dark-rgb), .62) 42%, rgba(var(--mgs-dark-rgb), .96) 100%); }
.mgs-bbc--shop::before { background: linear-gradient(180deg, rgba(var(--mgs-dark-rgb), .1) 0, rgba(var(--mgs-acc-rgb), .35) 40%, rgba(var(--mgs-dark-rgb), .95) 100%); }
.mgs-bbc-b { padding: clamp(26px, 3.4vw, 44px); width: 100%; }
.mgs-bbc-l { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-bbc--shop .mgs-bbc-l { background: #fff; color: var(--mgs-dark); }
.mgs-bbc h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.02em; margin: 16px 0 10px; color: inherit; }
.mgs-bbc p { opacity: .88; max-width: 46ch; }
.mgs-bbc ul { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.mgs-bbc li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; }
.mgs-bbc li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--mgs-acc-rgb), .9); color: var(--mgs-on-acc); font-size: 11px; display: grid; place-items: center; font-weight: 700; }
.mgs-bbc .mgs-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Shop by need tiles */
.mgs-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mgs-aud-t { position: relative; display: block; overflow: hidden; border-radius: var(--mgs-r); aspect-ratio: 16 / 10; background: var(--mgs-dark); color: #fff; text-decoration: none; isolation: isolate; }
.mgs-aud-t img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; transition: transform 1s var(--mgs-ease); }
.mgs-aud-t::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(var(--mgs-dark-rgb), .88)); transition: background .4s; }
.mgs-aud-t:hover img { transform: scale(1.07); }
.mgs-aud-t:hover::before { background: linear-gradient(180deg, rgba(var(--mgs-acc-rgb), .15) 10%, rgba(var(--mgs-dark-rgb), .92)); }
.mgs-aud-b { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; }
.mgs-aud-b b { font-family: var(--mgs-hd); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; }
.mgs-aud-b small { grid-column: 1; font-size: 13.5px; opacity: .85; }
.mgs-aud-b i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mgs-acc); color: var(--mgs-on-acc); transition: transform .3s; }
.mgs-aud-t:hover .mgs-aud-b i { transform: translateX(4px); }

/* Private label banner */
.mgs-plb { position: relative; overflow: hidden; border-radius: var(--mgs-rl); min-height: 460px; display: flex; align-items: center; background: var(--mgs-dark); color: var(--mgs-on-dark); isolation: isolate; }
.mgs-plb-m { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; }
.mgs-plb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--mgs-dark-rgb), .95) 0, rgba(var(--mgs-dark-rgb), .8) 45%, rgba(var(--mgs-dark-rgb), .15) 100%); }
.mgs-plb-t { padding: clamp(32px, 5vw, 72px); max-width: 640px; }
.mgs-plb .mgs-h { color: inherit; }
.mgs-plb .mgs-h em { color: var(--mgs-acc2); }
.mgs-plb p { margin-top: 14px; opacity: .88; line-height: 1.7; }
.mgs-plb-c { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.mgs-plb-c span { font-size: 13px; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); backdrop-filter: blur(4px); }
.mgs-plb .mgs-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Gallery */
.mgs-gal-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.mgs-gal-tabs button { font: inherit; font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 99px; border: 1px solid var(--mgs-line); background: var(--mgs-bg); color: var(--mgs-ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mgs-gal-tabs button:hover { border-color: var(--mgs-acc); }
.mgs-gal-tabs button.is-on { background: var(--mgs-acc); border-color: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 12px; }
.mgs-gal-i { position: relative; display: block; padding: 0; border: 0; overflow: hidden; border-radius: var(--mgs-r); background: linear-gradient(150deg, var(--mgs-dark3), var(--mgs-dark)); cursor: zoom-in; }
.mgs-gal-i:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.mgs-gal-i:nth-child(6n + 4) { grid-column: span 2; }
.mgs-gal-i img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--mgs-ease); }
.mgs-gal-i:hover img { transform: scale(1.06); }
.mgs-gal-i span { position: absolute; left: 12px; bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: rgba(var(--mgs-dark-rgb), .7); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.mgs-gal-i:hover span, .mgs-gal-i:focus-visible span { opacity: 1; transform: none; }
.mgs-gal-i.is-extra, .mgs-gal-i[hidden] { display: none; }
.mgs-xgal.is-all .mgs-gal-i.is-extra:not([hidden]) { display: block; }
.mgs-gal-more { margin-top: 28px; text-align: center; }
.mgs-plb p { font-size: 16px; font-weight: 400; max-width: 52ch; }
.mgs-sec--alt + .mgs-sec--tight { padding-top: clamp(48px, 6vw, 80px); }
.mgs-galp-intro { max-width: 760px; margin: 0 auto 30px; text-align: center; color: var(--mgs-mut); }
.mgs-galp-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mgs-galp-strip > div { border-radius: var(--mgs-rl); padding: clamp(26px, 3.4vw, 44px); background: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-galp-strip > div + div { background: var(--mgs-soft, #f3f5f5); background: rgba(var(--mgs-acc-rgb), .1); color: var(--mgs-ink); }
.mgs-galp-strip h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); margin: 10px 0 8px; color: inherit; }
.mgs-galp-strip p { opacity: .85; margin-bottom: 20px; }

@media (max-width: 980px) {
  .mgs-aud { grid-template-columns: 1fr 1fr; }
  .mgs-gal-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 760px) {
  .mgs-bb, .mgs-galp-strip { grid-template-columns: 1fr; }
  .mgs-bbc { min-height: 0; padding-top: 220px; }
  .mgs-bbc ul { grid-template-columns: 1fr; }
  .mgs-bbc .mgs-btn { flex: 1 1 auto; justify-content: center; }
  .mgs-aud { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mgs-aud-t { aspect-ratio: 4 / 5; }
  .mgs-aud-b { padding: 14px; grid-template-columns: 1fr; }
  .mgs-aud-b small { display: none; }
  .mgs-aud-b i { display: none; }
  .mgs-plb { min-height: 0; }
  .mgs-plb::before { background: linear-gradient(180deg, rgba(var(--mgs-dark-rgb), .55), rgba(var(--mgs-dark-rgb), .95) 55%); }
  .mgs-plb-t { padding-top: 200px; }
  .mgs-gal-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; }
  .mgs-gal-i:nth-child(6n + 4) { grid-column: span 1; }
  .mgs-gal-i span { opacity: 1; transform: none; font-size: 10.5px; padding: 4px 8px; left: 8px; bottom: 8px; }
  .mgs-gal-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .mgs-gal-tabs button { flex: 0 0 auto; }
}

/* ===== v2.6: category cards, theme-colour sections ===== */
/* Category cards: clean photo on top, name bar below (no dark wash over the product) */
.mgs-cg2 { gap: 18px; }
.mgs-cat2 { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; height: auto; border-radius: var(--mgs-r); overflow: hidden; background: #fff; border: 1px solid var(--mgs-line); color: var(--mgs-ink); text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .35s var(--mgs-ease); }
.mgs-cat2:hover { border-color: var(--mgs-acc); box-shadow: 0 18px 40px rgba(var(--mgs-acc-rgb), .16); transform: translateY(-5px); }
.mgs-cat2-im { position: relative; display: block; aspect-ratio: 1 / .92; overflow: hidden; background: #f4f4f4; }
.mgs-cat2-im img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--mgs-ease); }
.mgs-cat2:hover .mgs-cat2-im img { transform: scale(1.06); }
.mgs-cat2-im em { position: absolute; top: 12px; left: 12px; font-style: normal; font-family: var(--mgs-hd); font-weight: 700; font-size: 12px; letter-spacing: .08em; padding: 5px 9px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--mgs-ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.mgs-cat2:hover .mgs-cat2-im em { background: var(--mgs-acc); color: var(--mgs-on-acc); }
.mgs-cat2-ic { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mgs-acc); background: rgba(var(--mgs-acc-rgb), .08); }
.mgs-cat2-ic svg { width: 38%; height: auto; }
.mgs-cat2-b { width: 100%; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--mgs-line); }
.mgs-cat2-b h3 { font-family: var(--mgs-hd); font-weight: 700; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.2; letter-spacing: -.01em; margin: 0; color: inherit; }
.mgs-cat2-b small { display: block; font-size: 13px; color: var(--mgs-mut); margin-top: 3px; }
.mgs-cat2-b i { flex: none; font-style: normal; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--mgs-line); color: var(--mgs-ink); transition: background .3s, color .3s, border-color .3s, transform .3s; }
.mgs-cat2:hover .mgs-cat2-b i { background: var(--mgs-acc); border-color: var(--mgs-acc); color: var(--mgs-on-acc); transform: rotate(-35deg); }
@media (max-width: 760px) {
  .mgs-cg2 { gap: 10px; }
  .mgs-cat2-b { padding: 12px; }
  .mgs-cat2-b i { width: 30px; height: 30px; font-size: 13px; }
  .mgs-cat2-b small { font-size: 12px; }
}

/* Theme-colour section (How it works) */
.mgs-sec--acc { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--mgs-acc), var(--mgs-acc-ink)); color: var(--mgs-on-acc); }
.mgs-sec--acc::before { content: ""; position: absolute; right: -8%; top: -30%; width: 46%; height: 160%; background: rgba(255, 255, 255, .07); transform: rotate(14deg); pointer-events: none; }
.mgs-sec--acc > .mgs-wrap { position: relative; }
.mgs-sec--acc :is(.mgs-eye, .mgs-h, .mgs-sub, .mgs-note) { color: inherit; }
.mgs-sec--acc .mgs-eye::before { background: currentColor; }
.mgs-sec--acc .mgs-h em { color: var(--mgs-dark); }
.mgs-sec--acc .mgs-st { background: #fff; color: var(--mgs-ink); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.mgs-sec--acc .mgs-st:hover { background: var(--mgs-dark); color: var(--mgs-on-dark); }
.mgs-sec--acc .mgs-more { color: inherit; border-color: currentColor; }
/* Light theme-colour tint (Client stories) */
.mgs-sec--tint { background: linear-gradient(180deg, rgba(var(--mgs-acc-rgb), .1), rgba(var(--mgs-acc-rgb), .04)); }
.mgs-sec--tint .mgs-rvw > * { background: #fff; }