/* Micro Mania · campaign, customer reviews and interaction refinements. */
.mmi-page .mmi-monitor-feature {padding-top:0}
.mmi-page .mmi-monitor-link {display:block;overflow:hidden;border:1px solid rgba(79,216,224,.3);border-radius:16px;background:#0b0b16;box-shadow:0 16px 44px -30px #2d1b5e;transition:border-color .2s,box-shadow .2s}
.mmi-page .mmi-monitor-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;background:linear-gradient(110deg,rgba(45,27,94,.55),rgba(79,216,224,.035))}
.mmi-page .mmi-feature-kicker {display:block;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mmi-page .mmi-monitor-heading h2 {margin:5px 0 0;font-size:clamp(20px,2.5vw,28px);line-height:1.35;color:#fff}
.mmi-page .mmi-monitor-model {font-size:11px;font-weight:800;letter-spacing:.08em;text-align:end;flex-shrink:0}
.mmi-page .mmi-monitor-model span {display:block;margin-top:4px;font-size:10px;color:var(--cyan)}
.mmi-page .mmi-monitor-link picture,.mmi-page .mmi-monitor-link img {display:block;width:100%;height:auto;margin:0}
.mmi-page .mmi-monitor-bottom {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 26px;border-top:1px solid var(--line)}
.mmi-page .mmi-monitor-specs {display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mmi-page .mmi-monitor-specs li {padding:5px 10px;border:1px solid rgba(79,216,224,.18);border-radius:5px;font-size:12px;font-weight:700;color:#fff;background:rgba(79,216,224,.035)}
.mmi-page .mmi-monitor-cta {display:inline-flex;gap:20px;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;border:1px solid rgba(217,47,196,.65);border-radius:7px;background:linear-gradient(115deg,#74249f,#b820a6);font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.mmi-page .mmi-monitor-cta>span {font-size:20px;line-height:1}
@media (hover:hover) {.mmi-page .mmi-monitor-link:hover {border-color:var(--cyan);box-shadow:0 12px 40px -25px rgba(79,216,224,.5)}}
.mmi-page .mmi-reviews {padding-top:0}
.mmi-page .mmi-reviews-layout {display:grid;grid-template-columns:205px minmax(0,1fr);gap:14px;align-items:stretch}
.mmi-page .mmi-reviews-summary,.mmi-page .mmi-review-card {position:relative;isolation:isolate;overflow:hidden;min-width:0;padding:18px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(145deg,#141320,#0c0c15);transition:transform .2s,border-color .2s,box-shadow .2s}
.mmi-page .mmi-reviews-summary::before,.mmi-page .mmi-review-card::before {content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--cyan),#d92fc4);opacity:.9;pointer-events:none}
.mmi-page .mmi-reviews-summary {display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-top:2px solid var(--cyan)}
.mmi-page .mmi-review-brand {display:flex;align-items:center;gap:10px;min-height:44px}
.mmi-page .mmi-google-mark {display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px}
.mmi-page .mmi-google-g {font-family:Arial,sans-serif;font-size:42px;font-weight:800;line-height:1;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mmi-page .mmi-reviews .mmi-rating {--star:16px}
.mmi-page .mmi-reviews-summary .mmi-rating .mmi-rating-num {font-size:25px;line-height:1.2}
.mmi-page .mmi-reviews-summary p {margin:0;font-size:12px;line-height:1.7;color:#fff}
.mmi-page .mmi-review-link {display:inline-flex;align-items:center;min-height:44px;font-size:12px;font-weight:700;color:var(--cyan);text-decoration:underline;text-underline-offset:4px}
.mmi-page .mmi-reviews-summary>.mmi-review-link {margin-top:auto}
.mmi-page .mmi-reviews-window {min-width:0}
.mmi-page .mmi-reviews-track {display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 4px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.mmi-page .mmi-reviews-track::-webkit-scrollbar {display:none;width:0;height:0}
.mmi-page .mmi-review-card {flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.mmi-page .mmi-review-card .mmi-rating-num {display:none}
.mmi-page .mmi-review-card blockquote {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;margin:0;border:0;padding:0;font-size:13px;line-height:1.8;color:#fff;overflow:hidden;overflow-wrap:anywhere}
.mmi-page .mmi-review-card blockquote img.emoji {display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin:0 .08em}
.mmi-page .mmi-review-author {display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid rgba(79,216,224,.14);min-width:0}
.mmi-page .mmi-review-avatar {position:relative;flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(79,216,224,.1);color:var(--cyan);overflow:hidden}
.mmi-page .mmi-review-avatar img {position:absolute;inset:0;width:34px;height:34px;object-fit:cover}
.mmi-page .mmi-review-avatar svg {width:20px;height:20px}
.mmi-page .mmi-review-author b {font-size:12px;overflow-wrap:anywhere}
.mmi-page .mmi-review-author time {display:block;font-size:11px;margin-top:3px;color:#fff}
.mmi-page .mmi-reviews-controls {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px}
.mmi-page .mmi-reviews-controls[hidden] {display:none}
.mmi-page .mmi-review-control {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid rgba(79,216,224,.25);border-radius:7px;background:#141320;color:#fff;font-size:12px;cursor:pointer}
.mmi-page .mmi-review-control:disabled {opacity:.4;cursor:default}
.mmi-page .mmi-review-control:hover:not(:disabled) {border-color:var(--cyan)}
.mmi-page .mmi-reviews-status {margin-inline-end:auto;font-size:11px}
@media (hover:hover) {
 .mmi-page .mmi-reviews-summary:hover,.mmi-page .mmi-review-card:hover {transform:translateY(-2px);border-color:rgba(79,216,224,.48);box-shadow:0 14px 30px -24px rgba(79,216,224,.9)}
}
.mmi-page .mmi-reviews-empty {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(120deg,#151124,#0d121b)}
.mmi-page .mmi-reviews-empty p {margin:6px 0 0;font-size:13px}

/* Product photographs use one neutral, product-first surface everywhere. The
 * cool graphite/slate panel keeps white source photography from reading as a
 * separate square while the quiet grid echoes the site's technical language
 * without turning the image into a campaign banner. This selector is shared
 * by shop, product detail and related cards, so future WooCommerce/Lightspeed
 * products receive the same treatment as soon as they have an image. */
.mmi-page .product-photo,
.mmi-page .product-main-photo,
.mmi-page .related-photo {
  background-color:#d4dde7;
  background-image:
    linear-gradient(rgba(45,27,94,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,27,94,.065) 1px,transparent 1px),
    linear-gradient(145deg,#e8eef4 0%,#c4cfdb 100%);
  background-size:24px 24px,24px 24px,auto;
  border:1px solid rgba(79,216,224,.36);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 18px 34px -28px rgba(45,27,94,.8);
}
.mmi-page .product-photo img,
.mmi-page .product-main-photo img,
.mmi-page .related-photo img {
  background:transparent;
  mix-blend-mode:multiply;
  filter:saturate(1.06) contrast(1.04);
}

/* Ensure sticky navigation, narrow landscape phones and keyboard users remain usable. */
.mmi-page #mmi-content,.mmi-page main [id] {scroll-margin-top:110px}
.mmi-page .mobile-menu {max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
.mmi-page .mmi-reviews :focus-visible,.mmi-page .mmi-monitor-link:focus-visible,.mmi-page textarea:focus-visible,.mmi-page select:focus-visible {outline:2px solid var(--cyan);outline-offset:4px}
.mmi-page .mmi-monitor-link:focus-visible {outline-offset:5px}
.mmi-page.mmi-comparing {overflow:hidden}
.mmi-page .mmi-compare-backdrop {position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.7)}
.mmi-page .mmi-compare-dialog {position:fixed;inset:0;margin:auto;width:calc(100% - 32px);max-width:980px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--cyan);border-radius:14px;background:#101018;color:#fff;overflow:auto;z-index:1000;box-shadow:0 0 0 100vmax rgba(0,0,0,.65)}
.mmi-page .mmi-compare-dialog::backdrop {background:rgba(0,0,0,.7)}
.mmi-page .mmi-compare-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.mmi-page .mmi-compare-head h2 {margin:0;font-size:22px}
.mmi-page .mmi-compare-scroll {overflow-x:auto;overscroll-behavior-x:contain}
.mmi-page .mmi-compare-dialog table {width:100%;border-collapse:collapse;font-size:13px;line-height:1.6;text-align:start}
.mmi-page .mmi-compare-dialog caption {text-align:start;padding:0 0 18px;font-size:12px}
.mmi-page .mmi-compare-dialog th,.mmi-page .mmi-compare-dialog td {min-width:150px;padding:14px;border:1px solid var(--line);vertical-align:top;text-align:start;overflow-wrap:anywhere}
.mmi-page .mmi-compare-dialog th:first-child {min-width:95px}
.mmi-page .mmi-compare-dialog thead th {background:rgba(45,27,94,.45)}
.mmi-page .mmi-compare-dialog a {color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.mmi-page .mmi-compare-dialog :focus-visible {outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:1050px) {.mmi-page .mmi-review-card {flex-basis:calc((100% - 14px)/2)}.mmi-page .mmi-reviews-layout {grid-template-columns:190px minmax(0,1fr)}}
@media (max-width:760px) {.mmi-page .mmi-reviews-layout {grid-template-columns:minmax(0,1fr)}.mmi-page .mmi-reviews-summary {display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 20px}.mmi-page .mmi-reviews-summary>.mmi-review-link {margin:0}.mmi-page .mmi-reviews-summary p {grid-column:1}.mmi-page .mmi-reviews-summary .mmi-review-link {grid-column:2;grid-row:2 / span 2}}
@media (max-width:620px) {
 .mmi-page .mmi-monitor-heading {padding:17px 16px;align-items:flex-start;gap:10px;flex-direction:column}
 .mmi-page .mmi-monitor-model {font-size:10px;text-align:start}.mmi-page .mmi-monitor-model span {display:inline;margin-inline-start:10px}
 .mmi-page .mmi-monitor-bottom {padding:14px 16px;gap:14px;flex-direction:column;align-items:stretch}
 .mmi-page .mmi-monitor-specs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .mmi-page .mmi-monitor-specs li {text-align:center;font-size:12px}
 .mmi-page .mmi-monitor-cta {width:100%;justify-content:space-between}
 .mmi-page .mmi-reviews-summary,.mmi-page .mmi-review-card {padding:18px}
 .mmi-page .mmi-review-card {flex-basis:88%}
 .mmi-page .mmi-reviews-summary {display:flex;align-items:flex-start}
 .mmi-page .search input,.mmi-page main input:not([type=checkbox]):not([type=radio]):not([type=range]),.mmi-page main select,.mmi-page main textarea {font-size:16px}
 .mmi-page .nav-act {gap:4px}.mmi-page .nav-act .nav-icon,.mmi-page .menu-toggle {min-width:44px;min-height:44px}
 .mmi-page .lang {min-height:44px}
 .mmi-page .compare-tray {bottom:calc(82px + env(safe-area-inset-bottom))}
 .mmi-page .site-nav .nav-in {display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:54px 44px;height:auto;gap:7px 12px;padding-block:5px 10px}
 .mmi-page .site-nav .brand-lockup {grid-column:1;grid-row:1;margin:0;align-self:center}
 .mmi-page .site-nav .nav-act {grid-column:2;grid-row:1;justify-content:flex-end;margin:0}
 .mmi-page .site-nav .search {grid-column:1 / -1;grid-row:2;min-width:0;width:100%;height:44px;margin:0}
 .mmi-page .site-nav .search-btn {min-width:75px;font-size:11px}
 .mmi-page .mobile-menu {max-height:calc(100vh - 135px);max-height:calc(100dvh - 135px)}
 .mmi-page #mmi-content,.mmi-page main [id] {scroll-margin-top:140px}
}
@media (prefers-reduced-motion:reduce) {
 html:has(body.mmi-page) {scroll-behavior:auto}
 .mmi-page *,.mmi-page *::before,.mmi-page *::after {animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Category light surfaces. Product photography is deliberately allowed to
 * sit on the page itself: the old white/grid tile read like a pasted box.
 * A very soft category colour behind the image and a restrained edge light
 * keep the object grounded while preserving the dark Micro Mania atmosphere.
 * The RGB custom property keeps alpha values compatible with older browsers,
 * and the data-cat-slug hooks also cover products added by a future sync. */
.mmi-page .product-photo,
.mmi-page .product-main-photo,
.mmi-page .related-photo {
  --surface-rgb:79,216,224;
  position:relative;
  isolation:auto;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(var(--surface-rgb),.13) 0%,rgba(var(--surface-rgb),.055) 38%,transparent 72%);
  border:1px solid rgba(var(--surface-rgb),.34);
  box-shadow:
    0 0 0 1px rgba(var(--surface-rgb),.06),
    0 0 30px -19px rgba(var(--surface-rgb),.86),
    inset 0 0 24px -19px rgba(var(--surface-rgb),.55);
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.mmi-page .product-photo::before,
.mmi-page .product-main-photo::before,
.mmi-page .related-photo::before {
  content:"";
  position:absolute;
  inset:8%;
  z-index:0;
  border-radius:inherit;
  background:radial-gradient(ellipse at center,rgba(var(--surface-rgb),.24) 0%,rgba(var(--surface-rgb),.075) 42%,transparent 74%);
  filter:blur(16px);
  opacity:.72;
  pointer-events:none;
}
.mmi-page .product-photo::after,
.mmi-page .product-main-photo::after,
.mmi-page .related-photo::after {
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  border:1px solid rgba(var(--surface-rgb),.13);
  border-radius:inherit;
  pointer-events:none;
}
.mmi-page .product-photo img,
.mmi-page .product-main-photo img,
.mmi-page .related-photo img {
  position:relative;
  z-index:1;
  background:transparent;
  mix-blend-mode:multiply;
  filter:saturate(1.08) contrast(1.05);
}
.mmi-page .product-visual .product-aura {
  width:70%;height:70%;
  background:radial-gradient(circle,rgba(var(--surface-rgb),.22) 0%,rgba(var(--surface-rgb),.08) 42%,transparent 72%);
  filter:blur(26px);
  opacity:.42;
}
.mmi-page .product-visual:hover .product-photo,
.mmi-page .product-visual:focus-within .product-photo,
.mmi-page .related-card:hover .related-photo,
.mmi-page .related-card:focus-visible .related-photo {
  border-color:rgba(var(--surface-rgb),.62);
  box-shadow:
    0 0 0 1px rgba(var(--surface-rgb),.11),
    0 0 34px -17px rgba(var(--surface-rgb),1),
    inset 0 0 26px -18px rgba(var(--surface-rgb),.7);
}

/* A focused detail image is still a useful keyboard target even though the
 * link wraps the whole stage. */
.mmi-page .product-main-photo:focus-within {border-color:rgba(var(--surface-rgb),.62)}

/* Category accents: calm cyan for displays, violet for processors, magenta
 * for graphics, green for memory, blue for storage/boards, and warm accents
 * for cases and power. Every unrecognised future category falls back to MMI
 * cyan above, so imported products never receive a blank or white tile. */
.mmi-page [data-cat-slug="cpus"] .product-photo,
.mmi-page [data-cat-slug="cpus"] .product-main-photo,
.mmi-page [data-cat-slug="cpus"] .related-photo {--surface-rgb:168,123,255}
.mmi-page [data-cat-slug="gpus"] .product-photo,
.mmi-page [data-cat-slug="gpus"] .product-main-photo,
.mmi-page [data-cat-slug="gpus"] .related-photo {--surface-rgb:217,47,196}
.mmi-page [data-cat-slug="rams"] .product-photo,
.mmi-page [data-cat-slug="rams"] .product-main-photo,
.mmi-page [data-cat-slug="rams"] .related-photo,
.mmi-page [data-cat-slug="laptop-rams"] .product-photo,
.mmi-page [data-cat-slug="laptop-rams"] .product-main-photo,
.mmi-page [data-cat-slug="laptop-rams"] .related-photo {--surface-rgb:80,220,138}
.mmi-page [data-cat-slug="storage"] .product-photo,
.mmi-page [data-cat-slug="storage"] .product-main-photo,
.mmi-page [data-cat-slug="storage"] .related-photo {--surface-rgb:86,145,255}
.mmi-page [data-cat-slug="motherboards"] .product-photo,
.mmi-page [data-cat-slug="motherboards"] .product-main-photo,
.mmi-page [data-cat-slug="motherboards"] .related-photo {--surface-rgb:104,155,255}
.mmi-page [data-cat-slug="monitors"] .product-photo,
.mmi-page [data-cat-slug="monitors"] .product-main-photo,
.mmi-page [data-cat-slug="monitors"] .related-photo {--surface-rgb:79,216,224}
.mmi-page [data-cat-slug="coolers"] .product-photo,
.mmi-page [data-cat-slug="coolers"] .product-main-photo,
.mmi-page [data-cat-slug="coolers"] .related-photo,
.mmi-page [data-cat-slug="case-fan"] .product-photo,
.mmi-page [data-cat-slug="case-fan"] .product-main-photo,
.mmi-page [data-cat-slug="case-fan"] .related-photo {--surface-rgb:62,225,202}
.mmi-page [data-cat-slug="cases"] .product-photo,
.mmi-page [data-cat-slug="cases"] .product-main-photo,
.mmi-page [data-cat-slug="cases"] .related-photo {--surface-rgb:255,157,82}
.mmi-page [data-cat-slug="psus"] .product-photo,
.mmi-page [data-cat-slug="psus"] .product-main-photo,
.mmi-page [data-cat-slug="psus"] .related-photo,
.mmi-page [data-cat-slug="psu-protector"] .product-photo,
.mmi-page [data-cat-slug="psu-protector"] .product-main-photo,
.mmi-page [data-cat-slug="psu-protector"] .related-photo {--surface-rgb:245,197,24}
.mmi-page [data-cat-slug="mice"] .product-photo,
.mmi-page [data-cat-slug="mice"] .product-main-photo,
.mmi-page [data-cat-slug="mice"] .related-photo,
.mmi-page [data-cat-slug="keyboards"] .product-photo,
.mmi-page [data-cat-slug="keyboards"] .product-main-photo,
.mmi-page [data-cat-slug="keyboards"] .related-photo {--surface-rgb:122,176,255}
.mmi-page [data-cat-slug="headphones"] .product-photo,
.mmi-page [data-cat-slug="headphones"] .product-main-photo,
.mmi-page [data-cat-slug="headphones"] .related-photo,
.mmi-page [data-cat-slug="accessories-kits"] .product-photo,
.mmi-page [data-cat-slug="accessories-kits"] .product-main-photo,
.mmi-page [data-cat-slug="accessories-kits"] .related-photo {--surface-rgb:255,103,208}
.mmi-page [data-cat-slug="mousepads"] .product-photo,
.mmi-page [data-cat-slug="mousepads"] .product-main-photo,
.mmi-page [data-cat-slug="mousepads"] .related-photo {--surface-rgb:184,112,255}
.mmi-page [data-cat-slug="thermal-paste"] .product-photo,
.mmi-page [data-cat-slug="thermal-paste"] .product-main-photo,
.mmi-page [data-cat-slug="thermal-paste"] .related-photo {--surface-rgb:187,210,235}

/* Keep the complete navigation row on phones. The former two-row grid made
 * the search field look oversized and pushed it below the logo/actions. */
@media (max-width:620px) {
  .mmi-page .site-nav .nav-in {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    height:64px;
    min-height:64px;
    gap:6px;
    padding-block:0;
  }
  .mmi-page .site-nav .brand-lockup {
    order:1;
    flex:0 0 48px;
    width:48px;
    height:58px;
    margin:0;
  }
  .mmi-page .site-nav .search {
    order:2;
    flex:1 1 auto;
    min-width:0;
    width:auto;
    height:38px;
    margin:0;
    border-radius:9px;
  }
  .mmi-page .site-nav .search input {
    min-width:0;
    font-size:12px;
    padding-inline:10px 4px;
  }
  .mmi-page .site-nav .search-btn {
    min-width:38px;
    width:38px;
    min-height:38px;
    height:38px;
    padding:0 3px;
    font-size:8px;
  }
  .mmi-page .site-nav .nav-act {
    order:3;
    flex:0 0 auto;
    gap:3px;
    margin:0;
  }
}
@media (max-width:370px) {
  .mmi-page .site-nav .brand-lockup {flex-basis:44px;width:44px}
  .mmi-page .site-nav .search input {font-size:11px;padding-inline-start:8px}
  .mmi-page .site-nav .search-btn {min-width:36px;width:36px;font-size:7.5px}
  .mmi-page .site-nav .nav-act {gap:2px}
}