/*
Theme Name: dmarketplace v9
Theme URI: https://dmarketplaceuae.com
Author: d.marketplace
Author URI: https://dmarketplaceuae.com
Description: A clean ecommerce marketplace theme with category tabs, product grid, WhatsApp ordering, and product detail pages. Version 9 fixes mini-cart layout (image/title/remove/buttons alignment).
Version: 9.1.0
License: GNU General Public License v2 or later
Text Domain: dmarketplace-v9
*/
/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 15px; background: #ffffff; color: #1a1a1a; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; border: none; }
/* Skip link (WCAG 2.4.1, Level A).
Off-screen rather than display:none — a hidden element cannot receive focus,
so display:none would defeat the entire purpose. Becomes visible only when
focused by keyboard. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10000;
padding: 12px 20px;
background: #1a1a1a;
color: #fff;
font-size: 15px;
font-weight: 700;
border-radius: 0 0 10px 0;
text-decoration: none;
}
.skip-link:focus {
left: 0;
outline: 3px solid #ffb703;
outline-offset: 2px;
}
/* The skip target is programmatically focused, never clicked — suppress the
focus ring it would otherwise draw around the whole page content. */
#dmp-main:focus { outline: none; }
/* ===== VARIABLES ===== */
:root {
--bg: #f8f8f8;
--card: #ffffff;
--primary: #E8A020;
--primary-dark: #c98a18;
/* WCAG AA-safe gold for text on white. Passes 4.5:1 contrast.
Use this for prices, gold links and any gold text on a light bg.
#E8A020 itself is only 2.4:1 and fails PSI/Lighthouse contrast. */
--primary-text: #8b5e10;
--foreground: #1a1a1a;
--muted: #6b6b6b;
--border: #e2ddd5;
--radius: 0.75rem;
--max-width: 1280px;
}
/* ===== ANNOUNCEMENT BAR ===== */
/* Dark text on gold — was white on gold (contrast ~2.7:1, failed WCAG AA).
* Dark on gold gives ~7:1 and matches the brand's other gold buttons. */
.announcement-bar { background: var(--primary); color: var(--foreground); font-size: 12px; font-weight: 700; padding: 8px 16px; overflow: hidden; }
.announcement-bar__inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
.announcement-bar__item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.announcement-bar__item svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 768px) {
.announcement-bar { padding: 6px 12px; }
.announcement-bar__inner { gap: 12px; }
.announcement-bar__item { font-size: 11px; }
}
/* ===== HEADER / NAV ===== */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.site-header__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.site-logo { font-size: 22px; font-weight: 900; letter-spacing: -0.05em; color: var(--foreground); display: flex !important; align-items: center !important; min-width: 0; line-height: 1; }
.site-logo span { color: var(--primary); font-weight: 700; }
.site-logo img { height: 50px; width: auto; object-fit: contain; display: block; }
.custom-logo-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 50px !important;
max-width: 250px !important;
}
.custom-logo-wrapper img {
height: 100% !important;
width: auto !important;
max-width: 250px !important;
object-fit: contain !important;
display: block !important;
image-rendering: crisp-edges !important;
image-rendering: -webkit-optimize-contrast !important;
padding: 0 !important;
margin: 0 !important;
}
.custom-logo-link { display: flex !important; align-items: center !important; flex-shrink: 0 !important; }
.site-nav { display: flex; align-items: center; gap: 24px; flex: 1; }
.site-nav a { font-size: 14px; font-weight: 500; color: var(--foreground); transition: color 0.2s; white-space: nowrap; }
.site-nav a:hover, .site-nav a.current-menu-item { color: var(--primary); }
.header-icons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* ── Desktop Search Bar (input only, no icon) ───────────────────── */
.header-search { flex: 1; max-width: 400px; margin: 0 16px; position: relative; }
.header-search__inner {
display: flex;
align-items: center;
background: #f5f5f5;
border: 1.5px solid var(--border);
border-radius: 10px;
height: 40px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.header-search__inner:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(232,160,32,0.12);
background: #fff;
}
.header-search__input {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
font-family: inherit;
color: var(--foreground);
outline: none;
padding: 0 14px;
width: 100%;
height: 100%;
border-radius: 10px;
}
.header-search__input::placeholder { color: #aaa; }
/* Mobile search toggle — hidden on desktop */
.mobile-search-toggle { display: none; }
/* ── Mobile Search Bar (slides down from under header) ───────────── */
.mobile-search-bar {
display: none; /* hidden by default */
background: #fff;
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
position: sticky;
top: 56px; /* header height on mobile */
z-index: 99;
animation: slideDown 0.18s ease;
}
.mobile-search-bar.is-open { display: block; }
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.mobile-search-bar__inner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
}
.mobile-search-bar__icon { flex-shrink: 0; color: #999; }
.mobile-search-bar__input {
flex: 1;
border: 1.5px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
font-size: 15px;
font-family: inherit;
color: var(--foreground);
background: #f5f5f5;
outline: none;
min-width: 0;
transition: border-color 0.2s;
}
.mobile-search-bar__input:focus {
border-color: var(--primary);
background: #fff;
}
.mobile-search-bar__input::placeholder { color: #aaa; }
.mobile-search-bar__close {
flex-shrink: 0;
background: none;
border: none;
color: var(--foreground);
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.mobile-search-bar__close:hover { background: #f0f0f0; }
.header-icon-btn { padding: 8px; border-radius: 8px; background: none; border: none; color: var(--foreground); display: flex; align-items: center; justify-content: center; transition: background 0.2s; position: relative; cursor: pointer; }
.header-icon-btn:hover { background: var(--bg); }
.header-icon-btn svg { width: 20px; height: 20px; }
.cart-count { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 768px) {
.site-header__inner { padding: 0 16px; height: 56px; gap: 12px; }
.site-logo { font-size: 16px; }
.site-logo img { height: 36px; }
.custom-logo-wrapper {
height: 36px !important;
max-width: 250px !important;
display: flex !important;
align-items: center !important;
}
.custom-logo-wrapper img {
height: 100% !important;
width: auto !important;
max-width: 250px !important;
}
.site-nav { gap: 16px; display: none; }
.site-nav a { font-size: 13px; }
/* Hide the desktop header search on mobile — user opens it via the magnifying-glass icon */
.header-search { display: none; }
/* Show the magnifying-glass icon on mobile so users can open the popup search */
.mobile-search-toggle { display: flex; }
.header-icon-btn { padding: 6px; }
.header-icon-btn svg { width: 18px; height: 18px; }
}
/* Desktop-only hard guards — enforce that the mobile-only elements
* are hidden on every desktop viewport, regardless of any other rule.
* These !importants are intentional: prevent the popup from ever
* appearing when a user clicks the (hidden) icon on a wide screen. */
@media (min-width: 769px) {
.mobile-search-toggle,
.mobile-search-bar { display: none !important; }
}
/* Kill the mobile dark tap-highlight flash on every interactive header
* button (was showing as a big black overlay when Jimmy tapped the
* magnifying-glass icon on his phone). Also removes the flash on the
* mobile search bar's close button + input. */
.header-icon-btn,
.mobile-search-toggle,
.mobile-search-bar__close,
.mobile-search-bar__input {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
/* ===== CATEGORY TABS ===== */
.category-tabs { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 60px; z-index: 50; }
.category-tabs__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 12px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.category-tabs__inner::-webkit-scrollbar { display: none; }
.category-tab { flex-shrink: 0; padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; cursor: pointer; }
.category-tab:hover { color: var(--foreground); }
.category-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
@media (max-width: 768px) {
.category-tabs { top: 56px; }
.category-tabs__inner { padding: 0 16px; gap: 8px; }
.category-tab { padding: 10px 12px; font-size: 13px; }
}
/* ===== MAIN CONTENT ===== */
.site-main { max-width: var(--max-width); margin: 0 auto; padding: 0 24px 64px; }
@media (max-width: 768px) {
.site-main { padding: 0 16px 48px; }
}
/* ===== PRODUCT SECTION ===== */
.product-section { padding: 24px 0; border-bottom: 1px solid var(--border); }
.product-section:last-child { border-bottom: none; }
.product-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.product-section__title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.product-section__title::before { content: ''; display: inline-block; width: 4px; height: 20px; background: var(--primary); border-radius: 99px; flex-shrink: 0; }
.product-section__see-all { font-size: 13px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 4px; }
.product-section__see-all:hover { text-decoration: underline; }
@media (max-width: 768px) {
.product-section { padding: 16px 0; }
.product-section__title { font-size: 15px; }
.product-section__see-all { font-size: 12px; }
}
/* ===== PRODUCT GRID ===== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
@media (max-width: 480px) {
.product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (min-width: 481px) and (max-width: 768px) {
.product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.product-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
@media (min-width: 1025px) {
.product-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}
/* ===== PRODUCT CARD ===== */
.product-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s; }
.product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.product-card__image-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.product-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.product-card:hover .product-card__image-wrap img { transform: scale(1.05); }
.product-card__badge { position: absolute; top: 8px; right: 8px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; }
.product-card__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__category { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.product-card__name { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__name:hover { color: var(--primary); }
.product-card__price { font-size: 14px; font-weight: 700; color: var(--primary); margin-top: auto; }.product-card__actions { display: flex; gap: 8px; margin-top: 8px; }
/* Desktop: Text buttons */
@media (min-width: 769px) {
.btn-whatsapp {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--primary);
border-radius: 6px;
padding: 10px 8px;
background: #ffffff;
color: var(--primary);
transition: all 0.3s ease;
cursor: pointer;
min-height: 44px;
}
.btn-whatsapp:hover {
background: rgba(232, 160, 32, 0.08);
box-shadow: 0 2px 8px rgba(232, 160, 32, 0.15);
}
.btn-whatsapp:active {
transform: scale(0.98);
}
.btn-whatsapp svg {
width: 20px;
height: 20px;
}
.btn-whatsapp .whatsapp-text {
display: none;
}
.btn-cart {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
padding: 10px 8px;
background: var(--primary);
color: #fff;
border: none;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 8px rgba(232, 160, 32, 0.25);
min-height: 44px;
}
.btn-cart:hover {
background: var(--primary-dark);
box-shadow: 0 4px 12px rgba(232, 160, 32, 0.35);
transform: translateY(-1px);
}
.btn-cart:active {
transform: scale(0.98);
}
.btn-cart svg {
width: 20px;
height: 20px;
}
.btn-cart .cart-text {
display: none;
}
}
/* Mobile: Icon buttons - Professional style */
@media (max-width: 768px) {
.btn-whatsapp {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--primary);
border-radius: 6px;
padding: 10px 8px;
background: #ffffff;
color: var(--primary);
transition: all 0.3s ease;
cursor: pointer;
min-height: 44px;
}
.btn-whatsapp:hover {
background: rgba(232, 160, 32, 0.08);
box-shadow: 0 2px 8px rgba(232, 160, 32, 0.15);
}
.btn-whatsapp:active {
transform: scale(0.98);
}
.btn-whatsapp svg {
width: 20px;
height: 20px;
}
.btn-whatsapp .whatsapp-text {
display: none;
}
.btn-cart {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
padding: 10px 8px;
background: var(--primary);
color: #ffffff;
border: none;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 8px rgba(232, 160, 32, 0.25);
min-height: 44px;
}
.btn-cart:hover {
background: var(--primary-dark);
box-shadow: 0 4px 12px rgba(232, 160, 32, 0.35);
transform: translateY(-1px);
}
.btn-cart:active {
transform: scale(0.98);
}
.btn-cart svg {
width: 20px;
height: 20px;
}
.btn-cart .cart-text {
display: none;
}
}
.btn-cart:disabled, .btn-whatsapp:disabled {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
/* ===== PRODUCT DETAIL ===== */
.product-detail { padding: 24px 0 64px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 24px; transition: color 0.2s; }
.back-link:hover { color: var(--foreground); }
.product-detail__grid { display: grid; gap: 32px; }
@media (min-width: 769px) {
.product-detail__grid { grid-template-columns: 500px 1fr; gap: 40px; align-items: start; }
}
/* PRODUCT GALLERY - MAIN IMAGE + HORIZONTAL THUMBNAILS */
.product-detail__gallery {
border-radius: 1.25rem;
border: 1px solid var(--border);
background: var(--bg);
display: flex;
flex-direction: column;
gap: 0;
max-width: 500px;
width: 100%;
}
/* MAIN IMAGE - fixed 500×500, never stretched */
.gallery-main-image {
width: 100%;
height: 500px;
max-height: 500px;
overflow: hidden;
border-radius: 1.25rem 1.25rem 0 0;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
}
.main-gallery-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
/* HORIZONTAL THUMBNAILS WRAPPER */
.gallery-thumbnails-wrapper {
padding: 12px;
background: var(--card);
border-top: 1px solid var(--border);
border-radius: 0 0 1.25rem 1.25rem;
}
.gallery-thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px 0;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.gallery-thumbnails::-webkit-scrollbar {
height: 6px;
}
.gallery-thumbnails::-webkit-scrollbar-track {
background: transparent;
}
.gallery-thumbnails::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
/* THUMBNAIL ITEMS */
.gallery-thumbnail {
flex-shrink: 0;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
border: 2px solid transparent;
background: var(--bg);
}
.gallery-thumbnail:hover {
transform: scale(1.05);
border-color: var(--muted);
}
.gallery-thumbnail.active {
border-color: var(--primary);
box-shadow: 0 0 8px rgba(232, 160, 32, 0.3);
}
.thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.product-detail__image { border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 1; background: var(--bg); }
.product-detail__image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__info { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.product-detail__category { font-size: 13px; font-weight: 600; color: var(--primary); }
.product-detail__title { font-size: 24px; font-weight: 700; line-height: 1.2; }
.product-detail__price { font-size: 20px; font-weight: 700; color: var(--primary); }
.product-detail__desc { font-size: 15px; color: var(--muted); line-height: 1.7; }
.btn-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary); color: #fff; border: none; border-radius: 0.75rem; padding: 14px; font-size: 15px; font-weight: 600; transition: background 0.2s; cursor: pointer; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: none; color: var(--foreground); border: 1px solid var(--border); border-radius: 0.75rem; padding: 14px; font-size: 15px; font-weight: 600; transition: all 0.2s; cursor: pointer; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.product-detail__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--border); padding-top: 20px; }
.trust-item { display: flex; align-items: flex-start; gap: 10px; }
.trust-item svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.trust-item__title { font-size: 13px; font-weight: 600; }
.trust-item__sub { font-size: 12px; color: var(--muted); }
@media (max-width: 768px) {
.product-detail { padding: 16px 0 48px; }
.product-detail__trust { grid-template-columns: 1fr; }
.product-detail__gallery { max-width: 100%; }
.gallery-main-image { height: 320px; max-height: 320px; }
.gallery-thumbnail { width: 64px; height: 64px; }
}
/* ===== FOOTER ===== */
footer {
background: #f8f8f8;
border-top: 1px solid var(--border);
padding: 48px 24px 32px;
margin-top: 80px;
width: 100%;
}
footer .footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px;
margin-bottom: 32px;
}
footer .footer-section h3 {
font-size: 14px;
font-weight: 700;
color: var(--foreground);
margin-bottom: 12px;
}
footer .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
footer .footer-section li {
margin-bottom: 8px;
}
footer .footer-section a {
font-size: 13px;
color: var(--muted);
transition: color 0.2s;
}
footer .footer-section a:hover {
color: var(--primary);
}
footer .footer-bottom {
max-width: var(--max-width);
margin: 0 auto;
padding-top: 24px;
border-top: 1px solid var(--border);
text-align: center;
}
footer p {
font-size: 13px;
color: var(--muted);
margin: 0;
}
@media (max-width: 768px) {
footer { padding: 32px 16px 24px; margin-top: 48px; }
footer .footer-inner {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* ===== WC OVERRIDES ===== */
.woocommerce-message, .woocommerce-info { background: var(--card); border-left: 4px solid var(--primary); padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); font-size: 14px; }
.woocommerce-error { background: #fef2f2; border-left: 4px solid #dc2626; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); font-size: 14px; }
/* ── Related Products ───────────────────────────────────────────── */
.related-products {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.related-products .product-section__header {
margin-bottom: 20px;
text-align: center;
}
.related-products .product-section__title {
font-size: 20px;
font-weight: 700;
color: var(--foreground);
justify-content: center;
}
.related-products .product-section__title::before {
content: '';
display: inline-block;
width: 4px;
height: 20px;
background: var(--primary);
border-radius: 2px;
margin-right: 10px;
vertical-align: middle;
}
/* 4 cards, centered — max-width keeps them tight if fewer than 4 */
.related-products .product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
@media (max-width: 900px) {
.related-products .product-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
}
@media (max-width: 480px) {
.related-products .product-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
.related-products { margin-top: 32px; }
}
.search-results-wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 32px 24px 64px;
}
.search-results-wrap h1 {
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
color: var(--foreground);
}
.search-results-wrap .search-meta {
font-size: 14px;
color: var(--muted);
margin-bottom: 28px;
}
.search-results-wrap .product-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.no-results-msg {
text-align: center;
padding: 48px 24px;
color: var(--muted);
font-size: 15px;
}
.no-results-msg a { color: var(--primary); font-weight: 600; }
@media (max-width: 1024px) {
.search-results-wrap .product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
.search-results-wrap .product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related-products { margin-top: 32px; }
}
@media (max-width: 480px) {
.search-results-wrap .product-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── AJAX Search Results Dropdown ───────────────────────────────── */
.search-results-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
z-index: 200;
max-height: 420px;
overflow-y: auto;
display: none;
}
.search-results-dropdown.is-open { display: block; }
.search-result-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
text-decoration: none;
color: var(--foreground);
transition: background 0.15s;
border-bottom: 1px solid var(--border);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #fafafa; }
.search-result-item__img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
background: #f5f5f5;
}
.search-result-item__info { min-width: 0; flex: 1; }
.search-result-item__title {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-result-item__cat {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.search-result-item__price {
font-size: 13px;
font-weight: 700;
color: var(--primary);
white-space: nowrap;
flex-shrink: 0;
}
.search-no-results {
padding: 20px;
text-align: center;
color: var(--muted);
font-size: 14px;
}
.search-loading {
padding: 16px;
text-align: center;
color: var(--muted);
font-size: 13px;
}
/* Mobile search results sit below the bar */
#mobile-search-results {
position: static;
border-radius: 0;
border: none;
border-top: 1px solid var(--border);
box-shadow: none;
max-height: 60vh;
}
/* ── Show More / Less Description ─────────────────────────────────
*
* The wrap measures its full content via JS. If it fits naturally,
* JS removes .is-clamped and the wrap shows everything (no button).
* Otherwise the wrap clamps to ~200px with a gradient fade at the
* bottom and the Show more button reveals.
*/
.product-desc-wrap {
position: relative;
font-size: 14px;
line-height: 1.6;
color: var(--muted);
transition: max-height 0.4s ease;
}
.product-desc-wrap.is-clamped {
overflow: hidden;
max-height: 200px;
}
.product-desc-wrap.is-clamped.is-expanded {
max-height: 9999px;
}
/* Fade-out gradient at the bottom only while clamped & not expanded */
.product-desc-fade {
display: none;
pointer-events: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 70px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 65%, #fff 100%);
}
.product-desc-wrap.is-clamped:not(.is-expanded) .product-desc-fade {
display: block;
}
.product-desc-inner p:first-child,
.product-desc-inner ul:first-child,
.product-desc-inner ol:first-child {
margin-top: 0;
}
.product-desc-inner p,
.product-desc-inner ul,
.product-desc-inner ol,
.product-desc-inner li {
font-size: 14px;
line-height: 1.6;
color: var(--muted);
}
.product-desc-inner strong { color: var(--foreground); }
.product-desc-wrap p { margin: 0 0 12px; }
.product-desc-wrap p:last-child { margin-bottom: 0; }
.product-desc-wrap ul, .product-desc-wrap ol {
margin: 0 0 12px;
padding-left: 1.4em;
}
.product-desc-wrap li { margin-bottom: 4px; }
/* Show More / Show Less button */
.product-desc-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 14px 0 0;
padding: 9px 22px;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 999px;
color: var(--foreground);
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: border-color .2s, color .2s, background .2s, transform .15s ease;
}
.product-desc-toggle:hover {
border-color: var(--primary);
color: var(--primary);
background: #fffbf0;
transform: translateY(-1px);
}
.product-desc-toggle[hidden] { display: none !important; }
.product-desc-toggle__chev {
transition: transform .25s ease;
}
.product-desc-toggle[aria-expanded="true"] .product-desc-toggle__chev {
transform: rotate(180deg);
}
/* Short description — hidden until Show More is clicked */
/* ── Attributes & Variations ─────────────────────────────────── */
.dmp-atc-form { margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
/* Variation dropdowns */
.dmp-atc-form table.variations { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.dmp-atc-form table.variations tr { border: none; }
.dmp-atc-form table.variations td { border: none; padding: 4px 0 8px; vertical-align: middle; }
.dmp-atc-form table.variations .label { width: 90px; padding-right: 12px; }
.dmp-atc-form table.variations .label label {
font-size: 13px; font-weight: 700; color: var(--foreground);
text-transform: uppercase; letter-spacing: .04em;
}
.dmp-atc-form table.variations select {
border: 1.5px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
font-size: 14px;
font-family: inherit;
color: var(--foreground);
background: #fff;
cursor: pointer;
min-width: 160px;
}
.dmp-atc-form table.variations select:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(232,160,32,.12);
}
.dmp-atc-form .reset_variations {
font-size: 11px; color: var(--muted); text-decoration: underline;
cursor: pointer; margin-left: 8px; display: inline-block; opacity: .7;
}
.dmp-atc-form .reset_variations:hover { opacity: 1; }
/* Variation price update */
.dmp-atc-form .woocommerce-variation-price .price {
font-size: 20px; font-weight: 700; color: var(--primary);
display: block; margin-bottom: 8px;
}
.dmp-atc-form .woocommerce-variation-price .price del { color: #999; font-weight: 400; font-size: .85em; margin-right: 6px; }
.dmp-atc-form .woocommerce-variation-price .price ins { text-decoration: none; }
/* Quantity + button row */
.dmp-atc-form .woocommerce-variation-add-to-cart,
.dmp-atc-form .quantity + .btn-primary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dmp-atc-form .quantity { display: flex; align-items: center; }
.dmp-atc-form .quantity input.qty {
width: 60px; height: 46px; border: 1.5px solid var(--border);
border-radius: 8px; text-align: center; font-size: 16px;
font-weight: 600; font-family: inherit; background: #fff;
color: var(--foreground); -moz-appearance: textfield;
}
.dmp-atc-form .quantity input.qty::-webkit-inner-spin-button,
.dmp-atc-form .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.dmp-atc-form .quantity input.qty:focus { outline: none; border-color: var(--primary); }
.dmp-atc-form button.btn-primary,
.dmp-atc-form .single_add_to_cart_button { flex: 1; min-width: 160px; height: 46px; }
/* Simple product attributes table */
.dmp-attr-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.dmp-attr-table th, .dmp-attr-table td { padding: 7px 10px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--border); }
.dmp-attr-table th { font-weight: 700; color: var(--foreground); width: 110px; background: #fafafa; }
.dmp-attr-table td { color: var(--muted); }
/* ═══════════════════════════════════════════════════════════════
SHORT DESCRIPTION — always visible above Show More
═══════════════════════════════════════════════════════════════ */
.product-detail__short-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 14px;
}
.product-detail__short-desc p:last-child { margin-bottom: 0; }
/* ═══════════════════════════════════════════════════════════════
VARIATION OPTION CIRCLES
═══════════════════════════════════════════════════════════════ */
.dmp-option-group { margin-bottom: 20px; }
.dmp-option-label {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
}
.dmp-option-label__name {
font-size: 12px;
font-weight: 700;
color: var(--foreground);
text-transform: uppercase;
letter-spacing: .06em;
}
.dmp-option-label__selected {
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.dmp-option-cards {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Base circle */
.dmp-option-card {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--border);
background: #fff;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .2s, box-shadow .2s, transform .2s;
flex-shrink: 0;
}
/* ── Color-filled circle ── */
.dmp-option-card--color {
background: var(--opt-color, #ccc);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.dmp-option-card--color:hover {
transform: scale(1.15);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px rgba(232,160,32,.35);
border-color: transparent;
}
.dmp-option-card--color.is-active {
transform: scale(1.15);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--primary);
border-color: transparent;
}
.dmp-option-card--color.is-active::after {
content: '✓';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 900;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
border-radius: 50%;
}
/* ── Text circle (size, storage, etc.) ── */
.dmp-option-card:not(.dmp-option-card--color):hover {
border-color: var(--primary);
color: var(--primary);
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(232,160,32,.2);
}
.dmp-option-card:not(.dmp-option-card--color).is-active {
border-color: var(--primary);
background: var(--primary);
color: #fff;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(232,160,32,.35);
}
.dmp-option-card__text {
font-size: 11px;
font-weight: 700;
line-height: 1.1;
text-align: center;
pointer-events: none;
max-width: 36px;
word-break: break-word;
hyphens: auto;
color: inherit;
}
@media (max-width: 480px) {
.dmp-option-card { width: 36px; height: 36px; }
.dmp-option-card__text { font-size: 10px; }
}
/* ═══════════════════════════════════════════════════════════════
BREADCRUMBS
═══════════════════════════════════════════════════════════════ */
.dmp-breadcrumbs {
font-size: 13px;
color: var(--muted);
margin-bottom: 16px;
}
.dmp-breadcrumbs a { color: var(--muted); }
.dmp-breadcrumbs a:hover { color: var(--primary); }
.dmp-breadcrumbs__sep { margin: 0 6px; color: var(--border); }
.dmp-breadcrumbs__current { color: var(--foreground); font-weight: 500; }
/* ═══════════════════════════════════════════════════════════════
SALE BADGE ON IMAGE
═══════════════════════════════════════════════════════════════ */
.dmp-sale-badge {
position: absolute;
top: 12px;
left: 12px;
background: #fde8e8;
color: #dc2626;
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
border-radius: 100px;
z-index: 2;
}
/* ═══════════════════════════════════════════════════════════════
RATING + SKU META ROW
═══════════════════════════════════════════════════════════════ */
.dmp-meta-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 10px;
}
.dmp-rating {
display: flex;
align-items: center;
gap: 6px;
}
.dmp-rating__stars {
position: relative;
display: inline-block;
font-size: 14px;
line-height: 1;
color: var(--border);
}
.dmp-rating__stars::before {
content: '★★★★★';
letter-spacing: 2px;
}
.dmp-rating__stars-fill {
position: absolute;
top: 0; left: 0;
overflow: hidden;
white-space: nowrap;
color: #f59e0b;
width: calc(var(--rating) / 5 * 100%);
}
.dmp-rating__stars-fill::before {
content: '★★★★★';
letter-spacing: 2px;
}
.dmp-rating__count {
font-size: 13px;
color: var(--muted);
text-decoration: underline;
}
.dmp-rating__count:hover { color: var(--primary); }
.dmp-sku {
font-size: 13px;
color: var(--muted);
}
.dmp-sku strong { color: var(--foreground); }
/* ═══════════════════════════════════════════════════════════════
PRICE + STOCK ROW
═══════════════════════════════════════════════════════════════ */
.dmp-price-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 10px;
}
.dmp-price-row .product-detail__price { margin: 0; }
.dmp-stock-pill {
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 100px;
}
.dmp-stock-pill.in-stock { background: #f0fdf4; color: #16a34a; }
.dmp-stock-pill.out-of-stock { background: #fef2f2; color: #dc2626; }
/* ═══════════════════════════════════════════════════════════════
WISHLIST / COMPARE
═══════════════════════════════════════════════════════════════ */
.dmp-secondary-actions {
display: flex;
align-items: center;
gap: 20px;
margin-top: 4px;
}
.dmp-link-btn {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
font-size: 13px;
font-weight: 500;
color: var(--foreground);
cursor: pointer;
padding: 0;
font-family: inherit;
transition: color .2s;
}
.dmp-link-btn:hover { color: var(--primary); }
.dmp-wishlist-btn.is-active { color: #ec4899; }
.dmp-wishlist-btn.is-active svg { fill: #ec4899; }
/* ═══════════════════════════════════════════════════════════════
BRAND ROW
═══════════════════════════════════════════════════════════════ */
.dmp-brand-row {
font-size: 13px;
color: var(--muted);
margin: 14px 0 0;
}
.dmp-brand-row a { color: var(--primary); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
SHARE ROW
═══════════════════════════════════════════════════════════════ */
.dmp-share-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
flex-wrap: wrap;
}
.dmp-share-row__label {
font-size: 13px;
font-weight: 600;
color: var(--foreground);
margin-right: 4px;
}
.dmp-share-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1.5px solid var(--border);
color: var(--muted);
cursor: pointer;
text-decoration: none;
transition: border-color .2s, color .2s, transform .15s;
}
.dmp-share-icon:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
/* ═══════════════════════════════════════════════════════════════
PRODUCT TABS
═══════════════════════════════════════════════════════════════ */
.dmp-product-tabs {
margin-top: 48px;
padding-top: 8px;
}
.dmp-tabs-nav {
display: flex;
gap: 28px;
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
flex-wrap: wrap;
}
.dmp-tab-btn {
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 12px 2px;
font-size: 15px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
font-family: inherit;
transition: color .2s, border-color .2s;
}
.dmp-tab-btn:hover { color: var(--foreground); }
.dmp-tab-btn.is-active {
color: var(--foreground);
border-bottom-color: var(--primary);
}
.dmp-tab-panel { display: none; }
.dmp-tab-panel.is-active { display: block; animation: dmpFadeIn .25s ease; }
@keyframes dmpFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.dmp-empty-tab {
color: var(--muted);
font-size: 14px;
padding: 12px 0;
}
/* Reviews tab — style WP comment list for product reviews */
.dmp-tab-panel[data-tab-panel="reviews"] .comment-list {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.dmp-tab-panel[data-tab-panel="reviews"] .comment-list li {
border-bottom: 1px solid var(--border);
padding: 16px 0;
}
.dmp-tab-panel[data-tab-panel="reviews"] .star-rating {
color: #f59e0b;
font-size: 14px;
margin-bottom: 4px;
}
.dmp-tab-panel[data-tab-panel="reviews"] .comment-form input,
.dmp-tab-panel[data-tab-panel="reviews"] .comment-form textarea {
width: 100%;
border: 1.5px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
font-family: inherit;
margin-bottom: 12px;
}
.dmp-tab-panel[data-tab-panel="reviews"] .comment-form .form-submit input {
width: auto;
background: var(--primary);
color: #fff;
border: none;
padding: 10px 24px;
font-weight: 600;
cursor: pointer;
}
@media (max-width: 600px) {
.dmp-tabs-nav { gap: 18px; overflow-x: auto; }
.dmp-tab-btn { font-size: 14px; white-space: nowrap; }
.dmp-meta-row { flex-wrap: wrap; gap: 10px; }
.dmp-share-row { gap: 8px; }
}
/* ═══════════════════════════════════════════════════════════════
MINI CART PANEL
═══════════════════════════════════════════════════════════════ */
.dmp-cart-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
}
.dmp-cart-overlay.is-open {
opacity: 1;
visibility: visible;
}
.dmp-mini-cart {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
background: #fff;
z-index: 999;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .3s ease;
box-shadow: -8px 0 30px rgba(0,0,0,.12);
}
.dmp-mini-cart.is-open {
transform: translateX(0);
}
.dmp-mini-cart__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.dmp-mini-cart__header h3 {
font-size: 16px;
font-weight: 700;
margin: 0;
}
.dmp-mini-cart__close {
background: none;
border: none;
cursor: pointer;
color: var(--foreground);
padding: 4px;
border-radius: 6px;
transition: background .2s;
}
.dmp-mini-cart__close:hover { background: #f3f3f3; }
.dmp-mini-cart__body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
body.dmp-no-scroll { overflow: hidden; }
/* WooCommerce default mini-cart widget markup, restyled
Actual WC structure per item:
×
![]()
Product Name
2 × price
*/
.dmp-mini-cart__body ul.woocommerce-mini-cart,
.dmp-mini-cart__body ul.cart_list {
list-style: none;
margin: 0;
padding: 0;
}
.dmp-mini-cart__body .woocommerce-mini-cart-item,
.dmp-mini-cart__body .mini_cart_item {
position: relative;
display: block;
padding: 14px 28px 14px 0;
border-bottom: 1px solid var(--border);
}
.dmp-mini-cart__body .woocommerce-mini-cart-item:first-child {
padding-top: 0;
}
/* The product link wraps BOTH image and title - make it flex so they sit side by side */
.dmp-mini-cart__body .mini_cart_item > a:not(.remove) {
display: flex;
align-items: flex-start;
gap: 12px;
text-decoration: none;
margin-bottom: 6px;
}
.dmp-mini-cart__body .mini_cart_item > a:not(.remove) img {
width: 56px;
height: 56px;
min-width: 56px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
margin: 0;
}
/* The text node after ![]()
inside the needs its own visual treatment */
.dmp-mini-cart__body .mini_cart_item > a:not(.remove) {
font-size: 13px;
font-weight: 600;
color: var(--foreground);
line-height: 1.4;
}
/* Quantity + price line, sits below the product link, indented past the image */
.dmp-mini-cart__body .mini_cart_item .quantity {
display: block;
font-size: 12px;
color: var(--muted);
margin-left: 68px;
}
.dmp-mini-cart__body .mini_cart_item .quantity .woocommerce-Price-amount,
.dmp-mini-cart__body .mini_cart_item .quantity bdi {
color: var(--primary);
font-weight: 600;
}
/* Remove (×) button - top right corner of each row */
.dmp-mini-cart__body .mini_cart_item a.remove {
position: absolute;
top: 14px;
right: 0;
width: 22px;
height: 22px;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fef2f2;
color: #dc2626 !important;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
transition: background .2s, transform .15s;
}
.dmp-mini-cart__body .mini_cart_item a.remove:hover {
background: #fee2e2;
transform: scale(1.1);
}
.dmp-mini-cart__body .total {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0 8px;
font-size: 15px;
font-weight: 700;
border-top: 1px solid var(--border);
margin-top: 8px;
}
.dmp-mini-cart__body .total .woocommerce-Price-amount,
.dmp-mini-cart__body .total bdi {
color: var(--primary);
}
.dmp-mini-cart__body .woocommerce-mini-cart__buttons,
.dmp-mini-cart__body p.buttons {
display: flex;
flex-direction: row;
gap: 10px;
margin: 16px 0 0;
padding: 0;
}
.dmp-mini-cart__body .woocommerce-mini-cart__buttons a,
.dmp-mini-cart__body p.buttons a {
flex: 1;
display: block;
text-align: center;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
transition: background .2s, border-color .2s, color .2s;
}
.dmp-mini-cart__body .woocommerce-mini-cart__buttons a.wc-forward,
.dmp-mini-cart__body p.buttons a.wc-forward {
background: #fff;
border: 1.5px solid var(--border);
color: var(--foreground) !important;
}
.dmp-mini-cart__body .woocommerce-mini-cart__buttons a.wc-forward:hover,
.dmp-mini-cart__body p.buttons a.wc-forward:hover {
border-color: var(--primary);
color: var(--primary) !important;
}
.dmp-mini-cart__body .woocommerce-mini-cart__buttons a.checkout,
.dmp-mini-cart__body p.buttons a.checkout {
background: var(--primary);
color: #fff !important;
border: none;
}
.dmp-mini-cart__body .woocommerce-mini-cart__buttons a.checkout:hover,
.dmp-mini-cart__body p.buttons a.checkout:hover {
background: var(--primary-dark, #c98a18);
}
.dmp-mini-cart__body .woocommerce-mini-cart__empty-message {
text-align: center;
color: var(--muted);
font-size: 14px;
padding: 40px 0;
}
/* ═══════════════════════════════════════════════════════════════
AJAX ADD-TO-CART LOADING SPINNER
═══════════════════════════════════════════════════════════════ */
.btn-cart { position: relative; }
.dmp-cart-spinner {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
background: inherit;
border-radius: inherit;
}
.btn-cart.loading .dmp-cart-spinner { display: flex; }
.btn-cart.loading .dmp-cart-spinner::after {
content: '';
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,.4);
border-top-color: #fff;
border-radius: 50%;
animation: dmpSpin .6s linear infinite;
}
@keyframes dmpSpin { to { transform: rotate(360deg); } }
.btn-cart.loading svg,
.btn-cart.loading .cart-text { opacity: 0; }
.btn-cart.added .cart-text::after { content: ' ✓'; }
@media (max-width: 480px) {
.dmp-mini-cart { max-width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════
QUICK VIEW BUTTON (on product card)
═══════════════════════════════════════════════════════════════ */
.product-card { position: relative; }
.dmp-quickview-btn {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--border);
color: var(--foreground);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: translateY(-4px);
transition: opacity .2s, transform .2s, border-color .2s, color .2s;
z-index: 3;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.product-card:hover .dmp-quickview-btn {
opacity: 1;
transform: translateY(0);
}
.dmp-quickview-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
/* Always visible on touch devices (no hover) */
@media (hover: none) {
.dmp-quickview-btn { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════════════════════════
QUICK VIEW MODAL
═══════════════════════════════════════════════════════════════ */
.dmp-qv-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
}
.dmp-qv-overlay.is-open { opacity: 1; visibility: visible; }
.dmp-qv-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -48%) scale(.96);
width: 92%;
max-width: 840px;
max-height: 88vh;
overflow-y: auto;
background: #fff;
border-radius: 16px;
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dmp-qv-modal.is-open {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.dmp-qv-close {
position: sticky;
top: 16px;
margin-left: auto;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--border);
cursor: pointer;
color: var(--foreground);
z-index: 5;
transition: border-color .2s, color .2s;
}
.dmp-qv-close:hover { border-color: var(--primary); color: var(--primary); }
.dmp-qv-content { padding: 8px 32px 32px; }
.dmp-qv-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.dmp-qv-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: dmpSpin .7s linear infinite;
}
.dmp-qv-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
@media (min-width: 700px) {
.dmp-qv-grid { grid-template-columns: 320px 1fr; }
}
.dmp-qv-gallery img {
width: 100%;
border-radius: 12px;
object-fit: cover;
aspect-ratio: 1/1;
}
.dmp-qv-category {
font-size: 12px;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 6px;
}
.dmp-qv-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.25;
}
.dmp-qv-price {
font-size: 20px;
font-weight: 700;
color: var(--primary);
margin-bottom: 12px;
}
.dmp-qv-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 14px;
}
.dmp-qv-info .dmp-stock-pill { margin-bottom: 16px; }
.dmp-qv-variable-note {
font-size: 13px;
color: var(--muted);
margin-bottom: 12px;
}
.dmp-qv-full-link,
.dmp-qv-wa {
display: block;
text-align: center;
margin-top: 10px;
}
.dmp-qv-view-full {
display: block;
text-align: center;
margin-top: 14px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.dmp-qv-view-full:hover { text-decoration: underline; }
.dmp-qv-content .dmp-atc-form {
margin: 0 0 8px;
}
.dmp-qv-content form.cart {
display: flex;
gap: 10px;
align-items: center;
}
@media (max-width: 600px) {
.dmp-qv-modal { max-height: 92vh; }
.dmp-qv-content { padding: 8px 18px 24px; }
.dmp-qv-title { font-size: 18px; }
}
/* ═══════════════════════════════════════════════════════════════
HOMEPAGE — premium ecommerce composition
Hero · Benefits · Categories · Best sellers · Promo · Latest
═══════════════════════════════════════════════════════════════ */
.dmp-home { max-width: var(--max-width); margin: 0 auto; padding: 0 24px 64px; }
@media (max-width: 768px) { .dmp-home { padding: 0 14px 48px; } }
/* Reusable section header (separate from legacy .product-section) */
.dmp-section { margin: 56px 0 0; }
@media (max-width: 768px) { .dmp-section { margin: 40px 0 0; } }
.dmp-section__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.dmp-section__title {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--foreground);
margin: 0;
line-height: 1.15;
}
.dmp-section__sub {
color: var(--muted);
font-size: 14px;
margin: 6px 0 0;
}
.dmp-section__see-all {
font-size: 13px;
font-weight: 700;
/* WCAG AA safe gold on white — was --primary #E8A020 (contrast ~2.6:1) */
color: var(--primary-text);
white-space: nowrap;
transition: opacity .2s;
}
.dmp-section__see-all:hover { opacity: .75; }
/* ─── HERO ─────────────────────────────────────────────────────── */
.dmp-hero {
position: relative;
margin: 24px 0 0;
border-radius: 28px;
overflow: hidden;
background:
radial-gradient(120% 100% at 0% 0%, rgba(232,160,32,.10), transparent 55%),
linear-gradient(135deg, #fff7ec 0%, #fffaf0 45%, #fff 100%);
border: 1px solid var(--border);
isolation: isolate;
}
@media (max-width: 600px) { .dmp-hero { border-radius: 20px; } }
@media (max-width: 900px) {
}
/* Hero media */
@media (max-width: 900px) {
}
/* Floating chips */
@media (max-width: 900px) {
}
@media (max-width: 480px) {
}
/* ─── BENEFITS / TRUST ROW ─────────────────────────────────────── */
@media (max-width: 900px) { }
@media (max-width: 420px) { }
/* ─── FEATURED CATEGORIES ──────────────────────────────────────── */
.dmp-cats__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 900px) { .dmp-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 480px) { .dmp-cats__grid { grid-template-columns: 1fr; } }
.dmp-cat-tile {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
overflow: hidden;
text-decoration: none;
}
.dmp-cat-tile:hover {
transform: translateY(-2px);
border-color: rgba(232,160,32,.5);
box-shadow: 0 14px 32px rgba(26,26,26,.08);
}
.dmp-cat-tile__image {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 14px;
background: linear-gradient(140deg, #fff5e3, #fff);
border: 1px solid var(--border);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.dmp-cat-tile__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.dmp-cat-tile:hover .dmp-cat-tile__image img { transform: scale(1.06); }
.dmp-cat-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dmp-cat-tile__name {
font-size: 15px;
font-weight: 700;
color: var(--foreground);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dmp-cat-tile__count { font-size: 12px; color: var(--muted); }
.dmp-cat-tile__arrow {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg);
color: var(--foreground);
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, color .2s, transform .2s;
}
.dmp-cat-tile:hover .dmp-cat-tile__arrow {
background: var(--primary);
color: #fff;
transform: translateX(2px);
}
/* ─── PROMO BANNER ─────────────────────────────────────────────── */
.dmp-promo { margin: 56px 0 0; }
.dmp-promo__inner {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: center;
gap: 30px;
padding: clamp(28px, 4vw, 48px);
border-radius: 24px;
background: linear-gradient(120deg, #1a1a1a 0%, #2a2418 55%, #3a2d12 100%);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.dmp-promo__inner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 100% at 100% 0%, rgba(232,160,32,.28), transparent 60%),
radial-gradient(50% 80% at 0% 100%, rgba(232,160,32,.18), transparent 60%);
z-index: -1;
}
.dmp-promo__copy { min-width: 0; }
.dmp-promo__eyebrow {
display: inline-block;
font-size: 11px;
letter-spacing: .12em;
font-weight: 700;
text-transform: uppercase;
color: var(--primary);
background: rgba(232,160,32,.15);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 14px;
}
.dmp-promo__title {
font-size: clamp(22px, 3vw, 34px);
line-height: 1.1;
font-weight: 800;
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.dmp-promo__sub {
color: rgba(255,255,255,.72);
font-size: 15px;
line-height: 1.55;
max-width: 50ch;
margin: 0 0 22px;
}
.dmp-promo__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
background: var(--primary);
color: #1a1a1a;
font-weight: 800;
font-size: 14px;
border-radius: 12px;
text-decoration: none;
transition: transform .15s ease, box-shadow .2s ease, background .2s;
}
.dmp-promo__cta:hover {
transform: translateY(-1px);
background: #ffb73a;
box-shadow: 0 10px 24px rgba(232,160,32,.35);
}
.dmp-promo__art {
position: relative;
height: 180px;
min-width: 0;
}
.dmp-promo__art span {
position: absolute;
border-radius: 22px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(4px);
}
.dmp-promo__art span:nth-child(1) {
width: 60%;
height: 60%;
top: 8%;
right: 6%;
background: linear-gradient(135deg, rgba(232,160,32,.6), rgba(232,160,32,.18));
transform: rotate(-6deg);
}
.dmp-promo__art span:nth-child(2) {
width: 45%;
height: 45%;
bottom: 4%;
left: 8%;
background: rgba(255,255,255,.08);
transform: rotate(8deg);
}
.dmp-promo__art span:nth-child(3) {
width: 30%;
height: 30%;
top: 38%;
right: 30%;
background: rgba(255,255,255,.12);
transform: rotate(-2deg);
}
@media (max-width: 760px) {
.dmp-promo__inner { grid-template-columns: 1fr; }
.dmp-promo__art { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
MINI-CART — hardening on top of existing rules
These are defensive additions that don't override the existing
layout, but make the panel robust against WC template variations
(some versions emit slightly different markup) and ensure clean
nested-div behavior after fragment refresh.
═══════════════════════════════════════════════════════════════ */
/* The inner widget_shopping_cart_content is the fragment target.
It must be a clean wrapper that doesn't introduce its own layout
constraints — let the items inside lay themselves out. */
.dmp-mini-cart__body .widget_shopping_cart_content {
display: block;
width: 100%;
min-width: 0;
}
/* In case a WC version emits the cart_list with display:flex from a
widget context, force the list back to block-level. */
.dmp-mini-cart__body ul.product_list_widget {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
/* Make sure dimensions on the product link are bullet-proof even if
the surrounding happens to be display:block in some WC builds. */
.dmp-mini-cart__body .mini_cart_item > a:not(.remove) img {
width: 56px !important;
height: 56px !important;
max-width: 56px !important;
object-fit: cover;
}
/* Some WC builds emit a "variation" detail block under the product
link — keep it visually aligned with the quantity line. */
.dmp-mini-cart__body .mini_cart_item dl.variation {
margin: 4px 0 0 68px;
font-size: 11px;
color: var(--muted);
}
.dmp-mini-cart__body .mini_cart_item dl.variation dt,
.dmp-mini-cart__body .mini_cart_item dl.variation dd {
display: inline;
margin: 0;
}
.dmp-mini-cart__body .mini_cart_item dl.variation dt::after { content: ": "; }
.dmp-mini-cart__body .mini_cart_item dl.variation dd { margin-right: 8px; }
/* Empty-cart state — give it some breathing room and reinforce centering
for new-style p.woocommerce-mini-cart__empty-message markup. */
.dmp-mini-cart__body p.woocommerce-mini-cart__empty-message,
.dmp-mini-cart__body .woocommerce-mini-cart__empty-message {
text-align: center;
color: var(--muted);
font-size: 14px;
padding: 60px 12px 24px;
margin: 0;
}
/* Hide stray empty /
nodes WC sometimes emits before the buttons */
.dmp-mini-cart__body p:empty { display: none; }
/* When the cart is empty, hide the total/buttons block to avoid a phantom
"AED 0.00" line under "Your cart is empty". */
.dmp-mini-cart__body .woocommerce-mini-cart__empty-message ~ .total,
.dmp-mini-cart__body .woocommerce-mini-cart__empty-message ~ .buttons,
.dmp-mini-cart__body .woocommerce-mini-cart__empty-message ~ .woocommerce-mini-cart__buttons,
.dmp-mini-cart__body .woocommerce-mini-cart__empty-message ~ .woocommerce-mini-cart__total {
display: none;
}
/* ═══════════════════════════════════════════════════════════════
PRODUCT-CARD ACTIONS — STACKED LAYOUT
Add to Cart on top, WhatsApp directly underneath.
Both buttons full-width so the column is clean. Text labels are
shown again (previously hidden because both buttons shared a row).
═══════════════════════════════════════════════════════════════ */
.product-card__actions--stacked {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-top: 10px;
}
.product-card__actions--stacked .btn-cart,
.product-card__actions--stacked .btn-whatsapp {
width: 100%;
flex: 0 0 auto;
min-height: 40px;
padding: 10px 12px;
font-size: 13px;
font-weight: 700;
border-radius: 8px;
gap: 6px;
}
.product-card__actions--stacked .btn-cart .cart-text,
.product-card__actions--stacked .btn-whatsapp .whatsapp-text {
display: inline !important;
}
.product-card__actions--stacked .btn-cart svg,
.product-card__actions--stacked .btn-whatsapp svg {
width: 16px;
height: 16px;
}
@media (max-width: 380px) {
.product-card__actions--stacked .btn-cart,
.product-card__actions--stacked .btn-whatsapp {
font-size: 12px;
min-height: 38px;
padding: 9px 10px;
}
}
/* ═══════════════════════════════════════════════════════════════
HOMEPAGE PRODUCT GRID — fixed columns so rows always fill
The legacy .product-grid uses auto-fill, which can produce
uneven rows (5 + 3 from 8 items at some widths). Inside our
new .dmp-section we lock the columns so 8 products are always
2 clean rows of 4 on desktop.
═══════════════════════════════════════════════════════════════ */
.dmp-section .product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 1024px) {
.dmp-section .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 700px) {
.dmp-section .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* ═══════════════════════════════════════════════════════════════
"ALL PRODUCTS" MEGA-MENU
Hangs off the All Products nav item. Hover-open on desktop
(only when (hover: hover) — i.e. real pointers, not touch),
click-toggle on touch / mobile.
═══════════════════════════════════════════════════════════════ */
.dmp-mm {
position: relative;
list-style: none;
}
/* When the host is a normal from wp_nav_menu, neutralise its
default list styling so it looks identical to the other nav links. */
.site-nav .dmp-mm,
.site-nav li.dmp-mm {
margin: 0;
padding: 0;
}
.dmp-mm__head {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* The "All Products" link itself — match the look of plain nav links */
.dmp-mm__head > a {
font-size: 14px;
font-weight: 500;
color: var(--foreground);
text-decoration: none;
transition: color .2s;
white-space: nowrap;
}
.dmp-mm:hover .dmp-mm__head > a, .dmp-mm.is-open .dmp-mm__head > a {
color: var(--primary);
}
.dmp-mm__chev {
background: none;
border: none;
padding: 6px 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--foreground);
cursor: pointer;
border-radius: 6px;
transition: background .15s, color .15s;
line-height: 1;
}
.dmp-mm__chev:hover { background: var(--bg); color: var(--primary); }
.dmp-mm__chev svg { transition: transform .25s ease; }
.dmp-mm.is-open .dmp-mm__chev svg,
.dmp-mm:hover .dmp-mm__chev svg {
transform: rotate(180deg);
color: var(--primary);
}
/* Invisible bridge so cursor moving from "All Products" diagonally
down to the wide panel doesn't fall off and close the menu.
Spans the full 760px panel width (not just the trigger width)
AND extends the panel itself upward via a sibling bridge so the
path is fully covered. */
.dmp-mm::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: min(760px, calc(100vw - 32px));
height: 16px;
pointer-events: auto;
}
.dmp-mm__panel::before {
content: "";
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
pointer-events: auto;
}
.dmp-mm__panel {
position: absolute;
top: calc(100% + 14px);
left: 0;
width: min(760px, calc(100vw - 32px));
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
box-shadow:
0 24px 60px -10px rgba(26,26,26,.18),
0 8px 20px -8px rgba(26,26,26,.10);
padding: 22px 22px 16px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index: 120;
/* No scrollbar — panel grows to natural height. With push-down
children (CSS below), the tallest expanded category only adds
~120px; total panel stays well under 500px even with 5 sub-cats.
If you ever load this on a 400px-tall viewport, the page itself
will scroll. Better than an ugly inner scrollbar. */
max-height: none;
overflow: visible;
}
.dmp-mm.is-open > .dmp-mm__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Desktop hover-open — only on devices with real hover capability */
@media (hover: hover) {
.dmp-mm:hover > .dmp-mm__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.dmp-mm__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px 28px;
}
.dmp-mm__col {
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
}
.dmp-mm__parent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
color: var(--foreground);
font-size: 14px;
font-weight: 800;
letter-spacing: -0.01em;
text-decoration: none;
transition: color .2s ease, border-color .2s ease;
}
.dmp-mm__parent:hover,
.dmp-mm__col:hover .dmp-mm__parent,
.dmp-mm__col:focus-within .dmp-mm__parent {
color: var(--primary);
border-color: var(--primary);
}
.dmp-mm__parent-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Down-chevron — always visible at half opacity to indicate a
submenu; brightens and flips on hover. */
.dmp-mm__parent-arrow {
flex-shrink: 0;
opacity: 0.55;
transition: opacity .2s ease, transform .2s ease;
}
.dmp-mm__col:hover .dmp-mm__parent-arrow,
.dmp-mm__col:focus-within .dmp-mm__parent-arrow {
opacity: 1;
transform: rotate(-180deg);
}
.dmp-mm__children {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.dmp-mm__children li { margin: 0; padding: 0; }
.dmp-mm__children a {
display: block;
padding: 6px 0;
font-size: 13px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
transition: color .15s ease, padding-left .15s ease;
border-radius: 4px;
}
.dmp-mm__children a:hover {
color: var(--primary);
padding-left: 4px;
}
/* DESKTOP HOVER-REVEAL — Children hidden by default; on parent hover
they expand INLINE (push-down), which makes the grid row containing
the hovered cell grow vertically. Other parents below shift down
instead of being covered by a floating dropdown. Per Jimmy's
preference: "when sub categories pop up, it should push away the
other parent category". Smooth animation via max-height + opacity.
On the grid, only the row containing the hovered cell grows, since
grid rows match their tallest cell — neighbouring columns in the
same row visually get taller too but have no extra content to show. */
@media (hover: hover) and (pointer: fine) {
.dmp-mm__children {
/* Stay in normal flow so expansion pushes other parents down. */
position: static;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
margin: 0;
/* Collapse to zero by default. */
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height .28s ease, opacity .2s ease, visibility .2s ease, margin-top .22s ease, padding .22s ease;
pointer-events: none;
}
.dmp-mm__col:hover .dmp-mm__children,
.dmp-mm__col:focus-within .dmp-mm__children {
/* 420px headroom — supports up to ~10 child entries. */
max-height: 420px;
opacity: 1;
visibility: visible;
margin-top: 6px;
padding: 4px 0 2px;
pointer-events: auto;
}
.dmp-mm__children a {
padding: 6px 0;
}
.dmp-mm__children a:hover {
padding-left: 8px;
}
}
.dmp-mm__viewall {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
padding: 10px 14px;
background: var(--bg);
color: var(--foreground);
font-size: 13px;
font-weight: 700;
text-decoration: none;
border-radius: 10px;
transition: background .2s ease, color .2s ease, transform .15s ease;
}
.dmp-mm__viewall:hover {
background: var(--primary);
color: #fff;
transform: translateX(2px);
}
/* Tablet — two columns inside the panel */
@media (max-width: 900px) {
.dmp-mm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile — collapse to fixed full-width panel below the header.
JS sets inline `top` to the live header bottom so the panel never
overlaps the announcement bar. */
@media (max-width: 768px) {
.dmp-mm__panel {
position: fixed;
top: 70px;
left: 14px;
right: 14px;
width: auto;
max-height: calc(100vh - 90px);
}
.dmp-mm__grid { grid-template-columns: 1fr; gap: 14px; }
/* Disable hover-open on small screens regardless of @media (hover) result */
.dmp-mm:hover > .dmp-mm__panel {
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
}
.dmp-mm.is-open > .dmp-mm__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
/* ═══════════════════════════════════════════════════════════════
QUANTITY STEPPER (single product page)
Wraps the WC quantity input with − / + buttons. The actual
button injection happens in main.js; this is the styling.
═══════════════════════════════════════════════════════════════ */
.dmp-atc-form .dmp-qty-stepper {
/* The parent .dmp-atc-form is flex-direction:column with default
* align-items:stretch, which would otherwise pull the stepper's
* border across the full row width. Constrain to content. */
display: inline-flex;
align-self: flex-start;
align-items: stretch;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
border: 1.5px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: #fff;
height: 46px;
}
.dmp-atc-form .dmp-qty-stepper .dmp-qty-btn {
width: 40px;
height: 100%;
border: none;
background: #fafafa;
color: var(--foreground);
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease;
-webkit-user-select: none;
user-select: none;
}
.dmp-atc-form .dmp-qty-stepper .dmp-qty-btn:hover {
background: rgba(232,160,32,.12);
color: var(--primary-dark);
}
.dmp-atc-form .dmp-qty-stepper .dmp-qty-btn:active {
background: rgba(232,160,32,.22);
}
.dmp-atc-form .dmp-qty-stepper .dmp-qty-btn:disabled {
opacity: .4;
cursor: default;
background: #fafafa;
color: var(--muted);
}
.dmp-atc-form .dmp-qty-stepper .dmp-qty-btn:disabled:hover {
/* No hover feedback when disabled (otherwise the minus at qty=1
* lights up on hover even though it's not actionable). */
background: #fafafa;
color: var(--muted);
}
/* When the input lives inside the stepper, drop its own border and
keep the width tight so the stepper reads as a single control. */
.dmp-atc-form .dmp-qty-stepper input.qty {
width: 52px;
height: 100%;
border: none;
border-left: 1.5px solid var(--border);
border-right: 1.5px solid var(--border);
border-radius: 0;
text-align: center;
font-size: 15px;
font-weight: 700;
font-family: inherit;
background: #fff;
color: var(--foreground);
-moz-appearance: textfield;
outline: none;
}
.dmp-atc-form .dmp-qty-stepper input.qty:focus {
background: #fffbeb;
}
.dmp-atc-form .dmp-qty-stepper input.qty::-webkit-inner-spin-button,
.dmp-atc-form .dmp-qty-stepper input.qty::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════
MOBILE HAMBURGER + CATEGORIES DRAWER
Hidden completely on desktop — only changes mobile experience.
═══════════════════════════════════════════════════════════════ */
.dmp-mb-toggle {
display: none; /* hidden on desktop */
background: none;
border: none;
padding: 8px;
margin-right: 4px;
border-radius: 8px;
color: var(--foreground);
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s;
flex-shrink: 0;
}
.dmp-mb-toggle:hover { background: var(--bg); }
.dmp-mb-toggle:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
@media (max-width: 768px) {
.dmp-mb-toggle { display: inline-flex; }
/* Slightly slim the logo so the hamburger + cart + account all
* fit comfortably on phone viewports. */
.site-logo { font-size: 15px; }
.site-logo img { height: 30px; }
.custom-logo-wrapper {
height: 30px !important;
max-width: 170px !important;
}
.custom-logo-wrapper img { max-width: 170px !important; }
/* Reduce the horizontal gap so things fit cleanly */
.site-header__inner { gap: 8px; padding: 0 12px; }
.header-icons { gap: 4px; }
}
/* Overlay backdrop behind the drawer */
.dmp-mb-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.42);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
}
.dmp-mb-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* The drawer itself — slides in from the LEFT */
.dmp-mb-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(86vw, 360px);
background: #fff;
z-index: 999;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform .3s ease;
box-shadow: 8px 0 30px rgba(0,0,0,.12);
/* Hide entirely on desktop */
visibility: hidden;
}
.dmp-mb-drawer.is-open {
transform: translateX(0);
visibility: visible;
}
@media (max-width: 768px) {
.dmp-mb-drawer { visibility: visible; }
}
.dmp-mb-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.dmp-mb-drawer__title {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--foreground);
}
.dmp-mb-drawer__close {
background: none;
border: none;
cursor: pointer;
color: var(--foreground);
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.dmp-mb-drawer__close:hover { background: var(--bg); }
.dmp-mb-drawer__body {
flex: 1;
overflow-y: auto;
padding: 8px 0 24px;
-webkit-overflow-scrolling: touch;
}
/* Categories list */
.dmp-mb-cats {
list-style: none;
margin: 0;
padding: 0;
}
.dmp-mb-cats__item {
border-bottom: 1px solid var(--border);
}
.dmp-mb-cats__item:last-child { border-bottom: none; }
.dmp-mb-cats__item--top .dmp-mb-cats__link {
font-weight: 700;
color: var(--foreground);
}
.dmp-mb-cats__row {
display: flex;
align-items: stretch;
position: relative;
}
.dmp-mb-cats__link {
flex: 1;
display: block;
padding: 14px 18px;
font-size: 14.5px;
font-weight: 600;
color: var(--foreground);
text-decoration: none;
line-height: 1.3;
transition: background .15s, color .15s;
}
.dmp-mb-cats__link:hover,
.dmp-mb-cats__link:active {
background: var(--bg);
color: var(--primary);
}
.dmp-mb-cats__toggle {
width: 50px;
background: transparent;
border: none;
border-left: 1px solid var(--border);
color: var(--foreground);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s, color .15s;
}
.dmp-mb-cats__toggle:hover {
background: var(--bg);
color: var(--primary);
}
.dmp-mb-cats__toggle svg {
transition: transform .25s ease;
}
.dmp-mb-cats__item.is-open > .dmp-mb-cats__row .dmp-mb-cats__toggle svg {
transform: rotate(180deg);
color: var(--primary);
}
/* Sub-category list — collapsed by default with smooth height transition */
.dmp-mb-cats__sub {
list-style: none;
margin: 0;
padding: 0;
background: var(--bg);
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}
.dmp-mb-cats__item.is-open > .dmp-mb-cats__sub {
max-height: 800px;
}
.dmp-mb-cats__sub-link {
display: block;
padding: 11px 18px 11px 32px;
font-size: 13.5px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
border-top: 1px solid var(--border);
transition: color .15s, background .15s, padding-left .15s;
}
.dmp-mb-cats__sub-link:hover,
.dmp-mb-cats__sub-link:active {
color: var(--primary);
background: #fff;
padding-left: 36px;
}
/* Body scroll lock when drawer is open */
body.dmp-mb-no-scroll { overflow: hidden; }
/* ═══════════════════════════════════════════════════════════════
CATEGORY ARCHIVE PAGE (.dmp-archive*)
Premium category landing: hero + breadcrumb + sub-cat chips +
sort toolbar + product grid + pagination + empty state.
Reuses .product-grid + .dmp-section + dmp_render_product_card.
═══════════════════════════════════════════════════════════════ */
.dmp-archive {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px 64px;
}
@media (max-width: 768px) {
.dmp-archive { padding: 0 14px 48px; }
}
/* --- HERO --- */
.dmp-archive__hero {
position: relative;
margin: 24px 0 0;
padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px);
border-radius: 24px;
border: 1px solid var(--border);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(120% 100% at 0% 0%, rgba(232,160,32,.10), transparent 55%),
linear-gradient(135deg, #fff7ec 0%, #fffaf0 45%, #fff 100%);
}
@media (max-width: 600px) { .dmp-archive__hero { border-radius: 18px; } }
.dmp-archive__hero-bg {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.dmp-archive__blob {
position: absolute;
width: 360px; height: 360px;
border-radius: 50%;
filter: blur(70px);
opacity: .5;
}
.dmp-archive__blob--a {
top: -140px; right: -100px;
background: radial-gradient(circle, rgba(232,160,32,.55), transparent 70%);
}
.dmp-archive__blob--b {
bottom: -160px; left: -120px;
background: radial-gradient(circle, rgba(26,26,26,.10), transparent 70%);
}
.dmp-archive__hero-inner { position: relative; z-index: 2; }
.dmp-archive__breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--muted);
margin-bottom: 14px;
}
.dmp-archive__breadcrumb a {
color: var(--muted);
text-decoration: none;
transition: color .15s ease;
}
.dmp-archive__breadcrumb a:hover { color: var(--primary); }
.dmp-archive__breadcrumb-sep { opacity: .5; }
.dmp-archive__breadcrumb-current {
color: var(--foreground);
font-weight: 600;
}
.dmp-archive__title {
margin: 0 0 10px;
font-size: clamp(24px, 4vw, 40px);
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--foreground);
}
.dmp-archive__sub {
color: var(--muted);
font-size: clamp(14px, 1.4vw, 16px);
line-height: 1.55;
max-width: 62ch;
margin: 0 0 14px;
}
.dmp-archive__sub p { margin: 0 0 8px; }
.dmp-archive__sub p:last-child { margin-bottom: 0; }
.dmp-archive__count {
display: inline-block;
margin-top: 4px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(232,160,32,.14);
color: var(--primary-dark);
font-size: 12px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
/* --- SUB-CATEGORY CHIPS --- */
.dmp-archive__chips {
margin-top: 22px;
overflow: hidden;
}
.dmp-archive__chips-inner {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.dmp-archive__chips-inner::-webkit-scrollbar { display: none; }
.dmp-archive__chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
color: var(--foreground);
border: 1.5px solid var(--border);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
white-space: nowrap;
}
.dmp-archive__chip:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
}
.dmp-archive__chip--all {
background: var(--foreground);
color: #fff;
border-color: var(--foreground);
}
.dmp-archive__chip--all:hover {
background: #000;
color: #fff;
border-color: #000;
}
.dmp-archive__chip-count {
font-size: 11px;
font-weight: 700;
color: var(--muted);
background: var(--bg);
padding: 1px 8px;
border-radius: 999px;
}
.dmp-archive__chip:hover .dmp-archive__chip-count {
background: rgba(232,160,32,.14);
color: var(--primary-dark);
}
.dmp-archive__chip--all .dmp-archive__chip-count {
background: rgba(255,255,255,.18);
color: #fff;
}
/* --- TOOLBAR (count + sort) --- */
.dmp-archive__toolbar {
margin: 28px 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.dmp-archive__toolbar-count {
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.dmp-archive__sort {
margin: 0;
display: flex;
align-items: center;
}
.dmp-archive__sort select {
appearance: none;
-webkit-appearance: none;
background: #fff
url("data:image/svg+xml;utf8,")
right 12px center / 12px no-repeat;
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 9px 36px 9px 14px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--foreground);
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.dmp-archive__sort select:hover { border-color: var(--primary); }
.dmp-archive__sort select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(232,160,32,.15);
}
/* --- GRID WRAPPER --- */
.dmp-archive__grid-wrap { margin: 0 !important; }
/* --- PAGINATION --- */
.dmp-archive__pagination {
margin: 36px 0 0;
display: flex;
justify-content: center;
}
.dmp-archive__pagination .nav-links,
.dmp-archive__pagination ul {
display: flex;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
justify-content: center;
}
.dmp-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 10px;
background: #fff;
border: 1.5px solid var(--border);
font-size: 13px;
font-weight: 700;
color: var(--foreground);
text-decoration: none;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.dmp-archive__pagination .page-numbers:hover {
border-color: var(--primary);
color: var(--primary);
}
.dmp-archive__pagination .page-numbers.current {
background: var(--primary);
border-color: var(--primary);
color: #fff;
pointer-events: none;
}
.dmp-archive__pagination .page-numbers.dots {
border: none;
background: transparent;
pointer-events: none;
}
@media (max-width: 480px) {
.dmp-archive__pagination .page-numbers {
min-width: 36px;
height: 36px;
font-size: 12px;
padding: 0 8px;
}
}
/* --- EMPTY STATE --- */
.dmp-archive__empty {
margin: 48px auto;
max-width: 460px;
padding: 48px 24px;
text-align: center;
background: #fff;
border: 1px solid var(--border);
border-radius: 22px;
}
.dmp-archive__empty-icon {
color: var(--muted);
opacity: .55;
margin: 0 auto 18px;
display: block;
}
.dmp-archive__empty-title {
font-size: 20px;
font-weight: 800;
margin: 0 0 6px;
color: var(--foreground);
letter-spacing: -0.01em;
}
.dmp-archive__empty-sub {
font-size: 14px;
color: var(--muted);
margin: 0 0 22px;
line-height: 1.5;
}
.dmp-archive__empty-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 22px;
background: var(--foreground);
color: #fff;
font-size: 14px;
font-weight: 700;
border-radius: 12px;
text-decoration: none;
transition: background .2s, transform .15s ease, box-shadow .2s ease;
}
.dmp-archive__empty-cta:hover {
background: #000;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(26,26,26,.2);
}
/* --- MOBILE TIGHTENING --- */
@media (max-width: 768px) {
.dmp-archive__hero { margin-top: 18px; padding: 22px 18px; }
.dmp-archive__toolbar { margin-top: 22px; margin-bottom: 12px; }
.dmp-archive__sort,
.dmp-archive__sort select { width: 100%; }
.dmp-archive__toolbar-count { flex: 1; }
}
/* ═══════════════════════════════════════════════════════════════
FAQ ACCORDION (bottom of archive-product.php)
Rounded cards, gold circular chevron button, smooth expand.
═══════════════════════════════════════════════════════════════ */
.dmp-faq {
/* Sits directly below the "About " card, so tighten
* the gap from 56px → 32px. The earlier 56px was for FAQ-as-
* standalone-section spacing. */
margin: 32px auto 0;
padding: 0;
max-width: 760px;
}
@media (max-width: 768px) {
.dmp-faq { margin-top: 24px; }
}
.dmp-faq__title {
text-align: center;
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--foreground);
margin: 0 0 22px;
line-height: 1.15;
}
.dmp-faq__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.dmp-faq__item {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dmp-faq__item:hover {
background: #fcfaf6;
}
.dmp-faq__item.is-open {
background: #fff;
border-color: rgba(232,160,32,.45);
box-shadow: 0 6px 18px rgba(26,26,26,.05);
}
.dmp-faq__q {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
background: none;
border: none;
text-align: left;
cursor: pointer;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--foreground);
line-height: 1.4;
transition: color .15s ease;
}
.dmp-faq__q:hover { color: var(--primary-dark); }
.dmp-faq__q:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -4px;
border-radius: 12px;
}
.dmp-faq__q-text {
flex: 1;
min-width: 0;
}
.dmp-faq__icon {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: transform .25s ease, background .2s ease;
}
.dmp-faq__item.is-open .dmp-faq__icon {
transform: rotate(180deg);
background: var(--primary-dark);
}
.dmp-faq__a {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}
.dmp-faq__item.is-open .dmp-faq__a {
max-height: 400px;
}
.dmp-faq__a-inner {
padding: 0 22px 18px;
font-size: 14px;
line-height: 1.65;
color: var(--muted);
}
@media (max-width: 768px) {
.dmp-faq__q {
padding: 14px 16px;
font-size: 14px;
gap: 10px;
}
.dmp-faq__icon {
width: 28px;
height: 28px;
}
.dmp-faq__icon svg {
width: 12px;
height: 12px;
}
.dmp-faq__a-inner {
padding: 0 16px 14px;
font-size: 13.5px;
}
}
/* ═══════════════════════════════════════════════════════════════
CATEGORY DESCRIPTION ("About " card)
Editorial-style block sandwiched between the product grid and
the FAQ accordion. Same width as the FAQ for visual rhythm.
═══════════════════════════════════════════════════════════════ */
.dmp-archive__about {
margin: 56px auto 0;
max-width: 760px;
}
@media (max-width: 768px) {
.dmp-archive__about { margin-top: 36px; }
}
.dmp-archive__about-card {
position: relative;
padding: clamp(28px, 4vw, 44px);
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 6px 18px rgba(26,26,26,.04);
}
.dmp-archive__about-accent {
display: block;
width: 36px;
height: 3px;
background: var(--primary);
border-radius: 999px;
margin: 0 0 14px;
}
.dmp-archive__about-title {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--foreground);
line-height: 1.2;
margin: 0 0 18px;
}
.dmp-archive__about-body p {
font-size: 15px;
line-height: 1.7;
color: var(--foreground);
margin: 0 0 14px;
}
.dmp-archive__about-body p:last-child { margin-bottom: 0; }
/* Rich-HTML variant — category description provided as raw HTML
* (h2/h3 headings, strong tags, paragraphs). Used when an entry in
* dmp_get_category_descriptions() is a string instead of an array. */
.dmp-archive__about-body--rich h2 {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--foreground);
margin: 32px 0 14px;
}
.dmp-archive__about-body--rich h2:first-child { margin-top: 0; }
.dmp-archive__about-body--rich h3 {
font-size: clamp(16px, 1.7vw, 18px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.35;
color: var(--foreground);
margin: 22px 0 10px;
}
.dmp-archive__about-body--rich p {
font-size: 15px;
line-height: 1.7;
color: var(--foreground);
margin: 0 0 14px;
}
.dmp-archive__about-body--rich p:last-child { margin-bottom: 0; }
.dmp-archive__about-body--rich strong {
font-weight: 700;
color: var(--foreground);
}
.dmp-archive__about-body--rich a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.dmp-archive__about-body--rich a:hover { color: var(--primary-dark); }
.dmp-archive__about-body--rich ul,
.dmp-archive__about-body--rich ol {
margin: 0 0 14px;
padding-left: 22px;
}
.dmp-archive__about-body--rich li {
font-size: 15px;
line-height: 1.7;
margin: 0 0 4px;
}
/* ─── CSS-only Show More / Show Less (SEO-safe collapse) ─────────
*
* The full HTML stays in the DOM at all times — Google indexes
* everything regardless of the collapsed state. The collapse is
* achieved via max-height clipping (NOT display:none) so search
* engines treat the content as fully present.
*
* Toggle is driven by a sibling checkbox + the :checked ~ general
* sibling combinator, so no JavaScript is required. The checkbox
* itself is visually hidden but remains focusable for keyboard /
* screen-reader users.
* ───────────────────────────────────────────────────────────── */
.dmp-archive__about-cb {
/* Visually hidden, but still accessible to AT and focusable */
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.dmp-archive__about-card--rich {
position: relative; /* contain the absolutely-positioned label */
}
/* Body — collapsed by default to ~ H2 + first paragraph height, with
* a soft white-to-transparent gradient fading the trailing content. */
.dmp-archive__about-body--rich {
position: relative;
max-height: 260px;
overflow: hidden;
transition: max-height 0.55s cubic-bezier(.2,.6,.2,1);
}
.dmp-archive__about-body--rich::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 130px;
background: linear-gradient( to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.6) 55%,
rgba(255,255,255,1) 100%
);
pointer-events: none;
transition: opacity 0.35s ease;
}
/* Expanded state — checkbox checked. Use a generous max-height so
* the transition can animate through the actual content height. */
.dmp-archive__about-cb:checked ~ .dmp-archive__about-body--rich {
max-height: 6000px;
}
.dmp-archive__about-cb:checked ~ .dmp-archive__about-body--rich::after {
opacity: 0;
}
/* Show more / Show less button (a