/*
Theme Name: DMTN IPTV
Theme URI: https://dmtn8k.com
Template: mharty
Version: 1.2.0
Description: Child theme for DMTN IPTV (dmtn8k.com). All site-specific design and
template overrides belong here — never in the Mharty parent, which is
vendor code and is overwritten by theme updates.
Author: DMTN8K
Text Domain: dmtn8k
*/
/* ==========================================================================
The parent theme (Mharty) enqueues this file automatically via
includes/helpers/scripts.php:89 when is_child_theme() is true, using the
handle 'mharty-child'. It loads AFTER the parent stylesheet, so no @import
and no manual wp_enqueue_style is needed here.
The parent also switches its own stylesheet on text direction:
$ltr = is_rtl() ? '' : '-ltr';
The site is LTR (en_US), so css/style-ltr.css is what we are layering over.
Box rules below still use LOGICAL properties (inline-start/end) so nothing
here has to be rewritten if a second language is ever added.
Never use !important to beat the parent; raise specificity instead. The two
exceptions are marked inline and both exist to beat a plugin that itself
ships !important.
========================================================================== */
/* ==========================================================================
DESIGN TOKENS — DMTN8K identity
--------------------------------------------------------------------------
Palette derived from the site's own existing brand values, not invented:
#e05745 accent_color (theme mod)
#dd5144 site_title_color (theme mod)
#1e0d00 primary_nav_bg (theme mod) -> the warm near-black ground
#f8941a hero slide bg (home slider)
#ff6600 store sub-heading
Structure follows the same system used on the sister sites: deep ground,
white elevated cards, one saturated conversion accent, generous radius.
Use these variables — never raw hex below this block.
========================================================================== */
:root {
/* Ground — warm near-black, sampled from the existing nav background */
--d8k-ink-900: #0b0806;
--d8k-ink-800: #140e09;
--d8k-ink-700: #1e1410;
--d8k-ink-600: #2b201a;
/* Brand coral — the primary conversion accent */
--d8k-coral-600: #c9432f;
--d8k-coral-500: #e05745;
--d8k-coral-400: #ff7a68;
/* Amber — secondary accent, eyebrows and highlights */
--d8k-amber-500: #f8941a;
--d8k-amber-400: #ffb454;
/* Price red. Kept distinct from the coral accent so a price never reads
as a button. 4.6:1 on white — clears WCAG AA for normal text. */
--d8k-price: #c9271b;
/* Surfaces */
--d8k-surface: #ffffff;
--d8k-surface-alt: #faf8f7;
--d8k-surface-sunken: #f2eeec;
--d8k-border: #e8e2df;
--d8k-border-strong: #d6cdc8;
/* Text */
--d8k-text: #16100c;
--d8k-text-muted: #6b5f58;
--d8k-text-invert: #ffffff;
--d8k-text-on-ink: #ece5e1;
--d8k-text-on-ink-muted: #a89b93;
/* Geometry */
--d8k-radius: 10px;
--d8k-radius-lg: 18px;
--d8k-radius-pill: 999px;
--d8k-gap: 24px;
/* Elevation */
--d8k-shadow-sm: 0 1px 2px rgba(11, 8, 6, .06), 0 2px 8px rgba(11, 8, 6, .05);
--d8k-shadow-md: 0 4px 12px rgba(11, 8, 6, .08), 0 12px 28px rgba(11, 8, 6, .10);
--d8k-shadow-lg: 0 18px 44px rgba(11, 8, 6, .18);
/* Motion */
--d8k-ease: cubic-bezier(.4, 0, .2, 1);
--d8k-duration: 220ms;
/* Fluid type scale */
--d8k-t-price: clamp(26px, 3.4vw, 34px);
--d8k-t-was: 15px;
--d8k-t-card-title: clamp(15px, 1.5vw, 17px);
}
/* Accessibility baseline: honour the OS "reduce motion" setting. Only ever
removes motion, so it cannot alter layout or colour. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Visible keyboard focus. The parent theme removes outlines in places; this
restores a consistent, high-contrast ring for keyboard users only. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--d8k-coral-500);
outline-offset: 2px;
border-radius: 4px;
}
/* ── Accessibility: skip link ────────────────────────────────────────
Visually hidden until focused, then pinned to the top-inline-start.
Paired with the #mh-main-area landmark wired up in functions.php. */
.dmtn-skip-link {
position: absolute;
inset-inline-start: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 100000;
}
.dmtn-skip-link:focus {
position: fixed;
inset-inline-start: 8px;
top: 8px;
width: auto;
height: auto;
padding: 12px 20px;
background: var(--d8k-surface);
color: var(--d8k-coral-600);
font-weight: 700;
line-height: 1;
border-radius: var(--d8k-radius);
box-shadow: var(--d8k-shadow-lg);
outline: 3px solid var(--d8k-coral-500);
outline-offset: 2px;
text-decoration: none;
}
/* ==========================================================================
PAGE SHELL — sections and container
--------------------------------------------------------------------------
One container width and one vertical rhythm for the whole rebuilt home page,
replacing the per-section padding the builder was emitting. The builder's
empty sections were the source of the large blank bands.
========================================================================== */
/* Horizontal-overflow guard. A nowrap pill button inside a grid track sets a
min-content width the track cannot go below, which pushed the whole container
wider than the viewport on phones — text was being clipped at the right edge.
Clipping here plus min-width:0 on every grid child (below) contains it. */
.dmtn-sec {
padding-block: clamp(40px, 6vw, 72px);
background: var(--d8k-surface);
overflow-x: clip;
}
.dmtn-sec *,
.dmtn-inner * { min-width: 0; }
.dmtn-sec-sub,
.dmtn-sec-title { overflow-wrap: anywhere; }
.dmtn-sec-alt { background: var(--d8k-surface-alt); }
.dmtn-inner {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: 20px;
}
.dmtn-sec-title {
margin: 0 0 10px;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: clamp(24px, 3.6vw, 36px);
font-weight: 800;
line-height: 1.2;
color: var(--d8k-text);
text-align: center;
}
.dmtn-sec-sub {
max-width: 68ch;
margin: 0 auto clamp(22px, 3vw, 34px);
font-size: clamp(14.5px, 1.6vw, 16.5px);
line-height: 1.65;
color: var(--d8k-text-muted);
text-align: center;
}
/* ==========================================================================
LINK-COLOUR OVERRIDE — MARKED EXCEPTION (2nd of the two !important blocks)
--------------------------------------------------------------------------
The theme carries a `link_style_accent` body class and a customiser
link_color of #b73861 (magenta). Its selectors sit above this file's, so
every we style lost its colour to that magenta — which made the primary
WhatsApp button render as dark magenta text on a coral fill, effectively
unreadable, and turned the coral card links magenta too.
Colour on our own components is not negotiable for contrast reasons, so it is
forced. Scoped strictly to our own class namespaces — no theme or plugin link
anywhere else on the site is touched.
========================================================================== */
.dmtn-btn-primary,
.dmtn-btn-primary:link,
.dmtn-btn-primary:visited,
.dmtn-btn-primary:hover,
.dmtn-btn-primary:focus {
color: var(--d8k-text-invert) !important;
}
.dmtn-btn-ghost,
.dmtn-btn-ghost:link,
.dmtn-btn-ghost:visited {
color: var(--d8k-text) !important;
}
.dmtn-on-ink .dmtn-btn-ghost,
.dmtn-on-ink .dmtn-btn-ghost:link,
.dmtn-on-ink .dmtn-btn-ghost:visited,
.dmtn-on-ink .dmtn-btn-ghost:hover {
color: var(--d8k-text-invert) !important;
}
.dmtn-device-help,
.dmtn-device-help:link,
.dmtn-device-help:visited,
.dmtn-plan-cta,
.dmtn-buy-test,
.dmtn-buy-test:link,
.dmtn-buy-test:visited {
color: var(--d8k-coral-600) !important;
}
.dmtn-plan-link,
.dmtn-plan-link:link,
.dmtn-plan-link:visited { color: inherit !important; }
/* Arrow affixes must not be able to orphan onto their own line. */
.dmtn-device-help,
.dmtn-plan-cta { white-space: nowrap; }
/* The theme injects list markers into our lists despite list-style:none,
producing a doubled bullet next to our own dot. */
.dmtn-hero-trust,
.dmtn-hero-trust li,
.dmtn-features-grid,
.dmtn-features-grid li,
.dmtn-devices-grid,
.dmtn-devices-grid li,
.dmtn-plans-grid,
.dmtn-plans-grid li,
.dmtn-price-list,
.dmtn-price-list li {
list-style: none !important;
list-style-type: none !important;
}
.dmtn-hero-trust li::marker,
.dmtn-features-grid li::marker,
.dmtn-devices-grid li::marker,
.dmtn-plans-grid li::marker,
.dmtn-price-list li::marker { content: none; }
/* ==========================================================================
PREMIUM BUTTONS
--------------------------------------------------------------------------
One pill button system. `.dmtn-btn` is ours; the WooCommerce/theme
`.button` classes are mapped onto it so existing markup inherits it
without touching templates.
========================================================================== */
.dmtn-btn,
.woocommerce a.button.dmtn-btn,
.dmtn-wa-order .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
padding-inline: 30px;
border: 1px solid transparent;
border-radius: var(--d8k-radius-pill);
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform 150ms var(--d8k-ease),
background-color 150ms var(--d8k-ease),
box-shadow 150ms var(--d8k-ease);
}
.dmtn-btn:hover { transform: translateY(-2px); }
.dmtn-btn:active { transform: translateY(0); }
.dmtn-btn-primary {
background: var(--d8k-coral-500);
color: var(--d8k-text-invert);
box-shadow: 0 6px 18px rgba(224, 87, 69, .32);
}
.dmtn-btn-primary:hover {
background: var(--d8k-coral-600);
color: var(--d8k-text-invert);
box-shadow: 0 10px 26px rgba(224, 87, 69, .42);
}
.dmtn-btn-ghost {
background: transparent;
color: var(--d8k-text);
border-color: var(--d8k-border-strong);
}
.dmtn-btn-ghost:hover {
background: var(--d8k-surface-alt);
border-color: var(--d8k-coral-500);
color: var(--d8k-coral-600);
}
/* On a dark ground the ghost button needs inverted values. */
.dmtn-on-ink .dmtn-btn-ghost {
color: var(--d8k-text-invert);
border-color: rgba(255, 255, 255, .26);
background: rgba(255, 255, 255, .06);
}
.dmtn-on-ink .dmtn-btn-ghost:hover {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .5);
color: var(--d8k-text-invert);
}
/* ==========================================================================
PRODUCT CARDS — the commercial core
--------------------------------------------------------------------------
Applies to every surface that renders the WooCommerce loop: the store page
(.woocommerce-shop), category archives (.tax-product_cat), the shop
archive, the homepage product grid injected by [mhc_shop], and the related
products row on single products.
Markup being styled (verified live, not assumed):
ul.products > li.product
> a.woocommerce-LoopProduct-link
> span.onsale
> span.mh_shop_image > img + span.mh_overlay
> h2.woocommerce-loop-product__title
> span.price > del + ins
> div.star-rating (optional)
> a.button.add_to_cart_button (dead — removed in functions.php)
========================================================================== */
/* ---------- grid ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--d8k-gap);
margin: 0;
padding: 0;
list-style: none;
}
/* The theme floats loop items and clears them with ::before/::after.
Neutralise both so the grid governs layout. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
content: none;
display: none;
}
@media (max-width: 1024px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
}
/* ---------- the card ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
position: relative;
display: flex;
flex-direction: column;
float: none; /* theme floats these */
clear: none;
width: auto;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
background: var(--d8k-surface);
border: 1px solid var(--d8k-border);
border-radius: var(--d8k-radius-lg);
box-shadow: var(--d8k-shadow-sm);
overflow: hidden;
text-align: start;
transition: transform var(--d8k-duration) var(--d8k-ease),
box-shadow var(--d8k-duration) var(--d8k-ease),
border-color var(--d8k-duration) var(--d8k-ease);
}
/* ── Neutralise the mh-shop float grid ──────────────────────────────────────
MARKED EXCEPTION (one of the two !important blocks this file allows).
wp-content/plugins/mh-shop/assets/css/modern-ltr.css is enqueued AFTER this
stylesheet and implements its own percentage float grid, e.g.
.mh_full_width_page.woocommerce-page ul.products li.product
{ width: 20.875%; margin: 0 5.5% 5.5% 0 }
That selector is specificity (0,4,2) against this file's (0,3,2), so it wins
on cascade regardless of source order — and 20.875% of a CSS-grid track is
about 59px, which collapsed every card. mh-shop also uses !important on its
own float/clear/margin rules, so raising specificity alone is not enough to
hold all of them.
Only the four box properties that fight the grid are forced. Everything
visual above stays at normal weight. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
transform: translateY(-6px);
box-shadow: var(--d8k-shadow-md);
border-color: var(--d8k-border-strong);
}
/* The whole card body is one anchor — make it fill the card so the price
pins to the bottom and every card in a row ends level. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
text-decoration: none;
color: inherit;
}
/* ---------- media ---------- */
.woocommerce ul.products li.product .mh_shop_image,
.woocommerce-page ul.products li.product .mh_shop_image {
position: relative;
display: block;
margin: 0;
overflow: hidden;
background: var(--d8k-surface-sunken);
border-block-end: 1px solid var(--d8k-border);
}
/* Square media box. Product art is 1:1 (300x300 thumbnails), so this
crops nothing — it just guarantees every card is the same height. */
.woocommerce ul.products li.product .mh_shop_image img,
.woocommerce-page ul.products li.product .mh_shop_image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
margin: 0;
transition: transform 400ms var(--d8k-ease);
}
.woocommerce ul.products li.product:hover .mh_shop_image img,
.woocommerce-page ul.products li.product:hover .mh_shop_image img {
transform: scale(1.04);
}
/* ---------- sale badge ---------- */
.woocommerce ul.products li.product span.onsale,
.woocommerce-page ul.products li.product span.onsale {
position: absolute;
top: 12px;
inset-inline-start: 12px;
inset-inline-end: auto;
z-index: 3;
min-height: 0;
min-width: 0;
width: auto;
height: auto;
margin: 0;
padding: 6px 14px;
border-radius: var(--d8k-radius-pill);
background: var(--d8k-amber-500);
color: var(--d8k-ink-900);
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.4;
box-shadow: 0 2px 10px rgba(11, 8, 6, .22);
}
/* ---------- title ---------- */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title {
margin: 0;
padding: 18px 20px 0;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: var(--d8k-t-card-title);
font-weight: 700;
line-height: 1.4;
color: var(--d8k-text);
transition: color 150ms var(--d8k-ease);
}
.woocommerce ul.products li.product:hover h2.woocommerce-loop-product__title,
.woocommerce-page ul.products li.product:hover h2.woocommerce-loop-product__title {
color: var(--d8k-coral-600);
}
/* ---------- rating ---------- */
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
margin: 10px 20px 0;
font-size: 13px;
color: var(--d8k-amber-500);
}
/* ---------- price ---------- */
/* `margin-block-start: auto` is what pins the price to the bottom of the
card regardless of how many lines the title wraps to. */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin: auto 0 0;
padding: 14px 20px 20px;
font-size: var(--d8k-t-price);
font-weight: 800;
line-height: 1.1;
color: var(--d8k-price);
}
/* Current price */
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
order: 1;
text-decoration: none;
background: none;
font-weight: 800;
color: var(--d8k-price);
}
/* Original price, struck through and quiet */
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
order: 2;
opacity: 1;
font-size: var(--d8k-t-was);
font-weight: 600;
color: var(--d8k-text-muted);
text-decoration: line-through;
}
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
.woocommerce-page ul.products li.product .price .woocommerce-Price-currencySymbol {
font-size: .68em;
font-weight: 700;
vertical-align: baseline;
margin-inline-end: 2px;
}
/* ==========================================================================
SINGLE PRODUCT — WhatsApp order CTA
--------------------------------------------------------------------------
The "Order on WhatsApp" button is injected by wp-whatsapp-chat-pro after
the short description. It is the only conversion control on the site, so
it gets the full primary treatment.
========================================================================== */
.single-product .wa-order-button,
.single-product a.wa_order_button,
.single-product .wa-order-wrapper a,
.single-product a[href*="wa.me"],
.single-product a[href*="api.whatsapp.com"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding-inline: 32px;
border: 0;
border-radius: var(--d8k-radius-pill);
background: var(--d8k-coral-500);
color: var(--d8k-text-invert);
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1;
text-decoration: none;
box-shadow: 0 6px 20px rgba(224, 87, 69, .34);
transition: transform 150ms var(--d8k-ease),
background-color 150ms var(--d8k-ease),
box-shadow 150ms var(--d8k-ease);
}
.single-product .wa-order-button:hover,
.single-product a.wa_order_button:hover,
.single-product .wa-order-wrapper a:hover,
.single-product a[href*="wa.me"]:hover,
.single-product a[href*="api.whatsapp.com"]:hover {
transform: translateY(-2px);
background: var(--d8k-coral-600);
color: var(--d8k-text-invert);
box-shadow: 0 12px 30px rgba(224, 87, 69, .44);
}
/* Single-product price block */
.single-product div.product p.price,
.single-product div.product span.price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
font-size: clamp(30px, 4vw, 42px);
font-weight: 800;
line-height: 1.1;
color: var(--d8k-price);
}
.single-product div.product p.price del,
.single-product div.product span.price del {
font-size: 18px;
font-weight: 600;
color: var(--d8k-text-muted);
opacity: 1;
}
.single-product div.product p.price ins,
.single-product div.product span.price ins {
text-decoration: none;
background: none;
color: var(--d8k-price);
}
/* ==========================================================================
STORE PAGE — dark stage behind the card grid
--------------------------------------------------------------------------
Gives the catalogue the premium ground the sister sites use, while the
cards stay white and elevated. Scoped to the store page body class only,
so no other page is affected.
========================================================================== */
body.page-id-4455 .woocommerce {
position: relative;
padding: 44px 24px 52px;
border-radius: var(--d8k-radius-lg);
background: linear-gradient(180deg, var(--d8k-ink-800) 0%, var(--d8k-ink-900) 100%);
}
@media (max-width: 480px) {
body.page-id-4455 .woocommerce {
padding: 24px 14px 30px;
border-radius: var(--d8k-radius);
}
}
/* ==========================================================================
SHARED PIECES for the media components
========================================================================== */
.dmtn-eyebrow {
margin: 0 0 12px;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--d8k-amber-400);
}
.dmtn-on-ink { color: var(--d8k-text-on-ink); }
.dmtn-on-ink h1,
.dmtn-on-ink h2,
.dmtn-on-ink h3 { color: var(--d8k-text-invert); }
/* ==========================================================================
HERO
--------------------------------------------------------------------------
The background is an ![]()
(see the [dmtn_hero] shortcode) so WordPress can
serve a srcset — a CSS background-image would push the 1600px file to every
phone. It is pinned behind the copy with object-fit: cover, which is the
right choice here: this is a full-bleed atmospheric image and cropping it is
expected. Explicit width/height on the img plus a fixed aspect ratio on the
media box means no layout shift while it loads.
========================================================================== */
.dmtn-hero {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
/* Capped deliberately. The artwork is 16:9; the taller this box gets
relative to its width, the harder `cover` has to crop. 560px against a
1200px container stays near the source ratio, so the crop is gentle. */
min-height: clamp(380px, 54vh, 560px);
padding: clamp(44px, 7vh, 80px) 0;
background: var(--d8k-ink-900);
overflow: hidden;
}
.dmtn-hero-media {
position: absolute;
inset: 0;
z-index: -2;
}
.dmtn-hero-media .dmtn-hero-bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
display: block;
margin: 0;
}
/* Scrim. Stronger on the inline-start side where the copy sits, so the text
holds contrast without flattening the whole photograph. */
.dmtn-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(to bottom, rgba(11, 8, 6, .55) 0%, rgba(11, 8, 6, .78) 100%),
linear-gradient(to right, rgba(11, 8, 6, .82) 0%, rgba(11, 8, 6, .35) 62%, rgba(11, 8, 6, .2) 100%);
}
.dmtn-hero-inner {
position: relative;
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: 20px;
}
.dmtn-hero-title {
margin: 0 0 14px;
max-width: 20ch;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: clamp(32px, 6vw, 60px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.01em;
}
.dmtn-hero-sub {
margin: 0 0 28px;
max-width: 52ch;
font-size: clamp(15px, 1.7vw, 18px);
line-height: 1.65;
color: var(--d8k-text-on-ink);
}
.dmtn-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 0 0 32px;
}
.dmtn-hero-trust {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
font-weight: 600;
color: var(--d8k-text-on-ink-muted);
}
.dmtn-hero-trust li {
position: relative;
padding-inline-start: 22px;
}
.dmtn-hero-trust li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: .45em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--d8k-coral-500);
}
/* ── Hero on narrow screens: stack, do not overlay ──────────────────────────
Overlaying was the sizing bug. On a 360px screen the copy stack is ~600px
tall, so a 16:9 image filling a 360x600 box with `cover` scaled to ~1067px
wide and showed roughly a third of the frame — the subject looked enormous.
Below 769px the image becomes an ordinary 16:9 banner at its natural ratio
(no crop at all) and the copy sits underneath on solid ground. The scrim is
dropped because nothing overlaps any more, which also makes the text easier
to read than dark-on-photo ever was. */
@media (max-width: 768px) {
.dmtn-hero {
display: block;
min-height: 0;
padding: 0 0 clamp(28px, 6vw, 40px);
overflow: visible;
}
.dmtn-hero::before { content: none; }
.dmtn-hero-media {
position: relative;
inset: auto;
z-index: auto;
aspect-ratio: 16 / 9;
width: 100%;
}
.dmtn-hero-media .dmtn-hero-bg {
height: 100%;
object-position: center center;
}
.dmtn-hero-inner { padding-top: clamp(22px, 5vw, 32px); }
.dmtn-hero-title { max-width: none; }
.dmtn-hero-sub { max-width: none; }
}
@media (max-width: 480px) {
.dmtn-hero-actions .dmtn-btn { width: 100%; }
.dmtn-hero-trust { gap: 8px 18px; font-size: 13px; }
}
/* ==========================================================================
SUPPORTED DEVICES
--------------------------------------------------------------------------
Source art is 1200x900 (4:3). The media box holds exactly 4/3 and uses
`contain`, not `cover`: the device itself is the subject and must not be
cropped at any breakpoint. The fixed ratio also reserves the space before
the lazy-loaded image arrives, so these cards contribute no CLS.
========================================================================== */
.dmtn-devices { margin: 8px 0 0; }
.dmtn-devices-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--d8k-gap);
margin: 0;
padding: 0;
list-style: none;
}
.dmtn-device-card {
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
background: var(--d8k-surface);
border: 1px solid var(--d8k-border);
border-radius: var(--d8k-radius-lg);
box-shadow: var(--d8k-shadow-sm);
overflow: hidden;
transition: transform var(--d8k-duration) var(--d8k-ease),
box-shadow var(--d8k-duration) var(--d8k-ease),
border-color var(--d8k-duration) var(--d8k-ease);
}
/* Hover lift is desktop-only: on touch it fires on tap and reads as a glitch. */
@media (hover: hover) and (pointer: fine) {
.dmtn-device-card:hover {
transform: translateY(-6px);
box-shadow: var(--d8k-shadow-md);
border-color: var(--d8k-border-strong);
}
.dmtn-device-card:hover .dmtn-device-img { transform: scale(1.05); }
}
.dmtn-device-media {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(180deg, var(--d8k-surface-alt) 0%, var(--d8k-surface-sunken) 100%);
border-block-end: 1px solid var(--d8k-border);
overflow: hidden;
}
.dmtn-device-media .dmtn-device-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
margin: 0;
transition: transform 400ms var(--d8k-ease);
}
.dmtn-device-body { padding: 16px 18px 20px; }
.dmtn-device-label {
margin: 0 0 6px;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--d8k-text);
}
.dmtn-device-copy {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--d8k-text-muted);
}
/* Per-card WhatsApp help link. Kept quiet — it is a utility affordance, not a
competing CTA against the section button below the grid. */
.dmtn-device-help {
display: inline-flex;
align-items: center;
gap: 6px;
margin-block-start: 12px;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 12.5px;
font-weight: 700;
color: var(--d8k-coral-600);
text-decoration: none;
}
.dmtn-device-help::after {
content: "→";
transition: transform 150ms var(--d8k-ease);
}
@media (hover: hover) and (pointer: fine) {
.dmtn-device-help:hover { color: var(--d8k-coral-500); }
.dmtn-device-help:hover::after { transform: translateX(3px); }
}
/* ── Section CTA under the device grid ────────────────────────────────────── */
.dmtn-device-cta {
margin-block-start: clamp(28px, 4vw, 44px);
padding: clamp(26px, 4vw, 38px) clamp(20px, 4vw, 40px);
background: var(--d8k-surface-alt);
border: 1px solid var(--d8k-border);
border-radius: var(--d8k-radius-lg);
text-align: center;
}
.dmtn-device-cta-text {
max-width: 62ch;
margin: 0 auto 20px;
font-size: clamp(14.5px, 1.6vw, 16.5px);
line-height: 1.65;
color: var(--d8k-text);
}
.dmtn-device-cta-note {
margin: 16px 0 0;
font-size: 13px;
color: var(--d8k-text-muted);
}
/* WhatsApp-flavoured primary button. Brand coral stays the fill so the palette
holds; the glyph carries the channel signal. */
.dmtn-btn-wa .dmtn-wa-icon {
flex: 0 0 auto;
display: block;
}
@media (max-width: 1024px) {
.dmtn-devices-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
.dmtn-devices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 480px) {
.dmtn-devices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dmtn-device-body { padding: 12px 13px 15px; }
.dmtn-device-label { font-size: 14.5px; }
.dmtn-device-copy { font-size: 12.5px; }
}
/* ==========================================================================
PRICE LIST ([dmtn_pricing]) — the buying surface
--------------------------------------------------------------------------
No packaging artwork by design: package shots belong on the product pages
these rows link to. A scannable price ladder converts better than a wall of
boxes, and it is what was actually asked for.
Sorted cheapest-first so the entry price is the first number seen.
========================================================================== */
.dmtn-buy { margin: 4px 0 0; }
.dmtn-price-list {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--d8k-border);
border-radius: var(--d8k-radius-lg);
overflow: hidden;
background: var(--d8k-surface);
}
.dmtn-price-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 18px 24px;
margin: 0;
padding: 18px 22px;
border-block-start: 1px solid var(--d8k-border);
}
.dmtn-price-row:first-child { border-block-start: 0; }
@media (hover: hover) and (pointer: fine) {
.dmtn-price-row:hover { background: var(--d8k-surface-alt); }
}
.dmtn-price-name {
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: clamp(14.5px, 1.6vw, 16.5px);
font-weight: 700;
line-height: 1.35;
color: var(--d8k-text) !important;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.dmtn-price-name:hover { color: var(--d8k-coral-600) !important; }
}
.dmtn-price-amount {
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: clamp(22px, 3vw, 28px);
font-weight: 800;
line-height: 1;
color: var(--d8k-price);
white-space: nowrap;
}
.dmtn-price-amount .amount { color: inherit; }
.dmtn-price-actions {
display: flex;
align-items: center;
gap: 8px 18px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Compact variant of the pill button for use inside a dense row. */
.dmtn-btn-buy {
min-height: 46px;
padding-inline: 22px;
font-size: 14.5px;
white-space: nowrap;
}
.dmtn-buy-test {
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
/* Below 720px the three columns stop fitting: name on its own line, then price
and the buy button side by side, then the test link. Buttons go full width so
they are comfortable touch targets. */
@media (max-width: 720px) {
.dmtn-price-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 16px;
padding: 16px 16px 18px;
}
.dmtn-price-id { grid-column: 1 / -1; }
.dmtn-price-actions {
grid-column: 1 / -1;
justify-content: stretch;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.dmtn-btn-buy { width: 100%; }
.dmtn-buy-test { text-align: center; }
}
/* ==========================================================================
FEATURE GRID ([dmtn_features])
--------------------------------------------------------------------------
Replaces a raw "✓ …" text block. No icons: a row of tick glyphs is exactly
the visual noise the brief asks to avoid. Structure carries the hierarchy —
a short uppercase label, then the statement — so it reads as a spec sheet
rather than a bullet list.
========================================================================== */
.dmtn-features { margin: 4px 0 0; }
.dmtn-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1px;
margin: 0;
padding: 0;
list-style: none;
background: var(--d8k-border);
border: 1px solid var(--d8k-border);
border-radius: var(--d8k-radius-lg);
overflow: hidden;
}
/* 1px gap over a border-coloured ground draws hairline rules between cells
without per-cell border maths, and it stays correct as the grid reflows. */
.dmtn-feature {
display: flex;
flex-direction: column;
gap: 7px;
margin: 0;
padding: 20px 22px 22px;
background: var(--d8k-surface);
}
.dmtn-feature-label {
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--d8k-coral-600);
}
.dmtn-feature-copy {
font-size: 14.5px;
line-height: 1.6;
color: var(--d8k-text);
}
@media (max-width: 480px) {
.dmtn-feature { padding: 15px 16px 17px; }
.dmtn-feature-copy { font-size: 14px; }
}
/* ==========================================================================
PLAN CARDS ([dmtn_plans], home page)
--------------------------------------------------------------------------
Presentation cards that link into each product page. Uses its own class
namespace rather than the WooCommerce loop classes, so none of mh-shop's
!important float-grid rules apply and no !important is needed here.
Media box is a true 2:3 with `contain`. The product art is a designed
1000x1500 poster — brand lock-up, screen, duration badge — and a square crop
cuts the badge off, which is exactly why the shop grid version looks wrong.
========================================================================== */
.dmtn-plans { margin: 8px 0 0; }
.dmtn-plans-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--d8k-gap);
margin: 0;
padding: 0;
list-style: none;
}
/* flex-direction MUST stay column. This card has two children — the linked
body and the action stack — and without it they lay out side by side, which
overlapped the buttons across the artwork and pushed the grid past the
viewport. It only looked fine before because there was a single child. */
.dmtn-plan-card {
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
background: var(--d8k-surface);
border: 1px solid var(--d8k-border);
border-radius: var(--d8k-radius-lg);
box-shadow: var(--d8k-shadow-sm);
overflow: hidden;
transition: transform var(--d8k-duration) var(--d8k-ease),
box-shadow var(--d8k-duration) var(--d8k-ease),
border-color var(--d8k-duration) var(--d8k-ease);
}
.dmtn-plan-link {
display: flex;
flex-direction: column;
width: 100%;
text-decoration: none;
color: inherit;
}
.dmtn-plan-media {
position: relative;
display: block;
aspect-ratio: 2 / 3;
background: linear-gradient(180deg, var(--d8k-ink-700) 0%, var(--d8k-ink-900) 100%);
overflow: hidden;
}
.dmtn-plan-media .dmtn-plan-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
margin: 0;
transition: transform 400ms var(--d8k-ease);
}
.dmtn-plan-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 16px 18px 18px;
}
/* Tighter than the default card title: these names run long ("Aroma IPTV
Subscription – 12 Months") and were breaking to three lines, which made the
text block heavy against the artwork. 15.5px at 1.35 gets almost all of them
to two lines. min-height reserves the second line so the price and CTA sit on
the same baseline across a row even when one title is shorter. */
.dmtn-plan-title {
display: block;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 15.5px;
font-weight: 700;
line-height: 1.35;
min-height: calc(2 * 1.35em);
color: var(--d8k-text);
transition: color 150ms var(--d8k-ease);
}
.dmtn-plan-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 9px;
margin: 10px 0 0;
}
.dmtn-plan-now {
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 800;
line-height: 1.1;
color: var(--d8k-price);
}
.dmtn-plan-was {
font-size: 14px;
font-weight: 600;
color: var(--d8k-text-muted);
text-decoration: line-through;
}
.dmtn-plan-was .amount,
.dmtn-plan-now .amount { color: inherit; }
/* Action stack sits outside the card's main , so the buy and test links are
real separate targets rather than nested anchors. */
.dmtn-plan-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 9px;
margin-block-start: auto;
padding: 0 18px 18px;
}
.dmtn-plan-actions .dmtn-btn-buy { width: 100%; }
.dmtn-plan-actions .dmtn-buy-test,
.dmtn-plan-actions .dmtn-plan-cta { text-align: center; }
.dmtn-plan-cta {
display: block;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 12.5px;
font-weight: 700;
color: var(--d8k-text-muted) !important;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.dmtn-plan-cta:hover { color: var(--d8k-coral-600) !important; }
}
@media (max-width: 480px) {
.dmtn-plan-actions { padding: 0 13px 14px; gap: 8px; }
}
@media (hover: hover) and (pointer: fine) {
.dmtn-plan-card:hover {
transform: translateY(-6px);
box-shadow: var(--d8k-shadow-md);
border-color: var(--d8k-border-strong);
}
.dmtn-plan-card:hover .dmtn-plan-img { transform: scale(1.04); }
.dmtn-plan-card:hover .dmtn-plan-title { color: var(--d8k-coral-600); }
.dmtn-plan-card:hover .dmtn-plan-cta::after { transform: translateX(4px); }
}
@media (max-width: 1024px) { .dmtn-plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 782px) { .dmtn-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px) {
.dmtn-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dmtn-plan-body { padding: 12px 13px 14px; }
.dmtn-plan-cta { font-size: 12.5px; }
}
/* ==========================================================================
FAMILY / LIFESTYLE BAND
--------------------------------------------------------------------------
16:9 source, shown in a 16:9 box with `cover` — a lifestyle photograph, so a
small crop is fine and filling the frame matters more than showing every
pixel. Ratio is fixed, so the lazy-loaded image causes no shift.
========================================================================== */
.dmtn-band {
margin: 0;
padding: clamp(40px, 6vw, 68px) 0;
background: linear-gradient(180deg, var(--d8k-ink-800) 0%, var(--d8k-ink-900) 100%);
}
.dmtn-band-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 4vw, 52px);
max-width: 1200px;
margin-inline: auto;
padding-inline: 20px;
}
.dmtn-band-media {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--d8k-radius-lg);
overflow: hidden;
box-shadow: var(--d8k-shadow-lg);
}
.dmtn-band-media .dmtn-band-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
}
.dmtn-band-copy h2 {
margin: 0 0 14px;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: clamp(24px, 3.4vw, 36px);
font-weight: 800;
line-height: 1.2;
}
.dmtn-band-copy p {
margin: 0 0 18px;
font-size: clamp(14.5px, 1.6vw, 16.5px);
line-height: 1.7;
color: var(--d8k-text-on-ink);
}
.dmtn-band-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 24px 0 0;
}
@media (max-width: 900px) {
.dmtn-band-inner { grid-template-columns: minmax(0, 1fr); }
/* Image first on narrow screens — it is the hook. */
.dmtn-band-media { order: -1; }
}
@media (max-width: 480px) {
.dmtn-band-actions .dmtn-btn { width: 100%; }
}
/* ==========================================================================
Site-specific overrides below this line.
========================================================================== */
/* Link out to the full catalogue from the home page plan row. */
.dmtn-sec-more {
margin: clamp(22px, 3vw, 32px) 0 0;
text-align: center;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 14.5px;
font-weight: 700;
}
.dmtn-sec-more a {
color: var(--d8k-coral-600) !important;
text-decoration: underline;
text-underline-offset: 4px;
}
/* ==========================================================================
PRICING CARDS ([dmtn_pcards])
--------------------------------------------------------------------------
Component structure ported from the sister site strong4k.net (.pcard), which
runs the same Mharty parent — grid geometry, the duration medallion, the
price/was/save triplet, the per-month line and the stacked CTA all follow it.
Retinted to DMTN8K's own tokens: their blue medallion gradient becomes this
site's warm near-black, with coral marking the featured card. Structure
ported, identity not.
========================================================================== */
.dmtn-pcards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
.dmtn-pcard {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--d8k-surface);
border: 1px solid var(--d8k-border);
border-radius: var(--d8k-radius-lg);
overflow: hidden;
box-shadow: var(--d8k-shadow-sm);
transition: transform .2s var(--d8k-ease), box-shadow .2s var(--d8k-ease), border-color .2s var(--d8k-ease);
}
@media (hover: hover) and (pointer: fine) {
.dmtn-pcard:hover {
transform: translateY(-6px);
box-shadow: var(--d8k-shadow-md);
border-color: var(--d8k-border-strong);
}
.dmtn-pcard:hover .dmtn-pcard-img { transform: translateY(-4px) scale(1.03); }
}
.dmtn-pcard.is-featured {
border-color: var(--d8k-coral-500);
box-shadow: 0 0 0 2px rgba(224, 87, 69, .32), var(--d8k-shadow-md);
}
/* Corner flag. Derived from the prices, not a marketing label. */
.dmtn-pcard-flag {
position: absolute;
top: 14px;
inset-inline-end: 14px;
z-index: 3;
background: var(--d8k-coral-500);
color: var(--d8k-text-invert);
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: var(--d8k-radius-pill);
box-shadow: 0 4px 12px rgba(224, 87, 69, .4);
}
/* ── Duration medallion ─────────────────────────────────────────────────── */
.dmtn-pcard-top {
position: relative;
padding: 26px 22px 22px;
text-align: center;
color: var(--d8k-text-invert);
overflow: hidden;
background: linear-gradient(150deg, var(--d8k-ink-600), var(--d8k-ink-900));
}
.dmtn-pcard.is-featured .dmtn-pcard-top {
background: linear-gradient(150deg, var(--d8k-coral-600) 0%, var(--d8k-ink-700) 58%, var(--d8k-ink-900) 100%);
}
.dmtn-pcard-top::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 20px);
}
.dmtn-pcard-top > * { position: relative; z-index: 1; }
.dmtn-pcard-dur {
display: block;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 56px;
font-weight: 900;
line-height: .9;
letter-spacing: -.04em;
}
.dmtn-pcard-unit {
display: block;
margin-top: 8px;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 12.5px;
font-weight: 800;
letter-spacing: .22em;
text-transform: uppercase;
opacity: .9;
}
/* ── Product shot ───────────────────────────────────────────────────────── */
.dmtn-pcard-shot {
display: block;
padding: 18px 18px 0;
background: linear-gradient(180deg, var(--d8k-surface-alt) 0%, var(--d8k-surface) 100%);
}
.dmtn-pcard-shot .dmtn-pcard-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
object-fit: contain;
margin: 0;
transition: transform 400ms var(--d8k-ease);
}
/* ── Body ───────────────────────────────────────────────────────────────── */
.dmtn-pcard-body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
padding: 18px 20px 20px;
}
.dmtn-pcard-name {
margin: 0;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
}
.dmtn-pcard-name a {
color: var(--d8k-text) !important;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.dmtn-pcard-name a:hover { color: var(--d8k-coral-600) !important; }
}
.dmtn-pcard-price {
display: flex;
align-items: baseline;
gap: 9px;
flex-wrap: wrap;
}
.dmtn-pcard-price .now {
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 900;
letter-spacing: -.03em;
line-height: 1;
color: var(--d8k-price);
}
.dmtn-pcard-price .now .amount { color: inherit; }
.dmtn-pcard-price .price-was {
font-size: 15px;
font-weight: 700;
color: var(--d8k-text-muted);
text-decoration: line-through;
}
.dmtn-pcard-price .price-off {
font-family: 'Poppins', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--d8k-coral-600);
background: rgba(224, 87, 69, .1);
border: 1px solid rgba(224, 87, 69, .26);
padding: 4px 9px;
border-radius: var(--d8k-radius-pill);
white-space: nowrap;
}
.price-permonth {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--d8k-text-muted);
}
.price-permonth .amount { color: var(--d8k-text); font-weight: 700; }
.dmtn-pcard-cta {
margin-top: auto;
padding-top: 6px;
display: flex;
flex-direction: column;
gap: 9px;
}
.dmtn-pcard-cta .dmtn-btn-buy { width: 100%; }
.dmtn-pcard-cta .dmtn-buy-test { text-align: center; }
@media (max-width: 1024px) { .dmtn-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dmtn-pcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
.dmtn-pcard-top { padding: 20px 18px 18px; }
.dmtn-pcard-dur { font-size: 46px; }
.dmtn-pcard-body { padding: 16px 16px 18px; }
}