/* MMI-BUILD: 2026-09-08-product-description */
/*
 * Micro Mania · the product description panel and the assurance strip.
 *
 * The product page used to give its second lower panel to three lines of
 * shop reassurance and never showed the description written in WooCommerce
 * at all; the customer got a 45-word summary at the top and nothing more.
 * The description now takes that panel — a short introduction, the features
 * that matter, and a specification table, written per product — and the
 * three assurance lines become one slim strip under the related row, where
 * they still close the page without competing with the product itself.
 *
 * Loads after the stage layer. Nothing here changes an existing rule; the
 * two new blocks only use the panel frame, kicker and tick list already in
 * mmi-home.css so they read as part of the same page.
 */

/* ========================================================================
   The lower row

   Panels size to their own content rather than stretching to the taller
   neighbour, so a long description does not leave the spec panel half
   empty. The description gets a little more width than the spec cards.
   ===================================================================== */
.mmi-page .product-lower{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:start;
}
.mmi-page .product-lower .detail-panel{min-width:0}

/* ========================================================================
   The description

   Written in WooCommerce as plain paragraphs, an h3 per section, a bullet
   list and a two-column table. Each is set here in the page's own voice:
   the lede in white, sections as cyan kickers, bullets with the lit dot,
   the table as label / value rows with hairline dividers.
   ===================================================================== */
.mmi-page .product-desc{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.mmi-page .product-desc > *:first-child{margin-top:0}
.mmi-page .product-desc > *:last-child{margin-bottom:0}

.mmi-page .product-desc p{margin:0 0 12px}
.mmi-page .product-desc > p:first-child{
  color:#fff;
  font-size:13.5px;
  line-height:1.65;
}
.mmi-page .product-desc strong,
.mmi-page .product-desc b{color:#fff;font-weight:800}
.mmi-page .product-desc a{color:var(--cyan)}

.mmi-page .product-desc h2,
.mmi-page .product-desc h3,
.mmi-page .product-desc h4{
  margin:20px 0 10px;
  color:var(--cyan);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
}

.mmi-page .product-desc ul,
.mmi-page .product-desc ol{
  display:grid;
  gap:7px;
  margin:0 0 14px;
  padding:0;
  list-style:none;
}
.mmi-page .product-desc li{
  position:relative;
  padding-inline-start:18px;
}
.mmi-page .product-desc ul li::before{
  content:"";
  position:absolute;
  inset-inline-start:2px;
  top:.62em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
}
.mmi-page .product-desc ol{counter-reset:mmi-desc}
.mmi-page .product-desc ol li{counter-increment:mmi-desc;padding-inline-start:24px}
.mmi-page .product-desc ol li::before{
  content:counter(mmi-desc);
  position:absolute;
  inset-inline-start:0;
  top:.1em;
  color:var(--cyan);
  font-size:10px;
  font-weight:900;
}

.mmi-page .product-desc table{
  width:100%;
  margin:0 0 14px;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:inherit;
}
.mmi-page .product-desc th,
.mmi-page .product-desc td{
  padding:8px 10px 8px 0;
  border-top:1px solid rgba(255,255,255,.07);
  vertical-align:top;
  text-align:start;
  line-height:1.5;
}
.mmi-page .product-desc tr:first-child th,
.mmi-page .product-desc tr:first-child td{border-top:0}
.mmi-page .product-desc th{
  width:40%;
  color:var(--muted);
  font-weight:600;
}
.mmi-page .product-desc td{
  color:#fff;
  font-weight:700;
}
.mmi-page .product-desc thead th{
  color:var(--cyan);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Anything wider than the panel scrolls inside it, never the page. */
.mmi-page .product-desc img,
.mmi-page .product-desc iframe,
.mmi-page .product-desc video{max-width:100%;height:auto}
.mmi-page .product-desc pre{overflow-x:auto}

/* ========================================================================
   The assurance strip

   The same three tick lines, now one row under the related products:
   kicker and title on the left, the three points across the rest.
   ===================================================================== */
.mmi-page .product-assurance{
  display:grid;
  grid-template-columns:minmax(150px,.55fr) minmax(0,2fr);
  gap:14px 28px;
  align-items:center;
  margin-top:22px;
  padding:16px 21px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:linear-gradient(150deg,#12121b,#0c0c14);
}
.mmi-page .product-assurance-head{display:grid;gap:4px}
.mmi-page .product-assurance-head span{
  color:var(--cyan);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.mmi-page .product-assurance-head h2{
  margin:0;
  font-size:16px;
  line-height:1.2;
}
.mmi-page .product-assurance .highlight-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 18px;
}

/* ========================================================================
   Phones and narrow tablets
   ===================================================================== */
@media(max-width:900px){
  .mmi-page .product-lower{grid-template-columns:1fr}
  .mmi-page .product-assurance{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:18px;
    padding:16px 18px;
  }
  .mmi-page .product-assurance .highlight-list{grid-template-columns:1fr}
}
@media(max-width:620px){
  .mmi-page .product-desc{font-size:12.5px;line-height:1.7}
  .mmi-page .product-desc > p:first-child{font-size:13px}
  .mmi-page .product-desc h2,
  .mmi-page .product-desc h3,
  .mmi-page .product-desc h4{margin:18px 0 9px}
  .mmi-page .product-desc th{width:44%}
  .mmi-page .product-desc th,
  .mmi-page .product-desc td{padding:7px 8px 7px 0}
  .mmi-page .product-assurance{margin-top:14px;padding:15px 16px;border-radius:13px}
  .mmi-page .product-assurance-head h2{font-size:15px}
}

/* Arabic mode: the kickers lose the Latin tracking, as everywhere else. */
[dir="rtl"] .mmi-page .product-desc h2,
[dir="rtl"] .mmi-page .product-desc h3,
[dir="rtl"] .mmi-page .product-desc h4,
[dir="rtl"] .mmi-page .product-desc thead th,
[dir="rtl"] .mmi-page .product-assurance-head span{
  letter-spacing:0;
  text-transform:none;
}

@media (prefers-reduced-motion:reduce){
  .mmi-page .product-desc ul li::before{box-shadow:none}
}