/* ==========================================================================
DiscountLane — design layer v2 (consolidated 17 Sep 2026)
Presentation only. Scoped to body.dl-v2, active only on ?dlv2=1.
Consolidated from a patch pile: one rule per job, no competing
section-title rules, no dead selectors.
⚠ MARKUP NOTE THAT DRIVES THIS WHOLE FILE
The two main rails (New Arrivals, Best Sellers) render cards as
div.product.type-product inside an Owl carousel, NOT as li.product.
Only the grid widgets use li.product. So every card rule below is keyed
on `.product.type-product`, which covers both. Keying on li.product
silently skips the two rails the customer sees first.
========================================================================== */
body.dl-v2 {
/* Brand, unchanged */
--navy: #1f3044;
--ink: #14212f;
--green: #37c12d;
--green-dark: #2fae26;
--verify: #1d8a4e;
/* Neutrals */
--slate: #5b6b7d;
--line: #e4e8ee;
--line-2: #cfd8e3;
--mist: #f5f7fa;
--paper: #ffffff;
/* 4/8 scale */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 64px;
--radius: 10px;
--gutter: 24px;
--max: 1280px;
/* The supplied brand display face. Kept — only its setting is changed. */
--display: 'Robot Reavers', 'Inter', system-ui, sans-serif;
--text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* One text face across the page. The theme sets Roboto on body without
!important losing to nothing, so this needs the flag to actually win. */
body.dl-v2,
body.dl-v2 p,
body.dl-v2 li,
body.dl-v2 td,
body.dl-v2 label,
body.dl-v2 input,
body.dl-v2 select,
body.dl-v2 textarea {
font-family: var(--text) !important;
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
body.dl-v2 p {
line-height: 1.6;
}
/* --------------------------------------------------------------------------
Section titles — the ONLY place the display face is used, so it can never
leak onto product titles or widget headings.
-------------------------------------------------------------------------- */
body.dl-v2 h2.h1,
body.dl-v2 .dl-h2 {
font-family: var(--display) !important;
font-size: 30px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
letter-spacing: .02em !important;
color: var(--ink) !important;
margin: 0 0 var(--s5) !important;
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.dl-v2 .dl-h2--center {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s5);
text-align: center;
}
body.dl-v2 .dl-h2--center::before,
body.dl-v2 .dl-h2--center::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
body.dl-v2 h2.h1::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: var(--s3);
background: var(--green);
border-radius: 2px;
}
body.dl-v2 .dl-h2--center::after {
content: "";
display: block;
width: auto;
height: 1px;
margin: 0;
background: var(--line);
border-radius: 0;
}
/* --------------------------------------------------------------------------
Rhythm + containers
-------------------------------------------------------------------------- */
body.dl-v2 .elementor-container,
body.dl-v2 .elementor-section.elementor-section-boxed > .elementor-container {
max-width: var(--max) !important;
padding-left: var(--gutter) !important;
padding-right: var(--gutter) !important;
margin-inline: auto !important;
}
body.dl-v2 .dl-wrap {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--gutter);
}
body.dl-v2 .dl-ico {
width: 20px;
height: 20px;
flex: 0 0 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ==========================================================================
HEADER
========================================================================== */
body.dl-v2 .top-bar,
body.dl-v2 .top-bar-v7 {
background-color: var(--ink) !important;
border-bottom: 0 !important;
font-size: 12.5px !important;
}
body.dl-v2 .top-bar a,
body.dl-v2 .top-bar li,
body.dl-v2 .top-bar span,
body.dl-v2 .top-bar i {
color: rgba(255,255,255,.85) !important;
}
body.dl-v2 .top-bar a:hover {
color: #fff !important;
}
body.dl-v2 #masthead.site-header,
body.dl-v2 #masthead.header-v13 {
background-color: var(--paper) !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
}
/* Scoped to the masthead ROW so it cannot reach the green nav bar below. */
body.dl-v2 #masthead .masthead.row a {
color: var(--navy) !important;
}
body.dl-v2 #masthead .masthead.row {
align-items: center !important;
justify-content: space-between !important;
min-height: 88px !important;
}
body.dl-v2 #masthead .header-logo-area {
flex: 0 0 auto !important;
}
body.dl-v2 #masthead img.custom-logo,
body.dl-v2 #masthead .header-logo img {
content: url("/wp-content/uploads/2026/07/dl-logo-oneline-navy-ink-v2-1.png") !important;
max-height: 92px !important;
width: auto !important;
height: auto !important;
}
/* --- Icon cluster --- */
body.dl-v2 #masthead .header-icons {
display: flex !important;
align-items: center !important;
gap: var(--s2) !important;
margin-left: auto !important;
justify-content: flex-end !important;
}
body.dl-v2 #masthead .header-icons > .header-icon {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
}
body.dl-v2 #masthead .header-icons > .header-icon > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
line-height: 1 !important;
}
body.dl-v2 #masthead .header-icon i {
color: var(--navy) !important;
font-size: 22px !important;
line-height: 1 !important;
transition: color .18s ease;
}
body.dl-v2 #masthead .header-icon:hover i {
color: var(--green) !important;
}
/* Bubble rides the icon's top-right corner. */
body.dl-v2 #masthead .header-icon .header-icon-counter {
position: absolute !important;
top: 4px !important;
left: auto !important;
right: 2px !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
padding: 0 !important;
font: 700 10px/18px var(--text) !important;
text-align: center !important;
border-radius: 999px !important;
background: var(--green) !important;
color: #fff !important;
}
body.dl-v2 #masthead .header-icon .cart-total,
body.dl-v2 #masthead .header-icon .amount {
font: 700 14px var(--text) !important;
color: var(--ink) !important;
margin-left: var(--s2) !important;
}
/* ==========================================================================
HEADER SEARCH + live results
========================================================================== */
body.dl-v2 #masthead .dl-hsearch {
position: relative;
flex: 1 1 auto;
display: flex;
align-items: center;
max-width: 620px;
margin: 0 var(--s6);
background: var(--mist);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color .18s ease, box-shadow .18s ease;
}
body.dl-v2 #masthead .dl-hsearch:focus-within {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(55,193,45,.16);
}
body.dl-v2 #masthead .dl-hsearch input[type="search"] {
flex: 1 1 auto;
height: 48px;
padding: 0 var(--s4);
border: 0 !important;
background: transparent !important;
font: 400 14.5px var(--text) !important;
color: var(--ink) !important;
outline: none;
}
body.dl-v2 #masthead .dl-hsearch input::placeholder {
color: var(--slate);
}
body.dl-v2 #masthead .dl-hsearch button[type="submit"] {
flex: 0 0 auto;
height: 48px;
width: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: 0 9px 9px 0 !important;
padding: 0 !important;
background: var(--green) !important;
color: #fff !important;
cursor: pointer;
transition: background-color .18s ease;
}
body.dl-v2 #masthead .dl-hsearch button[type="submit"]:hover {
background: var(--green-dark) !important;
}
/* --- the dropdown --- */
body.dl-v2 .dl-sug {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 9999;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(20,33,47,.14);
overflow: hidden;
display: none;
}
body.dl-v2 .dl-sug[data-open="1"] {
display: block;
}
body.dl-v2 .dl-sug__list {
margin: 0;
padding: var(--s2);
list-style: none;
max-height: 420px;
overflow-y: auto;
}
body.dl-v2 .dl-sug__item a {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s2);
border-radius: 8px;
text-decoration: none !important;
color: var(--ink) !important;
transition: background-color .14s ease;
}
body.dl-v2 .dl-sug__item a:hover,
body.dl-v2 .dl-sug__item.is-active a {
background: var(--mist);
}
body.dl-v2 .dl-sug__shot {
flex: 0 0 52px;
width: 52px;
height: 52px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--paper);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
body.dl-v2 .dl-sug__shot img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3px;
}
body.dl-v2 .dl-sug__body {
min-width: 0;
flex: 1 1 auto;
}
body.dl-v2 .dl-sug__name {
display: block;
font: 500 13.5px/1.35 var(--text);
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.dl-v2 .dl-sug__cat {
display: block;
font: 600 10.5px var(--text);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 1px;
}
body.dl-v2 .dl-sug__price {
font: 700 13.5px var(--text);
color: var(--ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
body.dl-v2 .dl-sug__price del {
font-weight: 500;
font-size: 12px;
color: var(--slate);
margin-right: 6px;
}
body.dl-v2 .dl-sug__foot {
display: block;
padding: var(--s3) var(--s4);
border-top: 1px solid var(--line);
background: var(--mist);
font: 600 13px var(--text);
color: var(--navy) !important;
text-decoration: none !important;
text-align: center;
}
body.dl-v2 .dl-sug__foot:hover {
background: #eef1f5;
}
body.dl-v2 .dl-sug__msg {
padding: var(--s5);
text-align: center;
font: 400 13.5px var(--text);
color: var(--slate);
}
/* ==========================================================================
CATEGORY BAR + MEGA MENU
⚠ `#masthead a` carries an ID, so a plain .electro-navbar-primary rule
loses to it. These are prefixed with #masthead to win.
========================================================================== */
body.dl-v2 #masthead .electro-navbar-primary > .container,
body.dl-v2 #masthead .electro-navbar-primary > div {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
body.dl-v2 #masthead .electro-navbar-primary ul.nav {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 1 auto !important;
}
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > a {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
font: 600 13.5px var(--text) !important;
letter-spacing: .01em !important;
color: #fff !important;
padding: 13px 16px !important;
border-radius: 0 !important;
transition: background-color .16s ease;
}
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > a:hover,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:hover > a,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li.open > a {
background: rgba(0,0,0,.14) !important;
color: #fff !important;
}
/* --- "All categories" --- */
body.dl-v2 #masthead .electro-navbar-primary .dl-burger-slot:hover {
opacity: .85;
}
body.dl-v2 .dl-burger-bars {
display: inline-block;
width: 18px;
height: 12px;
position: relative;
}
body.dl-v2 .dl-burger-bars::before {
top: 0;
}
body.dl-v2 .dl-burger-bars span {
top: 5px;
}
body.dl-v2 .dl-burger-bars::after {
top: 10px;
}
body.dl-v2.off-canvas-active .dl-burger-bars::before {
transform: translateY(5px) rotate(45deg);
}
body.dl-v2.off-canvas-active .dl-burger-bars span {
opacity: 0;
}
body.dl-v2.off-canvas-active .dl-burger-bars::after {
transform: translateY(-5px) rotate(-45deg);
}
body.dl-v2.dl-burger-moved #masthead .masthead .navbar-toggler {
display: none !important;
}
/* --- Dropdown / mega panels --- */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu,
body.dl-v2 #masthead .electro-navbar-primary .sub-menu {
border: 1px solid var(--line) !important;
border-top: 3px solid var(--green) !important;
border-radius: 0 0 var(--radius) var(--radius) !important;
box-shadow: 0 16px 40px rgba(20,33,47,.16) !important;
padding: var(--s3) !important;
background: var(--paper) !important;
margin-top: 0 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a,
body.dl-v2 #masthead .electro-navbar-primary .sub-menu a {
display: block !important;
padding: 9px var(--s3) !important;
border-radius: 6px !important;
font: 500 13.5px var(--text) !important;
color: var(--ink) !important;
transition: background-color .14s ease, color .14s ease;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a:hover,
body.dl-v2 #masthead .electro-navbar-primary .sub-menu a:hover {
background: var(--mist) !important;
color: var(--verify) !important;
}
/* --- Off-canvas panel --- */
body.dl-v2 .off-canvas-navigation-wrapper .off-canvas-navigation a {
font: 500 14px var(--text) !important;
color: var(--ink) !important;
transition: color .16s ease;
}
body.dl-v2 .off-canvas-navigation-wrapper .off-canvas-navigation a:hover {
color: var(--verify) !important;
}
/* ==========================================================================
PRODUCT CARDS
Keyed on .product.type-product so BOTH the Owl rails and the grid widgets
get the same card. Keying on li.product misses the two main rails.
========================================================================== */
body.dl-v2 .product.type-product {
padding: 10px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.dl-v2 .product.type-product:hover .product-inner,
body.dl-v2 .product.type-product:hover .product-item__inner {
border-color: var(--line-2) !important;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(20,33,47,.08) !important;
}
/* The fixed stage. */
body.dl-v2 .product.type-product .product-thumbnail,
body.dl-v2 .product.type-product .product-item__thumbnail {
position: relative !important;
display: block !important;
width: 100% !important;
aspect-ratio: 4 / 3 !important;
background: var(--paper) !important;
border-radius: 6px !important;
overflow: hidden !important;
margin: 0 0 var(--s4) !important;
}
body.dl-v2 .product.type-product .product-thumbnail > img,
body.dl-v2 .product.type-product .product-thumbnail > a > img,
body.dl-v2 .product.type-product .product-item__thumbnail > img,
body.dl-v2 .product.type-product .product-item__thumbnail > a > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: contain !important;
padding: var(--s2) !important;
transition: transform .3s ease;
}
body.dl-v2 .product.type-product:hover .product-thumbnail > a > img {
transform: scale(1.04);
}
/* Corner ribbon must escape the contain-fit rule above. */
body.dl-v2 .product.type-product img.dl-condition-ribbon {
position: absolute !important;
top: 0 !important;
left: 0 !important;
inset: auto auto auto 0 !important;
width: 58px !important;
height: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
padding: 0 !important;
transform: none !important;
z-index: 3;
}
body.dl-v2 .product.type-product .loop-product-categories {
display: block !important;
font: 600 11px var(--text) !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: var(--slate) !important;
margin: 0 0 var(--s1) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.dl-v2 .product.type-product .product-loop-header .loop-product-categories {
display: none !important;
}
/* Title — text face, never the display face. */
body.dl-v2 .product.type-product .woocommerce-loop-product__title,
body.dl-v2 .product.type-product .product-item__title,
body.dl-v2 .product.type-product .product-loop-body h2,
body.dl-v2 .product.type-product .product-loop-body h3,
body.dl-v2 .product.type-product h2,
body.dl-v2 .product.type-product h3 {
font-family: var(--text) !important;
font-size: 14px !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ink) !important;
margin: 0 0 var(--s3) !important;
min-height: 2.8em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.dl-v2 .product.type-product a:hover .woocommerce-loop-product__title,
body.dl-v2 .product.type-product .woocommerce-loop-product__title:hover {
color: var(--verify) !important;
}
body.dl-v2 .product.type-product .product-loop-footer,
body.dl-v2 .product.type-product .product-item__footer {
margin-top: auto !important;
padding-top: var(--s3) !important;
}
/* Price near-black; green stays for the saving. */
body.dl-v2 .product.type-product .price,
body.dl-v2 .product.type-product .price .amount,
body.dl-v2 .product.type-product .price ins,
body.dl-v2 .product.type-product .price ins .amount,
body.dl-v2 .product.type-product .price > span.amount {
font-family: var(--text) !important;
font-size: 17px !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
line-height: 1.25 !important;
color: var(--ink) !important;
text-decoration: none !important;
}
body.dl-v2 .product.type-product .price del,
body.dl-v2 .product.type-product .price del .amount {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--slate) !important;
opacity: 1 !important;
margin-right: var(--s2) !important;
}
body.dl-v2 .dl-save-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 4;
padding: 3px 8px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font: 700 11px/1.5 var(--text);
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
CATEGORY TILES (homepage)
========================================================================== */
body.dl-v2 a.categories-list-bg p.mb-0 {
font-size: 12px !important;
color: var(--slate) !important;
}
/* ==========================================================================
BUTTONS
========================================================================== */
body.dl-v2 .btn,
body.dl-v2 .button,
body.dl-v2 a.button,
body.dl-v2 button.button,
body.dl-v2 .elementor-button {
font: 600 14px var(--text) !important;
border-radius: 8px !important;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
body.dl-v2 .btn:active,
body.dl-v2 .button:active {
transform: translateY(1px);
}
/* ==========================================================================
INJECTED SECTIONS
========================================================================== */
/* --- Ways to pay --- */
body.dl-v2 .dl-pay {
background: #eef7ec;
border-bottom: 1px solid #dceada;
padding: var(--s4) 0;
}
body.dl-v2 .dl-pay__in {
display: flex;
align-items: center;
gap: var(--s6);
flex-wrap: wrap;
}
body.dl-v2 .dl-pay__lead {
margin: 0;
font: 400 15px var(--display);
letter-spacing: .04em;
color: var(--ink);
white-space: nowrap;
}
body.dl-v2 .dl-pay__list {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
gap: var(--s3) var(--s6);
margin: 0;
padding: 0;
list-style: none;
}
body.dl-v2 .dl-pay__list li {
display: flex;
align-items: center;
gap: var(--s2);
}
body.dl-v2 .dl-pay__list .dl-ico {
color: var(--verify);
}
body.dl-v2 .dl-pay__list span {
display: flex;
flex-direction: column;
line-height: 1.25;
}
body.dl-v2 .dl-pay__list strong {
font: 600 13.5px var(--text);
color: var(--ink);
}
body.dl-v2 .dl-pay__list em {
font: 400 12px var(--text);
font-style: normal;
color: var(--slate);
}
/* --- Four promises --- */
body.dl-v2 .dl-trust__in {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: var(--s5);
}
body.dl-v2 .dl-trust__item {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: var(--s5);
border-left: 1px solid var(--line);
}
body.dl-v2 .dl-trust__item:first-child {
border-left: 0;
padding-left: 0;
}
body.dl-v2 .dl-trust__mark {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #eef7ec;
color: var(--verify);
}
body.dl-v2 .dl-trust__item h3 {
margin: 0;
font: 600 15px/1.3 var(--text) !important;
color: var(--ink) !important;
letter-spacing: 0 !important;
font-family: var(--text) !important;
}
body.dl-v2 .dl-trust__item p {
margin: 0;
font: 400 13px/1.45 var(--text);
color: var(--slate);
}
/* --- Condition grades --- */
body.dl-v2 .dl-grades__lead {
max-width: 62ch;
margin: 0 auto var(--s6);
text-align: center;
font: 400 15px/1.65 var(--text);
color: var(--slate);
}
body.dl-v2 .dl-grades__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: var(--s5);
margin: 0 0 var(--s6);
padding: 0;
list-style: none;
}
body.dl-v2 .dl-grade {
display: flex;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s5);
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.dl-v2 .dl-grade:hover {
border-color: var(--line-2);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(20,33,47,.08);
}
/* The condition art is a CORNER RIBBON — show it anchored in a stand-in tile. */
body.dl-v2 .dl-grade__badge {
position: relative;
width: 72px;
height: 72px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--mist);
overflow: hidden;
margin-bottom: var(--s4);
}
body.dl-v2 .dl-grade__badge::after {
content: "";
position: absolute;
left: 22px;
right: 14px;
top: 30px;
bottom: 18px;
border: 1.5px solid var(--line-2);
border-radius: 2px;
}
body.dl-v2 .dl-grade__badge img {
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 46px;
object-fit: contain;
object-position: top left;
}
body.dl-v2 .dl-grade h3 {
margin: 0 0 2px;
font: 600 17px/1.25 var(--text) !important;
color: var(--ink) !important;
letter-spacing: 0 !important;
font-family: var(--text) !important;
}
body.dl-v2 .dl-grade__blurb {
margin: 0 0 var(--s4);
font: 400 13px var(--text);
color: var(--slate);
}
body.dl-v2 .dl-grade__list {
margin: 0 0 var(--s5);
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s2);
flex: 1 1 auto;
}
body.dl-v2 .dl-grade__list li {
display: flex;
align-items: flex-start;
gap: var(--s2);
font: 400 13px/1.45 var(--text);
color: var(--ink);
}
body.dl-v2 .dl-grade__list .dl-ico {
width: 16px;
height: 16px;
flex: 0 0 16px;
margin-top: 1px;
color: var(--verify);
}
body.dl-v2 .dl-grade__cta {
display: block;
text-align: center;
padding: 10px 14px;
border: 1px solid var(--navy);
border-radius: 8px;
font: 600 13.5px var(--text);
color: var(--navy) !important;
text-decoration: none !important;
transition: background-color .18s ease, color .18s ease;
}
body.dl-v2 .dl-grade__cta:hover {
background: var(--navy);
color: #fff !important;
}
body.dl-v2 .dl-grades__foot {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s2);
margin: 0;
font: 500 14px var(--text);
color: var(--ink);
}
body.dl-v2 .dl-grades__foot .dl-ico {
color: var(--verify);
}
/* ==========================================================================
FOOTER
========================================================================== */
body.dl-v2 .site-footer .footer-newsletter {
background: var(--ink) !important;
border-bottom: 1px solid rgba(255,255,255,.1) !important;
padding: var(--s5) 0 !important;
}
body.dl-v2 .site-footer .footer-newsletter * {
color: #fff !important;
}
body.dl-v2 .site-footer .footer-newsletter h1,
body.dl-v2 .site-footer .footer-newsletter h2,
body.dl-v2 .site-footer .footer-newsletter h3,
body.dl-v2 .site-footer .footer-newsletter h4 {
font-family: var(--display) !important;
font-size: 19px !important;
letter-spacing: .02em !important;
margin: 0 !important;
}
body.dl-v2 .site-footer .footer-newsletter input[type="email"],
body.dl-v2 .site-footer .footer-newsletter input[type="text"] {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.2) !important;
border-radius: 8px 0 0 8px !important;
color: #fff !important;
height: 46px !important;
font: 400 14px var(--text) !important;
}
body.dl-v2 .site-footer .footer-newsletter input::placeholder {
color: rgba(255,255,255,.55) !important;
}
body.dl-v2 .site-footer .footer-newsletter button,
body.dl-v2 .site-footer .footer-newsletter input[type="submit"] {
background: var(--green) !important;
border: 0 !important;
border-radius: 0 8px 8px 0 !important;
height: 46px !important;
padding: 0 24px !important;
font: 600 14px var(--text) !important;
color: #fff !important;
}
body.dl-v2 .site-footer .footer-newsletter button:hover {
background: var(--green-dark) !important;
}
body.dl-v2 .site-footer .footer-bottom-widgets {
background: var(--navy) !important;
padding: var(--s8) 0 var(--s7) !important;
}
body.dl-v2 .site-footer .footer-bottom-widgets,
body.dl-v2 .site-footer .footer-bottom-widgets p,
body.dl-v2 .site-footer .footer-bottom-widgets li,
body.dl-v2 .site-footer .footer-bottom-widgets span,
body.dl-v2 .site-footer .footer-bottom-widgets div,
body.dl-v2 .site-footer .footer-bottom-widgets a {
color: rgba(255,255,255,.72) !important;
}
body.dl-v2 .site-footer .footer-bottom-widgets a {
transition: color .16s ease;
}
body.dl-v2 .site-footer .footer-bottom-widgets a:hover {
color: #fff !important;
}
body.dl-v2 .site-footer .footer-bottom-widgets h1,
body.dl-v2 .site-footer .footer-bottom-widgets h2,
body.dl-v2 .site-footer .footer-bottom-widgets h3,
body.dl-v2 .site-footer .footer-bottom-widgets h4,
body.dl-v2 .site-footer .footer-bottom-widgets h5,
body.dl-v2 .site-footer .footer-bottom-widgets .widget-title {
color: #fff !important;
font-family: var(--text) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
margin-bottom: var(--s4) !important;
}
body.dl-v2 .site-footer .footer-bottom-widgets li {
line-height: 2 !important;
}
body.dl-v2 .site-footer .footer-bottom-widgets .call-us-text,
body.dl-v2 .site-footer .footer-bottom-widgets a[href^="tel"] {
color: #fff !important;
font-weight: 700 !important;
font-size: 20px !important;
}
body.dl-v2 .site-footer .footer-bottom-widgets .social-icons a,
body.dl-v2 .site-footer .footer-bottom-widgets ul.social li a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
border: 1px solid rgba(255,255,255,.22) !important;
border-radius: 8px !important;
margin-right: var(--s2) !important;
transition: background-color .18s ease, border-color .18s ease;
}
body.dl-v2 .site-footer .footer-bottom-widgets .social-icons a:hover,
body.dl-v2 .site-footer .footer-bottom-widgets ul.social li a:hover {
background: var(--green) !important;
border-color: var(--green) !important;
}
body.dl-v2 .site-footer .copyright-bar {
background: #0f1a26 !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
padding: var(--s4) 0 !important;
}
body.dl-v2 .site-footer .copyright-bar * {
color: rgba(255,255,255,.6) !important;
font-size: 13px !important;
}
/* ==========================================================================
QUALITY FLOOR
========================================================================== */
body.dl-v2 a:focus-visible,
body.dl-v2 button:focus-visible,
body.dl-v2 input:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
body.dl-v2 *, body.dl-v2 *::before, body.dl-v2 *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}
}
.dl-v2-flag {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 99999;
background: #14212f;
color: #fff !important;
font: 600 12px/1 'Inter', system-ui, sans-serif;
padding: 10px 14px;
border-radius: 999px;
text-decoration: none !important;
box-shadow: 0 4px 16px rgba(0,0,0,.24);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1199px) {
body.dl-v2 #masthead .dl-hsearch { max-width: 400px; margin: 0 var(--s5); }
}
@media (max-width: 991px) {
body.dl-v2 #masthead .dl-hsearch { display: none; }
body.dl-v2 .elementor-section.elementor-top-section { padding-top: var(--s7) !important; padding-bottom: var(--s7) !important; }
body.dl-v2 h2.h1, body.dl-v2 .dl-h2 { font-size: 24px !important; }
body.dl-v2 .dl-trust__in, body.dl-v2 .dl-grades__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
body.dl-v2 .dl-trust__item:nth-child(3) { border-left: 0; padding-left: 0; }
/* the handheld header was the last green slab left; match the desktop */
body.dl-v2 .handheld-header-wrap .handheld-header,
body.dl-v2 .handheld-header-v2 { background: var(--paper) !important; border-bottom: 1px solid var(--line) !important; }
body.dl-v2 .handheld-header-wrap i,
body.dl-v2 .handheld-header-v2 i { color: var(--navy) !important; }
}
@media (max-width: 767px) {
body.dl-v2 { --gutter: 16px; }
body.dl-v2 .product.type-product { padding: 6px !important; }
body.dl-v2 .product.type-product .product-inner { padding: var(--s3) !important; }
body.dl-v2 .product.type-product .price { font-size: 16px !important; }
body.dl-v2 .product.type-product img.dl-condition-ribbon { width: 46px !important; }
}
@media (max-width: 575px) {
body.dl-v2 .dl-trust__in, body.dl-v2 .dl-grades__grid { grid-template-columns: 1fr; }
body.dl-v2 .dl-trust__item { border-left: 0 !important; padding-left: 0 !important; }
body.dl-v2 .dl-h2--center::before, body.dl-v2 .dl-h2--center::after { display: none; }
}
/* The theme's floating Dark/Light tabs, pinned over the hero — debris on a
storefront. (div.electro-mode-switcher, verified in-browser.) */
body.dl-v2 .electro-mode-switcher {
display: none !important;
}
/* ==========================================================================
21. MEGA MENU
The panels are YAMM/WPBakery blocks carrying one bare link per column and
nothing else — no heading, no icon, no hierarchy, which is why they read
as loose text. Rebuilt as a titled panel of tiles.
========================================================================== */
body.dl-v2 #masthead .electro-navbar-primary li .dropdown-menu {
/* The panel was running off the right edge on the wider menus. Cap it to
the viewport and let the last items right-align instead. */
min-width: 340px !important;
width: max-content !important;
max-width: min(780px, calc(100vw - 48px)) !important;
padding: 0 !important;
border: 1px solid var(--line) !important;
border-top: 3px solid var(--green) !important;
border-radius: 0 0 var(--radius) var(--radius) !important;
box-shadow: 0 18px 44px rgba(20,33,47,.18) !important;
background: var(--paper) !important;
overflow: hidden !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu > li {
width: 100%;
}
/* The WPBakery row becomes a tile grid. */
/* Keep the last panel on each row from overflowing the viewport edge. */
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:nth-last-child(-n+2) .dropdown-menu {
left: auto !important;
right: 0 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_column,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .vc_column-inner,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_wrapper,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_text_column {
width: auto !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_text_column p {
margin: 0 !important;
}
/* --- the tile --- */
body.dl-v2 .dl-tile__chev {
flex: 0 0 16px;
width: 16px;
height: 16px;
stroke: var(--line-2);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke .16s ease, transform .16s ease;
}
/* The duplicated column heading, flagged by script. */
body.dl-v2 .dl-mega-dupe {
display: none !important;
}
@media (max-width: 1199px) {
body.dl-v2 #masthead .electro-navbar-primary li .dropdown-menu { min-width: 320px !important; }
}
/* Mega-menu group titles that survive (a group with several links) */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu ul li {
list-style: none;
}
/* Panels with five or more tiles get two columns instead of a 700px column. */
body.dl-v2 #masthead .electro-navbar-primary .dl-mega--wide .yamm-content .vc_row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* WPBakery's vc_col-sm-* classes carry Bootstrap offsets that survive as
grid-column placement, which parked the FIRST group in column 2 and left
cell 1 empty. Force normal auto-flow. */
/* Grid auto-placement kept parking the first group in column 2 — WPBakery's
vc_col-sm-* classes win the placement battle even against grid-column:auto.
Flex wrap has no placement semantics to inherit, so it just works. */
/* A single-column panel shouldn't stretch to the 780px cap. */
/* --------------------------------------------------------------------------
22. Mega menu — group legibility
The panels read as a loose list because every group looked the same weight
as its items. Each brand block now sits in its own bordered well so the
heading clearly owns the tiles beneath it.
-------------------------------------------------------------------------- */
/* The brand line: quiet, but clearly a label rather than a link. */
/* Tighter tiles now the group carries the brand. */
/* ==========================================================================
23. MEGA MENU — open on hover
PROVEN bug: hover left the panel at opacity:0/visibility:hidden. The only
thing that opened it was a CLICK on the parent , whose href is the
category archive — so the panel flashed and the browser navigated away.
A desktop mega menu must open on hover; the link stays clickable for
anyone who wants the category page itself.
========================================================================== */
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:hover > .dropdown-menu,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:focus-within > .dropdown-menu,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li.open > .dropdown-menu,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li.show > .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* No dead gap between the nav item and the panel, or the pointer drops the
hover on the way down and the menu snaps shut. */
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > .dropdown-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -6px;
height: 6px;
}
/* ==========================================================================
24. TOP SECTION
One Elementor section carrying the headline, a duplicate search, the
Hot Products card and seven promo images over a dark stock photo. It
fought the new white header and offered no call to action.
========================================================================== */
/* Lift the type off the photograph without hiding the product in it. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type > * {
position: relative;
z-index: 1;
}
/* Headline */
body.dl-v2 .dl-hero-title .elementor-heading-title,
body.dl-v2 .elementor-section.elementor-top-section:first-of-type h1.elementor-heading-title {
font-family: var(--display) !important;
/* Robot Reavers is a very wide face — 58px ran the new copy to three
oversized lines. Two lines at a calmer size reads as confidence rather
than shouting. */
font-size: clamp(30px, 3vw, 44px) !important;
font-weight: 400 !important;
line-height: 1.12 !important;
letter-spacing: .012em !important;
color: #fff !important;
margin: 0 0 var(--s4) !important;
max-width: 17ch;
text-wrap: balance;
}
body.dl-v2 .dl-hero-sub .elementor-heading-title {
font-family: var(--text) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: rgba(255,255,255,.82) !important;
max-width: 46ch;
margin: 0 0 var(--s5) !important;
}
/* The hero repeated the header's search field; one is enough. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type
.elementor-widget-wp-widget-woocommerce_product_search {
display: none !important;
}
/* Primary call to action, injected by script. */
body.dl-v2 .dl-hero-cta a {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 13px 24px;
border-radius: 8px;
font: 600 14.5px var(--text);
text-decoration: none !important;
transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
body.dl-v2 .dl-hero-cta .dl-cta--ghost {
border: 1px solid rgba(255,255,255,.38);
color: #fff !important;
}
body.dl-v2 .dl-hero-cta .dl-cta--ghost:hover {
border-color: #fff;
background: rgba(255,255,255,.08);
}
body.dl-v2 .dl-hero-cta a:active {
transform: translateY(1px);
}
/* Live stock count — a real number, read from the catalogue. */
body.dl-v2 .dl-hero-stat {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin-top: var(--s5);
font: 400 13.5px var(--text);
color: rgba(255,255,255,.72);
}
body.dl-v2 .dl-hero-stat strong {
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
body.dl-v2 .dl-hero-stat .dl-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 3px rgba(55,193,45,.25);
}
/* Hot Products card sits on the light side of the gradient. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-icon-box .elementor-icon-box-title,
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-icon-box * {
color: #fff !important;
}
/* Promo tiles: one ratio, one radius, no mismatch. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image a:hover img {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
@media (max-width: 991px) {
body.dl-v2 .elementor-section.elementor-top-section:first-of-type::before {
background: linear-gradient(180deg, rgba(20,33,47,.92) 0%, rgba(20,33,47,.78) 100%);
}
body.dl-v2 .dl-hero-sub .elementor-heading-title { font-size: 15px !important; }
}
/* ==========================================================================
25. CRO + ACCESSIBILITY PASS
Measured failures, not opinions.
========================================================================== */
/* --- 25a. Contrast -------------------------------------------------------
White on the brand green measured 2.38:1 — below the 4.5:1 AA floor, on
BOTH the category bar and the primary CTA. Ink on the same green measures
6.85:1, so the brand colour is kept and the text simply goes dark. */
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > a,
body.dl-v2 #masthead .electro-navbar-primary .dl-burger-slot {
color: var(--ink) !important;
font-weight: 700 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dl-nav-ico,
body.dl-v2 .dl-burger-bars::before,
body.dl-v2 .dl-burger-bars::after,
body.dl-v2 .dl-burger-bars span {
stroke: var(--ink);
background: var(--ink);
}
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:hover > a {
background: rgba(0,0,0,.12) !important;
color: var(--ink) !important;
}
body.dl-v2 .dl-hero-cta .dl-cta--primary {
background: var(--green);
color: var(--ink) !important;
box-shadow: 0 6px 18px rgba(55,193,45,.28);
font-weight: 700;
}
body.dl-v2 .dl-hero-cta .dl-cta--primary:hover {
background: #31ae28;
color: var(--ink) !important;
}
/* --- 25b. The buy button ------------------------------------------------
Measured 50x34px, with "Select options" clipped inside it — the only buy
control on the card, well under the 44px touch minimum. It becomes a real
full-width button. */
body.dl-v2 .product.type-product .price-add-to-cart {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: var(--s3) !important;
width: 100% !important;
}
body.dl-v2 .product.type-product .price-add-to-cart .price {
width: 100%;
}
body.dl-v2 .product.type-product .add_to_cart_button,
body.dl-v2 .product.type-product .button.product_type_simple,
body.dl-v2 .product.type-product .button.product_type_variable,
body.dl-v2 .product.type-product .product-loop-footer .button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 44px !important;
padding: 11px 14px !important;
border: 1px solid var(--navy) !important;
border-radius: 8px !important;
background: var(--paper) !important;
color: var(--navy) !important;
font: 700 13.5px var(--text) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 1 !important;
visibility: visible !important;
transition: background-color .16s ease, color .16s ease;
}
body.dl-v2 .product.type-product .add_to_cart_button:hover,
body.dl-v2 .product.type-product .product-loop-footer .button:hover {
background: var(--navy) !important;
color: #fff !important;
}
body.dl-v2 .product.type-product .add_to_cart_button.added,
body.dl-v2 .product.type-product .add_to_cart_button.loading {
background: var(--verify) !important;
border-color: var(--verify) !important;
color: #fff !important;
}
/* Electro's "multiple variants" helper text repeats what the button says. */
body.dl-v2 .product.type-product .product-loop-footer small,
body.dl-v2 .product.type-product .variations-info {
display: none !important;
}
/* --- 25c. Wishlist + compare -------------------------------------------
Both measured 0x0 — present in the DOM, impossible to use, and invisible
on touch where there is no hover. Given as real 44px targets on the image. */
body.dl-v2 .product.type-product .hover-area {
position: absolute !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
opacity: 0;
transform: translateX(6px);
transition: opacity .18s ease, transform .18s ease;
z-index: 5;
}
body.dl-v2 .product.type-product:hover .hover-area,
body.dl-v2 .product.type-product:focus-within .hover-area {
opacity: 1;
transform: none;
}
body.dl-v2 .product.type-product .hover-area a,
body.dl-v2 .product.type-product .hover-area .yith-wcwl-add-to-wishlist,
body.dl-v2 .product.type-product .hover-area .compare {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 8px !important;
background: rgba(255,255,255,.96) !important;
border: 1px solid var(--line) !important;
color: var(--navy) !important;
font-size: 0 !important;
overflow: hidden;
}
body.dl-v2 .product.type-product .hover-area a:hover {
background: var(--navy) !important;
color: #fff !important;
}
body.dl-v2 .product.type-product .hover-area i {
font-size: 15px !important;
}
/* Touch has no hover — keep them reachable. */
@media (hover: none) {
body.dl-v2 .product.type-product .hover-area { opacity: 1; transform: none; }
}
/* --- 25d. Tabby split, at the price --------------------------------------
BNPL messaging belongs next to the number it makes smaller, not only in a
strip at the top of the page. Injected by script from the shown price. */
body.dl-v2 .dl-split strong {
font-weight: 700;
}
/* --- 25e. Trust at the decision point ------------------------------------
The promises band measured y=1204 — below a 900px fold, so a first-time
visitor never sees it before deciding to leave. These chips put the same
three facts directly under the hero CTA. */
/* ==========================================================================
26. MOBILE — measured at 390x844
Off-canvas nav links measured 279x18, the hamburger 46x27 and the header
icons 22x22 — all far under the 44px touch minimum. Search was hidden
below 991px, which removes the highest-intent action on the device most
paid traffic arrives on.
========================================================================== */
/* The mobile search bar lives OUTSIDE the desktop-only masthead row. */
body.dl-v2 .dl-msearch {
display: none;
}
@media (max-width: 991px) {
body.dl-v2 .dl-msearch {
display: block;
position: relative;
z-index: 30;
padding: var(--s3) var(--gutter);
background: var(--paper);
border-bottom: 1px solid var(--line);
}
body.dl-v2 .dl-msearch .dl-hsearch {
display: flex !important;
max-width: none !important;
margin: 0 !important;
}
body.dl-v2 .dl-msearch .dl-hsearch input[type="search"] {
height: 46px !important;
font-size: 16px !important; /* below 16px iOS zooms the page on focus */
}
body.dl-v2 .dl-msearch .dl-hsearch button[type="submit"] { height: 46px !important; width: 52px !important; }
/* --- Handheld header --- */
body.dl-v2 .handheld-header-wrap,
body.dl-v2 .handheld-header-v2,
body.dl-v2 .handheld-header {
background: var(--paper) !important;
border-bottom: 1px solid var(--line) !important;
}
body.dl-v2 .handheld-header-wrap a,
body.dl-v2 .handheld-header-wrap i,
body.dl-v2 .handheld-header-v2 a,
body.dl-v2 .handheld-header-v2 i { color: var(--navy) !important; }
body.dl-v2 .handheld-header-wrap a,
body.dl-v2 .handheld-header-wrap button,
body.dl-v2 .handheld-header-v2 a,
body.dl-v2 .handheld-header-v2 button,
body.dl-v2 #masthead .navbar-toggler {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.dl-v2 .handheld-header-wrap i { font-size: 20px !important; }
/* --- Off-canvas menu: real rows, not 18px text --- */
body.dl-v2 .off-canvas-navigation-wrapper .off-canvas-navigation li > a {
display: flex !important;
align-items: center !important;
min-height: 48px !important;
padding: 12px var(--s4) !important;
font-size: 15px !important;
border-bottom: 1px solid var(--line) !important;
}
body.dl-v2 .off-canvas-navigation-wrapper .off-canvas-navigation li > a:active {
background: var(--mist) !important;
}
/* The expander arrow needs its own target, or it steals the row's tap. */
body.dl-v2 .off-canvas-navigation-wrapper .off-canvas-navigation .caret-wrap,
body.dl-v2 .off-canvas-navigation-wrapper .off-canvas-navigation .menu-item-has-children > .caret-wrap {
min-width: 48px !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* --- Cards --- */
body.dl-v2 .product.type-product .add_to_cart_button,
body.dl-v2 .product.type-product .product-loop-footer .button {
min-height: 46px !important;
font-size: 13px !important;
}
/* Hover-only controls are unreachable on touch. */
body.dl-v2 .product.type-product .hover-area { opacity: 1 !important; transform: none !important; }
body.dl-v2 .dl-hero-chips { gap: var(--s2); }
body.dl-v2 .dl-hero-chips span { font-size: 12.5px; }
body.dl-v2 .dl-hero-cta a { flex: 1 1 auto; justify-content: center; min-height: 48px; }
}
@media (max-width: 575px) {
body.dl-v2 .dl-pay__list { gap: var(--s2) var(--s4); }
body.dl-v2 .dl-pay__list em { display: none; } /* keep the strip to one line each */
body.dl-v2 .dl-split { font-size: 11px; }
}
/* --------------------------------------------------------------------------
27. Buy button containment
Electro wraps the loop add-to-cart in .add-to-cart-wrap and positions it
absolutely to slide up on hover. Forcing the button to full width pushed
it clean out of the card (measured: card bottom 574, button top 573).
The wrap is returned to normal flow so the button sits inside the card and
is visible without hovering — a buy control you cannot see does not convert.
-------------------------------------------------------------------------- */
/* Keep the label legible — it is the only buy affordance on the card. */
body.dl-v2 .product.type-product .add-to-cart-wrap .button,
body.dl-v2 .product.type-product .add-to-cart-wrap a {
font-size: 13.5px !important;
text-indent: 0 !important;
}
body.dl-v2 .product.type-product .add-to-cart-wrap .button i {
display: none !important;
}
/* The theme height-locks .price-add-to-cart to 36px (measured: parent h=36,
child button h=58 rendering at y=2381 while the parent ends at 2336), so
the button spilled out of the card. Release the height instead of fighting
it with positioning. */
body.dl-v2 .product.type-product .price-add-to-cart,
body.dl-v2 .product.type-product .product-loop-footer,
body.dl-v2 .product.type-product .product-item__footer,
body.dl-v2 .product.type-product .add-to-cart-wrap {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
flex: 0 0 auto !important;
}
body.dl-v2 .product.type-product .product-inner,
body.dl-v2 .product.type-product .product-item__inner {
height: auto !important;
display: flex !important;
flex-direction: column !important;
background: var(--paper) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
padding: var(--s4) !important;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
min-height: 0 !important;
overflow: visible !important;
}
/* Electro renders a decorative glyph inside the loop button; with a real
text label it is just noise in the hit area. */
body.dl-v2 .product.type-product .add-to-cart-wrap .button > i,
body.dl-v2 .product.type-product .add-to-cart-wrap .button > span:empty,
body.dl-v2 .product.type-product .add-to-cart-wrap .button::before,
body.dl-v2 .product.type-product .add_to_cart_button > i,
body.dl-v2 .product.type-product .add_to_cart_button::before {
display: none !important;
content: none !important;
}
/* ==========================================================================
28. TOP BANNER + HEADER ROW
========================================================================== */
/* --- 28a. Header must not wrap -------------------------------------------
Measured: row 1200px wide, children 300 + 620 + 280 = 1200 exactly, with
flex-wrap:wrap on — so the icon cluster dropped to a second line and the
header rendered two rows tall. Narrow the search and forbid wrapping. */
@media (min-width: 992px) {
body.dl-v2 #masthead .masthead.row {
flex-wrap: nowrap !important;
gap: var(--s5);
}
body.dl-v2 #masthead .dl-hsearch {
max-width: 480px !important;
margin: 0 !important;
}
body.dl-v2 #masthead .header-logo-area {
width: auto !important;
max-width: 240px !important;
flex: 0 0 auto !important;
}
body.dl-v2 #masthead img.custom-logo,
body.dl-v2 #masthead .header-logo img { max-height: 74px !important; }
body.dl-v2 #masthead .header-icons { flex: 0 0 auto !important; }
}
/* --- 28b. Banner tiles, one height ---------------------------------------
The promo row is one wide column (592px) plus narrow ones (296px). An
aspect-ratio scales with width, so the tiles came out 277px and 148px
tall — the mismatched look. A fixed height makes every tile line up
whatever its column width. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image img {
width: 100% !important;
aspect-ratio: 16 / 7 !important;
object-fit: contain !important;
border-radius: var(--radius) !important;
display: block;
transition: transform .25s ease, box-shadow .25s ease;
/* ⛔ NEVER object-fit: cover these — the promo text is baked INTO the
artwork, so cropping slices letters off ("ertified Renewed Tech",
"PPLE FAVORITES"). contain keeps every tile the same height without
touching the image. */
aspect-ratio: auto !important;
height: 150px !important;
object-position: center !important;
background: rgba(255,255,255,.04);
}
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image {
margin-bottom: 0 !important;
}
/* Even gutters between tiles regardless of Elementor's column padding. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image .elementor-widget-container {
padding: 0 8px 16px !important;
}
/* A tile is a link — make that legible. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image a {
display: block;
position: relative;
border-radius: var(--radius);
overflow: hidden;
}
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
transition: box-shadow .2s ease;
}
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image a:hover::after {
box-shadow: inset 0 0 0 2px var(--green);
}
/* --- 28c. Let the photograph show ---------------------------------------
The overlay was dense enough to flatten the whole band to plain navy. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg,
rgba(20,33,47,.95) 0%,
rgba(20,33,47,.88) 34%,
rgba(20,33,47,.55) 62%,
rgba(20,33,47,.28) 100%) !important;
pointer-events: none;
z-index: 0;
}
/* --- 28d. Tighten the band ---------------------------------------------- */
/* ==========================================================================
29. HOVER + FOCUS SYSTEM — every interactive control
Audited with a real pointer. These were the ones giving no feedback:
header icons, top-bar links, the logo, and the carousel arrows (which
additionally measured 0x0 — rendered, but impossible to click).
========================================================================== */
/* --- 29a. Carousel arrows: give them a body ------------------------------ */
body.dl-v2 .owl-nav {
display: flex !important;
gap: 6px;
}
body.dl-v2 .owl-nav button.owl-prev,
body.dl-v2 .owl-nav button.owl-next,
body.dl-v2 .owl-prev,
body.dl-v2 .owl-next {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
padding: 0 !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
background: var(--paper) !important;
color: var(--navy) !important;
font-size: 15px !important;
line-height: 1 !important;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body.dl-v2 .owl-nav button:hover,
body.dl-v2 .owl-prev:hover,
body.dl-v2 .owl-next:hover {
background: var(--navy) !important;
border-color: var(--navy) !important;
color: #fff !important;
}
body.dl-v2 .owl-nav button[aria-disabled="true"],
body.dl-v2 .owl-nav .disabled {
opacity: .4 !important;
cursor: default;
}
/* --- 29b. Header icons: a real hover chip -------------------------------- */
body.dl-v2 #masthead .header-icons > .header-icon > a,
body.dl-v2 #masthead .header-icons > .header-icon > .dropdown-toggle {
border-radius: 8px !important;
padding: 0 6px !important;
transition: background-color .16s ease !important;
}
body.dl-v2 #masthead .header-icons > .header-icon > a:hover,
body.dl-v2 #masthead .header-icons > .header-icon:hover > a {
background: var(--mist) !important;
}
/* --- 29c. Top bar + logo ------------------------------------------------- */
body.dl-v2 .top-bar a {
transition: color .16s ease !important;
}
body.dl-v2 #masthead .custom-logo-link,
body.dl-v2 #masthead .header-logo-link {
display: inline-block;
transition: opacity .16s ease !important;
}
body.dl-v2 #masthead .custom-logo-link:hover,
body.dl-v2 #masthead .header-logo-link:hover {
opacity: .82;
}
/* --- 29d. Product image + title as one affordance ------------------------ */
body.dl-v2 .product.type-product .woocommerce-loop-product__link,
body.dl-v2 .product.type-product .product-thumbnail a {
transition: opacity .16s ease;
}
/* --- 29e. Pagination dots ------------------------------------------------ */
/* --- 29f. Newsletter + generic inputs ------------------------------------ */
body.dl-v2 input:not([type="submit"]),
body.dl-v2 select,
body.dl-v2 textarea {
transition: border-color .16s ease, box-shadow .16s ease;
}
/* --- 29g. Focus-visible on EVERY control, not just links -----------------
Keyboard users get the same affordance as pointer users. */
body.dl-v2 a:focus-visible,
body.dl-v2 button:focus-visible,
body.dl-v2 input:focus-visible,
body.dl-v2 select:focus-visible,
body.dl-v2 textarea:focus-visible,
body.dl-v2 [tabindex]:focus-visible {
outline: 3px solid var(--verify) !important;
outline-offset: 2px !important;
border-radius: 6px;
}
/* --- 29h. Press feedback ------------------------------------------------- */
body.dl-v2 .dl-cta--primary:active,
body.dl-v2 .dl-cta--ghost:active,
body.dl-v2 .dl-grade__cta:active,
body.dl-v2 .product.type-product .add-to-cart-wrap .button:active,
body.dl-v2 .dl-hsearch button[type="submit"]:active,
body.dl-v2 .owl-nav button:active {
transform: translateY(1px);
}
/* --- 29i. Anything that looks clickable but is not ----------------------- */
body.dl-v2 .dl-pay__list li,
body.dl-v2 .dl-trust__item,
body.dl-v2 .dl-hero-chips span,
body.dl-v2 .dl-hero-stat {
cursor: default;
}
body.dl-v2 a,
body.dl-v2 button,
body.dl-v2 .dl-tile,
body.dl-v2 .owl-dot {
cursor: pointer;
}
/* Pagination dots measured 30x8 — a 8px-tall hit target. The visual dot stays
small; the tappable area around it does not. */
body.dl-v2 .owl-dots {
display: flex !important;
justify-content: center;
gap: 2px;
}
body.dl-v2 .owl-dots .owl-dot {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: 0 !important;
transition: none;
}
body.dl-v2 .owl-dots .owl-dot span {
transition: background-color .16s ease, transform .16s ease !important;
width: 9px !important;
height: 9px !important;
margin: 0 !important;
border-radius: 999px !important;
background: var(--line-2) !important;
}
body.dl-v2 .owl-dots .owl-dot:hover span {
background: var(--navy) !important;
transform: scale(1.25);
}
body.dl-v2 .owl-dots .owl-dot.active span {
background: var(--green) !important;
width: 22px !important;
}
/* Hover must win over the active state, or the current dot gives no feedback. */
body.dl-v2 .owl-dots .owl-dot.active:hover span,
body.dl-v2 .owl-dots .owl-dot:hover span {
background: var(--navy) !important;
}
/* ==========================================================================
30. CRO AUDIT FIXES — items rated BROKEN
========================================================================== */
/* --- 30a. MOBILE CARDS HAD NO BUY CONTROL -------------------------------
The theme sets .add-to-cart-wrap{display:none} under 768px, so on the
device most traffic arrives on every card was a dead end. And my own
.hover-area rule anchored to .product-inner, whose top-right corner is
where the TITLE sits in this theme (image comes second) — so wishlist and
compare sat on top of the product name: "Samsu[Add to wishli][Comp]".
------------------------------------------------------------------------ */
body.dl-v2 .product.type-product .add-to-cart-wrap {
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
margin: var(--s3) 0 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: none !important;
box-shadow: none !important;
display: block !important;
}
/* Anchor the overlay to the IMAGE, never to the card (script relocates it). */
body.dl-v2 .product.type-product .product-thumbnail {
position: relative !important;
}
body.dl-v2 .product.type-product .product-thumbnail > .hover-area {
top: 8px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
}
/* Touch has no hover: these two add 72px of targets per card and no revenue. */
@media (hover: none), (max-width: 767px) {
body.dl-v2 .product.type-product .hover-area { display: none !important; }
}
/* --- 30b. REMAINING CONTRAST FAILURES ------------------------------------
White on #37c12d = 2.38:1. Already fixed on the nav and hero CTA; these
were missed: the search submit, the count bubbles and the PDP add-to-cart.
Ink on the same green = 6.85:1.
------------------------------------------------------------------------ */
body.dl-v2 .dl-hsearch button[type="submit"],
body.dl-v2 #masthead .header-icon .header-icon-counter,
body.dl-v2 button.single_add_to_cart_button,
body.dl-v2 .single_add_to_cart_button {
color: var(--ink) !important;
font-weight: 700 !important;
}
body.dl-v2 button.single_add_to_cart_button,
body.dl-v2 .single_add_to_cart_button {
background: var(--green) !important;
border-color: var(--green) !important;
min-height: 48px !important;
}
/* .dl-split measured 4.38:1 — just under AA. */
body.dl-v2 .dl-split {
display: block;
margin-top: 3px;
font: 500 11.5px/1.4 var(--text);
color: #1b7a45 !important;
font-size: 12px !important;
}
/* --- 30c. PDP STICKY BAR: THE BUY BUTTON WAS OFF-SCREEN ------------------
Pre-existing child-theme markup (.dl-sticky-bar). On a 390px viewport the
price block is 362px wide, pushing .dl-sticky-add-btn to x=407 — outside
the viewport entirely. So while scrolling a product on mobile there was no
reachable buy button at all.
------------------------------------------------------------------------ */
body.dl-v2 .dl-sticky-bar-inner,
body.dl-v2 .dl-sticky-bar > div {
display: flex !important;
align-items: center !important;
gap: var(--s3) !important;
flex-wrap: nowrap !important;
}
body.dl-v2 .dl-sticky-price {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.dl-v2 .dl-sticky-add-btn {
flex: 0 0 auto !important;
background: var(--green) !important;
color: var(--ink) !important;
font-weight: 700 !important;
border: 0 !important;
border-radius: 8px !important;
min-height: 44px !important;
padding: 0 18px !important;
}
/* "AED 1999or 4 payments" — the split ran straight into the price. */
body.dl-v2 .dl-sticky-price .dl-split {
margin-left: 6px;
}
@media (max-width: 600px) {
body.dl-v2 .dl-sticky-title { display: none !important; }
body.dl-v2 .dl-sticky-price .dl-split { display: none !important; }
}
/* --- 30d. PDP: give the decision points room ----------------------------- */
@media (min-width: 992px) {
body.dl-v2.single-product .sidebar,
body.dl-v2.single-product #secondary { display: none !important; }
body.dl-v2.single-product .content-area { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; }
}
@media (max-width: 767px) {
body.dl-v2 .single_add_to_cart_button { width: 100% !important; }
body.dl-v2 .woocommerce-tabs ul.tabs { flex-wrap: wrap !important; }
}
/* --- 30e. Dead tiles should not pretend to be clickable ------------------
Nine tiles point at href="#". Until they are given real destinations the
hover lift is a lie — it promises a click that does nothing.
------------------------------------------------------------------------ */
body.dl-v2 a[href="#"],
body.dl-v2 a[href=""] {
cursor: default !important;
}
body.dl-v2 .elementor-widget-image a[href="#"]:hover img {
transform: none !important;
box-shadow: none !important;
}
body.dl-v2 .elementor-widget-image a[href="#"]:hover::after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
/* The attribute row a buyer still has to choose, flashed on a blocked click. */
body.dl-v2 .dl-needs-pick {
outline: 2px solid var(--green);
outline-offset: 4px;
border-radius: 6px;
animation: dlPick .6s ease 0s 2;
}
@keyframes dlPick { 0%,100% { background: transparent; } 50% { background: rgba(55,193,45,.12); } }
@media (prefers-reduced-motion: reduce) { body.dl-v2 .dl-needs-pick { animation: none; } }
/* ==========================================================================
31. OWNER PASS — hero order, category tiles, section rhythm, brand marks
========================================================================== */
/* --- 31a. Promises lead, above the headline ------------------------------ */
body.dl-v2 .dl-hero-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s5);
margin-top: var(--s5);
padding-top: var(--s5);
border-top: 0 !important;
margin: 0 0 var(--s5) !important;
padding: 0 0 var(--s4) !important;
border-bottom: 1px solid rgba(255,255,255,.16);
}
body.dl-v2 .dl-hero-chips span {
display: inline-flex;
align-items: center;
gap: 7px;
font: 600 12.5px var(--text);
color: rgba(255,255,255,.92);
letter-spacing: .02em;
}
body.dl-v2 .dl-hero-chips .dl-ico {
width: 16px;
height: 16px;
flex: 0 0 16px;
color: var(--green);
}
/* First chip is the badge — give it the weight of a seal. */
body.dl-v2 .dl-hero-chips span:first-child {
padding: 5px 12px 5px 9px;
border: 1px solid rgba(55,193,45,.5);
border-radius: 999px;
background: rgba(55,193,45,.12);
}
body.dl-v2 .dl-hero-cta {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin-top: var(--s5);
}
/* --- 31b. Category tiles: cut-outs on a pastel ground, no counts --------- */
body.dl-v2 a.categories-list-bg[data-tint="1"] {
background: #eef4fb !important;
}
body.dl-v2 a.categories-list-bg[data-tint="2"] {
background: #f3f0fb !important;
}
body.dl-v2 a.categories-list-bg[data-tint="3"] {
background: #eefaf2 !important;
}
body.dl-v2 a.categories-list-bg[data-tint="4"] {
background: #fdf4ec !important;
}
body.dl-v2 a.categories-list-bg[data-tint="5"] {
background: #fdeef1 !important;
}
body.dl-v2 a.categories-list-bg:hover {
border-color: rgba(20,33,47,.12) !important;
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(20,33,47,.10) !important;
}
/* Lift the product off the tile so it reads as a cut-out, not a photo box. */
body.dl-v2 a.categories-list-bg:hover img {
transform: scale(1.05) translateY(-2px);
}
body.dl-v2 a.categories-list-bg .text-center > *:first-child {
font: 600 14.5px var(--text) !important;
color: var(--ink) !important;
}
/* --- 31c. Section rhythm: shorter page ----------------------------------
Measured gaps between blocks were 289 / 153 / 149 / 138px. The sections
also carry their own Elementor margins on top of the padding.
------------------------------------------------------------------------ */
body.dl-v2 .elementor-section.elementor-top-section {
padding-top: var(--s6) !important;
padding-bottom: var(--s6) !important;
margin: 0 !important;
}
body.dl-v2 .elementor-section.elementor-top-section:first-of-type {
padding-top: 0 !important;
position: relative;
background-color: var(--ink) !important;
background-blend-mode: multiply !important;
padding-bottom: var(--s6) !important;
}
/* Elementor columns add their own vertical padding inside each section. */
body.dl-v2 .elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-column-wrap,
body.dl-v2 .elementor-section.elementor-top-section .elementor-widget:last-child {
margin-bottom: 0 !important;
}
body.dl-v2 .products-carousel,
body.dl-v2 .elementor-widget-electro {
margin-bottom: 0 !important;
}
/* The heading no longer needs 24px of air beneath it at this density. */
body.dl-v2 h2.h1 {
margin-bottom: var(--s4) !important;
}
/* Trust band and grades tighten with everything else. */
body.dl-v2 .dl-trust {
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: var(--s6) 0 !important;
}
body.dl-v2 .dl-grades {
background: var(--mist);
padding: var(--s7) 0 !important;
border-top: 1px solid var(--line);
}
/* --- 31d. Brand monogram in the mega menu -------------------------------- */
/* Real manufacturer marks (single-path SVG, brand colour), used
nominatively to identify the hardware sold. */
/* --------------------------------------------------------------------------
32. Category tiles — contain the artwork, close the gap
The theme floats the thumbnail above the card edge with a negative offset,
which read as the image falling out of the tile once the tile had a
coloured ground.
-------------------------------------------------------------------------- */
body.dl-v2 a.categories-list-bg {
background: var(--paper) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
padding: var(--s5) var(--s3) var(--s4) !important;
text-align: center;
border-color: transparent !important;
position: relative;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
min-height: 220px;
margin-top: 0 !important;
}
body.dl-v2 a.categories-list-bg > * {
margin-top: 0 !important;
}
body.dl-v2 a.categories-list-bg img {
width: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
mix-blend-mode: multiply;
filter: drop-shadow(0 8px 14px rgba(20,33,47,.16));
transition: transform .25s ease;
position: relative !important;
top: 0 !important;
margin: 0 auto var(--s3) !important;
max-width: 76% !important;
max-height: 120px !important;
height: auto !important;
}
body.dl-v2 a.categories-list-bg .text-center,
body.dl-v2 a.categories-list-bg .text-center * {
padding: 0 !important;
margin: 0 !important;
}
/* The row itself carried a large top offset from the theme. */
body.dl-v2 .row.row-cols-md-3.row-cols-xl-5,
body.dl-v2 .pt-7 {
padding-top: 0 !important;
}
body.dl-v2 .pt-7.pt-xl-0 {
padding-top: 0 !important;
}
/* Close the band above the category row. */
body.dl-v2 .elementor-section.elementor-top-section:nth-of-type(2) {
padding-top: var(--s5) !important;
padding-bottom: var(--s5) !important;
}
/* The category block carried 72px padding-top on .categories-list-card plus
24px/48px margins on the row wrapper — ~144px of empty space before the
tiles even began. */
body.dl-v2 .categories-list-card,
body.dl-v2 .categories-list-card.pt-xl-6 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.dl-v2 .categories-list-card .pt-7,
body.dl-v2 .categories-list-card .pt-xl-0,
body.dl-v2 .categories-list-card .mb-xl-5,
body.dl-v2 .row.row-cols-xl-5 > [class*="pt-"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
}
/* Give the tiles a gutter of their own now the wrapper margins are gone. */
body.dl-v2 .categories-list-card .row.row-cols-xl-5 {
gap: var(--s4) 0;
}
body.dl-v2 .categories-list-card .row.row-cols-xl-5 > * {
padding-inline: 8px !important;
}
/* A brand mark standing in for the device icon on a tile. */
/* The mark standing in for the device icon on a tile: same 32px well as the
line icons so the rows stay aligned. */
/* ==========================================================================
33. GREEN BAR — white labels, and a mega menu that sits where it should
========================================================================== */
/* --- 33a. White labels, as asked -----------------------------------------
White on the stock #37c12d measures 2.38:1 — illegible by any standard.
At 14px/700 the label counts as large text (3:1 threshold), and a slightly
deeper #2ba823 reaches 3.12:1. Visually a hair deeper than the brand green,
but the labels are actually readable in white.
------------------------------------------------------------------------ */
body.dl-v2 #masthead .electro-navbar-primary {
background-color: #2ba823 !important;
border: 0 !important;
padding: 0 !important;
}
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > a,
body.dl-v2 #masthead .electro-navbar-primary .dl-burger-slot,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > a .caret,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > a::after {
color: #fff !important;
font-size: 14px !important;
font-weight: 700 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dl-nav-ico {
width: 17px;
height: 17px;
flex: 0 0 17px;
stroke: #fff !important;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
background: none;
}
body.dl-v2 .dl-burger-bars::before,
body.dl-v2 .dl-burger-bars::after,
body.dl-v2 .dl-burger-bars span {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #fff !important;
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
body.dl-v2 #masthead .electro-navbar-primary .dl-burger-slot {
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
padding: 0 18px 0 0 !important;
margin-right: 14px !important;
border: 0 !important;
border-right: 1px solid rgba(255,255,255,.3) !important;
background: transparent !important;
color: #fff !important;
font: 600 13.5px var(--text) !important;
min-height: 46px;
cursor: pointer;
border-right-color: rgba(255,255,255,.34) !important;
}
/* Hover/open state: a darker well, so the active item is unmistakable. */
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:hover > a,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li.open > a {
background: #22901c !important;
color: #fff !important;
}
/* --- 33b. The panel must hang BELOW the bar ------------------------------
Measured: panel top 176 vs nav item bottom 186 — it rode 10px up over the
green bar, cutting into the item it belongs to.
------------------------------------------------------------------------ */
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li {
margin: 0 !important;
position: relative;
}
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li > .dropdown-menu {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
top: 100% !important;
margin-top: 0 !important;
border-top: 0 !important;
border-radius: 0 0 12px 12px !important;
box-shadow: 0 20px 48px rgba(20,33,47,.22) !important;
}
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:hover > .dropdown-menu,
body.dl-v2 #masthead .electro-navbar-primary ul.nav > li:focus-within > .dropdown-menu {
transform: translateY(0) !important;
}
/* --- 33c. Mega menu, calmer ----------------------------------------------
The panel read as a wall of rows. Give it a clear head, real columns with
a hairline between them, and quieter tiles.
------------------------------------------------------------------------ */
/* Columns separated by a rule instead of floating in space. */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .yamm-content .vc_row > .wpb_column:first-child,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .dl-mega--wide .vc_row > .wpb_column:nth-child(odd) {
border-left: 0 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .yamm-content .vc_row > .wpb_column:hover {
background: transparent !important;
border-color: var(--line) !important;
}
/* Brand heading: the logo does the identifying, so the text can relax. */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu li.nav-title::before {
content: "";
flex: 0 0 3px;
width: 3px;
height: 11px;
border-radius: 2px;
background: var(--green);
display: none;
}
/* Tiles: lighter, so the panel reads as a list not a stack of cards. */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-tile:hover {
background: var(--mist) !important;
border-color: transparent !important;
transform: none !important;
}
body.dl-v2 .dl-tile__ico {
flex: 0 0 26px;
width: 26px;
height: 26px;
padding: 5px;
box-sizing: border-box;
border-radius: 8px;
background: transparent;
stroke: var(--slate);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
body.dl-v2 a.dl-tile:hover .dl-tile__ico {
background: transparent;
stroke: var(--verify);
}
/* --- 33d. Bigger logo ----------------------------------------------------- */
@media (min-width: 992px) {
body.dl-v2 #masthead img.custom-logo,
body.dl-v2 #masthead .header-logo img { max-height: 104px !important; }
body.dl-v2 #masthead .header-logo-area { max-width: 300px !important; }
body.dl-v2 #masthead .masthead.row { min-height: 116px !important; }
body.dl-v2 #masthead .dl-hsearch { max-width: 440px !important; }
}
/* ==========================================================================
34. MEGA MENU POLISH + LOGO
========================================================================== */
/* Belt and braces against any tooltip layer landing over an open panel. */
body.dl-v2 .tooltip,
body.dl-v2 [role="tooltip"] {
display: none !important;
}
/* --- 34a. A tighter head ------------------------------------------------
Measured 69px tall for one line of text and a button. */
body.dl-v2 .dl-mega__head {
display: flex;
align-items: center !important;
justify-content: space-between;
gap: var(--s4);
padding: var(--s3) var(--s4) !important;
border-bottom: 1px solid var(--line) !important;
background: var(--paper) !important;
}
body.dl-v2 .dl-mega__head > span {
font: 700 11px var(--text);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink);
font-size: 10.5px;
}
/* --- 34b. "View all" reads as the action it is -------------------------- */
body.dl-v2 .dl-mega__all::after {
content: "→";
font-size: 13px;
line-height: 1;
}
/* --- 34c. Consistent group rhythm ---------------------------------------
Some headings showed a rule and others none, depending on which column
they fell into. One treatment for all of them.
------------------------------------------------------------------------ */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu ul > li:first-child.nav-title,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_wrapper > ul > li.nav-title:first-child {
margin-top: 0 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_text_column + .wpb_text_column li.nav-title {
margin-top: var(--s4) !important;
}
/* Single-column panels don't need a divider on the only column. */
body.dl-v2 #masthead .electro-navbar-primary li .dropdown-menu:not(.dl-mega--wide)
.yamm-content .vc_row > .wpb_column {
flex: 1 1 100% !important;
border-left: 0 !important;
padding-inline: 0 !important;
}
/* --- 34d. The logo, given room ------------------------------------------
The source PNG is 180x168, so it stays crisp up to ~168px tall.
------------------------------------------------------------------------ */
@media (min-width: 992px) {
body.dl-v2 #masthead .header-logo-area {
max-width: 330px !important;
padding-block: var(--s2) !important;
}
body.dl-v2 #masthead img.custom-logo,
body.dl-v2 #masthead .header-logo img {
max-height: 124px !important;
image-rendering: -webkit-optimize-contrast;
}
body.dl-v2 #masthead .masthead.row { min-height: 136px !important; }
body.dl-v2 #masthead .dl-hsearch { max-width: 420px !important; }
}
/* Footer lockup gets the same lift. */
body.dl-v2 .site-footer img {
content: url("/wp-content/uploads/2026/07/dl-logo-oneline-white-ink-1.png") !important;
max-height: 104px !important;
width: auto !important;
height: auto !important;
}
/* ==========================================================================
35. Mega menu — tile logos and a hover you can actually feel
The tint-only hover was too faint to register, and the brand mark sat flat
against the row.
========================================================================== */
body.dl-v2 a.dl-tile:hover .dl-tile__chev {
stroke: var(--verify);
transform: translateX(3px);
}
/* Heading mark sized to sit level with its text. */
/* ==========================================================================
36. BRAND MARKS — wordmarks need width, symbols need a square
Lenovo, Samsung and Asus are WORDMARKS. Forced into a 26px square they
scale down to an illegible smudge. Given a wide box they scale to fit the
width and read properly. Apple/HP/Dell/Microsoft are compact symbols and
stay square.
========================================================================== */
/* --- heading marks --- */
body.dl-v2 svg.dl-brand {
width: 18px;
height: 18px;
flex: 0 0 18px;
margin-right: 5px;
display: inline-block;
vertical-align: -2px;
}
/* --- tile marks --- */
body.dl-v2 svg.dl-brand--tile {
width: 28px !important;
height: 28px !important;
flex: 0 0 28px !important;
margin-right: 0;
padding: 4px;
box-sizing: border-box;
border-radius: 6px;
background: var(--mist);
transition: background-color .16s ease, transform .16s ease;
}
/* Keep the labels aligned whatever width the mark takes. */
body.dl-v2 svg.dl-tile__ico,
body.dl-v2 svg.dl-brand--tile {
justify-self: center;
}
/* --- hover: readable, not a wash --- */
body.dl-v2 a.dl-tile:hover .dl-tile__title {
color: #14532d !important;
font-weight: 700 !important;
}
body.dl-v2 a.dl-tile:hover svg.dl-brand--tile {
background: #fff;
transform: none;
}
/* Group heading: legible weight, dark enough to read. */
/* --------------------------------------------------------------------------
37. Brand marks at their true proportions
With a tight viewBox each mark now fills its box, so the wordmarks need a
landscape frame and the symbols a square one.
-------------------------------------------------------------------------- */
body.dl-v2 svg.dl-brand--word {
width: 62px !important;
height: 22px !important;
flex: 0 0 62px !important;
margin-right: 7px;
}
body.dl-v2 svg.dl-brand:not(.dl-brand--word):not(.dl-brand--tile) {
width: 20px !important;
height: 20px !important;
flex: 0 0 20px !important;
}
/* Grid column widened to the widest mark so every label still lines up. */
/* --------------------------------------------------------------------------
38. One line per item
The headings are folded into the labels, so the panel is a flat list. No
group rules, no column dividers to align around.
-------------------------------------------------------------------------- */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu li.nav-title {
display: none !important;
padding: 0 0 6px !important;
font: 600 11px var(--text) !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
list-style: none;
align-items: center;
gap: var(--s2);
margin: var(--s3) 0 6px !important;
border-bottom: 1px solid var(--line) !important;
font-size: 11px !important;
font-weight: 700 !important;
min-height: 22px;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .yamm-content .vc_row > .wpb_column {
grid-column: auto !important;
grid-row: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: auto !important;
right: auto !important;
inset-inline: auto !important;
flex: 1 1 250px !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 var(--s2) !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
transition: background-color .16s ease, border-color .16s ease;
border-left: 0 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .yamm-content .vc_row {
display: flex !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
align-items: flex-start !important;
gap: 0 !important;
margin: 0 !important;
padding: var(--s3) var(--s3) var(--s4) !important;
flex-wrap: wrap !important;
}
/* --------------------------------------------------------------------------
39. Mega menu — kill the outer box, white "View all"
Hovering a row also drew a 1px border around its whole COLUMN (measured
321x98 around both Dell rows), so the highlight looked like it belonged to
a group rather than the row under the pointer. Only the row highlights.
-------------------------------------------------------------------------- */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .yamm-content .vc_row > .wpb_column,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .yamm-content .vc_row > .wpb_column:hover,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .vc_column-inner,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .vc_column-inner:hover,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_wrapper:hover,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu .wpb_text_column:hover {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* The row is the only thing that responds. */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-tile:hover,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-tile:focus-visible {
background: #eaf4ee !important;
border-color: rgba(27,122,69,.5) !important;
padding-left: var(--s2) !important;
box-shadow: 0 1px 3px rgba(20,33,47,.06) !important;
}
/* --- "View all": white type, on a green dark enough to carry it ---------
White on the bright #37c12d is 2.38:1. On #1b7a45 it is 5.4:1. */
body.dl-v2 .dl-mega__all {
font: 700 12px var(--text) !important;
color: #fff !important;
text-decoration: none !important;
white-space: nowrap;
padding: 7px 14px !important;
border: 0 !important;
border-radius: 999px !important;
display: inline-flex;
align-items: center;
gap: 6px;
background: #1b7a45 !important;
letter-spacing: .01em;
box-shadow: 0 2px 8px rgba(27,122,69,.3) !important;
transition: background-color .16s ease, transform .12s ease;
}
body.dl-v2 .dl-mega__all:hover {
text-decoration: none !important;
background: #14532d !important;
color: #fff !important;
transform: translateX(2px);
}
/* `#masthead .electro-navbar-primary .dropdown-menu a` carries an ID, so a
class-only rule on .dl-mega__all never wins. Match its specificity.
White on #1b7a45 = 5.40:1. */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-mega__all,
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-mega__all:hover {
color: #fff !important;
background: #1b7a45 !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-mega__all:hover {
background: #14532d !important;
}
/* --------------------------------------------------------------------------
40. Bigger brand marks in the mega menu
Symbols and wordmarks are scaled together so the rows stay aligned: the
grid's first column widens to match the widest mark.
-------------------------------------------------------------------------- */
/* Compact symbols — Apple, HP, Dell, Microsoft */
/* Wordmarks — Lenovo, Samsung, Asus */
/* The panel needs a little more width now the marks are larger. */
/* --------------------------------------------------------------------------
41. Mega menu labels wrap instead of truncating
`white-space: nowrap` cut the longer names to "Lenovo ThinkPad Workst…".
A model name is the one thing a buyer needs whole, so it wraps to a second
line and the row grows to fit.
-------------------------------------------------------------------------- */
body.dl-v2 .dl-tile__title {
flex: 1 1 auto;
min-width: 0;
font: 600 13.5px/1.35 var(--text);
color: var(--ink);
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 13.5px !important;
font-weight: 500;
line-height: 1.32 !important;
overflow-wrap: break-word;
hyphens: none;
}
/* Keep the mark and chevron centred against a one- or two-line label. */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-tile > svg {
align-self: center;
}
/* ==========================================================================
42. "ALL CATEGORIES" PANEL
The theme's off-canvas was an unstyled 350px slab of 18px text rows over
the header. Rebuilt to read like the mega menus.
========================================================================== */
body.dl-v2 .off-canvas-navigation {
width: 344px !important;
max-width: 88vw !important;
background: var(--paper) !important;
box-shadow: 0 0 60px rgba(20,33,47,.28) !important;
border-right: 1px solid var(--line) !important;
padding: 0 !important;
overflow-y: auto !important;
overscroll-behavior: contain;
}
/* --- head: logo + close --- */
body.dl-v2 .dl-oc__close {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line) !important;
border-radius: 10px;
background: var(--paper) !important;
color: var(--navy) !important;
font: 400 24px/1 var(--text);
cursor: pointer;
transition: background-color .16s ease, color .16s ease;
}
body.dl-v2 .dl-oc__close:hover {
background: var(--ink) !important;
color: #fff !important;
border-color: var(--ink) !important;
}
body.dl-v2 .dl-oc__cap {
margin: 0;
padding: var(--s4) var(--s4) var(--s2);
font: 700 10.5px var(--text);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--slate);
}
/* --- rows --- */
body.dl-v2 .off-canvas-navigation ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.dl-v2 .off-canvas-navigation > ul > li {
border-bottom: 1px solid var(--line-2);
}
body.dl-v2 .off-canvas-navigation > ul > li:last-child {
border-bottom: 0;
}
/* --- sub-menus: indented, quieter, brand marks --- */
body.dl-v2 .off-canvas-navigation ul ul li > a:hover {
color: #14532d !important;
background: #e3efe7 !important;
}
/* --- the expander --- */
body.dl-v2 .off-canvas-navigation .caret-wrap,
body.dl-v2 .off-canvas-navigation .menu-item-has-children > .caret-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 48px !important;
min-height: 48px !important;
color: var(--slate) !important;
}
/* --- backdrop --- */
body.dl-v2.off-canvas-active .electro-overlay {
background: rgba(20,33,47,.55) !important;
backdrop-filter: blur(2px);
}
@media (max-width: 767px) {
body.dl-v2 .off-canvas-navigation { width: 86vw !important; }
body.dl-v2 .dl-oc__brand img { max-height: 44px; }
}
/* Page links (Home / About / Blog / Contact) read as utility, not product. */
body.dl-v2 .dl-oc-ico--page {
background: transparent !important;
stroke: var(--slate) !important;
}
body.dl-v2 .off-canvas-navigation li > a:hover .dl-oc-ico--page {
stroke: var(--verify) !important;
}
/* The head logo needs room; it is a squarish lockup, not a wide wordmark. */
body.dl-v2 .dl-oc__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
padding: var(--s3) var(--s4) !important;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
background: var(--paper);
z-index: 2;
min-height: 84px;
}
body.dl-v2 .dl-oc__brand {
display: flex;
align-items: center;
}
body.dl-v2 .dl-oc__brand img {
max-height: 64px !important;
width: auto;
display: block;
max-width: 200px;
object-fit: contain;
}
/* --------------------------------------------------------------------------
43. "All categories" accordion
The theme shipped no caret element and left every submenu display:none, so
categories were unopenable. The label navigates; the chevron expands.
-------------------------------------------------------------------------- */
body.dl-v2 .off-canvas-navigation li.dl-oc-has-children {
position: relative;
}
body.dl-v2 .dl-oc__toggle {
position: absolute;
top: 0;
right: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: 0 !important;
background: transparent !important;
color: var(--slate) !important;
cursor: pointer;
padding: 0 !important;
transition: color .16s ease;
}
body.dl-v2 .dl-oc__toggle svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .2s ease;
}
body.dl-v2 .dl-oc__toggle:hover {
color: var(--verify) !important;
}
body.dl-v2 li.dl-oc-open > .dl-oc__toggle svg {
transform: rotate(90deg);
}
body.dl-v2 li.dl-oc-open > .dl-oc__toggle {
color: var(--verify) !important;
}
/* Closed by default; opened by the toggle. */
body.dl-v2 .off-canvas-navigation li.dl-oc-has-children > ul {
display: none !important;
}
body.dl-v2 .off-canvas-navigation li.dl-oc-open > ul {
display: block !important;
}
/* Sub-rows sit on a tint and carry the brand mark. */
body.dl-v2 .off-canvas-navigation ul ul li {
border-bottom: 1px solid rgba(20,33,47,.06);
}
body.dl-v2 .off-canvas-navigation ul ul li:last-child {
border-bottom: 0;
}
/* --------------------------------------------------------------------------
44. Off-canvas: one chevron, labels that wrap
The theme draws its own caret as a Font Awesome `a::after`, which sat beside
my working toggle and gave every parent two chevrons. Its own is decorative
(it expands nothing), so it goes.
-------------------------------------------------------------------------- */
body.dl-v2 .off-canvas-navigation li > a::after,
body.dl-v2 .off-canvas-navigation li > a::before {
content: none !important;
display: none !important;
}
/* "Lenovo ThinkPad Workstations (P-Series)" ran off the 344px panel. */
/* Keep the mark from squashing when the label wraps. */
/* Sub-list tint, a touch stronger so the nesting reads. */
body.dl-v2 .off-canvas-navigation ul ul {
background: #f2f5f9 !important;
border-top: 1px solid var(--line-2);
}
/* ==========================================================================
45. Off-canvas: a single alignment grid
The marks are different widths — Samsung and Lenovo are wide wordmarks,
HP/Dell/Microsoft are small symbols — so every label started at a different
x. A fixed logo column puts all the text on one line.
========================================================================== */
/* Sub-rows: a wider column, because the wordmarks live here. */
/* Every mark sits centred inside its column whatever its shape. */
body.dl-v2 svg.dl-oc-brand {
flex: 0 0 34px;
width: 34px !important;
height: 34px !important;
padding: 4px;
background: #fff;
border-radius: 7px;
border: 1px solid var(--line);
}
/* --- selection + hover ---------------------------------------------------- */
/* The open parent stays marked while you read its list. */
body.dl-v2 li.dl-oc-open > a .dl-oc-ico {
background: #fff;
stroke: var(--verify);
}
/* The page you are on. */
body.dl-v2 .off-canvas-navigation li.current-menu-item > a,
body.dl-v2 .off-canvas-navigation li.current-menu-parent > a {
border-left-color: var(--green) !important;
color: #14532d !important;
font-weight: 700 !important;
}
/* Marks start at the same left edge rather than floating centred in the
column — a 20px Dell roundel centred in a 72px slot looked lost beside a
72px Lenovo wordmark, even though the labels lined up. */
body.dl-v2 .dl-oc-ico,
body.dl-v2 svg.dl-oc-brand {
align-self: center;
justify-self: start !important;
}
/* ==========================================================================
46. Off-canvas: closed by default, whole row opens, stronger hover
========================================================================== */
/* The row is the target, so make it feel like one. */
body.dl-v2 .off-canvas-navigation li.dl-oc-has-children > a {
padding-right: 52px !important;
cursor: pointer;
}
body.dl-v2 .off-canvas-navigation li > a:hover,
body.dl-v2 .off-canvas-navigation li > a:focus-visible {
background: #eaf4ee !important;
color: #14532d !important;
border-left-color: var(--green) !important;
padding-left: var(--s4) !important;
}
/* The icon chip answers too, so the whole row reads as one control. */
body.dl-v2 .off-canvas-navigation li > a:hover .dl-oc-ico {
background: #fff !important;
stroke: var(--verify) !important;
box-shadow: 0 1px 4px rgba(20,33,47,.10);
}
body.dl-v2 .off-canvas-navigation li > a:hover svg.dl-oc-brand {
border-color: rgba(27,122,69,.45) !important;
box-shadow: 0 1px 4px rgba(20,33,47,.10);
}
/* Chevron follows the row, not just its own 52px box. */
body.dl-v2 .off-canvas-navigation li.dl-oc-has-children > a:hover + .dl-oc__toggle {
color: var(--verify) !important;
}
body.dl-v2 .dl-oc__toggle:focus-visible {
outline: 3px solid var(--verify);
outline-offset: -3px;
border-radius: 8px;
}
/* Open parent stays marked. */
body.dl-v2 li.dl-oc-open > a {
background: #eaf4ee !important;
color: #14532d !important;
border-left-color: var(--verify) !important;
font-weight: 700 !important;
}
/* "Shop all …" — the way to the category page now the row toggles. */
body.dl-v2 .dl-oc__all {
grid-template-columns: 72px 1fr !important;
font: 700 12.5px var(--text) !important;
letter-spacing: .02em;
color: var(--verify) !important;
text-transform: none !important;
}
body.dl-v2 .dl-oc__all::before {
content: "→";
justify-self: start;
padding-left: 8px;
font-size: 14px;
color: var(--verify);
}
body.dl-v2 .dl-oc__all:hover {
background: #e3efe7 !important;
color: #14532d !important;
}
/* ==========================================================================
47. Bigger symbol marks across the whole menu
Apple, HP, Dell and Microsoft are compact symbols and were reading much
smaller than the Samsung/Lenovo wordmarks beside them.
========================================================================== */
/* --- off-canvas --- */
body.dl-v2 svg.dl-oc-brand:not(.dl-brand--word) {
width: 46px !important;
height: 46px !important;
padding: 5px !important;
border-radius: 9px;
}
body.dl-v2 svg.dl-oc-brand.dl-brand--word {
flex: 0 0 62px !important;
width: 74px !important;
height: 40px !important;
padding: 3px 5px !important;
border-radius: 9px;
}
body.dl-v2 .dl-oc-ico {
flex: none;
width: 38px !important;
height: 38px !important;
padding: 8px !important;
box-sizing: border-box;
border-radius: 8px;
background: var(--mist);
stroke: var(--navy);
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
body.dl-v2 .off-canvas-navigation li > a {
display: grid !important;
align-items: center !important;
gap: var(--s3) !important;
min-height: 52px !important;
padding: 11px var(--s4) !important;
font: 600 14.5px var(--text) !important;
color: var(--ink) !important;
text-decoration: none !important;
transition: background-color .16s ease, color .16s ease,
border-color .16s ease, padding-left .16s ease !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.35 !important;
grid-template-columns: 50px 1fr !important;
border-left: 3px solid transparent !important;
padding-left: calc(var(--s4) - 3px) !important;
}
/* --- mega menu --- */
body.dl-v2 svg.dl-brand--tile:not(.dl-brand--word) {
width: 46px !important;
height: 46px !important;
flex: 0 0 46px !important;
padding: 5px !important;
border-radius: 9px;
}
body.dl-v2 svg.dl-brand--tile.dl-brand--word {
width: 82px !important;
height: 40px !important;
flex: 0 0 82px !important;
padding: 3px 5px !important;
border-radius: 9px;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-tile {
display: grid !important;
align-items: center !important;
gap: var(--s4) !important;
padding: 10px var(--s3) !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
text-decoration: none !important;
transition: background-color .15s ease, border-color .15s ease, padding-left .15s ease;
grid-template-columns: 82px 1fr 16px !important;
}
/* Panels widen a touch to carry the larger marks. */
body.dl-v2 #masthead .electro-navbar-primary li .dropdown-menu:not(.dl-mega--wide) {
width: 440px !important;
}
body.dl-v2 #masthead .electro-navbar-primary li .dropdown-menu.dl-mega--wide {
width: min(840px, calc(100vw - 48px)) !important;
}
/* Heading marks in step. */
body.dl-v2 svg.dl-brand:not(.dl-brand--word):not(.dl-brand--tile):not(.dl-oc-brand) {
width: 24px !important;
height: 24px !important;
flex: 0 0 24px !important;
}
body.dl-v2 svg.dl-brand--word:not(.dl-brand--tile):not(.dl-oc-brand) {
width: 66px !important;
height: 24px !important;
flex: 0 0 66px !important;
}
/* ==========================================================================
48. BRAND MARK SIZES — final word
An earlier rule, `svg.dl-brand:not(.dl-brand--word):not(.dl-brand--tile)`,
carries FOUR classes and was beating the three-class off-canvas rules, so
every symbol in the panel rendered at 20px however large I set it. These
selectors are scoped to their container, which settles the cascade.
Readability is the point: a mark nobody can identify is decoration.
========================================================================== */
/* --- off-canvas panel --- */
body.dl-v2 .off-canvas-navigation li > a svg.dl-oc-brand:not(.dl-brand--word) {
width: 46px !important;
height: 46px !important;
flex: 0 0 46px !important;
padding: 5px !important;
border-radius: 9px !important;
background: #fff !important;
border: 1px solid var(--line) !important;
}
body.dl-v2 .off-canvas-navigation li > a svg.dl-oc-brand.dl-brand--word {
width: 80px !important;
height: 40px !important;
flex: 0 0 80px !important;
padding: 3px 5px !important;
border-radius: 9px !important;
background: #fff !important;
border: 1px solid var(--line) !important;
}
body.dl-v2 .off-canvas-navigation ul ul li > a {
min-height: 58px !important;
padding-left: var(--s4) !important;
font-weight: 500 !important;
font-size: 13.5px !important;
color: var(--slate) !important;
padding-right: var(--s4) !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
grid-template-columns: 88px 1fr !important;
}
/* --- mega menu --- */
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-tile svg.dl-brand--tile:not(.dl-brand--word) {
width: 46px !important;
height: 46px !important;
flex: 0 0 46px !important;
padding: 5px !important;
border-radius: 9px !important;
background: var(--mist) !important;
}
body.dl-v2 #masthead .electro-navbar-primary .dropdown-menu a.dl-tile svg.dl-brand--tile.dl-brand--word {
width: 82px !important;
height: 40px !important;
flex: 0 0 82px !important;
padding: 3px 5px !important;
border-radius: 9px !important;
background: var(--mist) !important;
}
/* ==========================================================================
CONSOLIDATION COROLLARY
The dedupe merges rules that share an IDENTICAL selector string. Where a
property was set by a GROUPED selector ("A, B { … }") it cannot be folded
into B's own block, and moving B's block can flip which one wins. Two
values shifted; restored here.
========================================================================== */
body.dl-v2 #masthead .electro-navbar-primary .dl-burger-slot {
font-size: 14px !important;
font-weight: 700 !important;
}
body.dl-v2 svg.dl-brand--tile { margin: 0 5px 0 0; }
/* ==========================================================================
40. OWNER ROUND 25 OCT 2026 — square corners, PNG category art, tighter
rails, carousel arrows with a glyph, no off-canvas bleed
========================================================================== */
/* --- 40a. Square corners across the whole site --------------------------
Owner: every corner square, no rounded rectangles. Only true circles
(the header count badges, radio inputs) stay round. */
:root { --radius: 0px; }
/* Two :not(#id) lift this above every class-chain rule in the file that
set a radius with !important (product cards, buttons, thumbnails). */
body.dl-v2 :not(#dl-sq):not(#dl-sq),
body.dl-v2 :not(#dl-sq):not(#dl-sq)::before,
body.dl-v2 :not(#dl-sq):not(#dl-sq)::after {
border-radius: 0 !important;
}
body.dl-v2 #masthead .count:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="radio"]:not(#dl-sq):not(#dl-sq) {
border-radius: 50% !important;
}
/* --- 40b. The closed off-canvas menu bled into the page -------------------
It sits at left:-350px (desktop) / -280px (mobile) but is wider than that
on a phone, and its 60px shadow painted a grey gradient down the left edge
of the header on desktop. Hide it entirely until it is opened. */
body.dl-v2:not(.off-canvas-active) .off-canvas-navigation {
box-shadow: none !important;
visibility: hidden !important;
}
/* --- 40c. Hero: the banner grid hung 60px out of the dark band ------------
The hero column's widget-wrap carried margin-bottom:-60px, so the second
banner row ran past the section's dark ground into the white below. */
body.dl-v2 .elementor-element-42e79ac9 > .elementor-widget-wrap {
margin-bottom: 0 !important;
}
/* --- 40d. Category tiles: PNG cut-outs filling the tile, one ground -------
The five pastel grounds read as off-brand; the shelf photos sat at 91px
inside 220px tiles. The images are swapped to PNG cut-outs in PHP. */
body.dl-v2 a.categories-list-bg,
body.dl-v2 a.categories-list-bg[data-tint] {
background: #f3f5f8 !important;
border: 1px solid var(--line) !important;
justify-content: space-between !important;
min-height: 250px;
padding: var(--s4) var(--s3) var(--s4) !important;
}
body.dl-v2 a.categories-list-bg:hover {
border-color: var(--green) !important;
}
body.dl-v2 a.categories-list-bg .border-bottom {
border: 0 !important;
width: 100% !important;
height: 170px;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.dl-v2 a.categories-list-bg img {
width: auto !important;
height: 170px !important;
max-width: 100% !important;
max-height: 170px !important;
object-fit: contain !important;
margin: 0 auto !important;
}
body.dl-v2 a.categories-list-bg .text-center > *:first-child {
font: 700 15px var(--text) !important;
color: var(--navy) !important;
}
@media (max-width: 767px) {
body.dl-v2 .categories-list-card .row > * {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
}
body.dl-v2 .categories-list-card .row > *:last-child:nth-child(odd) {
flex-basis: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
body.dl-v2 a.categories-list-bg,
body.dl-v2 a.categories-list-bg[data-tint] {
min-height: 0;
}
body.dl-v2 a.categories-list-bg .border-bottom { height: 120px; }
body.dl-v2 a.categories-list-bg img {
height: 120px !important;
max-height: 120px !important;
}
}
/* --- 40e. Rails: close the gaps New Arrivals -> Best Sellers -> Value ----
Each gap was ~150px: 35px dot well + 17px carousel margin + 10px column
padding + 32px section padding, twice over. */
body.dl-v2 .elementor-section.elementor-top-section.elementor-element-00af00f,
body.dl-v2 .elementor-section.elementor-top-section.elementor-element-ab72c8e {
padding-top: var(--s5) !important;
padding-bottom: 0 !important;
}
body.dl-v2 .elementor-section.elementor-top-section.elementor-element-51cdd965 {
padding-top: var(--s5) !important;
}
body.dl-v2 .elementor-element-00af00f .elementor-widget-wrap,
body.dl-v2 .elementor-element-ab72c8e .elementor-widget-wrap,
body.dl-v2 .elementor-element-51cdd965 > .elementor-container > .elementor-column > .elementor-widget-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.dl-v2 .section-products-carousel {
margin-bottom: 0 !important;
}
body.dl-v2 .products-carousel.owl-carousel {
padding-bottom: 4px !important;
}
/* --- 40f. Carousel arrows rendered as empty boxes -------------------------
Owl outputs .owl-prev/.owl-next with no content, so the 36px buttons on
both rails were blank squares. Draw the chevron in currentColor so the
existing hover (navy ground, white glyph) keeps working. */
body.dl-v2 .owl-prev::before,
body.dl-v2 .owl-next::before {
content: "";
display: block;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M15 4l-8 8 8 8'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M15 4l-8 8 8 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.dl-v2 .owl-next::before {
transform: scaleX(-1);
}
body.dl-v2 .owl-nav button.owl-prev,
body.dl-v2 .owl-nav button.owl-next {
z-index: 3;
box-shadow: 0 4px 12px rgba(20,33,47,.12) !important;
}
/* --- 40g. Hero promo tiles: show the artwork at full width ----------------
A fixed 150px box with object-fit:contain letterboxed every banner (the
artwork is ~4.5:1 so it drew ~125px tall inside a 150px frame) — the
frame read as a border and the art as shrunken. Every tile's natural
height at its column width is 125-126px, so auto height lines them up
without cropping the baked-in text. */
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-image img {
height: auto !important;
aspect-ratio: auto !important;
background: transparent !important;
}
/* Category product shots sit straight on the tile ground. Most of these
PNGs are opaque white-ground shots: multiply drops the white into the
tile colour, but the old drop-shadow traced the image's square edge. */
body.dl-v2 a.categories-list-bg img {
filter: none !important;
mix-blend-mode: multiply !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Trust band -> category tiles carried ~87px of air; match the rail rhythm. */
body.dl-v2 .elementor-section.elementor-top-section.elementor-element-4c8fa73 {
padding-top: var(--s4) !important;
}
/* ==========================================================================
41. OWNER ROUND 25 OCT (2) — Apple-style SQUIRCLE corners, bigger
condition ribbons, a real Tabby instalment chip
Section 40a zeroes every radius first (that killed the old mix of
2/4/6/8/10/22/999px). Here every boxed component gets ONE of three
continuous-curvature radii. corner-shape:squircle is the superellipse
Apple uses; a squircle at radius R looks tighter than a circle at R, so
supporting browsers get larger radii. Others fall back to plain arcs.
========================================================================== */
:root {
--sq-sm: 10px;
--sq-md: 16px;
--sq-lg: 22px;
}
@supports (corner-shape: squircle) {
:root {
--sq-sm: 16px;
--sq-md: 26px;
--sq-lg: 36px;
}
}
/* --- 41a. Controls: buttons, inputs, chips, icon buttons ----------------- */
body.dl-v2 button:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="text"]:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="search"]:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="email"]:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="tel"]:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="number"]:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="password"]:not(#dl-sq):not(#dl-sq),
body.dl-v2 input[type="submit"]:not(#dl-sq):not(#dl-sq),
body.dl-v2 select:not(#dl-sq):not(#dl-sq),
body.dl-v2 textarea:not(#dl-sq):not(#dl-sq),
body.dl-v2 .button:not(#dl-sq):not(#dl-sq),
body.dl-v2 .btn:not(#dl-sq):not(#dl-sq),
body.dl-v2 a.compare:not(#dl-sq):not(#dl-sq),
body.dl-v2 .yith-wcwl-add-to-wishlist-button:not(#dl-sq):not(#dl-sq),
body.dl-v2 .hover-area:not(#dl-sq):not(#dl-sq),
body.dl-v2 .owl-nav button:not(#dl-sq):not(#dl-sq),
body.dl-v2 .owl-prev:not(#dl-sq):not(#dl-sq),
body.dl-v2 .owl-next:not(#dl-sq):not(#dl-sq),
body.dl-v2 .slider-prev:not(#dl-sq):not(#dl-sq),
body.dl-v2 .slider-next:not(#dl-sq):not(#dl-sq),
body.dl-v2 .page-numbers:not(#dl-sq):not(#dl-sq),
body.dl-v2 .variable-item:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-cta--primary:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-cta:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-v2-flag:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-hsearch:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-hsearch input:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-hsearch button:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-trust__mark:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-grade__cta:not(#dl-sq):not(#dl-sq),
body.dl-v2 .input-group-addon:not(#dl-sq):not(#dl-sq),
body.dl-v2 .shop-control-bar:not(#dl-sq):not(#dl-sq),
body.dl-v2 .qty:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-sticky-add-btn:not(#dl-sq):not(#dl-sq),
body.dl-v2 .single_add_to_cart_button:not(#dl-sq):not(#dl-sq),
body.dl-v2 img.attachment-shop_thumbnail:not(#dl-sq):not(#dl-sq),
body.dl-v2 a.fab:not(#dl-sq):not(#dl-sq),
body.dl-v2 a.fas:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dropdown-menu:not(#dl-sq):not(#dl-sq),
body.dl-v2 .yamm .dropdown-menu:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-hero-chip:not(#dl-sq):not(#dl-sq),
body.dl-v2 .wpforms-field-large:not(#dl-sq):not(#dl-sq),
body.dl-v2 .wpforms-submit:not(#dl-sq):not(#dl-sq),
body.dl-v2 .woocommerce-message:not(#dl-sq):not(#dl-sq),
body.dl-v2 .woocommerce-info:not(#dl-sq):not(#dl-sq),
body.dl-v2 .woocommerce-error:not(#dl-sq):not(#dl-sq),
body.dl-v2 .product-thumbnail:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-split:not(#dl-sq):not(#dl-sq) {
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
}
/* --- 41b. Cards, tiles, banners, panels ---------------------------------- */
body.dl-v2 .product-inner:not(#dl-sq):not(#dl-sq),
body.dl-v2 .product-thumbnail img:not(#dl-sq):not(#dl-sq),
body.dl-v2 a.categories-list-bg:not(#dl-sq):not(#dl-sq),
body.dl-v2 .elementor-widget-image img:not(#dl-sq):not(#dl-sq),
body.dl-v2 .elementor-widget-image a:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-trust-item:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-grade:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-grade__badge:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-whats-included:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-pay:not(#dl-sq):not(#dl-sq),
body.dl-v2 .widget_product_categories ul.product-categories:not(#dl-sq):not(#dl-sq),
body.dl-v2 ul.product-categories:not(#dl-sq):not(#dl-sq),
body.dl-v2 .wp-post-image:not(#dl-sq):not(#dl-sq),
body.dl-v2 .woocommerce-product-gallery:not(#dl-sq):not(#dl-sq),
body.dl-v2 .woocommerce-product-gallery__image:not(#dl-sq):not(#dl-sq),
body.dl-v2 .woocommerce-Tabs-panel:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-ls-panel:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-hsearch__panel:not(#dl-sq):not(#dl-sq),
body.dl-v2 .elementor-section.elementor-top-section:first-of-type .elementor-widget-container:not(#dl-sq):not(#dl-sq),
body.dl-v2 .sidebar .widget img:not(#dl-sq):not(#dl-sq) {
border-radius: var(--sq-md) !important;
corner-shape: squircle;
}
/* --- 41c. Large contained bands ------------------------------------------ */
body.dl-v2 .dl-grades:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-grades__in:not(#dl-sq):not(#dl-sq) {
border-radius: var(--sq-lg) !important;
corner-shape: squircle;
}
/* Clip media to the curve so photos and banners follow the corner. */
body.dl-v2 .product-inner,
body.dl-v2 a.categories-list-bg,
body.dl-v2 .elementor-widget-image a,
body.dl-v2 .dl-grade {
overflow: hidden;
}
/* --- 41d. Condition ribbons (New / Original / Renewed / Refurbished) -----
58px on a card made the ribbon text ~6px tall — unreadable. Source PNGs
are 500px, so scaling up stays sharp. */
body.dl-v2 .product.type-product img.dl-condition-ribbon:not(#dl-sq) {
width: 84px !important;
max-width: 84px !important;
}
body.dl-v2 .product-images-wrapper .dl-condition-ribbon:not(#dl-sq) {
width: 132px !important;
max-width: 132px !important;
}
body.dl-v2 .dl-grade__badge:not(#dl-sq):not(#dl-sq) {
width: 96px !important;
height: 96px !important;
}
@media (max-width: 767px) {
body.dl-v2 .product.type-product img.dl-condition-ribbon:not(#dl-sq) {
width: 66px !important;
max-width: 66px !important;
}
body.dl-v2 .product-images-wrapper .dl-condition-ribbon:not(#dl-sq) {
width: 108px !important;
max-width: 108px !important;
}
}
/* --- 41e. Tabby instalment chip -------------------------------------------
Was a line of green 12px text ("or 4 payments of AED … with Tabby") that
read as small print. Now a chip: Tabby's mint mark + the per-instalment
amount as the hero number + "interest-free". Markup built in the plugin. */
body.dl-v2 .dl-split {
display: inline-flex !important;
align-items: center;
flex-wrap: wrap;
gap: 4px 6px;
margin-top: 8px !important;
padding: 5px 9px 5px 5px;
background: #f1fbf7;
border: 1px solid #cdeee1;
color: var(--navy) !important;
font: 500 12px/1.3 var(--text) !important;
max-width: 100%;
}
body.dl-v2 .dl-split__mark {
display: inline-block;
padding: 2px 7px 3px;
background: #3effc1;
color: #000 !important;
font: 800 11.5px/1.1 var(--text) !important;
letter-spacing: -.02em;
border-radius: 6px !important;
corner-shape: squircle;
}
body.dl-v2 .dl-split__amt {
white-space: nowrap;
}
body.dl-v2 .dl-split__amt strong {
font-weight: 800;
color: var(--ink);
}
body.dl-v2 .dl-split__note {
color: #4a6b5d;
font-size: 11px;
white-space: nowrap;
}
body.dl-v2 .dl-sticky-price .dl-split {
margin: 0 0 0 8px !important;
vertical-align: middle;
}
@media (max-width: 767px) {
body.dl-v2 .dl-split { font-size: 11.5px !important; padding: 4px 7px 4px 4px; }
body.dl-v2 .dl-split__note { display: none; }
}
/* Cards: the one-line chip wrapped differently per price ("AED 1,037.25"
broke onto a second line, "AED 499.75" did not), so buy buttons sat at
different heights across a rail. Fixed two-row layout instead:
[tabby] interest-free / 4 × AED amount — identical height in every card. */
body.dl-v2 .dl-split:not(#dl-sq) {
display: grid !important;
grid-template-columns: auto 1fr;
grid-template-areas: "mark note" "amt amt";
align-items: center;
gap: 4px 6px;
width: 100%;
padding: 6px 8px;
}
body.dl-v2 .dl-split__mark { grid-area: mark; justify-self: start; }
body.dl-v2 .dl-split__note { grid-area: note; display: inline !important; }
body.dl-v2 .dl-split__amt { grid-area: amt; font-size: 12.5px; }
@media (max-width: 767px) {
body.dl-v2 .dl-split__amt { font-size: 12px; }
}
/* PDP: Tabby's own promo widget (#tabbyPromo) already states the plan right
under the price — a second, differently-worded figure beside the price
contradicted it. Keep ours only where Tabby's widget is absent. */
body.dl-v2 .summary:has(#tabbyPromo) .price .dl-split,
body.dl-v2 .entry-summary:has(#tabbyPromo) .price .dl-split {
display: none !important;
}
body.dl-v2 .dl-sticky-price .dl-split:not(#dl-sq) {
display: inline-flex !important;
width: auto;
}
body.dl-v2 #tabbyPromo:not(#dl-sq) > * {
border-radius: var(--sq-md) !important;
corner-shape: squircle;
}
/* --- 41f. Review fixes found with Playwright ----------------------------- */
/* PDP colour swatches printed "AED 3,599" inside a 30px chip, covering the
colour itself. Colour never changes the price here; show the colour. */
body.dl-v2 .color-variable-item .dl-swatch-price {
display: none !important;
}
body.dl-v2 .color-variable-item:not(#dl-sq):not(#dl-sq) {
width: 36px !important;
height: 36px !important;
padding: 3px !important;
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
}
body.dl-v2 .color-variable-item .variable-item-contents,
body.dl-v2 .color-variable-item .variable-item-span-color:not(#dl-sq):not(#dl-sq) {
width: 100% !important;
height: 100% !important;
border-radius: calc(var(--sq-sm) - 3px) !important;
corner-shape: squircle;
}
/* Breadcrumb: two of three crumbs sat in grey boxes, "Home" did not. */
body.dl-v2 .woocommerce-breadcrumb a:not(#dl-sq) {
background: none !important;
padding: 0 !important;
color: var(--navy) !important;
}
body.dl-v2 .woocommerce-breadcrumb a:hover {
color: var(--green-dark) !important;
text-decoration: underline;
}
/* Shop: "Recommended Products" rendered its heading and arrows over an
empty carousel (0 products). Hide any product rail with nothing in it. */
body.dl-v2 .section-products-carousel:not(:has(.product)) {
display: none !important;
}
body.dl-v2 .dl-split__mark:not(#dl-sq):not(#dl-sq) {
border-radius: 6px !important;
corner-shape: squircle;
}
/* Phone cards are ~100px wide inside: "interest-free" ran out of the chip. */
@media (max-width: 767px) {
body.dl-v2 .dl-split__note:not(#dl-sq) { display: none !important; }
body.dl-v2 .dl-split:not(#dl-sq) { grid-template-areas: "mark mark" "amt amt"; padding: 5px 6px; }
}
/* Variant chips: the per-option price was ~8px. */
body.dl-v2 .variable-item .dl-swatch-price {
font-size: 10px !important;
line-height: 1.15 !important;
}
/* --- 41g. Phone menu button was invisible ---------------------------------
The handheld header's .navbar-toggle-hamburger icon (font-electro ec-menu)
inherited white from the old green header, on today's white masthead — so
phones had no visible way into the categories. (Found by the competitor
review's adversarial verifier, confirmed with Playwright.) */
body.dl-v2 .navbar-toggle-hamburger i:not(#dl-sq):not(#dl-sq),
body.dl-v2 .navbar-toggle-close i:not(#dl-sq):not(#dl-sq) {
color: var(--navy) !important;
font-size: 24px !important;
}
body.dl-v2 .navbar-toggle-hamburger:not(#dl-sq):not(#dl-sq) {
min-width: 44px;
min-height: 44px;
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
}
/* Its sibling close (×) button was always rendered too — invisible only
because it was also white. Show it only while the menu is open. */
body.dl-v2:not(.off-canvas-active) .navbar-toggle-close:not(#dl-sq):not(#dl-sq) {
display: none !important;
}
/* Phone menu rows rendered centred (icon + label floating mid-row, chevron
at the edge). Rows in a list read left-aligned. */
body.dl-v2 .off-canvas-navigation li > a:not(#dl-sq):not(#dl-sq) {
justify-content: flex-start !important;
text-align: left !important;
}
/* --- 41h. "Know what you're getting": the condition tile was a 96px box
holding a 46px ribbon over an EMPTY outline — the smallest thing in a big
card, on the section whose whole job is to sell the grades. Now a
full-width product tile: a real device + the ribbon at listing size, i.e.
exactly what a listing of that grade looks like. */
body.dl-v2 .dl-grade__badge:not(#dl-sq):not(#dl-sq) {
display: block;
width: 100% !important;
height: 190px !important;
margin-bottom: var(--s4);
background: #f3f5f8;
border: 1px solid var(--line);
border-radius: var(--sq-md) !important;
corner-shape: squircle;
overflow: hidden;
}
body.dl-v2 .dl-grade__badge::after {
content: none !important;
}
body.dl-v2 .dl-grade__badge img.dl-grade__device {
position: absolute;
inset: 8px;
width: calc(100% - 16px);
height: calc(100% - 16px);
object-fit: contain;
object-position: center;
mix-blend-mode: multiply;
transition: transform .25s ease;
}
body.dl-v2 .dl-grade__badge img.dl-grade__ribbon {
position: absolute;
top: 0;
left: 0;
width: 104px !important;
height: 104px !important;
object-fit: contain;
object-position: top left;
z-index: 2;
}
body.dl-v2 .dl-grade:hover .dl-grade__device {
transform: scale(1.04);
}
body.dl-v2 .dl-grade h3 {
font-size: 19px !important;
}
@media (max-width: 767px) {
body.dl-v2 .dl-grade__badge:not(#dl-sq):not(#dl-sq) { height: 200px !important; }
body.dl-v2 .dl-grade__badge img.dl-grade__ribbon { width: 96px !important; height: 96px !important; }
}
/* --- 41i. Condition as a chip above the title, never on the photo ---------
Owner, 25 Oct: product photos stay clean; New / Original / Renewed /
Refurbished reads first, above the title. The plugin script prints the
chip from the ribbon's alt; the ribbon PNG is hidden everywhere. */
body.dl-v2 img.dl-condition-ribbon:not(#dl-sq):not(#dl-sq) {
display: none !important;
}
body.dl-v2 .dl-cond:not(#dl-sq):not(#dl-sq) {
display: inline-flex;
align-items: center;
gap: 6px;
width: max-content;
margin: 0 0 8px;
padding: 4px 10px 4px 8px;
font: 700 11.5px/1.2 var(--text) !important;
letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid currentColor;
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
}
body.dl-v2 .dl-cond:not(#dl-sq):not(#dl-sq)::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50% !important;
background: currentColor;
flex: 0 0 7px;
}
body.dl-v2 .dl-cond--new { color: #c42222 !important; background: #fdeeee; }
body.dl-v2 .dl-cond--original { color: #9a6b00 !important; background: #fdf5e2; }
body.dl-v2 .dl-cond--renewed { color: #17713a !important; background: #e9f7ee; }
body.dl-v2 .dl-cond--refurbished { color: #1d4fb8 !important; background: #ebf1fd; }
/* The chip sits in the card's title link; keep it on its own line. */
body.dl-v2 .woocommerce-LoopProduct-link .dl-cond { display: flex; }
/* Product page: a touch larger above the H1. */
body.dl-v2 .summary .dl-cond:not(#dl-sq):not(#dl-sq),
body.dl-v2 .entry-summary .dl-cond:not(#dl-sq):not(#dl-sq) {
font-size: 13px !important;
padding: 5px 12px 5px 10px;
margin-bottom: 10px;
}
/* Grades section: chip above the grade name, same as the cards. */
body.dl-v2 .dl-grade .dl-cond { margin-bottom: 10px; }
/* --- 41j. Wishlist and Compare removed (owner, 25 Oct) -------------------- */
body.dl-v2 .yith-add-to-wishlist-button-block,
body.dl-v2 .yith-wcwl-add-to-wishlist,
body.dl-v2 .yith-wcwl-add-to-wishlist-button,
body.dl-v2 a.add-to-compare-link,
body.dl-v2 a.compare,
body.dl-v2 .product .action-buttons,
body.dl-v2 .product-item__inner .hover-area,
body.dl-v2 #masthead .header-icon:has(a[href*="wishlist"]),
body.dl-v2 #masthead .header-icon:has(a[href*="woocompare"]),
body.dl-v2 .handheld-header .header-icon:has(a[href*="wishlist"]),
body.dl-v2 .handheld-header .header-icon:has(a[href*="woocompare"]) {
display: none !important;
}
/* --- 41k. Equal cards in every row -----------------------------------------
Measured: in the Best Sellers / Value rows a card with no condition chip
(the AED 35 charger) started its image 34px higher, and a card with no
Tabby chip (price outside AED 100-5,000) ended 93px shorter — so images,
prices and buttons stepped up and down along the row. The missing condition
line is reserved by the script (.dl-cond--blank); here every card in a row
takes the row's height and the buy button is pinned to the bottom. */
body.dl-v2 .dl-cond--blank:not(#dl-sq):not(#dl-sq) {
visibility: hidden;
}
body.dl-v2 .owl-carousel .owl-stage {
display: flex !important;
}
body.dl-v2 .owl-carousel .owl-item {
display: flex;
float: none;
}
body.dl-v2 .owl-carousel .owl-item > .product.type-product {
display: flex !important;
flex-direction: column;
height: auto;
width: 100%;
}
body.dl-v2 .products > li.product.type-product {
display: flex !important;
flex-direction: column;
}
body.dl-v2 .product.type-product .product-outer {
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: auto !important;
}
body.dl-v2 .product.type-product .product-inner {
flex: 1 1 auto;
display: flex !important;
flex-direction: column;
}
body.dl-v2 .product.type-product .product-loop-footer {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
body.dl-v2 .product.type-product .price-add-to-cart {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
justify-content: flex-start !important;
}
body.dl-v2 .product.type-product .product-loop-footer {
justify-content: flex-start !important;
}
body.dl-v2 .product.type-product .add-to-cart-wrap {
margin-top: auto !important;
padding-top: 12px;
}
/* Titles: always two lines high, so a one-line name does not pull its
image up. */
body.dl-v2 .product.type-product .woocommerce-loop-product__title {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4 !important;
min-height: 2.8em;
}
/* Earlier rules pinned the whole footer to the bottom (margin-top:auto,
flex:none), which dropped the PRICE of a chip-less card 59px below its
neighbours. Price stays under the image; only the button sinks. */
body.dl-v2 .product.type-product .product-loop-footer:not(#dl-sq):not(#dl-sq) {
margin-top: 0 !important;
flex: 1 1 auto !important;
}
body.dl-v2 .product.type-product .add-to-cart-wrap:not(#dl-sq):not(#dl-sq) {
margin-top: auto !important;
}
body.dl-v2 .product.type-product .price-add-to-cart:not(#dl-sq):not(#dl-sq) {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
/* ==========================================================================
42. OWNER ROUND 25 OCT (4) — use the screen width, bigger product photos,
bigger hero promises, an even "Pay your way" strip, a readable top bar
========================================================================== */
/* --- 42a. One content width everywhere ------------------------------------
Measured at 1440px: top bar/header/footer 1200, hero 1280, pay strip /
trust / grades 1170, category row 1092, product rails 1102 — five
different widths and 120-175px of empty margin per side. Now one width:
the screen minus a 32px gutter, capped at 1560px for very wide screens. */
:root { --dl-max: min(1560px, calc(100vw - 64px)); }
body.dl-v2 .container:not(#dl-sq),
body.dl-v2 .elementor-section.elementor-section-boxed > .elementor-container:not(#dl-sq),
body.dl-v2 .elementor-top-section > .elementor-container:not(#dl-sq),
body.dl-v2 .dl-pay__in:not(#dl-sq),
body.dl-v2 .dl-trust__in:not(#dl-sq),
body.dl-v2 .dl-wrap:not(#dl-sq) {
max-width: var(--dl-max) !important;
width: 100% !important;
}
body.dl-v2 .dl-pay:not(#dl-sq),
body.dl-v2 .dl-trust:not(#dl-sq),
body.dl-v2 .dl-grades:not(#dl-sq),
body.dl-v2 .categories-list-card:not(#dl-sq),
body.dl-v2 .section-products-carousel:not(#dl-sq) {
max-width: none !important;
width: 100% !important;
}
@media (max-width: 767px) {
:root { --dl-max: calc(100vw - 24px); }
}
/* --- 42b. Product photos: bigger, premium --------------------------------
Card images were 119-124px tall (98px on the shop grid) inside cards up
to 260px wide. Fixed photo stage, image fills it without cropping. */
body.dl-v2 .product.type-product .product-thumbnail:not(#dl-sq):not(#dl-sq) {
height: 220px !important;
display: flex !important;
align-items: center;
justify-content: center;
margin: 4px 0 16px !important;
padding: 0 !important;
overflow: hidden;
}
body.dl-v2 .product.type-product .product-thumbnail img:not(.dl-condition-ribbon):not(#dl-sq):not(#dl-sq) {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
padding: 0 !important;
transition: transform .3s ease;
}
body.dl-v2 .product.type-product:hover .product-thumbnail img:not(.dl-condition-ribbon) {
transform: scale(1.04);
}
@media (max-width: 767px) {
body.dl-v2 .product.type-product .product-thumbnail:not(#dl-sq):not(#dl-sq) { height: 150px !important; }
}
/* Card rhythm: one vertical scale inside every card. */
body.dl-v2 .product.type-product .product-inner:not(#dl-sq):not(#dl-sq) {
padding: 18px 18px 18px !important;
}
body.dl-v2 .product.type-product .woocommerce-loop-product__title:not(#dl-sq) {
font-size: 15px !important;
line-height: 1.45 !important;
min-height: 2.9em;
margin: 0 0 10px !important;
}
body.dl-v2 .product.type-product .price:not(#dl-sq) {
font-size: 19px !important;
line-height: 1.3 !important;
margin: 0 0 8px !important;
}
/* --- 42c. Hero promises: real buttons, not 12px captions ------------------ */
body.dl-v2 .dl-hero-chips:not(#dl-sq) {
gap: 10px !important;
}
body.dl-v2 .dl-hero-chips > span:not(#dl-sq):not(#dl-sq) {
font: 600 15px var(--text) !important;
padding: 9px 16px 9px 12px !important;
gap: 9px !important;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
}
body.dl-v2 .dl-hero-chips > span:first-child:not(#dl-sq):not(#dl-sq) {
border-color: rgba(55,193,45,.6);
background: rgba(55,193,45,.14);
}
/* Labels nested inside a chip are text, not chips. */
body.dl-v2 .dl-hero-chips > span span:not(#dl-sq):not(#dl-sq) {
border: 0 !important;
background: none !important;
padding: 0 !important;
font: inherit !important;
}
body.dl-v2 .dl-hero-chips .dl-ico:not(#dl-sq) {
width: 20px !important;
height: 20px !important;
flex: 0 0 20px !important;
}
@media (max-width: 767px) {
body.dl-v2 .dl-hero-chips > span:not(#dl-sq):not(#dl-sq) { font-size: 13.5px !important; padding: 7px 12px 7px 10px !important; }
}
/* --- 42d. "Pay your way": spread across the full width --------------------
The four methods packed to the left with empty space on the right. Lead +
four equal columns now fill the strip edge to edge. */
body.dl-v2 .dl-pay__in:not(#dl-sq) {
display: grid !important;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--s6);
padding-top: 4px;
padding-bottom: 4px;
}
body.dl-v2 .dl-pay__list:not(#dl-sq) {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s4) !important;
}
body.dl-v2 .dl-pay__list li:not(#dl-sq) {
justify-content: center;
gap: 12px !important;
}
body.dl-v2 .dl-pay__lead:not(#dl-sq) {
font-size: 18px !important;
}
body.dl-v2 .dl-pay__list .dl-ico:not(#dl-sq) {
width: 26px !important;
height: 26px !important;
flex: 0 0 26px;
}
body.dl-v2 .dl-pay__list strong:not(#dl-sq) {
font-size: 15px !important;
}
body.dl-v2 .dl-pay__list em:not(#dl-sq) {
font-size: 13px !important;
}
@media (max-width: 991px) {
body.dl-v2 .dl-pay__in:not(#dl-sq) { grid-template-columns: 1fr; gap: var(--s3); }
body.dl-v2 .dl-pay__list:not(#dl-sq) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.dl-v2 .dl-pay__list li:not(#dl-sq) { justify-content: flex-start; }
}
/* --- 42e. Navy top bar: readable text ------------------------------------- */
body.dl-v2 .top-bar:not(#dl-sq) {
padding: 4px 0 !important;
}
body.dl-v2 .top-bar:not(#dl-sq) a,
body.dl-v2 .top-bar:not(#dl-sq) li,
body.dl-v2 .top-bar:not(#dl-sq) span,
body.dl-v2 .top-bar:not(#dl-sq) p {
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: .01em;
}
body.dl-v2 .top-bar:not(#dl-sq) i,
body.dl-v2 .top-bar:not(#dl-sq) svg {
font-size: 16px !important;
}
/* Phones: two cards side by side leave ~120px of content width. The desktop
padding/price size wrapped "AED 11699" onto two lines and clipped the
buttons in the hero's Hot Products box. */
@media (max-width: 767px) {
body.dl-v2 .product.type-product .product-inner:not(#dl-sq):not(#dl-sq) { padding: 12px 10px !important; }
body.dl-v2 .product.type-product .price:not(#dl-sq) { font-size: 16px !important; white-space: nowrap; }
body.dl-v2 .product.type-product .woocommerce-loop-product__title:not(#dl-sq) { font-size: 14px !important; }
body.dl-v2 .product.type-product .dl-cond:not(#dl-sq):not(#dl-sq) { font-size: 10px !important; padding: 3px 7px 3px 6px; letter-spacing: .02em; }
body.dl-v2 .product.type-product .dl-split__amt { font-size: 11px !important; white-space: nowrap; }
body.dl-v2 .product.type-product .add-to-cart-wrap .button:not(#dl-sq):not(#dl-sq) { font-size: 13px !important; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap; }
}
/* ==========================================================================
43. OWNER ROUND 25 OCT (5) — full width, bigger logo, one clean search bar
========================================================================== */
/* --- 43a. Full width: 16px gutter, no cap -------------------------------- */
:root { --dl-max: calc(100vw - 32px); }
body.dl-v2 .elementor-section.elementor-section-boxed > .elementor-container:not(#dl-sq),
body.dl-v2 .elementor-top-section > .elementor-container:not(#dl-sq),
body.dl-v2 .dl-pay__in:not(#dl-sq),
body.dl-v2 .dl-trust__in:not(#dl-sq),
body.dl-v2 .dl-wrap:not(#dl-sq) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The pay strip is a tinted box; keep its own inner breathing room. */
body.dl-v2 .dl-pay__in:not(#dl-sq) {
padding-left: 24px !important;
padding-right: 24px !important;
}
@media (max-width: 767px) {
:root { --dl-max: calc(100vw - 24px); }
body.dl-v2 .dl-pay__in:not(#dl-sq) { padding-left: 16px !important; padding-right: 16px !important; }
}
/* --- 43b. Logo: bigger ---------------------------------------------------- */
body.dl-v2 #masthead .custom-logo:not(#dl-sq):not(#dl-sq) {
height: 150px !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
}
body.dl-v2 #masthead .masthead.row:not(#dl-sq) {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
@media (max-width: 1199px) {
body.dl-v2 #masthead .custom-logo:not(#dl-sq):not(#dl-sq) { height: 120px !important; }
}
@media (max-width: 991px) {
body.dl-v2 .handheld-header-v2 .custom-logo:not(#dl-sq):not(#dl-sq),
body.dl-v2 #masthead .custom-logo:not(#dl-sq):not(#dl-sq) { height: 112px !important; }
}
/* --- 43c. Search: one box, one ring, wide ---------------------------------
Desktop: a 420px box adrift in a 1376px header, a focus ring drawn twice
(form AND input), the placeholder cut at "mor". Phone: the input and the
grey button were two separate boxes with different borders, and the focus
ring wrapped only the input. Now: one squircle field with the green button
inside it, a single ring on :focus-within, full placeholder. */
body.dl-v2 #masthead .dl-hsearch:not(.dl-hsearch--m):not(#dl-sq) {
flex: 1 1 auto;
max-width: 760px !important;
width: 100% !important;
margin: 0 40px !important;
}
body.dl-v2 .dl-hsearch:not(#dl-sq):not(#dl-sq) {
display: flex !important;
align-items: center;
height: 54px !important;
padding: 4px !important;
background: #f5f7fa !important;
border: 1.5px solid var(--line-2) !important;
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
box-shadow: none !important;
outline: none !important;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.dl-v2 .dl-hsearch:focus-within:not(#dl-sq):not(#dl-sq) {
background: #fff !important;
border-color: var(--green) !important;
box-shadow: 0 0 0 4px rgba(55,193,45,.16) !important;
}
body.dl-v2 .dl-hsearch input:not(#dl-sq):not(#dl-sq) {
flex: 1 1 auto;
min-width: 0;
height: 100% !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
padding: 0 14px !important;
font: 500 16px var(--text) !important;
color: var(--ink) !important;
text-overflow: ellipsis;
}
body.dl-v2 .dl-hsearch input::placeholder {
color: #6b7a8c !important;
opacity: 1;
}
body.dl-v2 .dl-hsearch input::-webkit-search-cancel-button {
filter: grayscale(1) brightness(.5);
cursor: pointer;
}
body.dl-v2 .dl-hsearch button:not(#dl-sq):not(#dl-sq) {
flex: 0 0 auto;
height: 100% !important;
min-width: 52px;
padding: 0 18px !important;
border: 0 !important;
background: var(--green) !important;
color: var(--ink) !important;
border-radius: calc(var(--sq-sm) - 4px) !important;
corner-shape: squircle;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
body.dl-v2 .dl-hsearch button:hover {
background: var(--green-dark) !important;
}
body.dl-v2 .dl-hsearch button svg,
body.dl-v2 .dl-hsearch button i {
width: 20px;
height: 20px;
font-size: 18px;
}
/* Phone: the bar sits under the header row, full width. */
body.dl-v2 .dl-msearch:not(#dl-sq) {
padding: 10px 12px 12px !important;
border-bottom: 1px solid var(--line);
}
body.dl-v2 .dl-hsearch--m:not(#dl-sq):not(#dl-sq) {
width: 100% !important;
margin: 0 !important;
height: 50px !important;
}
/* The header's own magnifier opened a second, unstyled theme search
("Search products…") above the bar that is already there. */
@media (max-width: 991px) {
body.dl-v2 .handheld-header-v2 .site-search,
body.dl-v2 .handheld-header-v2 .handheld-header-links .search,
body.dl-v2 .handheld-header-v2 [class*="search"]:not(.dl-hsearch):not(.dl-msearch):not(input):not(form) {
display: none !important;
}
}
/* Suggestions panel matches the field. */
body.dl-v2 .dl-sug:not(#dl-sq):not(#dl-sq) {
margin-top: 8px;
border: 1px solid var(--line) !important;
box-shadow: 0 18px 40px rgba(20,33,47,.14) !important;
overflow: hidden;
}
/* ==========================================================================
44. OWNER ROUND 25 OCT (6) — breathing room at the sides, vector logo
========================================================================== */
/* --- 44a. Wide, not edge-to-edge: 5% of the screen each side ------------- */
:root { --dl-max: 90vw; }
@media (max-width: 767px) {
:root { --dl-max: calc(100vw - 24px); }
}
/* --- 44b. Logo: the SVG lockup, explicit box so it can never stretch ------
The old rule swapped in a PNG with content:url() inside an ![]()
whose
width/height attributes belonged to a different file (1112x1036), so the
art was squeezed. The SVG is cropped to its drawn area (980x600). */
body.dl-v2 #masthead img.custom-logo:not(#dl-sq):not(#dl-sq),
body.dl-v2 #masthead .header-logo img:not(#dl-sq):not(#dl-sq) {
content: url("/wp-content/mu-plugins/dl-logo.svg") !important;
height: 120px !important;
width: 196px !important;
max-height: none !important;
max-width: none !important;
object-fit: contain !important;
aspect-ratio: 980 / 600 !important;
}
body.dl-v2 .dl-oc__brand img:not(#dl-sq):not(#dl-sq) {
height: 56px !important;
width: auto !important;
max-height: none !important;
object-fit: contain !important;
}
@media (max-width: 1199px) {
body.dl-v2 #masthead img.custom-logo:not(#dl-sq):not(#dl-sq),
body.dl-v2 #masthead .header-logo img:not(#dl-sq):not(#dl-sq) { height: 100px !important; width: 163px !important; }
}
@media (max-width: 991px) {
body.dl-v2 #masthead img.custom-logo:not(#dl-sq):not(#dl-sq),
body.dl-v2 #masthead .header-logo img:not(#dl-sq):not(#dl-sq),
body.dl-v2 .handheld-header-v2 img.custom-logo:not(#dl-sq):not(#dl-sq) { height: 72px !important; width: 118px !important; }
}
/* --- 44c. One edge for every section --------------------------------------
Measured at 1440: header 72px, pay strip/trust/grades 87px, product rails
97px, category tiles 102px from the edge — the content-area's 15px plus
each Elementor column's own 10-15px padding stacked differently per
section. Strip both so every block starts on the header's edge. */
body.dl-v2.home .site-content .content-area:not(#dl-sq) {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.dl-v2 .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap:not(#dl-sq):not(#dl-sq) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Phone header logo uses the same vector file. */
body.dl-v2 .handheld-header-v2 img.custom-logo:not(#dl-sq):not(#dl-sq),
body.dl-v2 .handheld-header img.custom-logo:not(#dl-sq):not(#dl-sq) {
content: url("/wp-content/mu-plugins/dl-logo.svg") !important;
object-fit: contain !important;
}
/* ==========================================================================
45. FABLE REVIEW FIXES (25 Oct) — items owned by this file
========================================================================== */
/* H1 — sticky buy bar: only after the shopper scrolls past the price and the
real Add to Cart is off screen (script sets body.dl-sticky-on). */
body.dl-v2:not(.dl-sticky-on) .dl-sticky-bar.dl-visible:not(#dl-sq) {
transform: translateY(-110%) !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* H2 — belt and braces: never show a Tabby chip inside the bar. */
body.dl-v2 .dl-sticky-price .dl-split { display: none !important; }
/* H3 — product gallery: one fixed stage, so a tall second image no longer
grows the gallery 349 -> 1424px and shoves the page down. */
body.dl-v2 .woocommerce-product-gallery .flex-viewport:not(#dl-sq) {
height: auto !important;
}
body.dl-v2 .woocommerce-product-gallery__image:not(#dl-sq):not(#dl-sq) {
aspect-ratio: 4 / 3;
display: flex !important;
align-items: center;
justify-content: center;
background: #fff;
}
body.dl-v2 .woocommerce-product-gallery__image a,
body.dl-v2 .woocommerce-product-gallery__image img:not(#dl-sq):not(#dl-sq) {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
body.dl-v2 .electro-wc-product-gallery__image:not(#dl-sq):not(#dl-sq),
body.dl-v2 .flex-control-thumbs li:not(#dl-sq):not(#dl-sq) {
aspect-ratio: 1 / 1;
height: auto !important;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
background: #fff;
}
body.dl-v2 .electro-wc-product-gallery__image img:not(#dl-sq):not(#dl-sq),
body.dl-v2 .flex-control-thumbs img:not(#dl-sq):not(#dl-sq) {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* M2 — one set of carousel arrows. The overlay pair sat on the product
photos and moved one card without updating the dots; the heading pair
pages properly — make that pair real 44px buttons. */
body.dl-v2 .products-carousel .owl-nav:not(#dl-sq) {
display: none !important;
}
body.dl-v2 .section-products-carousel header .owl-nav:not(#dl-sq) {
display: flex !important;
gap: 8px;
}
body.dl-v2 .section-products-carousel header .slider-prev:not(#dl-sq):not(#dl-sq),
body.dl-v2 .section-products-carousel header .slider-next:not(#dl-sq):not(#dl-sq) {
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 1px solid var(--line-2) !important;
background: #fff !important;
color: var(--navy) !important;
font-size: 18px !important;
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
transition: background-color .15s ease, color .15s ease;
}
body.dl-v2 .section-products-carousel header .slider-prev:hover,
body.dl-v2 .section-products-carousel header .slider-next:hover {
background: var(--navy) !important;
color: #fff !important;
}
/* M7 — nothing under ~11.5px on the product page; real tap sizes. */
body.dl-v2 .variable-item:not(.color-variable-item):not(#dl-sq):not(#dl-sq) { min-height: 40px !important; }
body.dl-v2 .variable-item .dl-swatch-price:not(#dl-sq) { font-size: 11.5px !important; }
body.dl-v2 .dl-trust-item:not(#dl-sq), body.dl-v2 .dl-trust-item *:not(svg):not(#dl-sq) { font-size: 12.5px !important; }
body.dl-v2 .summary .loop-product-categories a:not(#dl-sq) { font-size: 12px !important; color: #4f6275 !important; }
body.dl-v2 .quantity input.qty:not(#dl-sq) { font-size: 16px !important; }
@media (max-width: 767px) {
body.dl-v2 .product.type-product .dl-cond:not(#dl-sq):not(#dl-sq) { font-size: 11px !important; }
body.dl-v2 .product.type-product .dl-split__amt { font-size: 11.5px !important; }
}
/* L1 — Original chip to AA. */
body.dl-v2 .dl-cond--original { color: #7d5600 !important; }
/* M15 — tablet: the Tabby note overflowed 20px past the chip in the hero's
Hot Products cards; drop the note below 992px, as on phones. */
@media (max-width: 991px) {
body.dl-v2 .dl-split__note:not(#dl-sq) { display: none !important; }
body.dl-v2 .dl-split:not(#dl-sq) { grid-template-areas: "mark mark" "amt amt"; overflow: hidden; }
body.dl-v2 .product.type-product .add-to-cart-wrap .button:not(#dl-sq):not(#dl-sq) { font-size: 13px !important; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap; }
}
/* M13 — phone search suggestions: attached to the field, same width. */
body.dl-v2 .dl-hsearch:not(#dl-sq) { position: relative; }
body.dl-v2 .dl-hsearch--m .dl-sug:not(#dl-sq):not(#dl-sq) {
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
border-radius: var(--sq-md) !important;
corner-shape: squircle;
}
/* M14 — phone: 121px hole under the category tiles. */
body.dl-v2 .categories-list-card .row:not(#dl-sq):not(#dl-sq) { margin-bottom: 0 !important; }
/* M12 — footer leftovers from the theme demo. */
body.dl-v2 .site-footer a[href*="themeforest"],
body.dl-v2 .site-footer a.fa-rss,
body.dl-v2 .site-footer a[href*="/wishlist"],
body.dl-v2 .site-footer a[href*="woocompare"],
body.dl-v2 .site-footer li:has(> a[href*="/wishlist"]),
body.dl-v2 .site-footer li:has(> a[href*="woocompare"]) {
display: none !important;
}
@media (min-width: 992px) { body.dl-v2 .site-footer .fa-whatsapp.mobile { display: none !important; } }
@media (max-width: 991px) { body.dl-v2 .site-footer .fa-whatsapp.desktop { display: none !important; } }
/* Gallery thumbnails: the theme paints the ACTIVE thumb's inline green
(a green bar through the photo once the thumb became a fixed square) and
gives the image a 2px green underline. Mark the active thumb by its frame. */
body.dl-v2 .electro-wc-product-gallery__image a:not(#dl-sq):not(#dl-sq) {
background: none !important;
display: block !important;
width: 100%;
height: 100%;
}
body.dl-v2 .electro-wc-product-gallery__image img:not(#dl-sq):not(#dl-sq) {
border: 0 !important;
}
body.dl-v2 .electro-wc-product-gallery__image.flex-active-slide:not(#dl-sq):not(#dl-sq) {
border: 2px solid var(--green) !important;
}
/* Top strip: Store Locator removed (owner, 25 Oct) — Track Your Order,
Shop, My Account only. The first remaining item loses its divider. */
body.dl-v2 #menu-top-bar-right > li.menu-item-5167:not(#dl-sq) {
display: none !important;
}
body.dl-v2 #menu-top-bar-right > li.menu-item-5167 + li:not(#dl-sq)::before {
content: none !important;
display: none !important;
}
/* ==========================================================================
46. PRODUCT OPTIONS (owner, 25 Oct): no rule lines, proper buttons
========================================================================== */
/* The variations table drew a 1px rule above AND below every label and every
option row — four lines per attribute. Spacing does the grouping now. */
body.dl-v2 table.variations:not(#dl-sq),
body.dl-v2 table.variations tr:not(#dl-sq),
body.dl-v2 table.variations th:not(#dl-sq):not(#dl-sq),
body.dl-v2 table.variations td:not(#dl-sq):not(#dl-sq) {
border: 0 !important;
background: none !important;
}
body.dl-v2 table.variations th.label:not(#dl-sq):not(#dl-sq) {
padding: 18px 0 8px !important;
font: 700 14.5px/1.3 var(--text) !important;
color: var(--ink) !important;
}
body.dl-v2 table.variations th.label label { font: inherit !important; margin: 0 !important; }
body.dl-v2 table.variations .woo-selected-variation-item-name {
font-weight: 500 !important;
color: #4f6275 !important;
}
body.dl-v2 table.variations td.value:not(#dl-sq):not(#dl-sq) {
padding: 0 0 4px !important;
}
body.dl-v2 table.variations tr:first-child th.label:not(#dl-sq):not(#dl-sq) { padding-top: 6px !important; }
/* Option buttons: name on top, its price on one line underneath. */
body.dl-v2 .variable-items-wrapper:not(#dl-sq) {
display: flex !important;
flex-wrap: wrap;
gap: 10px !important;
margin: 0 !important;
}
body.dl-v2 .variable-item.button-variable-item:not(#dl-sq):not(#dl-sq) {
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 2px;
min-width: 104px;
height: auto !important;
min-height: 56px !important;
margin: 0 !important;
padding: 9px 16px !important;
background: #fff !important;
border: 1.5px solid var(--line-2) !important;
box-shadow: none !important;
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.dl-v2 .variable-item.button-variable-item:hover:not(.selected):not(.disabled) {
border-color: var(--navy) !important;
}
body.dl-v2 .variable-item.button-variable-item.selected:not(#dl-sq):not(#dl-sq) {
border-color: var(--green) !important;
background: #f1fbf3 !important;
box-shadow: 0 0 0 1px var(--green) inset !important;
}
body.dl-v2 .variable-item.button-variable-item .variable-item-contents:not(#dl-sq) {
padding: 0 !important;
width: auto !important;
height: auto !important;
}
body.dl-v2 .variable-item.button-variable-item .variable-item-span-button:not(#dl-sq):not(#dl-sq) {
padding: 0 !important;
font: 700 15px/1.2 var(--text) !important;
color: var(--ink) !important;
white-space: nowrap;
}
body.dl-v2 .variable-item.button-variable-item .dl-swatch-price:not(#dl-sq):not(#dl-sq) {
position: static !important;
display: block !important;
margin: 0 !important;
font: 500 12.5px/1.2 var(--text) !important;
color: #4f6275 !important;
white-space: nowrap;
text-align: left !important;
}
/* The price wrapped as "AED / 3,599" in two lines: keep it on one. */
body.dl-v2 .variable-item .dl-swatch-price br { display: none; }
body.dl-v2 .variable-item.button-variable-item.selected .dl-swatch-price:not(#dl-sq):not(#dl-sq) { color: #17713a !important; }
body.dl-v2 .variable-item.disabled:not(#dl-sq):not(#dl-sq),
body.dl-v2 .variable-item.out-of-stock:not(#dl-sq):not(#dl-sq) {
opacity: .45 !important;
border-style: dashed !important;
}
/* Colour chips: same height family, clear selected ring. */
body.dl-v2 .color-variable-item:not(#dl-sq):not(#dl-sq) {
width: 44px !important;
height: 44px !important;
border: 1.5px solid var(--line-2) !important;
}
body.dl-v2 .color-variable-item.selected:not(#dl-sq):not(#dl-sq) {
border-color: var(--green) !important;
box-shadow: 0 0 0 1px var(--green) inset !important;
}
/* "Clear" → a quiet reset link with room to tap. */
body.dl-v2 table.variations .reset_variations:not(#dl-sq) {
display: inline-block;
margin: 10px 0 0 !important;
padding: 6px 0 !important;
font: 600 13px var(--text) !important;
color: #4f6275 !important;
text-decoration: underline !important;
}
/* Product title: never the display face — it draws "(" as "[". */
body.dl-v2 .summary h1.product_title:not(#dl-sq):not(#dl-sq):not(#dl-sq),
body.dl-v2 .entry-summary h1.product_title:not(#dl-sq):not(#dl-sq):not(#dl-sq) {
font-family: var(--text) !important;
font-weight: 700 !important;
font-size: clamp(24px, 2.4vw, 32px) !important;
letter-spacing: -.01em !important;
line-height: 1.2 !important;
text-transform: none !important;
}
@media (max-width: 767px) {
body.dl-v2 .variable-item.button-variable-item:not(#dl-sq):not(#dl-sq) { min-width: calc(50% - 5px); min-height: 52px !important; padding: 8px 12px !important; }
}
/* Quantity + Add to cart on one row, same height (phone stacked them). */
body.dl-v2 .summary form.cart .woocommerce-variation-add-to-cart:not(#dl-sq),
body.dl-v2 .summary form.cart:not(.variations_form):not(#dl-sq) {
display: flex !important;
align-items: stretch;
gap: 10px;
flex-wrap: nowrap;
}
body.dl-v2 .summary form.cart .quantity:not(#dl-sq):not(#dl-sq) { flex: 0 0 96px; margin: 0 !important; }
body.dl-v2 .summary form.cart .quantity input.qty:not(#dl-sq):not(#dl-sq) { width: 100% !important; height: 52px !important; text-align: center; }
body.dl-v2 .summary form.cart .single_add_to_cart_button:not(#dl-sq):not(#dl-sq) { flex: 1 1 auto; height: 52px !important; min-width: 0; max-width: 360px; margin: 0 !important; }
/* Phone: the four promises as a compact 2x2 grid instead of four full-width
rows (~300px of scrolling). */
@media (max-width: 767px) {
body.dl-v2 .dl-trust__in:not(#dl-sq) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px 14px !important;
}
body.dl-v2 .dl-trust__item:not(#dl-sq):not(#dl-sq) {
border: 0 !important;
padding: 0 !important;
}
body.dl-v2 .dl-trust__item *:not(svg):not(#dl-sq) { font-size: 13px !important; }
body.dl-v2 .dl-trust__item strong:not(#dl-sq),
body.dl-v2 .dl-trust__item b:not(#dl-sq),
body.dl-v2 .dl-trust__item h3:not(#dl-sq) { font-size: 14.5px !important; }
body.dl-v2 .dl-trust:not(#dl-sq) { padding: 24px 0 !important; }
}
/* ==========================================================================
47. CART + CHECKOUT ON PHONES (owner, 25 Oct)
========================================================================== */
@media (max-width: 767px) {
/* Cart line = one card: photo | name, price, quantity, subtotal.
WooCommerce's phone table hid the photo and stacked "Product: / Price: /
Quantity: / Subtotal:" label rows, with the × floating 80px above. */
body.dl-v2.woocommerce-cart table.shop_table_responsive tr.cart_item:not(#dl-sq):not(#dl-sq):not(#dl-sq) {
display: grid !important;
grid-template-columns: 84px minmax(0, 1fr) auto;
grid-template-areas:
"thumb name remove"
"thumb price price"
"thumb qty sub";
column-gap: 12px;
row-gap: 6px;
align-items: center;
padding: 14px !important;
margin: 0 0 12px !important;
background: #fff;
border: 1px solid var(--line) !important;
border-radius: var(--sq-md) !important;
corner-shape: squircle;
}
body.dl-v2.woocommerce-cart tr.cart_item td:not(#dl-sq):not(#dl-sq) {
display: block !important;
padding: 0 !important;
border: 0 !important;
text-align: left !important;
background: none !important;
}
body.dl-v2.woocommerce-cart tr.cart_item td::before { display: none !important; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-thumbnail:not(#dl-sq):not(#dl-sq) {
grid-area: thumb;
display: block !important;
align-self: start;
}
body.dl-v2.woocommerce-cart tr.cart_item td.product-thumbnail img:not(#dl-sq):not(#dl-sq) {
width: 84px !important;
height: 84px !important;
object-fit: contain;
background: #f5f7fa;
border-radius: var(--sq-sm) !important;
corner-shape: squircle;
}
body.dl-v2.woocommerce-cart tr.cart_item td.product-name:not(#dl-sq):not(#dl-sq) { grid-area: name; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-name a:not(#dl-sq) { font: 600 14.5px/1.35 var(--text) !important; color: var(--ink) !important; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-price:not(#dl-sq):not(#dl-sq) { grid-area: price; font: 500 13px var(--text) !important; color: #4f6275 !important; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-quantity:not(#dl-sq):not(#dl-sq) { grid-area: qty; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-quantity input.qty:not(#dl-sq):not(#dl-sq) { width: 72px !important; height: 40px !important; font-size: 16px !important; text-align: center; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-subtotal:not(#dl-sq):not(#dl-sq) { grid-area: sub; font: 700 15px var(--text) !important; color: var(--ink) !important; text-align: right !important; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-remove:not(#dl-sq):not(#dl-sq) { grid-area: remove; align-self: start; justify-self: end; }
body.dl-v2.woocommerce-cart tr.cart_item td.product-remove a.remove:not(#dl-sq):not(#dl-sq) {
display: inline-flex !important;
width: 32px !important;
height: 32px !important;
align-items: center;
justify-content: center;
font-size: 20px !important;
color: #6b7a8c !important;
background: #f5f7fa !important;
border-radius: 50% !important;
}
/* The theme's back-to-top button sat on the coupon and address fields. */
body.dl-v2.woocommerce-cart .back-to-top-link,
body.dl-v2.woocommerce-checkout .back-to-top-link { display: none !important; }
}
/* "added to your cart — View cart" while already ON the cart page. */
body.dl-v2.woocommerce-cart .woocommerce-message .wc-forward:not(#dl-sq):not(#dl-sq):not(#dl-sq) { display: none !important; }
body.dl-v2 .shipping-calculator-button:not(#dl-sq) { font-size: 13.5px !important; }
/* Checkout payment methods: real tappable rows, 22px radios, logo right. */
body.dl-v2 #payment ul.payment_methods:not(#dl-sq) { padding: 0 !important; border: 0 !important; display: grid; gap: 10px; }
body.dl-v2 #payment li.wc_payment_method:not(#dl-sq):not(#dl-sq) {
position: relative;
margin: 0 !important;
padding: 0 !important;
border: 1.5px solid var(--line-2) !important;
background: #fff !important;
border-radius: var(--sq-md) !important;
corner-shape: squircle;
list-style: none;
overflow: hidden;
}
body.dl-v2 #payment li.wc_payment_method:has(> input:checked):not(#dl-sq):not(#dl-sq) {
border-color: var(--green) !important;
box-shadow: 0 0 0 1px var(--green) inset;
}
body.dl-v2 #payment li.wc_payment_method > input.input-radio:not(#dl-sq) {
position: absolute !important;
left: 16px;
top: 19px;
width: 22px !important;
height: 22px !important;
margin: 0 !important;
accent-color: #2fae26;
}
body.dl-v2 #payment li.wc_payment_method > label:not(#dl-sq):not(#dl-sq) {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 60px;
margin: 0 !important;
padding: 12px 16px 12px 50px !important;
font: 600 15px/1.3 var(--text) !important;
color: var(--ink) !important;
cursor: pointer;
}
body.dl-v2 #payment li.wc_payment_method > label img:not(#dl-sq):not(#dl-sq) {
height: 22px !important;
width: auto !important;
max-width: 110px;
margin: 0 !important;
flex: 0 0 auto;
}
body.dl-v2 #payment li.wc_payment_method .payment_box:not(#dl-sq):not(#dl-sq) {
margin: 0 !important;
padding: 0 16px 14px 50px !important;
background: none !important;
font: 500 13px/1.45 var(--text) !important;
color: #4f6275 !important;
}
body.dl-v2 #payment li.wc_payment_method .payment_box::before { display: none !important; }
/* --- 47b. 992-1199px: Electro still shows its handheld header up to 1199px,
but the phone search bar and the white handheld header stopped at 991px —
so small laptops / landscape tablets had NO search field and a green header
(found by the workflow verifier). Same treatment as phones. */
@media (min-width: 992px) and (max-width: 1199px) {
body.dl-v2 .dl-msearch:not(#dl-sq) {
display: block;
position: relative;
z-index: 30;
padding: 10px 12px 12px !important;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
body.dl-v2 .dl-msearch .dl-hsearch:not(#dl-sq):not(#dl-sq) {
display: flex !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
}
body.dl-v2 .handheld-header-wrap,
body.dl-v2 .handheld-header-v2,
body.dl-v2 .handheld-header {
background: var(--paper) !important;
border-bottom: 1px solid var(--line) !important;
}
body.dl-v2 .handheld-header-wrap a,
body.dl-v2 .handheld-header-wrap i,
body.dl-v2 .handheld-header-v2 a,
body.dl-v2 .handheld-header-v2 i { color: var(--navy) !important; }
body.dl-v2 .handheld-header-v2 .site-search,
body.dl-v2 .handheld-header-v2 .handheld-header-links .search,
body.dl-v2 .handheld-header-v2 [class*="search"]:not(.dl-hsearch):not(.dl-msearch):not(input):not(form) {
display: none !important;
}
}
/* ==========================================================================
48. HERO PROMO CARDS (owner, 25 Oct) — replace the 7 image banners
========================================================================== */
body.dl-v2.dl-has-promos [data-id="753cc7da"],
body.dl-v2.dl-has-promos [data-id="8db0232"] {
display: none !important;
}
body.dl-v2 .dl-promos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 28px 0 4px;
}
body.dl-v2 .dl-promo:not(#dl-sq):not(#dl-sq) {
position: relative;
display: flex;
min-height: 236px;
padding: 24px;
overflow: hidden;
color: var(--ink) !important;
text-decoration: none !important;
border-radius: var(--sq-lg) !important;
corner-shape: squircle;
box-shadow: 0 10px 30px rgba(0,0,0,.18);
transition: transform .25s ease, box-shadow .25s ease;
isolation: isolate;
}
body.dl-v2 .dl-promo:hover {
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
body.dl-v2 .dl-promo--wide { grid-column: span 2; }
/* Soft brand tints — light cards pop on the dark hero; multiply drops the
white ground of the product shots into the tint. */
body.dl-v2 .dl-promo--blue { background: radial-gradient(120% 140% at 100% 100%, #cfe0ff 0%, #eef4ff 55%, #f7faff 100%); }
body.dl-v2 .dl-promo--silver { background: radial-gradient(120% 140% at 100% 100%, #dfe3ea 0%, #f1f3f6 55%, #fafbfc 100%); }
body.dl-v2 .dl-promo--warm { background: radial-gradient(120% 140% at 100% 100%, #f6dcc4 0%, #fbeee2 55%, #fff8f2 100%); }
body.dl-v2 .dl-promo--mint { background: radial-gradient(120% 140% at 100% 100%, #c9f0d3 0%, #e7f8eb 55%, #f5fdf7 100%); }
body.dl-v2 .dl-promo--lilac { background: radial-gradient(120% 140% at 100% 100%, #ddd3fb 0%, #efeafd 55%, #f8f6ff 100%); }
body.dl-v2 .dl-promo--trust { background: linear-gradient(120deg, #37c12d 0%, #5fd84f 55%, #8ee97f 100%); }
body.dl-v2 .dl-promo__copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
max-width: 62%;
}
body.dl-v2 .dl-promo--wide .dl-promo__copy { max-width: 52%; }
body.dl-v2 .dl-promo__eyebrow {
font: 700 12px/1 var(--text);
letter-spacing: .08em;
text-transform: uppercase;
color: #4f6275;
}
body.dl-v2 .dl-promo__title {
font: 800 clamp(21px, 1.75vw, 28px)/1.1 var(--text);
letter-spacing: -.02em;
color: var(--ink);
}
body.dl-v2 .dl-promo--wide .dl-promo__title { font-size: clamp(26px, 2.3vw, 36px); }
body.dl-v2 .dl-promo__sub {
font: 500 14px/1.4 var(--text);
color: #4f6275;
}
body.dl-v2 .dl-promo__price:not(#dl-sq):not(#dl-sq) {
margin-top: 6px;
padding: 6px 12px;
font: 500 13.5px/1 var(--text);
color: var(--ink);
background: rgba(255,255,255,.85);
border: 1px solid rgba(20,33,47,.08);
border-radius: 999px !important;
}
body.dl-v2 .dl-promo__price b { font-weight: 800; }
body.dl-v2 .dl-promo__cta {
margin-top: auto;
padding-top: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
font: 700 14.5px/1 var(--text);
color: var(--navy);
}
body.dl-v2 .dl-promo__cta svg { transition: transform .2s ease; }
body.dl-v2 .dl-promo:hover .dl-promo__cta svg { transform: translateX(4px); }
body.dl-v2 .dl-promo__img:not(#dl-sq):not(#dl-sq) {
position: absolute;
right: 4%;
bottom: 6%;
width: 46%;
height: 78%;
object-fit: contain;
object-position: right bottom;
mix-blend-mode: multiply;
z-index: 1;
transition: transform .35s ease;
border-radius: 0 !important;
}
body.dl-v2 .dl-promo--wide .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 44%; height: 86%; }
body.dl-v2 .dl-promo:hover .dl-promo__img { transform: scale(1.06) rotate(-1deg); }
/* Trust card: green, dark ink, a big seal. */
body.dl-v2 .dl-promo--trust .dl-promo__eyebrow { color: #0f3d14; }
body.dl-v2 .dl-promo--trust .dl-promo__title { color: #06210a; }
body.dl-v2 .dl-promo--trust .dl-promo__cta { color: #06210a; }
body.dl-v2 .dl-promo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.dl-v2 .dl-promo__chips span:not(#dl-sq):not(#dl-sq) {
padding: 6px 11px;
font: 600 13px/1 var(--text);
color: #06210a;
background: rgba(255,255,255,.55);
border-radius: 999px !important;
}
body.dl-v2 .dl-promo__seal {
position: absolute;
right: 6%;
bottom: -8%;
width: 40%;
height: 120%;
color: rgba(6,33,10,.16);
z-index: 1;
}
@media (max-width: 1199px) {
body.dl-v2 .dl-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
body.dl-v2 .dl-promos { gap: 12px; margin-top: 20px; }
body.dl-v2 .dl-promo:not(#dl-sq):not(#dl-sq) { min-height: 200px; padding: 16px; }
body.dl-v2 .dl-promo__copy,
body.dl-v2 .dl-promo--wide .dl-promo__copy { max-width: 100%; }
body.dl-v2 .dl-promo:not(.dl-promo--wide) .dl-promo__sub { display: none; }
body.dl-v2 .dl-promo:not(.dl-promo--wide) .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 62%; height: 48%; right: 6%; bottom: 8%; }
body.dl-v2 .dl-promo:not(.dl-promo--wide) .dl-promo__title { font-size: 19px; }
body.dl-v2 .dl-promo:not(.dl-promo--wide) .dl-promo__cta { display: none; }
body.dl-v2 .dl-promo--wide .dl-promo__copy { max-width: 58%; }
body.dl-v2 .dl-promo__price { font-size: 12.5px; }
}
/* --- 48b. "Just launched": iPhone 18 Pro / Pro Max + iPhone Duo ------------ */
body.dl-v2 .dl-launch:not(#dl-sq):not(#dl-sq) {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 300px;
overflow: hidden;
border-radius: var(--sq-lg) !important;
corner-shape: squircle;
box-shadow: 0 14px 40px rgba(0,0,0,.32);
}
body.dl-v2 .dl-launch__half {
position: relative;
display: flex;
align-items: stretch;
overflow: hidden;
text-decoration: none !important;
isolation: isolate;
}
/* Apple's own photos: black ground for the Pro, near-white for the Duo — the
halves take those exact grounds so each image sits seamlessly. */
body.dl-v2 .dl-launch__half--pro { background: #000; color: #f5f5f7 !important; }
body.dl-v2 .dl-launch__half--duo { background: #fafafc; color: #1d1d1f !important; }
body.dl-v2 .dl-launch__copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 30px 32px;
max-width: 50%;
}
body.dl-v2 .dl-launch__badge:not(#dl-sq):not(#dl-sq) {
padding: 6px 12px;
font: 700 12px/1 var(--text);
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 999px !important;
}
body.dl-v2 .dl-launch__half--pro .dl-launch__badge { background: linear-gradient(90deg, #8c2a3c, #c0435a); color: #fff; }
body.dl-v2 .dl-launch__half--duo .dl-launch__badge { background: #1d1d1f; color: #fff; }
body.dl-v2 .dl-launch__title {
font: 800 clamp(28px, 2.6vw, 40px)/1.05 var(--text);
letter-spacing: -.03em;
}
body.dl-v2 .dl-launch__half--pro .dl-launch__title {
background: linear-gradient(180deg, #ffffff 0%, #c9c9cf 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.dl-v2 .dl-launch__sub {
font: 500 14px/1.45 var(--text);
opacity: .75;
}
body.dl-v2 .dl-launch__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font: 700 15px/1 var(--text);
color: inherit;
}
body.dl-v2 .dl-launch__half--pro .dl-launch__cta { color: #6cff93; }
body.dl-v2 .dl-launch__half--duo .dl-launch__cta { color: #0a7a1f; }
body.dl-v2 .dl-launch__cta svg { transition: transform .2s ease; }
body.dl-v2 .dl-launch__half:hover .dl-launch__cta svg { transform: translateX(4px); }
body.dl-v2 .dl-launch__img:not(#dl-sq):not(#dl-sq) {
position: absolute;
right: 0;
bottom: 0;
width: 62%;
height: 100%;
object-fit: contain;
object-position: right center;
z-index: 1;
border-radius: 0 !important;
transition: transform .45s ease;
}
body.dl-v2 .dl-launch__half--duo .dl-launch__img:not(#dl-sq):not(#dl-sq) { width: 64%; object-position: right center; }
body.dl-v2 .dl-launch__half:hover .dl-launch__img { transform: scale(1.04); }
@media (max-width: 991px) {
body.dl-v2 .dl-launch:not(#dl-sq):not(#dl-sq) { grid-template-columns: 1fr; }
body.dl-v2 .dl-launch__half { min-height: 260px; }
}
@media (max-width: 767px) {
body.dl-v2 .dl-launch__copy { padding: 20px; max-width: 58%; gap: 6px; }
body.dl-v2 .dl-launch__title { font-size: 26px; }
body.dl-v2 .dl-launch__sub { font-size: 12.5px; }
body.dl-v2 .dl-launch__half { min-height: 230px; }
body.dl-v2 .dl-launch__img:not(#dl-sq):not(#dl-sq) { width: 58%; }
}
body.dl-v2 .dl-launch__cta { white-space: nowrap; }
body.dl-v2 .dl-launch__copy { max-width: 46%; }
body.dl-v2 .dl-launch__img:not(#dl-sq):not(#dl-sq) { width: 56%; }
body.dl-v2 .dl-launch__half--duo .dl-launch__img:not(#dl-sq):not(#dl-sq) { width: 56%; }
@media (max-width: 767px) {
body.dl-v2 .dl-launch__copy { max-width: 52%; }
body.dl-v2 .dl-launch__img:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-launch__half--duo .dl-launch__img:not(#dl-sq):not(#dl-sq) { width: 50%; }
body.dl-v2 .dl-launch__cta { font-size: 14px; }
}
/* Condition pill colours (owner, 25 Oct): Brand new = golden, Original = blue,
Renewed = green, Refurbished = teal. */
body.dl-v2 .dl-cond--new:not(#dl-sq):not(#dl-sq) { color: #8a6100 !important; background: #fff4d6 !important; border-color: #e3b341 !important; }
body.dl-v2 .dl-cond--original:not(#dl-sq):not(#dl-sq) { color: #1d4fb8 !important; background: #ebf1fd !important; border-color: #9ab6ef !important; }
body.dl-v2 .dl-cond--renewed:not(#dl-sq):not(#dl-sq) { color: #17713a !important; background: #e9f7ee !important; border-color: #9fd8b1 !important; }
body.dl-v2 .dl-cond--refurbished:not(#dl-sq):not(#dl-sq) { color: #0b6e6e !important; background: #e3f6f5 !important; border-color: #86d0cc !important; }
/* ==========================================================================
48c. PROMO CARDS v2 (owner, 25 Oct): full width, grouped rows, pastel,
a soft glow so they read as clickable
========================================================================== */
/* The grid sat in a flex row and shrank to its content (1151px) — stretch it. */
body.dl-v2 .dl-promos:not(#dl-sq) {
width: 100% !important;
flex: 0 0 100% !important;
max-width: none !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
body.dl-v2 .dl-promo--half:not(#dl-sq) { grid-column: span 2; }
body.dl-v2 .dl-promo--full:not(#dl-sq) { grid-column: 1 / -1; }
body.dl-v2 .dl-promo--wide:not(#dl-sq) { grid-column: auto; }
/* Pastel grounds + a matching glow. --g is each card's glow colour. */
body.dl-v2 .dl-promo--sky { --g: 96,165,250; background: linear-gradient(135deg, #f3f9ff 0%, #dcecff 60%, #c9e2ff 100%); }
body.dl-v2 .dl-promo--lavender { --g: 167,139,250; background: linear-gradient(135deg, #f8f5ff 0%, #ebe4ff 60%, #ddd2ff 100%); }
body.dl-v2 .dl-promo--mint { --g: 52,211,153; background: linear-gradient(135deg, #f2fdf7 0%, #dcf7e8 60%, #c6f0da 100%); }
body.dl-v2 .dl-promo--peach { --g: 251,146,60; background: linear-gradient(135deg, #fff8f2 0%, #ffe9d8 60%, #ffdcc2 100%); }
body.dl-v2 .dl-promo--pink { --g: 244,114,182; background: linear-gradient(135deg, #fff6fb 0%, #ffe3f1 60%, #ffd0e7 100%); }
body.dl-v2 .dl-promo--trust { --g: 74,222,128; background: linear-gradient(110deg, #f1fdf0 0%, #d9f7d3 50%, #c4f1bb 100%); }
body.dl-v2 .dl-promo:not(#dl-sq):not(#dl-sq) {
border: 1.5px solid rgba(var(--g, 255,255,255), .55);
box-shadow:
0 0 0 4px rgba(var(--g, 255,255,255), .10),
0 10px 34px -8px rgba(var(--g, 255,255,255), .55),
0 2px 10px rgba(0,0,0,.18);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.dl-v2 .dl-promo:hover:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-promo:focus-visible:not(#dl-sq):not(#dl-sq) {
transform: translateY(-5px);
border-color: rgba(var(--g), .95);
box-shadow:
0 0 0 5px rgba(var(--g), .22),
0 18px 50px -6px rgba(var(--g), .75),
0 4px 14px rgba(0,0,0,.22);
}
/* A slow light sweep across each card — the "lexicon" sheen. */
body.dl-v2 .dl-promo::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
transform: translateX(-120%);
animation: dl-sheen 7s ease-in-out infinite;
}
body.dl-v2 .dl-promo:nth-child(2)::after { animation-delay: 1s; }
body.dl-v2 .dl-promo:nth-child(3)::after { animation-delay: 2s; }
body.dl-v2 .dl-promo:nth-child(4)::after { animation-delay: 3s; }
body.dl-v2 .dl-promo:nth-child(5)::after { animation-delay: 4s; }
body.dl-v2 .dl-promo:nth-child(6)::after { animation-delay: 5s; }
body.dl-v2 .dl-promo:nth-child(7)::after { animation-delay: 6s; }
@keyframes dl-sheen { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { body.dl-v2 .dl-promo::after { animation: none; display: none; } }
/* The CTA reads as a button now. */
body.dl-v2 .dl-promo .dl-promo__cta:not(#dl-sq):not(#dl-sq) {
margin-top: auto;
padding: 9px 14px;
background: #fff;
border: 1px solid rgba(var(--g), .5);
color: var(--ink);
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(var(--g), .25);
}
body.dl-v2 .dl-promo:hover .dl-promo__cta:not(#dl-sq):not(#dl-sq) { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Half-width cards: more room for the product. */
body.dl-v2 .dl-promo--half .dl-promo__copy { max-width: 48%; }
body.dl-v2 .dl-promo--half .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 48%; height: 88%; }
body.dl-v2 .dl-promo--half .dl-promo__title { font-size: clamp(26px, 2.2vw, 36px); }
/* Trust band: a horizontal strip, chips beside the title. */
body.dl-v2 .dl-promo--full:not(#dl-sq):not(#dl-sq) { min-height: 150px; align-items: center; }
body.dl-v2 .dl-promo--full .dl-promo__copy {
max-width: 78%;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "eye eye eye" "title chips cta";
align-items: center;
column-gap: 28px;
row-gap: 6px;
}
body.dl-v2 .dl-promo--full .dl-promo__eyebrow { grid-area: eye; color: #17713a; }
body.dl-v2 .dl-promo--full .dl-promo__title { grid-area: title; font-size: clamp(24px, 2.2vw, 34px); color: #0b3d16; white-space: nowrap; }
body.dl-v2 .dl-promo--full .dl-promo__chips { grid-area: chips; margin: 0; }
body.dl-v2 .dl-promo--full .dl-promo__cta { grid-area: cta; margin: 0; }
body.dl-v2 .dl-promo--full .dl-promo__chips span:not(#dl-sq):not(#dl-sq) { background: #fff; color: #0b3d16; border: 1px solid rgba(var(--g), .5); }
body.dl-v2 .dl-promo--full .dl-promo__seal { color: rgba(23,113,58,.16); width: 22%; height: 160%; bottom: -30%; right: 3%; }
@media (max-width: 1199px) {
body.dl-v2 .dl-promos:not(#dl-sq) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.dl-v2 .dl-promo--half:not(#dl-sq), body.dl-v2 .dl-promo--full:not(#dl-sq) { grid-column: 1 / -1; }
body.dl-v2 .dl-promo--full .dl-promo__copy { max-width: 100%; grid-template-columns: 1fr; grid-template-areas: "eye" "title" "chips" "cta"; }
body.dl-v2 .dl-promo--full .dl-promo__title { white-space: normal; }
body.dl-v2 .dl-promo--full .dl-promo__cta { justify-self: start; }
}
@media (max-width: 767px) {
body.dl-v2 .dl-promos:not(#dl-sq) { gap: 12px; }
body.dl-v2 .dl-promo--half .dl-promo__copy { max-width: 56%; }
body.dl-v2 .dl-promo--half .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 46%; height: 70%; }
body.dl-v2 .dl-promo--half .dl-promo__title { font-size: 24px; }
body.dl-v2 .dl-promo--full .dl-promo__seal { width: 40%; }
}
/* Phone: half cards become compact side-by-side layouts (copy | product);
the trust band keeps its button. */
@media (max-width: 767px) {
body.dl-v2 .dl-promo.dl-promo--half:not(#dl-sq):not(#dl-sq) { min-height: 172px; padding: 18px; }
body.dl-v2 .dl-promo.dl-promo--half .dl-promo__copy { max-width: 58%; gap: 5px; }
body.dl-v2 .dl-promo.dl-promo--half .dl-promo__title { font-size: 23px; }
body.dl-v2 .dl-promo.dl-promo--half .dl-promo__sub { display: none; }
body.dl-v2 .dl-promo.dl-promo--half .dl-promo__cta:not(#dl-sq):not(#dl-sq) { display: inline-flex; padding: 7px 12px; font-size: 13.5px; margin-top: 8px; }
body.dl-v2 .dl-promo.dl-promo--half .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 42%; height: 82%; right: 4%; bottom: 9%; }
body.dl-v2 .dl-promo.dl-promo--full .dl-promo__cta:not(#dl-sq):not(#dl-sq) { display: inline-flex; }
body.dl-v2 .dl-promo:not(.dl-promo--half):not(.dl-promo--full):not(#dl-sq):not(#dl-sq) { min-height: 210px; }
}
/* --- 48d. Launch Offer band: gold pastel, engraved-lid motif ------------- */
body.dl-v2 .dl-promo--offer { --g: 234,179,8; background: linear-gradient(110deg, #fffbeb 0%, #fdf0c4 55%, #f8e3a0 100%); }
body.dl-v2 .dl-promo--offer:not(#dl-sq):not(#dl-sq) { min-height: 170px; align-items: center; cursor: default; }
body.dl-v2 .dl-promo--offer .dl-promo__copy { max-width: 66%; }
body.dl-v2 .dl-promo--offer .dl-promo__eyebrow { color: #8a6100; }
body.dl-v2 .dl-promo--offer .dl-promo__title { font-size: clamp(26px, 2.4vw, 38px); color: #3d2a00; }
body.dl-v2 .dl-promo--offer .dl-promo__sub { color: #5c4300; font-size: 15px; }
body.dl-v2 .dl-promo--offer .dl-promo__sub s { color: #a08850; }
body.dl-v2 .dl-promo--offer .dl-promo__sub b { color: #17713a; font-weight: 800; }
body.dl-v2 .dl-promo__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
body.dl-v2 .dl-promo--offer .dl-promo__cta:not(#dl-sq):not(#dl-sq) { margin: 0; text-decoration: none !important; }
body.dl-v2 .dl-promo--offer .dl-promo__cta--ghost:not(#dl-sq):not(#dl-sq) { background: transparent; box-shadow: none; border-color: rgba(61,42,0,.35); }
body.dl-v2 .dl-promo__engrave:not(#dl-sq):not(#dl-sq) {
position: absolute; right: 4%; top: 50%; transform: translateY(-50%) rotate(-4deg);
width: 26%; min-width: 220px; aspect-ratio: 16 / 10;
display: flex; align-items: center; justify-content: center; text-align: center;
font: italic 600 clamp(18px, 1.6vw, 26px)/1.15 Georgia, "Times New Roman", serif;
color: rgba(255,255,255,.92); letter-spacing: .02em;
text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 -1px 0 rgba(255,255,255,.2);
background: linear-gradient(145deg, #c9ccd2 0%, #9aa0a8 45%, #7d838c 100%);
border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px rgba(61,42,0,.25);
}
@media (max-width: 1199px) { body.dl-v2 .dl-promo--offer .dl-promo__copy { max-width: 100%; } body.dl-v2 .dl-promo__engrave { display: none !important; } }
/* --- 48e. Offers row: Launch Offer (gold) + Corporate pricing (indigo) ---- */
body.dl-v2 .dl-promo--offer:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-promo--corp:not(#dl-sq):not(#dl-sq) { min-height: 200px; align-items: stretch; cursor: pointer; }
body.dl-v2 .dl-promo--offer .dl-promo__copy,
body.dl-v2 .dl-promo--corp .dl-promo__copy { max-width: 60%; }
body.dl-v2 .dl-promo--offer .dl-promo__title,
body.dl-v2 .dl-promo--corp .dl-promo__title { font-size: clamp(28px, 2.5vw, 40px); }
body.dl-v2 .dl-promo--offer .dl-promo__price s { color: #a08850; font-weight: 500; }
body.dl-v2 .dl-promo--offer .dl-promo__price b { color: #17713a; }
body.dl-v2 .dl-promo--corp { --g: 99,102,241; background: linear-gradient(120deg, #f5f6ff 0%, #e4e7ff 55%, #d3d8ff 100%); }
body.dl-v2 .dl-promo--corp .dl-promo__eyebrow { color: #4338ca; }
body.dl-v2 .dl-promo--corp .dl-promo__title { color: #1e1b4b; }
body.dl-v2 .dl-promo__corpicon { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 34%; height: 80%; color: rgba(67,56,202,.22); z-index: 1; }
body.dl-v2 .dl-promo--offer .dl-promo__engrave:not(#dl-sq):not(#dl-sq) { width: 36%; min-width: 0; right: 5%; }
/* Lighter section: category cards keep count, title, price and button only. */
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--full):not(.dl-promo--offer):not(.dl-promo--corp) .dl-promo__sub { display: none; }
@media (max-width: 1199px) {
body.dl-v2 .dl-promo--offer .dl-promo__engrave { display: flex !important; width: 38%; font-size: 16px; }
}
@media (max-width: 767px) {
body.dl-v2 .dl-promo--offer:not(#dl-sq):not(#dl-sq), body.dl-v2 .dl-promo--corp:not(#dl-sq):not(#dl-sq) { min-height: 168px; }
body.dl-v2 .dl-promo--offer .dl-promo__title, body.dl-v2 .dl-promo--corp .dl-promo__title { font-size: 24px; }
body.dl-v2 .dl-promo--offer .dl-promo__copy, body.dl-v2 .dl-promo--corp .dl-promo__copy { max-width: 62%; }
body.dl-v2 .dl-promo--offer .dl-promo__price, body.dl-v2 .dl-promo--corp .dl-promo__price { font-size: 12px; }
body.dl-v2 .dl-promo--offer .dl-promo__cta:not(#dl-sq):not(#dl-sq), body.dl-v2 .dl-promo--corp .dl-promo__cta:not(#dl-sq):not(#dl-sq) { display: inline-flex; font-size: 13.5px; padding: 7px 12px; }
body.dl-v2 .dl-promo--offer .dl-promo__engrave:not(#dl-sq):not(#dl-sq) { width: 34%; font-size: 13px; }
}
/* --- 48f. Laptops row of four (owner, 25 Oct) ------------------------------ */
body.dl-v2 .dl-promo--sand { --g: 245,158,11; background: linear-gradient(135deg, #fffaf2 0%, #fdeedb 60%, #fbe2c3 100%); }
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full):not(#dl-sq):not(#dl-sq) { min-height: 250px; }
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full) .dl-promo__copy { max-width: 100%; }
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full) .dl-promo__title { font-size: clamp(20px, 1.6vw, 26px); }
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full) .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 58%; height: 46%; right: 4%; bottom: 6%; }
@media (max-width: 1199px) {
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full):not(#dl-sq):not(#dl-sq) { grid-column: span 1; }
}
@media (max-width: 767px) {
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full):not(#dl-sq):not(#dl-sq) { min-height: 210px; }
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full) .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 70%; height: 40%; }
}
/* ==========================================================================
49. THE LANE (owner, 25 Oct) — winding road behind the hero + promo cards
========================================================================== */
body.dl-v2 .dl-has-lane { position: relative; overflow: hidden; }
body.dl-v2 .dl-has-lane > .elementor-background-overlay { z-index: 0; }
body.dl-v2 .dl-has-lane > .elementor-container { position: relative; z-index: 2; }
body.dl-v2 svg.dl-lane {
position: absolute; inset: 0; width: 100%; height: 100%;
z-index: 1; pointer-events: none;
}
body.dl-v2 .dl-lane__edge { stroke: rgba(55,193,45,.07); }
body.dl-v2 .dl-lane__road { stroke: rgba(255,255,255,.045); }
body.dl-v2 .dl-lane__dash {
stroke: rgba(255,255,255,.28);
stroke-dasharray: 26 22;
animation: dl-lane-drive 3.2s linear infinite;
}
body.dl-v2 .dl-lane--2.dl-lane__road { stroke: rgba(255,255,255,.035); }
body.dl-v2 .dl-lane--2.dl-lane__dash { stroke: rgba(255,255,255,.18); }
@keyframes dl-lane-drive { to { stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce) { body.dl-v2 .dl-lane__dash { animation: none; } }
@media (max-width: 767px) {
body.dl-v2 .dl-lane__edge { stroke-width: 70; }
body.dl-v2 .dl-lane__road { stroke-width: 64; }
}
/* lane v2: pinned to the background (an older "hero > * {position:relative}"
rule pulled it into the flow), slimmer and quieter — a road in the brand's
own navy, a hair of green at the edge, white dashes. */
body.dl-v2 .dl-has-lane > svg.dl-lane:not(#dl-sq):not(#dl-sq) {
position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
z-index: 0 !important; display: block !important; margin: 0 !important;
}
body.dl-v2 .dl-has-lane > .elementor-container:not(#dl-sq):not(#dl-sq) { position: relative !important; z-index: 2 !important; }
body.dl-v2 .dl-lane__edge:not(#dl-sq) { stroke: rgba(55,193,45,.10); stroke-width: 66; }
body.dl-v2 .dl-lane__road:not(#dl-sq) { stroke: #1b2c40; stroke-width: 60; }
body.dl-v2 .dl-lane__dash:not(#dl-sq) { stroke: rgba(255,255,255,.22); stroke-width: 3; stroke-dasharray: 20 18; }
body.dl-v2 .dl-lane--2.dl-lane__road:not(#dl-sq) { stroke: #192a3d; }
@keyframes dl-lane-drive { to { stroke-dashoffset: -38; } }
@media (max-width: 767px) {
body.dl-v2 .dl-lane__edge:not(#dl-sq) { stroke-width: 46; }
body.dl-v2 .dl-lane__road:not(#dl-sq) { stroke-width: 42; }
}
/* --- 49b. Hero: drop the faded photo shapes so the lane reads -------------- */
body.dl-v2 .elementor-section.elementor-top-section.dl-has-lane:not(#dl-sq) { background-image: none !important; background-color: #14212f !important; }
body.dl-v2 .elementor-section.elementor-top-section.dl-has-lane::before { background: radial-gradient(120% 80% at 0% 0%, rgba(31,48,68,.9) 0%, rgba(20,33,47,0) 60%) !important; }
body.dl-v2 .dl-lane__road:not(#dl-sq) { stroke: #20344b; }
body.dl-v2 .dl-lane--2.dl-lane__road:not(#dl-sq) { stroke: #1d3046; }
body.dl-v2 .dl-lane__edge:not(#dl-sq) { stroke: rgba(55,193,45,.16); }
body.dl-v2 .dl-lane__dash:not(#dl-sq) { stroke: rgba(255,255,255,.32); }
/* --- 48g. Livelier MacBooks / iPhones, darker trust band ------------------- */
body.dl-v2 .dl-promo--fb { --g: 24,119,242; background: linear-gradient(135deg, #ffffff 0%, #eef4ff 45%, #d4e4ff 100%); }
body.dl-v2 .dl-promo--fb .dl-promo__eyebrow { color: #1459c7; }
body.dl-v2 .dl-promo--coral { --g: 255,112,67; background: linear-gradient(135deg, #ffffff 0%, #fff1ec 45%, #ffd9cc 100%); }
body.dl-v2 .dl-promo--coral .dl-promo__eyebrow { color: #c2410c; }
body.dl-v2 .dl-promo--trust:not(#dl-sq):not(#dl-sq) { --g: 34,197,94; background: linear-gradient(110deg, #0b3d22 0%, #116b35 55%, #17914a 100%); }
body.dl-v2 .dl-promo--trust .dl-promo__eyebrow,
body.dl-v2 .dl-promo--full.dl-promo--trust .dl-promo__eyebrow { color: #a7f3c0 !important; }
body.dl-v2 .dl-promo--trust .dl-promo__title,
body.dl-v2 .dl-promo--full.dl-promo--trust .dl-promo__title { color: #ffffff !important; }
body.dl-v2 .dl-promo--full.dl-promo--trust .dl-promo__chips span:not(#dl-sq):not(#dl-sq) { background: rgba(255,255,255,.14); color: #fff !important; border-color: rgba(255,255,255,.3); }
body.dl-v2 .dl-promo--full.dl-promo--trust .dl-promo__seal { color: rgba(255,255,255,.12); }
/* ==========================================================================
50. Buttons, icon motion, gold engraving, new-iPhone tags (owner, 25 Oct)
========================================================================== */
/* Every card button = a dark pill with white text, unmistakably a button. */
body.dl-v2 .dl-promos .dl-promo__cta:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-launch .dl-launch__cta:not(#dl-sq):not(#dl-sq) {
display: inline-flex; align-items: center; gap: 8px; width: max-content;
padding: 11px 18px; background: #14212f !important; color: #fff !important;
border: 0 !important; border-radius: 999px !important;
font: 700 14.5px/1 var(--text); box-shadow: 0 8px 18px -6px rgba(20,33,47,.55);
transition: transform .2s ease, background-color .2s ease;
}
body.dl-v2 .dl-promo:hover .dl-promo__cta:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-launch__half:hover .dl-launch__cta:not(#dl-sq):not(#dl-sq) { background: #000 !important; transform: translateX(3px); }
/* on dark grounds the pill flips to white */
body.dl-v2 .dl-launch__half--pro .dl-launch__cta:not(#dl-sq):not(#dl-sq),
body.dl-v2 .dl-promo--trust .dl-promo__cta:not(#dl-sq):not(#dl-sq) { background: #fff !important; color: #0b1a12 !important; }
body.dl-v2 .dl-promo--trust:hover .dl-promo__cta:not(#dl-sq):not(#dl-sq) { background: #e8fff0 !important; }
/* Trust-band icons: gentle, continuous motion */
body.dl-v2 .dl-trust__mark { animation: dl-bob 3.2s ease-in-out infinite; }
body.dl-v2 .dl-trust__item:nth-child(2) .dl-trust__mark { animation-delay: .4s; }
body.dl-v2 .dl-trust__item:nth-child(3) .dl-trust__mark { animation-delay: .8s; }
body.dl-v2 .dl-trust__item:nth-child(4) .dl-trust__mark { animation-delay: 1.2s; }
body.dl-v2 .dl-trust__item:nth-child(1) .dl-ico { animation: dl-pulse 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
body.dl-v2 .dl-trust__item:nth-child(2) .dl-ico { animation: dl-spin 4s cubic-bezier(.6,0,.4,1) infinite; transform-origin: 50% 50%; }
body.dl-v2 .dl-trust__item:nth-child(3) .dl-ico path:last-child,
body.dl-v2 .dl-trust__item:nth-child(3) .dl-ico path:nth-child(2) { stroke-dasharray: 14; animation: dl-draw 2.6s ease-in-out infinite; }
body.dl-v2 .dl-trust__item:nth-child(4) .dl-ico { animation: dl-drive 2.2s ease-in-out infinite; }
@keyframes dl-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes dl-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes dl-spin { 0%,60% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
@keyframes dl-draw { 0% { stroke-dashoffset: 14; } 45%,100% { stroke-dashoffset: 0; } }
@keyframes dl-drive { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
body.dl-v2 .dl-trust__mark, body.dl-v2 .dl-trust__item .dl-ico, body.dl-v2 .dl-trust__item .dl-ico path { animation: none !important; }
}
/* "New" tag on iPhone 18 Series / iPhone Duo menu rows */
body.dl-v2 .dl-newtag:not(#dl-sq):not(#dl-sq) { margin-left: 8px; padding: 3px 7px; font: 700 10.5px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c0435a; border-radius: 999px !important; vertical-align: middle; }
/* Coming-soon state on the two new categories */
body.dl-v2 .dl-soon:not(#dl-sq):not(#dl-sq) { margin: 10px 0 30px; padding: 26px; background: linear-gradient(120deg, #f5f7fa, #e9eef5); border: 1px solid var(--line); border-radius: var(--sq-lg) !important; corner-shape: squircle; }
body.dl-v2 .dl-soon b { display: block; font: 800 22px/1.2 var(--text); color: var(--ink); }
body.dl-v2 .dl-soon p { margin: 6px 0 16px; color: #4f6275; }
body.dl-v2 .dl-soon__btn:not(#dl-sq):not(#dl-sq) { display: inline-flex; padding: 12px 20px; background: #25d366; color: #fff !important; font-weight: 700; border-radius: 999px !important; text-decoration: none !important; }
/* --- 48h. Apple in white (owner, 25 Oct) ------------------------------------ */
body.dl-v2 .dl-launch__half--pro:not(#dl-sq) { background: #f5f5f7 !important; color: #1d1d1f !important; }
body.dl-v2 .dl-launch__half--duo:not(#dl-sq) { background: #fbfbfd !important; }
body.dl-v2 .dl-launch__half--pro .dl-launch__title:not(#dl-sq) { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: #1d1d1f !important; }
body.dl-v2 .dl-launch__half--pro .dl-launch__sub { color: #4a4a4f; opacity: 1; }
body.dl-v2 .dl-launch__half--pro .dl-launch__cta:not(#dl-sq):not(#dl-sq) { background: #14212f !important; color: #fff !important; }
body.dl-v2 .dl-launch:not(#dl-sq):not(#dl-sq) { box-shadow: 0 14px 40px rgba(0,0,0,.28); }
body.dl-v2 .dl-launch__half--pro { border-right: 1px solid #e5e5ea; }
body.dl-v2 .dl-promo--fb:not(#dl-sq) { --g: 160,170,190; background: linear-gradient(135deg, #ffffff 0%, #f7f8fa 60%, #eef0f4 100%) !important; }
body.dl-v2 .dl-promo--coral:not(#dl-sq) { --g: 160,170,190; background: linear-gradient(135deg, #ffffff 0%, #fafafa 60%, #f1f1f3 100%) !important; }
body.dl-v2 .dl-promo--fb .dl-promo__eyebrow, body.dl-v2 .dl-promo--coral .dl-promo__eyebrow { color: #6e6e73 !important; }
/* Bigger product photos on the four laptop cards */
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full) .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 74%; height: 62%; right: 2%; bottom: 4%; }
@media (max-width: 767px) {
body.dl-v2 .dl-promos .dl-promo:not(.dl-promo--half):not(.dl-promo--full) .dl-promo__img:not(#dl-sq):not(#dl-sq) { width: 80%; height: 50%; }
}
/* gap between the two launch tiles */
body.dl-v2 .dl-launch:not(#dl-sq):not(#dl-sq) { gap: 16px; background: transparent; box-shadow: none; overflow: visible; }
body.dl-v2 .dl-launch__half:not(#dl-sq):not(#dl-sq) { border-radius: var(--sq-lg) !important; corner-shape: squircle; box-shadow: 0 14px 40px rgba(0,0,0,.28); border-right: 0 !important; }
/* qty + Add to cart share one row on phones too */
body.dl-v2 .summary form.cart .single_add_to_cart_button:not(#dl-sq):not(#dl-sq):not(#dl-sq) { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
body.dl-v2 .summary form.cart .quantity:not(#dl-sq):not(#dl-sq):not(#dl-sq) { flex: 0 0 88px !important; width: 88px !important; }
body.dl-v2 .dl-launch__half--pro .dl-launch__img:not(#dl-sq):not(#dl-sq) { height: 88%; top: 6%; bottom: auto; }