/* ==================================================================
* MCT Premium Product - P2 stylesheet
* Scoped entirely under .mct-premium. Loads only on allowlisted products.
* Reference-matched: 3-col hero, cards, icon rows, premium type & spacing.
* ================================================================== */
/* ---- Suppress legacy Elementor summary widgets on THIS product ----
* Template 13797 renders its own product image, rating, meta (tag cloud),
* old CTA buttons, "Wants to Order?" / "Physical Address" icon-boxes and
* trust icon-boxes. The premium hero replaces all of these, so they are
* hidden here. Scoped to .mct-premium => other products are untouched and
* template 13797 itself is NOT modified. Element IDs are Elementor's own.
*/
.mct-premium .elementor-element.elementor-element-bad3778, /* product-images */
.mct-premium .elementor-element.elementor-element-7761fcf0, /* stray icon-box */
.mct-premium .elementor-element.elementor-element-5db428c, /* product-rating */
.mct-premium .elementor-element.elementor-element-d062a5f, /* product-meta (tag cloud) */
.mct-premium .elementor-element.elementor-element-57c21e16, /* divider */
.mct-premium .elementor-element.elementor-element-5d76466c, /* divider */
.mct-premium .elementor-element.elementor-element-70e7f37, /* heading */
.mct-premium .elementor-element.elementor-element-1bae693, /* button */
.mct-premium .elementor-element.elementor-element-fccae37, /* button */
.mct-premium .elementor-element.elementor-element-43edbee9, /* icon-list */
.mct-premium .elementor-element.elementor-element-9d09fd4, /* icon-box Wants to Order? */
.mct-premium .elementor-element.elementor-element-79d2eab, /* social-icons */
.mct-premium .elementor-element.elementor-element-57f28259, /* icon-box Physical Address */
.mct-premium .elementor-element.elementor-element-3483a26, /* button */
.mct-premium .elementor-element.elementor-element-0f3e95a, /* trust icon-box */
.mct-premium .elementor-element.elementor-element-a43d082, /* trust icon-box */
.mct-premium .elementor-element.elementor-element-07744e8, /* trust icon-box */
.mct-premium .elementor-element.elementor-element-7973989, /* trust icon-box */
.mct-premium .elementor-element.elementor-element-22955581 { /* divider */
display:none !important;
}
/* The short-description widget wraps BOTH the raw excerpt and the injected
* premium hero. Hide only the excerpt's own /
that precede .mct-hero,
* never the hero. */
.mct-premium .elementor-element-21bcf27c .woocommerce-product-details__short-description > p,
.mct-premium .elementor-element-21bcf27c .woocommerce-product-details__short-description > ul{display:none !important}
/* The premium hero is injected into one Elementor column (dc55e9b) of the
* product row (354493cb). That row has three columns: gallery (5f388a6e),
* the info column (dc55e9b), and the old CTA cards (51db2ef9). The premium
* hero reproduces all three, so the two sibling columns are hidden and the
* info column spans the full row. Scoped to .mct-premium; template 13797 is
* not edited. */
.mct-premium .elementor-element-5f388a6e, /* old gallery column */
.mct-premium .elementor-element-51db2ef9, /* old CTA cards column */
.mct-premium .elementor-element-d506291{ /* old TDS/MSDS buttons */
display:none !important;
}
.mct-premium .elementor-element-dc55e9b{width:100% !important;max-width:100% !important;flex:0 0 100% !important}
/* ==================================================================
* DESIGN TOKENS — one system for the whole page
* ================================================================== */
.mct-premium{
--mct-orange:#f5821f;
--mct-orange-d:#e0730f;
--mct-orange-soft:#fff4e9;
--mct-ink:#141b26;
--mct-ink-2:#454e5c;
--mct-muted:#727b88;
--mct-line:#e7eaee;
--mct-line-2:#f1f3f6;
--mct-bg-soft:#f8f9fb;
--mct-wa:#25d366;
--mct-wa-d:#1eb257;
--mct-r-lg:14px;
--mct-r-md:11px;
--mct-r-sm:9px;
--mct-sh-sm:0 1px 2px rgba(20,28,45,.05);
--mct-sh-md:0 4px 14px rgba(20,28,45,.07);
--mct-sh-lg:0 10px 30px rgba(20,28,45,.09);
--mct-fs-h1:2.35rem;
--mct-fs-sub:1.1rem;
--mct-gap:2.5rem;
--mct-font:"Rubik","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
font-family:var(--mct-font);
color:var(--mct-ink);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Force the modern sans across every premium element so nothing inherits
the theme's serif fallback (this was the biggest "template" tell). */
.mct-premium .mct-hero,
.mct-premium .mct-hero *,
.mct-premium .woocommerce-Tabs-panel,
.mct-premium .woocommerce-Tabs-panel *,
.mct-premium .mct-trust-strip,
.mct-premium .mct-trust-strip *,
.mct-premium ul.wc-tabs li a,
.mct-premium .mct-sec,
.mct-premium .mct-sec *{font-family:var(--mct-font) !important}
.mct-premium *{box-sizing:border-box}
.mct-premium .mct-ico{width:22px;height:22px;flex:0 0 auto;color:var(--mct-orange);display:inline-block;vertical-align:middle}
/* ==================================================================
* 1. HERO — full-width breakout 3-col grid
* ================================================================== */
.mct-premium .mct-hero{
display:grid;
grid-template-columns:minmax(320px,1.05fr) minmax(340px,1.15fr) minmax(300px,.9fr);
gap:var(--mct-gap);
align-items:start;
margin:2rem 0 2.75rem;
}
/* -- gallery (item 1): image dominates, minimal empty space -- */
.mct-premium .mct-hero-gallery{position:sticky;top:1.5rem}
.mct-premium .mct-gal-main{
position:relative;border:1px solid var(--mct-line);border-radius:var(--mct-r-lg);
background:#fff;padding:.5rem;display:flex;align-items:center;justify-content:center;
aspect-ratio:1/1;overflow:hidden;box-shadow:var(--mct-sh-md);
}
.mct-premium .mct-gal-img{width:100%;height:100%;object-fit:contain;display:block}
.mct-premium .mct-gal-empty{color:var(--mct-line)}
.mct-premium .mct-gal-empty .mct-ico{width:72px;height:72px;color:var(--mct-line)}
.mct-premium .mct-gal-zoom{
position:absolute;top:.85rem;right:.85rem;width:40px;height:40px;border-radius:50%;
background:#fff;border:1px solid var(--mct-line);display:flex;align-items:center;justify-content:center;
color:var(--mct-muted);box-shadow:var(--mct-sh-sm);transition:.15s;
}
.mct-premium .mct-gal-zoom:hover{color:var(--mct-orange);border-color:var(--mct-orange);box-shadow:var(--mct-sh-md)}
.mct-premium .mct-gal-thumbs{display:flex;gap:.6rem;margin-top:.85rem;flex-wrap:wrap}
.mct-premium .mct-gal-thumb{
width:70px;height:70px;border:2px solid var(--mct-line);border-radius:var(--mct-r-sm);
background:#fff;padding:.3rem;cursor:pointer;overflow:hidden;transition:.15s;
}
.mct-premium .mct-gal-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.mct-premium .mct-gal-thumb.is-active{border-color:var(--mct-orange);box-shadow:var(--mct-sh-sm)}
.mct-premium .mct-gal-thumb:hover{border-color:var(--mct-orange)}
/* -- details column (items 2,3,4) -- */
.mct-premium .mct-h-title{font-size:var(--mct-fs-h1);line-height:1.1;font-weight:600;letter-spacing:-.02em;margin:0 0 .5rem;color:var(--mct-ink)}
.mct-premium .mct-h-sub{font-size:var(--mct-fs-sub);color:var(--mct-muted);margin:0 0 1.25rem;font-weight:400;line-height:1.45;max-width:44ch}
.mct-premium .mct-rating{display:flex;align-items:center;gap:.5rem;margin:0 0 1.5rem}
.mct-premium .mct-stars{display:inline-flex;gap:1px}
.mct-premium .mct-stars .mct-ico{width:16px;height:16px;color:var(--mct-orange)}
.mct-premium .mct-rating-link{color:var(--mct-muted);font-size:.85rem;text-decoration:none;font-weight:400}
.mct-premium .mct-rating-link:hover{color:var(--mct-orange);text-decoration:none}
.mct-premium .mct-rating-link:hover{text-decoration:underline}
/* metadata (item 3): SKU + Category + Brand shown; Tags kept in DOM, hidden */
.mct-premium .mct-meta{margin:0 0 1.75rem;font-size:.9rem;border-top:1px solid var(--mct-line-2);padding-top:1.25rem}
.mct-premium .mct-meta-row{display:flex;gap:.75rem;margin:.5rem 0;line-height:1.5;align-items:baseline}
.mct-premium .mct-meta-k{color:var(--mct-muted);font-weight:500;flex:0 0 auto;min-width:78px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.mct-premium .mct-meta-v{color:var(--mct-ink-2);font-weight:500}
.mct-premium .mct-meta-v a{color:var(--mct-ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:.15s}
.mct-premium .mct-meta-v a:hover{color:var(--mct-orange);border-bottom-color:var(--mct-orange)}
.mct-premium .mct-meta-brand{font-weight:600;color:var(--mct-ink)}
.mct-premium .mct-meta-tags{display:none !important}
/* benefit list (item 4): equal rhythm, aligned icons */
.mct-premium .mct-benefits{display:flex;flex-direction:column;gap:1.15rem;margin:0 0 1.75rem}
.mct-premium .mct-benefit{display:flex;gap:.9rem;align-items:flex-start}
.mct-premium .mct-benefit-ico{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--mct-orange)}
.mct-premium .mct-benefit-ico .mct-ico{width:22px;height:22px}
.mct-premium .mct-benefit-txt{display:flex;flex-direction:column;gap:.12rem;padding-top:0}
.mct-premium .mct-benefit-txt strong{color:var(--mct-ink);font-size:.97rem;font-weight:600;line-height:1.3}
.mct-premium .mct-benefit-txt span{color:var(--mct-muted);font-size:.87rem;line-height:1.45;font-weight:400}
/* doc CTAs (item under hero) */
.mct-premium .mct-doc-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.25rem}
.mct-premium .mct-btn{
display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.35rem;border-radius:var(--mct-r-sm);
font-weight:500;font-size:.92rem;text-decoration:none;border:none;cursor:pointer;transition:.15s;line-height:1.1;letter-spacing:-.005em;
}
.mct-premium .mct-btn .mct-ico{width:18px;height:18px;color:#fff}
.mct-premium .mct-btn-primary{background:var(--mct-orange);color:#fff}
.mct-premium .mct-btn-primary:hover{background:var(--mct-orange-d);color:#fff;transform:translateY(-1px)}
.mct-premium .mct-btn-dark{background:#fff;color:var(--mct-ink);border:1px solid var(--mct-line)}
.mct-premium .mct-btn-dark .mct-ico{color:var(--mct-ink)}
.mct-premium .mct-btn-dark:hover{background:var(--mct-bg-soft);color:var(--mct-ink);border-color:var(--mct-muted)}
/* ==================================================================
* CARDS — shared premium card system (items 5,6,10,11,12,13,14)
* ================================================================== */
.mct-premium .mct-card{border:1px solid var(--mct-line);border-radius:var(--mct-r-lg);background:#fff;box-shadow:var(--mct-sh-md)}
.mct-premium .mct-hero-side{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:1rem}
/* 5. Get Best Price — the commercial anchor. The number is the hero. */
.mct-premium .mct-price-card{padding:1.9rem 1.6rem;text-align:center;border:1px solid var(--mct-line);box-shadow:var(--mct-sh-lg);position:relative;overflow:hidden}
.mct-premium .mct-price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mct-orange),#ffa94d)}
.mct-premium .mct-price-head{font-size:.8rem;font-weight:600;color:var(--mct-muted);line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
.mct-premium .mct-price-head span{display:inline;font-size:.8rem;color:var(--mct-muted);font-weight:600;margin-top:0;letter-spacing:.08em}
.mct-premium .mct-price-head span::before{content:" "}
.mct-premium .mct-wa-circle{
width:60px;height:60px;border-radius:50%;background:var(--mct-wa);display:flex;align-items:center;justify-content:center;
margin:1.35rem auto 1.35rem;box-shadow:0 6px 20px rgba(37,211,102,.42);transition:transform .18s ease,box-shadow .18s ease;
}
.mct-premium .mct-wa-circle .mct-ico{width:32px;height:32px;color:#fff}
.mct-premium .mct-wa-circle:hover{transform:translateY(-2px) scale(1.03);background:var(--mct-wa-d);box-shadow:0 10px 26px rgba(37,211,102,.5)}
.mct-premium .mct-price-phone{font-size:1.7rem;font-weight:600;color:var(--mct-ink);margin:0 0 .3rem;letter-spacing:-.02em;line-height:1.1}
.mct-premium .mct-price-email{display:block;color:var(--mct-muted);font-size:.88rem;text-decoration:none;margin-bottom:1.5rem;font-weight:400}
.mct-premium .mct-price-email:hover{color:var(--mct-orange)}
.mct-premium .mct-price-trust{display:flex;justify-content:space-between;gap:.5rem;border-top:1px solid var(--mct-line-2);padding-top:1.3rem}
.mct-premium .mct-price-trust span{display:flex;flex-direction:column;align-items:center;gap:.45rem;font-size:.71rem;color:var(--mct-muted);flex:1 1 0;text-align:center;line-height:1.3;font-weight:500}
.mct-premium .mct-price-trust .mct-ico{width:22px;height:22px;color:var(--mct-orange)}
/* 6. Shipping card */
.mct-premium .mct-ship-card{padding:1.5rem}
.mct-premium .mct-ship-head{text-align:center;font-size:1.1rem;font-weight:600;color:var(--mct-ink);margin-bottom:1rem;letter-spacing:-.005em}
.mct-premium .mct-ship-row{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--mct-ink);margin-bottom:.6rem;font-size:.97rem}
.mct-premium .mct-ship-row .mct-ico{width:24px;height:24px}
.mct-premium .mct-ship-txt{color:var(--mct-muted);font-size:.89rem;line-height:1.55;margin:0 0 1.1rem}
.mct-premium .mct-ship-cta{width:100%;justify-content:center;padding:.85rem}
/* ==================================================================
* 7. TRUST STRIP — equal widths, aligned
* ================================================================== */
.mct-premium .mct-trust-strip{
display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
border:1px solid var(--mct-line);border-radius:var(--mct-r-lg);background:#fff;
padding:2rem 2.25rem;margin:0 0 2.75rem;box-shadow:var(--mct-sh-md);
}
.mct-premium .mct-trust-item{display:flex;gap:.9rem;align-items:flex-start}
.mct-premium .mct-trust-ico{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.mct-premium .mct-trust-ico .mct-ico{width:34px;height:34px;color:var(--mct-orange)}
.mct-premium .mct-trust-item strong{display:block;color:var(--mct-ink);font-size:.94rem;font-weight:600;margin-bottom:.3rem;line-height:1.25}
.mct-premium .mct-trust-item p{color:var(--mct-muted);font-size:.83rem;margin:0;line-height:1.45}
/* ==================================================================
* 8. TABS — premium, non-default WooCommerce
* ================================================================== */
.mct-premium .woocommerce-tabs.wc-tabs-wrapper,
.mct-premium .woocommerce-tabs{margin-top:.5rem}
.mct-premium ul.wc-tabs,
.mct-premium .woocommerce-tabs ul.tabs{
display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.5rem !important;padding:0 !important;
border:none !important;border-bottom:2px solid var(--mct-line) !important;list-style:none;
}
.mct-premium ul.wc-tabs::before,
.mct-premium .woocommerce-tabs ul.tabs::before,
.mct-premium ul.wc-tabs::after,
.mct-premium .woocommerce-tabs ul.tabs::after{display:none !important;border:none !important}
.mct-premium ul.wc-tabs li,
.mct-premium .woocommerce-tabs ul.tabs li{
background:transparent !important;border:none !important;border-radius:0 !important;
margin:0 !important;padding:0 !important;position:relative;bottom:-2px;
}
.mct-premium ul.wc-tabs li::before,
.mct-premium ul.wc-tabs li::after,
.mct-premium .woocommerce-tabs ul.tabs li::before,
.mct-premium .woocommerce-tabs ul.tabs li::after{display:none !important;border:none !important}
.mct-premium ul.wc-tabs li a,
.mct-premium .woocommerce-tabs ul.tabs li a{
display:block;padding:.85rem 1.35rem !important;font-weight:600;font-size:.94rem;
color:var(--mct-muted) !important;text-decoration:none;border:none !important;
border-bottom:2px solid transparent !important;transition:.15s;
}
.mct-premium ul.wc-tabs li a:hover,
.mct-premium .woocommerce-tabs ul.tabs li a:hover{color:var(--mct-ink) !important;background:var(--mct-bg-soft);border-radius:var(--mct-r-sm) var(--mct-r-sm) 0 0}
.mct-premium ul.wc-tabs li.active a,
.mct-premium .woocommerce-tabs ul.tabs li.active a{
color:var(--mct-orange) !important;border-bottom-color:var(--mct-orange) !important;background:transparent;
}
.mct-premium .woocommerce-Tabs-panel{padding:.5rem 0 1rem;animation:mctfade .25s ease}
@keyframes mctfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Section shells */
.mct-premium .mct-sec{padding:.25rem 0 1rem}
.mct-premium .mct-sec-h{font-size:1.4rem !important;font-weight:600 !important;color:var(--mct-ink) !important;margin:0 0 1.1rem;letter-spacing:-.005em;line-height:1.25 !important}
.mct-premium .mct-sub-h{font-size:1.12rem;font-weight:700;color:var(--mct-ink);margin:1.5rem 0 .8rem}
.mct-premium .mct-note{color:#9aa2ad;font-size:.8rem;margin-top:.8rem}
/* 9. Overview — hierarchy, readable measure */
.mct-premium .mct-overview{display:grid;grid-template-columns:1.55fr 1fr;gap:2rem;align-items:start}
.mct-premium .mct-ov-main{max-width:62ch}
.mct-premium .mct-ov-main p{color:var(--mct-ink-2);line-height:1.7;margin:0 0 1rem}
.mct-premium .mct-uses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.mct-premium .mct-uses li{display:flex;align-items:flex-start;gap:.65rem;color:var(--mct-ink-2);font-size:.95rem;line-height:1.5}
.mct-premium .mct-uses .mct-ico{width:20px;height:20px;color:var(--mct-orange);margin-top:1px}
/* 10. Key Benefits card */
.mct-premium .mct-ov-side{background:var(--mct-bg-soft);border:1px solid var(--mct-line-2);border-radius:var(--mct-r-lg);padding:1.6rem}
.mct-premium .mct-panel-h{font-size:1.15rem !important;font-weight:600 !important;color:var(--mct-ink) !important;margin:0 0 1.15rem;letter-spacing:-.005em;line-height:1.3 !important}
.mct-premium .mct-keyben{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.mct-premium .mct-keyben li{display:flex;align-items:center;gap:.8rem;color:var(--mct-ink-2);font-size:.94rem;line-height:1.35}
.mct-premium .mct-keyben .mct-ico{width:24px;height:24px}
/* Shared card header */
.mct-premium .mct-card-h{text-align:center;font-size:1.15rem;font-weight:600;color:var(--mct-ink);padding:1.1rem 1.35rem;border-bottom:1px solid var(--mct-line-2);letter-spacing:-.005em}
/* 11. Technical Information — premium 4-column spec matrix
* Property | Value | Property | Value. Built as a CSS grid of rows, each
* row a 4-track grid, so borders are continuous by construction. The card
* clips to a rounded outer border; inner dividers come from per-cell
* right/bottom borders. Odd final spec gets a complete empty filler pair. */
.mct-premium .mct-specs{
border:1px solid var(--mct-line);border-radius:var(--mct-r-lg);overflow:hidden;
background:#fff;box-shadow:var(--mct-sh-sm);
}
.mct-premium .mct-specs-row{
display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr) minmax(0,0.9fr) minmax(0,1.1fr);
}
/* Cells: consistent height via align-stretch, comfortable padding, readable
* type (NOT shrunk). Continuous lines from bottom + right borders. */
.mct-premium .mct-spec-k,
.mct-premium .mct-spec-v{
padding:.85rem 1.15rem;border-bottom:1px solid var(--mct-line-2);
border-right:1px solid var(--mct-line-2);display:flex;align-items:center;
font-size:.95rem;line-height:1.4;min-height:100%;
}
/* Property cells: neutral background, bold dark label. */
.mct-premium .mct-spec-k{
background:var(--mct-bg-soft);color:var(--mct-ink);font-weight:600;
}
/* Value cells: white, normal-weight technical value. */
.mct-premium .mct-spec-v{
background:#fff;color:var(--mct-ink-2);font-weight:400;
}
/* The 4th cell in each row must not carry a right border (outer edge). */
.mct-premium .mct-specs-row > :nth-child(4){border-right:none}
/* Last visual row: no bottom border (outer edge), keeps corners clean. */
.mct-premium .mct-specs-row.is-last > *{border-bottom:none}
/* Empty filler pair still renders full background + height so the card
* finishes as a complete rectangle with no white hole. */
.mct-premium .mct-spec-empty{background:var(--mct-bg-soft)}
.mct-premium .mct-spec-empty.mct-spec-v{background:#fff}
/* 12. Packaging rows */
.mct-premium .mct-pack-rows{padding:1.35rem}
.mct-premium .mct-pack-row{display:flex;gap:1.1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--mct-line-2)}
.mct-premium .mct-pack-row:first-child{padding-top:.25rem}
.mct-premium .mct-pack-row:last-child{border-bottom:none;padding-bottom:.25rem}
.mct-premium .mct-pack-row .mct-ico{width:32px;height:32px;color:var(--mct-orange)}
.mct-premium .mct-pack-row strong{color:var(--mct-ink);display:block;margin-bottom:.25rem;font-size:.97rem;font-weight:600}
.mct-premium .mct-pack-row p{color:var(--mct-muted);font-size:.89rem;margin:0;line-height:1.55}
/* 13. Application steps */
.mct-premium .mct-app-card .mct-steps{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}
.mct-premium .mct-step{display:flex;gap:1.15rem;align-items:flex-start}
.mct-premium .mct-step-n{font-size:1.7rem;font-weight:600;color:var(--mct-orange);line-height:1;flex:0 0 auto;min-width:26px;text-align:center}
.mct-premium .mct-step-b{padding-top:.1rem}
.mct-premium .mct-step-b strong{color:var(--mct-ink);display:block;margin-bottom:.3rem;font-size:1rem;font-weight:600}
.mct-premium .mct-step-b p{color:var(--mct-muted);font-size:.91rem;margin:0;line-height:1.6}
/* 14. FAQ — premium native accordion */
.mct-premium .mct-faqs{display:flex;flex-direction:column;gap:.7rem}
.mct-premium .mct-faq{border:1px solid var(--mct-line);border-radius:var(--mct-r-md);background:#fff;transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}
.mct-premium .mct-faq:hover{border-color:#d8dde3;box-shadow:var(--mct-sh-sm)}
.mct-premium .mct-faq[open]{border-color:var(--mct-orange);box-shadow:var(--mct-sh-sm)}
.mct-premium .mct-faq-q{display:flex;align-items:center;gap:.7rem;padding:1.05rem 1.25rem;cursor:pointer;list-style:none;user-select:none;transition:background .15s ease}
.mct-premium .mct-faq-q::-webkit-details-marker{display:none}
.mct-premium .mct-faq-q:hover{background:var(--mct-bg-soft)}
.mct-premium .mct-faq-q .mct-ico{width:18px;height:18px;color:var(--mct-orange);flex:0 0 auto;transition:transform .2s ease}
.mct-premium .mct-faq[open] .mct-faq-q .mct-ico{transform:rotate(90deg)}
.mct-premium .mct-faq-q strong{color:var(--mct-ink);font-size:.97rem;font-weight:600;line-height:1.4}
.mct-premium .mct-faq-a{color:var(--mct-muted);font-size:.91rem;line-height:1.65;margin:0;padding:0 1.25rem 1.15rem 2.7rem;animation:mctfade .2s ease}
/* 15. Reviews — style native WooCommerce reviews to match */
.mct-premium #reviews .commentlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1rem}
.mct-premium #reviews .commentlist li.review,
.mct-premium #reviews .commentlist li.comment{border:1px solid var(--mct-line);border-radius:var(--mct-r-md);padding:1.2rem 1.35rem;background:#fff;box-shadow:none}
.mct-premium #reviews .comment-text{margin:0}
.mct-premium #reviews .star-rating span{color:var(--mct-orange)}
.mct-premium #reviews .comment-form input[type=text],
.mct-premium #reviews .comment-form textarea{border:1px solid var(--mct-line);border-radius:var(--mct-r-sm);padding:.7rem}
.mct-premium #reviews .comment-form input[type=submit],
.mct-premium #review_form .form-submit input{background:var(--mct-orange) !important;border:none !important;border-radius:var(--mct-r-sm) !important;padding:.8rem 1.5rem !important;font-weight:600 !important;color:#fff !important}
.mct-premium #reviews .comment-form input[type=submit]:hover{background:var(--mct-orange-d) !important}
/* ==================================================================
* 16. RESPONSIVE — 320 / 375 / 414 / tablet / desktop
* ================================================================== */
@media(max-width:1100px){
.mct-premium{--mct-fs-h1:1.9rem;--mct-gap:1.5rem}
.mct-premium .mct-hero{grid-template-columns:1fr 1fr}
.mct-premium .mct-hero-side{grid-column:1 / -1;flex-direction:row;position:static}
.mct-premium .mct-hero-side .mct-card{flex:1}
.mct-premium .mct-trust-strip{grid-template-columns:repeat(2,1fr);gap:1.25rem}
}
@media(max-width:820px){
.mct-premium .mct-overview{grid-template-columns:1fr;gap:1.5rem}
.mct-premium .mct-ov-main{max-width:none}
}
@media(max-width:640px){
.mct-premium{--mct-fs-h1:1.6rem;--mct-fs-sub:1.02rem}
.mct-premium .mct-hero{grid-template-columns:1fr;gap:1.25rem}
.mct-premium .mct-hero-gallery,.mct-premium .mct-hero-side{position:static}
.mct-premium .mct-hero-side{flex-direction:column}
.mct-premium .mct-doc-ctas .mct-btn{flex:1 1 100%;justify-content:center}
.mct-premium .mct-trust-strip{grid-template-columns:1fr;gap:1.1rem;padding:1.35rem}
.mct-premium ul.wc-tabs,.mct-premium .woocommerce-tabs ul.tabs{gap:.2rem}
.mct-premium ul.wc-tabs li a,.mct-premium .woocommerce-tabs ul.tabs li a{padding:.7rem .9rem !important;font-size:.88rem}
}
@media(max-width:400px){
.mct-premium{--mct-fs-h1:1.42rem}
.mct-premium .mct-price-card,.mct-premium .mct-ship-card{padding:1.25rem 1.1rem}
.mct-premium .mct-price-phone{font-size:1.3rem}
.mct-premium .mct-price-trust{gap:.3rem}
.mct-premium .mct-price-trust span{font-size:.68rem}
.mct-premium .mct-pack-rows,.mct-premium .mct-app-card .mct-steps{padding:1.1rem}
.mct-premium .mct-step-n{width:32px;height:32px;font-size:1.25rem}
}
/* ==================================================================
* P3 — BELOW-HERO SECTIONS (scoped to .mct-premium, product 4959 only)
* Related products, disclaimer notice, review refinements.
* No markup/PHP changes — styles existing WooCommerce + plugin classes.
* ================================================================== */
/* ---- 7. RELATED PRODUCTS — premium card grid ---- */
.mct-premium .related.products,
.mct-premium section.related{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--mct-line-2)}
.mct-premium .related.products > h2,
.mct-premium section.related > h2{
font-size:1.4rem;font-weight:600;color:var(--mct-ink);letter-spacing:-.01em;
margin:0 0 1.75rem;text-align:left;
}
/* Grid: override Elementor columns-6 to a balanced responsive 4-up */
.mct-premium .related.products ul.products,
.mct-premium ul.products.elementor-grid{
display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:1.5rem !important;
margin:0 !important;padding:0 !important;list-style:none !important;width:100% !important;
}
.mct-premium ul.products::before,
.mct-premium ul.products::after{display:none !important}
/* The card */
.mct-premium ul.products li.product{
display:flex !important;flex-direction:column;background:#fff;border:1px solid var(--mct-line);
border-radius:var(--mct-r-lg);overflow:hidden;box-shadow:var(--mct-sh-sm);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
margin:0 !important;padding:0 !important;width:auto !important;float:none !important;position:relative;text-align:center;
}
.mct-premium ul.products li.product::before,
.mct-premium ul.products li.product::after{display:none !important}
.mct-premium ul.products li.product:hover{
transform:translateY(-4px);box-shadow:var(--mct-sh-lg);border-color:#d8dde3;
}
/* Image area — larger, contained, consistent */
.mct-premium ul.products li.product a.woocommerce-loop-product__link{
display:block;padding:0;margin:0;
}
.mct-premium ul.products li.product img{
width:100% !important;aspect-ratio:1/1;object-fit:cover;display:block;margin:0 !important;
background:#f4f6f8;transition:transform .3s ease;
}
.mct-premium ul.products li.product:hover img{transform:scale(1.04)}
/* Badge — refined pill, top-left over image */
.mct-premium ul.products li.product .mct-badge{
position:absolute;top:.85rem;left:.85rem;z-index:2;
font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
padding:.32rem .7rem;border-radius:100px;line-height:1;box-shadow:var(--mct-sh-sm);
}
.mct-premium ul.products li.product .mct-badge-demand{background:var(--mct-orange-soft);color:var(--mct-orange-d)}
.mct-premium ul.products li.product .mct-badge:not(.mct-badge-demand){background:#e6f7ee;color:#1b7a44}
/* Title — fixed two-line height so cards align */
.mct-premium ul.products li.product h2.woocommerce-loop-product__title{
font-size:.98rem !important;font-weight:600 !important;color:var(--mct-ink) !important;
line-height:1.35 !important;padding:1.1rem 1rem .35rem !important;margin:0 !important;
min-height:3.1em;display:flex;align-items:center;justify-content:center;
}
.mct-premium ul.products li.product .mct-product-description{
font-size:.83rem;color:var(--mct-muted);padding:0 1rem;margin:0 0 .5rem;line-height:1.45;flex:1 1 auto;
}
/* Push CTA to the bottom for equal heights */
.mct-premium ul.products li.product .price{
color:var(--mct-ink);font-weight:600;font-size:1rem;padding:0 1rem .75rem;margin:0;
}
.mct-premium ul.products li.product .mct-wa-loop,
.mct-premium ul.products li.product a.button{
margin:auto 1rem 1rem !important;background:var(--mct-wa) !important;color:#fff !important;
border-radius:var(--mct-r-sm) !important;padding:.7rem 1rem !important;font-weight:600 !important;
font-size:.86rem !important;line-height:1.2 !important;text-align:center;border:none !important;
transition:background .15s ease,transform .15s ease !important;display:block;
}
.mct-premium ul.products li.product .mct-wa-loop:hover,
.mct-premium ul.products li.product a.button:hover{
background:var(--mct-wa-d) !important;transform:translateY(-1px);
}
/* ---- 8. DISCLAIMER — premium notice box ---- */
.mct-premium .mct-note{
color:var(--mct-ink-2);font-size:.85rem;line-height:1.6;margin:1.25rem 0 0;
background:var(--mct-bg-soft);border:1px solid var(--mct-line-2);border-left:3px solid var(--mct-orange);
border-radius:var(--mct-r-sm);padding:.9rem 1.1rem;
}
/* ---- 6. REVIEWS — premium card polish ---- */
.mct-premium #reviews .commentlist li.review,
.mct-premium #reviews .commentlist li.comment{
border:1px solid var(--mct-line);border-radius:var(--mct-r-md);padding:1.35rem 1.5rem;
background:#fff;box-shadow:var(--mct-sh-sm);
}
.mct-premium #reviews .commentlist .comment_container{display:flex;gap:1rem;align-items:flex-start}
.mct-premium #reviews .commentlist .avatar{border-radius:50%;width:44px;height:44px}
.mct-premium #reviews .comment-text .meta{font-size:.92rem;color:var(--mct-ink);margin-bottom:.4rem}
.mct-premium #reviews .comment-text .star-rating{margin-bottom:.5rem;font-size:.9rem}
.mct-premium #reviews .description p{color:var(--mct-ink-2);line-height:1.6;margin:0}
.mct-premium #reviews h2,.mct-premium #reviews h3{font-weight:600;color:var(--mct-ink);letter-spacing:-.01em}
/* ---- Responsive for related grid ---- */
@media(max-width:1100px){
.mct-premium .related.products ul.products,
.mct-premium ul.products.elementor-grid{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:820px){
.mct-premium .related.products ul.products,
.mct-premium ul.products.elementor-grid{grid-template-columns:repeat(2,1fr) !important;gap:1.1rem !important}
}
@media(max-width:480px){
.mct-premium .related.products ul.products,
.mct-premium ul.products.elementor-grid{grid-template-columns:repeat(2,1fr) !important;gap:.85rem !important}
.mct-premium ul.products li.product h2.woocommerce-loop-product__title{font-size:.9rem !important;min-height:2.9em}
.mct-premium ul.products li.product .mct-wa-loop,
.mct-premium ul.products li.product a.button{font-size:.8rem !important;padding:.6rem .7rem !important}
}
/* ==================================================================
* P4 — CONTINUOUS SCROLL ARCHITECTURE (product 4959 only)
* Reveal all tab panels, sticky section nav + scrollspy, premium
* section composition, final CTA. Scoped to .mct-premium.
* ================================================================== */
/* Reveal every WooCommerce tab panel continuously (they are all
* server-rendered; the tab UI merely hid the inactive ones). */
.mct-premium .woocommerce-tabs .wc-tab,
.mct-premium .woocommerce-Tabs-panel{display:block !important}
/* Hide the original WooCommerce tab list (replaced by .mct-secnav). */
.mct-premium .woocommerce-tabs > ul.wc-tabs,
.mct-premium .woocommerce-tabs > ul.tabs{display:none !important}
/* Panels flow as full-width stacked sections with rhythm between them. */
.mct-premium .woocommerce-tabs{margin:0 !important}
.mct-premium .woocommerce-Tabs-panel{padding:0 !important;margin:0 0 3.5rem !important;max-width:none;animation:none !important}
.mct-premium .woocommerce-Tabs-panel:last-child{margin-bottom:1.25rem !important}
/* ---- Section navigation (sticky anchor bar + scrollspy) ---- */
.mct-premium .mct-secnav{
position:sticky;top:92px;z-index:30;background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);
border-bottom:1px solid var(--mct-line);margin:0 0 2.5rem;
}
.mct-premium .mct-secnav-inner{
display:flex;gap:.35rem;max-width:1200px;margin:0 auto;padding:.5rem 0;
overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.mct-premium .mct-secnav-inner::-webkit-scrollbar{display:none}
.mct-premium .mct-secnav a{
white-space:nowrap;padding:.6rem 1rem;border-radius:var(--mct-r-sm);
font-size:.9rem;font-weight:500;color:var(--mct-muted);text-decoration:none;
border-bottom:2px solid transparent;transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.mct-premium .mct-secnav a:hover{color:var(--mct-ink);background:var(--mct-bg-soft)}
.mct-premium .mct-secnav a.is-active{color:var(--mct-orange);border-bottom-color:var(--mct-orange)}
.mct-premium .mct-secnav a:focus-visible{outline:2px solid var(--mct-orange);outline-offset:2px}
/* Anchor scroll offset so headings clear the sticky nav + site header. */
.mct-premium .woocommerce-Tabs-panel,
.mct-premium #tab-reviews{scroll-margin-top:160px}
/* ---- Section heads (shared) ---- */
.mct-premium .mct-sec-head{margin:0 0 1.5rem}
.mct-premium .mct-sec-lead{color:var(--mct-muted);font-size:.98rem;line-height:1.6;margin:.5rem 0 0;max-width:60ch}
/* ---- Packaging & Storage: three premium cards (not a table) ---- */
.mct-premium .mct-pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.mct-premium .mct-pack-card{
background:#fff;border:1px solid var(--mct-line);border-radius:var(--mct-r-lg);
padding:1.6rem 1.4rem;box-shadow:var(--mct-sh-sm);transition:box-shadow .2s ease,transform .2s ease;
}
.mct-premium .mct-pack-card:hover{box-shadow:var(--mct-sh-md);transform:translateY(-2px)}
.mct-premium .mct-pack-ico{
width:46px;height:46px;border-radius:var(--mct-r-md);background:var(--mct-orange-soft);
display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.mct-premium .mct-pack-ico .mct-ico{width:24px;height:24px;color:var(--mct-orange)}
.mct-premium .mct-pack-card strong{display:block;color:var(--mct-ink);font-size:1.05rem;font-weight:600;margin-bottom:.4rem}
.mct-premium .mct-pack-card p{color:var(--mct-muted);font-size:.9rem;line-height:1.6;margin:0}
/* ---- Application Guide: premium numbered timeline ---- */
.mct-premium .mct-timeline{position:relative;display:flex;flex-direction:column;gap:0}
.mct-premium .mct-tl-step{display:flex;gap:1.35rem;padding:0 0 1.9rem;position:relative}
.mct-premium .mct-tl-step:last-child{padding-bottom:0}
/* connector line */
.mct-premium .mct-tl-step::before{
content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--mct-line);
}
.mct-premium .mct-tl-step:last-child::before{display:none}
.mct-premium .mct-tl-num{
flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--mct-orange-soft);
color:var(--mct-orange-d);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
border:1px solid #f6d9bd;
}
.mct-premium .mct-tl-body{padding-top:.5rem}
.mct-premium .mct-tl-body strong{display:block;color:var(--mct-ink);font-size:1.05rem;font-weight:600;margin-bottom:.3rem}
.mct-premium .mct-tl-body p{color:var(--mct-muted);font-size:.93rem;line-height:1.65;margin:0}
/* ---- Reviews: give the native panel a section head look ---- */
.mct-premium #tab-reviews > h2,
.mct-premium #reviews .woocommerce-Reviews-title{
font-size:1.4rem;font-weight:600;color:var(--mct-ink);letter-spacing:-.01em;margin:0 0 1.5rem;
}
/* ---- Final CTA ---- */
.mct-premium .mct-finalcta{
margin:3rem 0 1rem;background:var(--mct-orange-soft);
border:1px solid #f6d9bd;border-left:4px solid var(--mct-orange);
border-radius:var(--mct-r-lg);padding:1.85rem 2.1rem;color:var(--mct-ink);
}
.mct-premium .mct-finalcta-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.mct-premium .mct-finalcta-copy h2{color:var(--mct-ink);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .35rem}
.mct-premium .mct-finalcta-copy p{color:var(--mct-ink-2);font-size:.95rem;line-height:1.6;margin:0;max-width:56ch}
.mct-premium .mct-finalcta-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.mct-premium .mct-btn-wa{background:var(--mct-wa);color:#fff;padding:.85rem 1.5rem;border-radius:var(--mct-r-sm);font-weight:600;display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;transition:background .15s ease,transform .15s ease}
.mct-premium .mct-btn-wa .mct-ico{width:20px;height:20px;color:#fff}
.mct-premium .mct-btn-wa:hover{background:var(--mct-wa-d);color:#fff;transform:translateY(-1px)}
.mct-premium .mct-finalcta-phone{display:inline-flex;align-items:center;gap:.5rem;color:var(--mct-ink);font-weight:600;font-size:1.02rem}
.mct-premium .mct-finalcta-phone .mct-ico{width:20px;height:20px;color:var(--mct-orange)}
/* ---- Responsive ---- */
@media(max-width:820px){
.mct-premium .mct-pack-grid{grid-template-columns:1fr;gap:1rem}
.mct-premium .woocommerce-Tabs-panel{margin-bottom:2.75rem !important}
.mct-premium .mct-finalcta{padding:1.75rem 1.5rem}
.mct-premium .mct-finalcta-in{flex-direction:column;align-items:flex-start;gap:1.25rem}
}
@media(max-width:480px){
.mct-premium .mct-secnav-inner{padding:.4rem .25rem}
.mct-premium .mct-secnav a{padding:.55rem .8rem;font-size:.85rem}
.mct-premium .mct-tl-num{width:42px;height:42px;font-size:.95rem}
.mct-premium .mct-tl-step::before{left:20px}
.mct-premium .mct-finalcta-actions{flex-direction:column;align-items:stretch;width:100%}
.mct-premium .mct-btn-wa{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
.mct-premium *{scroll-behavior:auto !important}
.mct-premium .mct-pack-card:hover,
.mct-premium .mct-btn-wa:hover{transform:none}
}
/* ==================================================================
* P5 — "Product At a Glance" + "Key Benefits" row (Target_1)
* Renders below the trust strip, above the section nav. Scoped to 4959.
* ================================================================== */
.mct-premium .mct-glance-row{
display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:0 0 2.5rem;
}
.mct-premium .mct-glance-card{
background:#fff;border:1px solid var(--mct-line);border-radius:var(--mct-r-lg);
padding:1.6rem 1.75rem;box-shadow:var(--mct-sh-sm);
}
.mct-premium .mct-glance-card .mct-panel-h{margin:0 0 1.35rem}
.mct-premium .mct-glance-grid{
display:grid;grid-template-columns:1fr 1fr;gap:1.35rem 1.5rem;
}
.mct-premium .mct-glance-item{display:flex;gap:.75rem;align-items:flex-start}
.mct-premium .mct-glance-item .mct-ico{width:22px;height:22px;color:var(--mct-orange);flex:0 0 auto;margin-top:2px}
.mct-premium .mct-glance-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.mct-premium .mct-glance-k{font-size:.82rem;font-weight:600;color:var(--mct-ink);line-height:1.25}
.mct-premium .mct-glance-v{font-size:.82rem;color:var(--mct-muted);line-height:1.4}
/* Key Benefits in the glance row: two columns */
.mct-premium .mct-keyben-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.5rem}
.mct-premium .mct-keyben-2col li{display:flex;align-items:center;gap:.7rem;color:var(--mct-ink-2);font-size:.92rem;line-height:1.35}
.mct-premium .mct-keyben-2col .mct-ico{width:22px;height:22px;flex:0 0 auto;color:var(--mct-orange)}
/* Section heading sub-label e.g. "(5 Easy Steps)" */
.mct-premium .mct-sec-h-sub{font-weight:400;color:var(--mct-muted);font-size:.92em}
/* FAQ "View all questions" link */
.mct-premium .mct-viewall{
display:inline-block;margin-top:1.1rem;color:var(--mct-orange);font-size:.9rem;
font-weight:500;text-decoration:none;
}
.mct-premium .mct-viewall:hover{text-decoration:underline}
@media(max-width:900px){
.mct-premium .mct-glance-row{grid-template-columns:1fr;gap:1.25rem}
}
@media(max-width:520px){
.mct-premium .mct-glance-grid,
.mct-premium .mct-keyben-2col{grid-template-columns:1fr}
.mct-premium .mct-glance-card{padding:1.35rem 1.4rem}
}
/* ==================================================================
* P6 — DESKTOP INFORMATION DENSITY (refinement, CSS-only)
* Density is the BASE (default) layout so it does not depend on a
* min-width media query. The existing max-width:900/520 queries below
* collapse everything back to single-column for mobile. No content
* added; no markup changed.
* ================================================================== */
/* Tighter, deliberate rhythm between the continuous sections. */
.mct-premium .woocommerce-Tabs-panel{margin:0 0 2rem !important}
.mct-premium .mct-hero{margin:1.5rem 0 2rem}
.mct-premium .mct-trust-strip{margin:0 0 2rem;padding:1.5rem 2rem}
.mct-premium .mct-glance-row{margin:0 0 2rem}
.mct-premium .mct-secnav{margin:0 0 1.25rem}
.mct-premium .mct-sec-head{margin:0 0 1.1rem}
.mct-premium .mct-finalcta{margin:2rem 0 1rem}
/* --- Technical spec table: two spec-pairs per row (full-width) --- */
/* --- Overview: full width; Recommended Uses in two columns --- */
.mct-premium .mct-overview{grid-template-columns:1fr;gap:1.25rem}
.mct-premium .mct-ov-main{max-width:none}
.mct-premium .mct-ov-main p{max-width:80ch}
.mct-premium .mct-uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 2.5rem}
/* --- Application Guide: two-column timeline (half the height) --- */
.mct-premium .mct-timeline{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 2rem}
.mct-premium .mct-tl-step{padding:0}
.mct-premium .mct-tl-step::before{display:none}
/* Tighten FAQ + packaging a touch */
.mct-premium .mct-faqs{gap:.6rem}
.mct-premium .mct-pack-card{padding:1.35rem 1.5rem}
/* --- MOBILE COLLAPSE: restore single-column so nothing is cramped --- */
@media(max-width:900px){
.mct-premium .mct-uses{grid-template-columns:1fr}
.mct-premium .mct-timeline{grid-template-columns:1fr}
/* Spec matrix collapses: each row's 4 cells reflow into a 2-column
* grid (Property | Value), so the two pairs stack as two rows. */
.mct-premium .mct-specs-row{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}
/* No vertical dividers when stacked — only horizontal row dividers. */
.mct-premium .mct-spec-k,
.mct-premium .mct-spec-v{border-right:none}
/* Every stacked cell carries a bottom divider by default (rows are pairs). */
.mct-premium .mct-specs-row > *{border-bottom:1px solid var(--mct-line-2)}
/* Hide empty filler pair on mobile — nothing to complete when stacked. */
.mct-premium .mct-spec-empty{display:none}
/* Remove the divider under the final real spec pair (tagged in markup),
* so the stacked list ends cleanly on all browsers. */
.mct-premium .mct-specs-row.is-last > .is-endpair{border-bottom:none}
}
/* ==================================================================
* P7 — REVIEWS premium refinement + typography continuity
* Native WooCommerce reviews markup restyled with sufficient specificity
* to win over the Elementor tab-panel theme rules. Scoped to 4959.
* ================================================================== */
/* Premium reviews header + rating summary (from woocommerce_reviews_title). */
.mct-premium #reviews .mct-reviews-head{
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
flex-wrap:wrap;margin:0 0 1.6rem;
}
.mct-premium #reviews .mct-reviews-headline .mct-sec-h{margin:0}
.mct-premium #reviews .mct-reviews-summary{display:flex;align-items:center;gap:.85rem}
.mct-premium #reviews .mct-rating-big{
font-size:2rem;font-weight:700;color:var(--mct-ink);line-height:1;letter-spacing:-.02em;
}
.mct-premium #reviews .mct-rating-stars{display:inline-flex;gap:2px}
.mct-premium #reviews .mct-star .mct-ico{width:18px;height:18px;color:var(--mct-line)}
.mct-premium #reviews .mct-star.is-on .mct-ico{color:var(--mct-orange)}
.mct-premium #reviews .mct-rating-count{font-size:.9rem;color:var(--mct-muted)}
/* Review cards — force over theme (border/padding/bg were being reset). */
.mct-premium #reviews ol.commentlist,
.mct-premium #reviews ul.commentlist{
margin:0 !important;padding:0 !important;list-style:none !important;
display:flex !important;flex-direction:column;gap:1rem;
}
.mct-premium #reviews ol.commentlist:before,
.mct-premium #reviews ul.commentlist:before{display:none !important}
.mct-premium #reviews .commentlist li.review,
.mct-premium #reviews .commentlist li.comment{
border:1px solid var(--mct-line) !important;border-radius:var(--mct-r-md) !important;
padding:1.35rem 1.5rem !important;background:#fff !important;box-shadow:var(--mct-sh-sm) !important;
margin:0 !important;list-style:none !important;
}
.mct-premium #reviews .commentlist li.review:before,
.mct-premium #reviews .commentlist li.comment:before{display:none !important}
.mct-premium #reviews .commentlist .comment_container{
display:flex !important;gap:1rem;align-items:flex-start;background:transparent !important;
border:none !important;padding:0 !important;margin:0 !important;
}
.mct-premium #reviews .commentlist .avatar{
border-radius:50% !important;width:46px !important;height:46px !important;margin:0 !important;
flex:0 0 auto;position:static !important;
}
.mct-premium #reviews .commentlist .comment-text{margin:0 !important;padding:0 !important;border:none !important;flex:1 1 auto;min-width:0}
.mct-premium #reviews .comment-text .meta{
font-size:.95rem !important;color:var(--mct-ink) !important;margin:0 0 .45rem !important;line-height:1.4;
}
.mct-premium #reviews .comment-text .woocommerce-review__author{font-weight:600 !important;color:var(--mct-ink) !important}
.mct-premium #reviews .comment-text .woocommerce-review__dash,
.mct-premium #reviews .comment-text .woocommerce-review__published-date{color:var(--mct-muted) !important;font-weight:400 !important}
.mct-premium #reviews .comment-text .star-rating{margin:0 0 .55rem !important;font-size:.95rem !important;color:var(--mct-orange) !important;font-family:star !important}
.mct-premium #reviews .comment-text .star-rating::before,
.mct-premium #reviews .comment-text .star-rating span,
.mct-premium #reviews .comment-text .star-rating span::before{font-family:star !important;color:var(--mct-orange) !important}
.mct-premium #reviews .comment-text .star-rating span:before{color:var(--mct-orange) !important}
.mct-premium #reviews .description{margin:0 !important}
.mct-premium #reviews .description p{color:var(--mct-ink-2) !important;line-height:1.65 !important;margin:0 !important;font-size:.95rem !important}
/* Review form — premium inputs + button */
.mct-premium #reviews #review_form_wrapper{
margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--mct-line);
}
.mct-premium #reviews .comment-reply-title{
font-size:1.05rem !important;font-weight:600 !important;color:var(--mct-ink) !important;
display:block;margin:0 0 .9rem !important;
}
.mct-premium #reviews .comment-form input[type=text],
.mct-premium #reviews .comment-form input[type=email],
.mct-premium #reviews .comment-form textarea{
border:1px solid var(--mct-line) !important;border-radius:var(--mct-r-sm) !important;
padding:.7rem .85rem !important;font-size:.95rem !important;background:#fff !important;
}
.mct-premium #reviews .comment-form input:focus,
.mct-premium #reviews .comment-form textarea:focus{
outline:none !important;border-color:var(--mct-orange) !important;
box-shadow:0 0 0 3px var(--mct-orange-soft) !important;
}
.mct-premium #reviews .comment-form .submit,
.mct-premium #reviews .comment-form input[type=submit]{
background:var(--mct-orange) !important;color:#fff !important;border:none !important;
border-radius:var(--mct-r-sm) !important;padding:.75rem 1.5rem !important;font-weight:600 !important;
cursor:pointer;transition:background .15s ease;
}
.mct-premium #reviews .comment-form input[type=submit]:hover{background:var(--mct-orange-d) !important}
/* Responsive: stack the reviews head on small screens */
@media(max-width:600px){
.mct-premium #reviews .mct-reviews-head{flex-direction:column;align-items:flex-start;gap:.75rem}
.mct-premium #reviews .commentlist li.review,
.mct-premium #reviews .commentlist li.comment{padding:1.1rem 1.15rem !important}
}
/* WooCommerce star glyphs must use the 'star' webfont, not the forced
* Rubik stack (which renders literal s/S letters). Restore across all
* star contexts in the premium scope. */
.mct-premium .star-rating,
.mct-premium .star-rating *,
.mct-premium .star-rating::before,
.mct-premium .star-rating span::before,
.mct-premium p.stars a,
.mct-premium p.stars a::before,
.mct-premium #reviews .stars a,
.mct-premium #reviews .stars a::before{
font-family:star !important;
}
.mct-premium .star-rating::before,
.mct-premium .star-rating span::before{color:var(--mct-orange) !important}
.mct-premium p.stars a:hover::before,
.mct-premium p.stars a.active::before{color:var(--mct-orange) !important}
/* ==================================================================
* P8 — MOBILE INFORMATION DENSITY REFINEMENT (mobile-only)
* Authoritative reference: real-device phone screenshots (~390–430px).
* Goal: less vertical length via better mobile IA, NOT smaller fonts.
* All rules gated to <=640px (phone) / tablet band; desktop (>900px)
* and other products are untouched. Scoped to .mct-premium.
* ================================================================== */
@media(max-width:640px){
/* ---- Sticky section nav: clean horizontal scroll, no clipped labels ----
Was cropping "Packaging & …". Make the track a proper scroller with
edge padding and a subtle fade so it's clearly swipeable. */
.mct-premium .mct-secnav{margin:0 0 1.1rem}
.mct-premium .mct-secnav-inner{
display:flex !important;flex-wrap:nowrap !important;
overflow-x:auto !important;-webkit-overflow-scrolling:touch;
gap:.15rem;padding:.35rem .9rem;scroll-snap-type:x proximity;
}
.mct-premium .mct-secnav a{
flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
padding:.6rem .85rem;font-size:.9rem; /* readable, not shrunk */
}
/* ROOT-CAUSE FIX: the site header is NOT fixed on mobile, so the base
`top:92px` made the sticky nav float 92px INTO the content and — with a
translucent background — content showed through it. On mobile, pin the
nav to the top of the viewport and make its background fully opaque so it
can never overlay or reveal content beneath it. */
.mct-premium .mct-secnav{
position:sticky;top:0;overflow:hidden;
background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
/* Anchor clearance so tapping a tab lands the heading just below the nav
(nav height ~52px), matching the new mobile sticky offset. */
.mct-premium .woocommerce-Tabs-panel,
.mct-premium #tab-reviews{scroll-margin-top:64px !important}
/* opaque right-edge fade hint that more nav exists */
.mct-premium .mct-secnav::after{
content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);
}
/* ---- Product At a Glance: 2-column grid on mobile (was 1 col/tall) ---- */
.mct-premium .mct-glance-grid{
grid-template-columns:1fr 1fr !important;gap:1rem .9rem !important;
}
.mct-premium .mct-glance-item{gap:.55rem}
.mct-premium .mct-glance-item .mct-ico{width:20px;height:20px}
/* keep values readable */
.mct-premium .mct-glance-k{font-size:.85rem}
.mct-premium .mct-glance-v{font-size:.82rem;line-height:1.35}
/* ---- Key Benefits: 2-column grid on mobile (was 1 col/tall) ---- */
.mct-premium .mct-keyben-2col{
grid-template-columns:1fr 1fr !important;gap:.85rem 1rem !important;
}
.mct-premium .mct-keyben-2col li{font-size:.9rem;align-items:flex-start}
.mct-premium .mct-keyben-2col .mct-ico{width:20px;height:20px}
/* Glance cards: trim padding, tighten heading gap (premium but not wasteful) */
.mct-premium .mct-glance-card{padding:1.2rem 1.15rem}
.mct-premium .mct-glance-card .mct-panel-h{margin:0 0 1rem}
.mct-premium .mct-glance-row{gap:1rem;margin:0 0 1.5rem}
/* ---- Trust / value props: 2×2 grid (was four tall stacked rows) ---- */
.mct-premium .mct-trust-strip{
grid-template-columns:1fr 1fr !important;gap:1.1rem 1rem !important;
padding:1.3rem 1.2rem !important;margin:0 0 1.5rem !important;
}
.mct-premium .mct-trust-item{gap:.65rem}
.mct-premium .mct-trust-item strong{font-size:.9rem}
.mct-premium .mct-trust-item p{font-size:.8rem;line-height:1.4}
/* ---- WhatsApp price card: reduce height ~25–35% (trim vertical padding
and the oversized icon), keep phone/WhatsApp/email + 3 indicators ---- */
.mct-premium .mct-price-card{padding:1.25rem 1.15rem !important}
.mct-premium .mct-price-head{margin-bottom:.7rem !important}
.mct-premium .mct-wa-circle{width:56px !important;height:56px !important;margin:.35rem auto .55rem !important}
.mct-premium .mct-price-phone{margin:.3rem 0 .1rem !important}
.mct-premium .mct-price-email{margin-top:0 !important}
.mct-premium .mct-price-trust{margin-top:.8rem !important;padding-top:.8rem !important}
/* ---- Application Guide: compact timeline (preserve all 5 steps + wording)
Smaller number badge, tighter gaps + line-height, less padding ---- */
.mct-premium .mct-timeline{gap:0}
.mct-premium .mct-tl-step{gap:.9rem;padding:0 0 1.15rem}
.mct-premium .mct-tl-num{width:34px;height:34px;font-size:.85rem;border-width:1px}
.mct-premium .mct-tl-step::before{left:16px;top:38px}
.mct-premium .mct-tl-body{padding-top:.2rem}
.mct-premium .mct-tl-body strong{font-size:1rem;margin-bottom:.2rem}
.mct-premium .mct-tl-body p{font-size:.92rem;line-height:1.5} /* readable */
/* ---- Overview heading: the long product-name H2 wraps to many lines on
mobile. Reduce size/line-height for cleaner hierarchy (body unchanged). ---- */
.mct-premium #tab-mct_overview .mct-sec-h,
.mct-premium .mct-overview .mct-sec-h{
font-size:1.15rem !important;line-height:1.3 !important;
}
/* ---- General: trim panel rhythm so total scroll is shorter ---- */
.mct-premium .woocommerce-Tabs-panel{margin-bottom:1.6rem !important}
.mct-premium .mct-sec-head{margin-bottom:.9rem}
/* ---- Bottom sticky CTA clearance: ensure page content is never hidden
behind the fixed .mct-mbar bar. Add safe-area-aware bottom padding. ---- */
.mct-premium.single-product,
body.single-product .mct-premium{padding-bottom:0}
}
/* Bottom-bar clearance is applied to the document body (the .mct-mbar is a
* site-level fixed bar ~72–84px tall). Reserve space + iOS safe area so the
* final CTA / footer is never covered. Mobile only. */
@media(max-width:640px){
body.single-product{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important}
/* Keep the Elementor floating contact button clear of the sticky CTA bar
* so they don't overlap at the bottom-right. */
body.single-product .e-contact-buttons{bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important}
/* ---- Compact the dark page-title / breadcrumb band on mobile only.
These are site-level Elementor widgets (theme page title + WooCommerce
breadcrumb); scoped to single-product + mobile so desktop is untouched. */
body.single-product .elementor-element-e0c62e5{padding-top:1.1rem !important;padding-bottom:.4rem !important}
body.single-product .elementor-element-e0c62e5 .elementor-heading-title{
font-size:1.6rem !important;line-height:1.2 !important;margin:0 !important;
}
body.single-product .elementor-element-a730188{padding-top:.15rem !important;padding-bottom:1.1rem !important}
body.single-product .elementor-element-a730188 .woocommerce-breadcrumb{font-size:.8rem !important;line-height:1.4 !important}
}
/* ---- TABLET band (768–1024px): use two columns where it reads well,
* so tablet isn't just a stretched phone. Desktop (>1024) unaffected. ---- */
@media(min-width:641px) and (max-width:1024px){
.mct-premium .mct-glance-row{grid-template-columns:1fr 1fr}
.mct-premium .mct-trust-strip{grid-template-columns:repeat(2,1fr)}
.mct-premium .mct-timeline{grid-template-columns:1fr 1fr}
.mct-premium .mct-pack-grid{grid-template-columns:repeat(3,1fr)}
}
/* ==================================================================
* Official Pakistan PDS fallback panel (Technical Information section)
* Shown when verified numerical specs are unavailable, in place of a
* spec table. Uses existing design tokens; no new colours introduced.
* ================================================================== */
.mct-premium .mct-pds-panel{
display:flex;gap:1.25rem;align-items:flex-start;
background:#fff8f1;border:1px solid #ffe0c2;border-radius:14px;
padding:1.75rem 1.75rem;margin:0 0 1rem;
}
.mct-premium .mct-pds-ico{
flex:0 0 auto;width:52px;height:52px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
background:#fff;border:1px solid #ffe0c2;color:#e8722c;
}
.mct-premium .mct-pds-ico .mct-ico{width:26px;height:26px}
.mct-premium .mct-pds-body{flex:1 1 auto;min-width:0}
.mct-premium .mct-pds-title{display:block;font-size:1.1rem;font-weight:700;color:#1a2b45;margin:0 0 .5rem}
.mct-premium .mct-pds-text{color:#54627a;line-height:1.6;margin:0 0 1.15rem}
.mct-premium .mct-pds-cta{display:inline-flex;align-items:center;gap:.5rem}
.mct-premium .mct-pds-cta .mct-ico{width:18px;height:18px}
@media(max-width:640px){
.mct-premium .mct-pds-panel{flex-direction:column;gap:1rem;padding:1.3rem 1.2rem}
.mct-premium .mct-pds-cta{width:100%;justify-content:center}
}
/* PDS panel trust indicators */
.mct-premium .mct-pds-trust{display:flex;flex-wrap:wrap;gap:.85rem 1.4rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid #ffe0c2}
.mct-premium .mct-pds-trust-item{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:#6b7688;font-weight:500}
.mct-premium .mct-pds-trust-item .mct-ico{width:16px;height:16px;color:#e8722c}
@media(max-width:640px){
.mct-premium .mct-pds-trust{flex-direction:column;gap:.6rem}
}