/* ============================================================
DEL PUERTO REFRIGERACIÓN Y EQUIPOS — Custom Styles
Theme: Blocksy Child
Version: 2.0.0 — Rediseño profesional
============================================================ */
/* ============================================================
1. CSS VARIABLES / DESIGN TOKENS
============================================================ */
:root {
/* Brand Colors */
--dp-primary: #1a3a5c;
--dp-primary-light: #234b73;
--dp-primary-dark: #112840;
--dp-secondary: #2980b9;
--dp-secondary-light: #3498db;
--dp-accent: #e67e22;
--dp-accent-hover: #d35400;
--dp-accent-light: #f0a04b;
/* Neutrals */
--dp-dark: #0c1a2a;
--dp-text: #1e2a3a;
--dp-text-light: #6c7a89;
--dp-gray: #8e99a4;
--dp-border: #dce6f0;
--dp-light: #f0f6fc;
--dp-lighter: #f7fafd;
--dp-white: #ffffff;
/* Functional */
--dp-success: #27ae60;
--dp-error: #e74c3c;
--dp-warning: #f39c12;
--dp-info: #2980b9;
/* Spacing */
--dp-section-padding: 80px;
--dp-section-padding-mobile: 48px;
--dp-container-max: 1200px;
/* Radius */
--dp-radius-sm: 6px;
--dp-radius: 10px;
--dp-radius-lg: 16px;
--dp-radius-xl: 24px;
/* Shadows */
--dp-shadow-sm: 0 2px 8px rgba(26, 58, 92, 0.06);
--dp-shadow: 0 4px 20px rgba(26, 58, 92, 0.08);
--dp-shadow-lg: 0 8px 40px rgba(26, 58, 92, 0.12);
--dp-shadow-hover: 0 8px 32px rgba(26, 58, 92, 0.15);
/* Transitions */
--dp-transition: all 0.3s ease;
--dp-transition-fast: all 0.15s ease;
}
/* ============================================================
2. GLOBAL / TYPOGRAPHY
============================================================ */
body.dp-theme {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--dp-text);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.dp-theme h1,
body.dp-theme h2,
body.dp-theme h3,
body.dp-theme h4,
body.dp-theme h5,
body.dp-theme h6 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--dp-primary);
font-weight: 700;
line-height: 1.25;
}
body.dp-theme h1 { font-size: clamp(2rem, 4vw, 3rem); }
body.dp-theme h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
body.dp-theme h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
body.dp-theme a {
color: var(--dp-secondary);
transition: var(--dp-transition-fast);
}
body.dp-theme a:hover {
color: var(--dp-accent);
}
/* ============================================================
3. HEADER — Sólido, profesional, con CTAs visibles
============================================================ */
.ct-header {
border-bottom: none;
box-shadow: 0 2px 16px rgba(26, 58, 92, 0.10);
}
/* Top bar — datos de contacto rápido */
[data-row="top"] {
background: linear-gradient(90deg, var(--dp-primary-dark) 0%, var(--dp-primary) 100%) !important;
--theme-text-color: rgba(255, 255, 255, 0.9) !important;
--theme-link-initial-color: rgba(255, 255, 255, 0.85) !important;
--theme-link-hover-color: var(--dp-accent-light) !important;
--theme-icon-color: rgba(255, 255, 255, 0.8) !important;
--theme-icon-hover-color: var(--dp-accent-light) !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 13px;
letter-spacing: 0.02em;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-row="top"] a {
color: rgba(255, 255, 255, 0.85) !important;
}
[data-row="top"] a:hover {
color: var(--dp-accent-light) !important;
}
[data-row="top"] .ct-social-box a {
color: rgba(255, 255, 255, 0.85) !important;
}
[data-row="top"] .ct-social-box a:hover {
color: var(--dp-accent-light) !important;
}
/* Main header row — fondo sólido blanco */
[data-row="middle"] {
background-color: var(--dp-white) !important;
box-shadow: none;
padding-top: 4px;
padding-bottom: 4px;
}
/* Navigation links — más presencia */
.ct-header nav[id="header-menu"] > ul > li > a {
font-weight: 600;
font-size: 15px;
letter-spacing: 0.01em;
color: var(--dp-primary);
transition: var(--dp-transition-fast);
position: relative;
text-transform: none;
}
.ct-header nav[id="header-menu"] > ul > li > a:hover,
.ct-header nav[id="header-menu"] > ul > li.current-menu-item > a {
color: var(--dp-accent);
}
/* Active link underline — animada */
.ct-header nav[id="header-menu"] > ul > li > a::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2.5px;
background: var(--dp-accent);
transition: var(--dp-transition);
transform: translateX(-50%);
border-radius: 2px;
}
.ct-header nav[id="header-menu"] > ul > li > a:hover::after,
.ct-header nav[id="header-menu"] > ul > li.current-menu-item > a::after {
width: 100%;
}
/* Header CTA button — Cotización (naranja, prominente) */
.ct-header .ct-button,
.ct-header .ct-button-ghost,
.ct-header [data-id="button"] .ct-button {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: none !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
padding: 10px 22px;
transition: var(--dp-transition);
font-size: 14px;
text-transform: none;
letter-spacing: 0;
box-shadow: 0 2px 10px rgba(230, 126, 34, 0.25);
}
.ct-header .ct-button:hover,
.ct-header [data-id="button"] .ct-button:hover {
background-color: var(--dp-accent-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35);
}
/* Header secondary CTA (WhatsApp verde) */
.ct-header [data-id="button_2"] .ct-button,
.ct-header .dp-header-whatsapp {
background-color: #25d366 !important;
color: var(--dp-white) !important;
border: none !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
padding: 10px 20px;
font-size: 14px;
box-shadow: 0 2px 10px rgba(37, 211, 102, 0.25);
}
.ct-header [data-id="button_2"] .ct-button:hover,
.ct-header .dp-header-whatsapp:hover {
background-color: #1da851 !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
/* Cart icon badge */
.ct-header .ct-cart-icon .ct-count {
background-color: var(--dp-accent);
color: var(--dp-white);
}
/* Search icon */
.ct-header [data-id="search"] {
color: var(--dp-primary);
}
/* Sticky header — profesional + blur */
[data-sticky-row="middle"] {
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 20px rgba(26, 58, 92, 0.12);
}
/* ============================================================
3b. MOBILE MENU — Profesional, con identidad Del Puerto
============================================================ */
/* --- Override Blocksy CSS variables for light panel theme --- */
#offcanvas {
--theme-link-initial-color: var(--dp-primary) !important;
--theme-link-hover-color: var(--dp-accent) !important;
--theme-text-color: var(--dp-text) !important;
--theme-icon-color: var(--dp-primary) !important;
}
#offcanvas [data-id="mobile-menu"] {
--theme-link-initial-color: var(--dp-primary) !important;
--theme-font-size: 15px !important;
}
/* --- Panel container (slide-in drawer) --- */
#offcanvas .ct-panel-inner {
background: var(--dp-white) !important;
background-color: var(--dp-white) !important;
box-shadow: -8px 0 40px rgba(26, 58, 92, 0.18) !important;
max-width: 340px !important;
}
/* --- Panel header / actions bar --- */
#offcanvas .ct-panel-actions {
background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-primary-light) 100%) !important;
padding: 20px 24px !important;
margin: 0;
position: relative;
}
#offcanvas .ct-panel-actions::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--dp-accent), var(--dp-secondary), var(--dp-accent));
}
/* Close button (X) — white on blue header */
#offcanvas .ct-toggle-close {
--theme-icon-color: rgba(255, 255, 255, 0.85) !important;
color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--dp-transition);
margin-inline-start: auto;
}
/* Panel heading text */
#offcanvas .ct-panel-actions .ct-panel-heading {
color: var(--dp-white) !important;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.02em;
}
#offcanvas .ct-toggle-close:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: var(--dp-white) !important;
--theme-icon-color: var(--dp-white) !important;
transform: rotate(90deg);
}
#offcanvas .ct-toggle-close svg {
fill: currentColor !important;
color: inherit !important;
}
/* --- Panel content area --- */
#offcanvas .ct-panel-content-inner {
padding: 16px 0 24px !important;
gap: 0;
}
/* --- Mobile menu navigation (nav.mobile-menu > ul > li) --- */
#offcanvas .mobile-menu {
width: 100%;
padding: 0;
margin: 0;
}
#offcanvas .mobile-menu > ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Menu items — using descendant to match nav > ul > li */
#offcanvas .mobile-menu > ul > li {
border-bottom: 1px solid var(--dp-border);
margin: 0;
padding: 0;
}
#offcanvas .mobile-menu > ul > li:last-child {
border-bottom: none;
}
/* Menu links — large, touch-friendly */
#offcanvas .mobile-menu > ul > li > .ct-menu-link,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {
color: var(--dp-primary) !important;
font-weight: 600 !important;
font-size: 15px !important;
padding: 14px 24px !important;
display: flex;
align-items: center;
text-decoration: none !important;
transition: var(--dp-transition-fast);
position: relative;
letter-spacing: 0.01em;
line-height: 1.4;
}
/* Hover / focus state on links */
#offcanvas .mobile-menu > ul > li > .ct-menu-link:hover,
#offcanvas .mobile-menu > ul > li > .ct-menu-link:focus,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link:hover {
background-color: var(--dp-lighter) !important;
color: var(--dp-accent) !important;
}
/* Active / current page link */
#offcanvas .mobile-menu > ul > li.current-menu-item > .ct-menu-link,
#offcanvas .mobile-menu > ul > li.current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
#offcanvas .mobile-menu > ul > li.current_page_item > .ct-menu-link {
color: var(--dp-accent) !important;
background: linear-gradient(90deg, rgba(230, 126, 34, 0.06) 0%, transparent 100%) !important;
font-weight: 700 !important;
}
/* Active accent bar on left */
#offcanvas .mobile-menu > ul > li.current-menu-item > .ct-menu-link::before,
#offcanvas .mobile-menu > ul > li.current_page_item > .ct-menu-link::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: var(--dp-accent);
border-radius: 0 3px 3px 0;
}
/* Submenu toggle arrow/button */
#offcanvas .mobile-menu .ct-sub-menu-parent > .child-indicator {
color: var(--dp-gray) !important;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--dp-transition-fast);
border-radius: var(--dp-radius-sm);
flex-shrink: 0;
margin-right: 12px;
}
#offcanvas .mobile-menu .ct-sub-menu-parent > .child-indicator:hover {
background: var(--dp-light);
color: var(--dp-accent) !important;
}
/* Sub-menu (dropdown children) */
#offcanvas .mobile-menu [class*='children'] > ul {
background: var(--dp-lighter);
border-top: 1px solid var(--dp-border);
margin: 0 !important;
padding: 4px 0 !important;
width: 100% !important;
}
#offcanvas .mobile-menu [class*='children'] > ul li {
border: none;
margin: 0;
}
#offcanvas .mobile-menu [class*='children'] > ul .ct-menu-link {
color: var(--dp-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 10px 24px 10px 40px !important;
position: relative;
}
/* Subtle dot before sub-items */
#offcanvas .mobile-menu [class*='children'] > ul .ct-menu-link::before {
content: '';
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--dp-accent);
opacity: 0.5;
transition: var(--dp-transition-fast);
}
#offcanvas .mobile-menu [class*='children'] > ul .ct-menu-link:hover {
color: var(--dp-accent) !important;
background: rgba(230, 126, 34, 0.04);
}
#offcanvas .mobile-menu [class*='children'] > ul .ct-menu-link:hover::before {
opacity: 1;
transform: translateY(-50%) scale(1.3);
}
/* --- CTA buttons inside mobile panel --- */
#offcanvas .ct-button {
background: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: none !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 14px;
padding: 12px 24px;
margin: 8px 24px;
text-align: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(230, 126, 34, 0.25);
transition: var(--dp-transition);
width: calc(100% - 48px);
}
#offcanvas .ct-button:hover {
background: var(--dp-accent-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35);
}
/* WhatsApp CTA in mobile panel */
#offcanvas [data-id="button_2"] .ct-button {
background: #25d366 !important;
color: var(--dp-white) !important;
border: none !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 14px;
padding: 12px 24px;
margin: 4px 24px 8px;
box-shadow: 0 2px 12px rgba(37, 211, 102, 0.25);
width: calc(100% - 48px);
text-align: center;
justify-content: center;
}
#offcanvas [data-id="button_2"] .ct-button:hover {
background: #1da851 !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
/* --- Search widget inside panel --- */
#offcanvas [data-id="search"] {
margin: 8px 24px 4px;
width: calc(100% - 48px);
}
#offcanvas [data-id="search"] form {
display: flex;
background: var(--dp-light);
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius);
overflow: hidden;
transition: var(--dp-transition-fast);
}
#offcanvas [data-id="search"] form:focus-within {
border-color: var(--dp-secondary);
box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.1);
}
#offcanvas [data-id="search"] input {
flex: 1;
border: none !important;
background: transparent !important;
padding: 12px 16px;
font-size: 14px;
color: var(--dp-text);
outline: none;
}
#offcanvas [data-id="search"] input::placeholder {
color: var(--dp-gray);
}
#offcanvas [data-id="search"] button {
background: transparent;
border: none;
padding: 12px 14px;
color: var(--dp-secondary);
cursor: pointer;
transition: var(--dp-transition-fast);
}
#offcanvas [data-id="search"] button:hover {
color: var(--dp-accent);
}
/* --- Social icons in panel --- */
#offcanvas .ct-social-box {
padding: 0 24px;
gap: 10px;
justify-content: center;
}
#offcanvas .ct-social-box a {
background: var(--dp-light) !important;
color: var(--dp-primary) !important;
border: 1px solid var(--dp-border);
border-radius: 50%;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--dp-transition);
}
#offcanvas .ct-social-box a:hover {
background: var(--dp-accent) !important;
border-color: var(--dp-accent);
color: var(--dp-white) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}
#offcanvas .ct-social-box a svg {
fill: currentColor !important;
color: inherit !important;
width: 16px;
height: 16px;
}
/* --- Cart icon inside panel --- */
#offcanvas .ct-cart-icon {
margin: 8px 24px;
}
#offcanvas .ct-cart-icon .ct-count {
background: var(--dp-accent);
color: var(--dp-white);
}
/* --- Divider / separator in panel --- */
#offcanvas .ct-panel-content-inner > [data-id="divider"] {
border-color: var(--dp-border) !important;
margin: 4px 24px !important;
width: calc(100% - 48px);
opacity: 0.6;
}
/* --- Hamburger trigger styling --- */
.ct-header-trigger {
transition: var(--dp-transition-fast);
}
.ct-header-trigger .ct-icon rect {
fill: var(--dp-primary);
}
.ct-header-trigger:hover .ct-icon rect {
fill: var(--dp-accent);
}
.ct-header-trigger[data-design*="outline"] {
border-color: var(--dp-border) !important;
border-radius: var(--dp-radius-sm);
}
.ct-header-trigger[data-design*="outline"]:hover {
border-color: var(--dp-accent) !important;
background: rgba(230, 126, 34, 0.04);
}
/* --- Mobile header adjustments --- */
@media (max-width: 999px) {
.ct-header .ct-button {
padding: 8px 16px;
font-size: 13px;
}
/* Logo scaling in mobile */
.ct-header .site-logo-container img {
max-height: 55px;
}
.ct-header .site-logo-container {
display: flex;
align-items: center;
}
/* Tighter mobile header — vertically center logo & trigger */
[data-row="middle"] {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
[data-row="middle"] .ct-container {
align-items: center !important;
}
[data-row="middle"] .site-branding {
display: flex;
align-items: center;
}
}
@media (max-width: 480px) {
[data-row="top"] {
display: none !important;
}
}
/* ============================================================
4. FOOTER — Completo, confiable, con identidad industrial
============================================================ */
footer.ct-footer,
.ct-footer,
footer#footer,
#footer {
background: var(--dp-dark) !important;
background-image:
radial-gradient(ellipse at 20% 0%, rgba(41, 128, 185, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(230, 126, 34, 0.05) 0%, transparent 50%) !important;
--theme-palette-color-6: var(--dp-dark) !important;
--theme-text-color: rgba(255, 255, 255, 0.75) !important;
--theme-heading-color: var(--dp-white) !important;
--theme-link-initial-color: rgba(255, 255, 255, 0.7) !important;
--theme-link-hover-color: var(--dp-accent-light) !important;
--theme-icon-color: var(--dp-white) !important;
--theme-icon-hover-color: var(--dp-accent-light) !important;
color: rgba(255, 255, 255, 0.8);
position: relative;
border-top: 3px solid transparent;
border-image: linear-gradient(90deg, var(--dp-secondary), var(--dp-accent), var(--dp-secondary)) 1;
}
/* Subtle dot pattern overlay — industrial texture */
footer.ct-footer::after,
.ct-footer::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
z-index: 0;
}
/* Ensure footer content sits above pseudo-elements */
.ct-footer > *,
#footer > * {
position: relative;
z-index: 1;
}
/* Footer top row — newsletter or branding bar */
#footer [data-row="top"],
.ct-footer [data-row="top"] {
background-color: rgba(255, 255, 255, 0.03) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Footer middle row — main content area */
#footer [data-row="middle"],
.ct-footer [data-row="middle"] {
background-color: transparent !important;
padding-top: 48px !important;
padding-bottom: 40px !important;
}
/* Force dark on all rows */
#footer [data-row],
.ct-footer [data-row] {
--theme-text-color: rgba(255, 255, 255, 0.75) !important;
--theme-heading-color: var(--dp-white) !important;
--theme-link-initial-color: rgba(255, 255, 255, 0.7) !important;
--theme-link-hover-color: var(--dp-accent-light) !important;
--theme-icon-color: var(--dp-white) !important;
--theme-icon-hover-color: var(--dp-accent-light) !important;
}
/* Footer widget titles — uppercase, accented */
.ct-footer .widget-title,
.ct-footer h4,
.ct-footer [class*="widget"] .widget-title {
color: var(--dp-white) !important;
--theme-heading-color: var(--dp-white) !important;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 20px;
padding-bottom: 12px;
position: relative;
border-bottom: none;
}
/* Accent underline on footer titles */
.ct-footer .widget-title::after,
.ct-footer h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 2px;
background: var(--dp-accent);
border-radius: 1px;
}
/* Footer links */
.ct-footer a,
.ct-footer .ct-widget a,
.ct-footer .widget a {
color: rgba(255, 255, 255, 0.65) !important;
transition: var(--dp-transition-fast);
font-size: 14px;
}
.ct-footer a:hover,
.ct-footer .ct-widget a:hover,
.ct-footer .widget a:hover {
color: var(--dp-white) !important;
padding-left: 3px;
}
.ct-footer .widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.ct-footer .widget ul li {
padding: 6px 0;
border-bottom: none;
position: relative;
}
.ct-footer .widget ul li a::before {
content: '›';
margin-right: 8px;
color: var(--dp-accent);
font-weight: 700;
font-size: 15px;
transition: var(--dp-transition-fast);
}
.ct-footer .widget ul li a:hover::before {
margin-right: 10px;
}
/* Footer paragraphs — contact data */
.ct-footer p,
.ct-footer .widget p {
color: rgba(255, 255, 255, 0.65) !important;
font-size: 14px;
line-height: 1.7;
}
/* Footer bottom / copyright bar */
.ct-footer [data-row="bottom"],
#footer [data-row="bottom"] {
background-color: rgba(0, 0, 0, 0.4) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 13px;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
/* Copyright text */
.ct-footer [data-row="bottom"] * {
font-size: 13px;
color: rgba(255, 255, 255, 0.4) !important;
}
/* --- Footer icons: WHITE SVGs --- */
.ct-footer svg,
.ct-footer [class*="icon"] svg,
.ct-footer .ct-social-box svg,
.ct-footer .wp-block-social-links svg,
.ct-footer .wp-social-link svg,
#footer svg {
fill: var(--dp-white) !important;
color: var(--dp-white) !important;
}
.ct-footer a:hover svg,
.ct-footer .ct-social-box a:hover svg,
.ct-footer .wp-social-link:hover svg {
fill: var(--dp-white) !important;
color: var(--dp-white) !important;
}
/* --- Social icons (Blocksy) --- */
.ct-footer .ct-social-box a {
background-color: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--dp-white) !important;
border-radius: 50%;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--dp-transition);
}
.ct-footer .ct-social-box a:hover {
background-color: var(--dp-accent);
border-color: var(--dp-accent);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(230, 126, 34, 0.35);
padding-left: 0 !important;
}
/* --- Social icons (WP block) --- */
.ct-footer .wp-block-social-links {
padding: 0 !important;
gap: 10px;
}
.ct-footer .wp-block-social-links .wp-social-link,
.ct-footer .wp-block-social-links .wp-block-social-link {
background-color: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--dp-white) !important;
border-radius: 50% !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: var(--dp-transition);
}
.ct-footer .wp-block-social-links .wp-social-link a,
.ct-footer .wp-block-social-links .wp-block-social-link a {
color: var(--dp-white) !important;
padding: 8px !important;
}
.ct-footer .wp-block-social-links .wp-social-link:hover,
.ct-footer .wp-block-social-links .wp-block-social-link:hover {
background-color: var(--dp-accent) !important;
border-color: var(--dp-accent);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(230, 126, 34, 0.35);
}
/* Footer logo (if present) — white */
.ct-footer .site-logo-container img,
.ct-footer img.custom-logo {
filter: brightness(0) invert(1);
opacity: 0.85;
transition: var(--dp-transition-fast);
}
.ct-footer .site-logo-container:hover img,
.ct-footer img.custom-logo:hover {
opacity: 1;
}
/* Footer seal / guarantee badges */
.dp-footer-seals {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-top: 16px;
}
.dp-footer-seal {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.04);
padding: 6px 12px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.dp-footer-seal svg {
width: 14px;
height: 14px;
opacity: 0.6;
}
/* ============================================================
5. HERO / COVER — Impactante, profesional, legible
============================================================ */
.dp-hero-section .wp-block-cover {
min-height: 600px !important;
border-radius: 0;
overflow: hidden;
}
.dp-hero-section .wp-block-cover__inner-container {
max-width: var(--dp-container-max);
margin: 0 auto;
padding: 0 24px;
}
/* Hero content — text-only, potente */
.dp-hero-section h1 {
color: var(--dp-white) !important;
font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
font-weight: 800 !important;
line-height: 1.12 !important;
margin-bottom: 20px !important;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
max-width: 700px;
}
/* Kicker / pre-title badge */
.dp-hero-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(230, 126, 34, 0.9);
color: var(--dp-white);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 4px;
margin-bottom: 20px;
}
.dp-hero-section p {
color: rgba(255, 255, 255, 0.92) !important;
font-size: clamp(1rem, 2vw, 1.2rem) !important;
max-width: 560px;
line-height: 1.7;
}
.dp-hero-section .wp-block-buttons {
margin-top: 32px !important;
gap: 16px;
}
/* Mascot — background accent, not protagonist */
.dp-hero-mascot {
position: absolute;
right: 0;
bottom: 0;
width: 200px;
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
.dp-hero-mascot img {
width: 100%;
height: auto;
filter: brightness(0) invert(1);
}
/* Mini hero for inner pages */
.dp-hero-mini .wp-block-cover {
min-height: 320px !important;
}
.wp-block-cover .wp-block-buttons {
gap: 16px;
}
/* Force center alignment on mini hero */
.dp-hero-mini .wp-block-cover__inner-container {
text-align: center !important;
}
.dp-hero-mini h1 {
margin-left: auto !important;
margin-right: auto !important;
}
.dp-hero-mini .wp-block-cover__inner-container p {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ============================================================
6. TRUST STRIP — Compact Reassurance Bar
============================================================ */
.dp-trust-strip {
background: var(--dp-primary);
border: none;
}
/* Shop page only — rounded trust strip */
body.dp-shop .dp-trust-strip {
border-radius: var(--dp-radius-lg);
overflow: hidden;
}
@media (max-width: 999px) {
body.dp-shop .dp-trust-strip {
border-radius: var(--dp-radius);
}
}
.dp-trust-strip-inner {
display: flex;
align-items: center;
justify-content: center;
max-width: var(--dp-container-max, 1200px);
margin: 0 auto;
padding: 18px 20px;
gap: 0;
}
.dp-trust-strip-item {
display: flex;
align-items: center;
gap: 10px;
padding: 0 28px;
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.dp-trust-strip-item:last-child {
border-right: none;
}
.dp-trust-strip-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--dp-accent-light);
flex-shrink: 0;
}
.dp-trust-strip-icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
}
.dp-trust-strip-text {
font-size: 14px;
font-weight: 600;
color: var(--dp-white);
white-space: nowrap;
letter-spacing: 0.01em;
}
/* Legacy classes kept for backwards compat */
.dp-trust-badges-wrap {
background: var(--dp-primary);
border-top: none;
}
.dp-trust-badges-dynamic {
display: flex;
align-items: center;
justify-content: center;
max-width: var(--dp-container-max, 1200px);
margin-left: auto;
margin-right: auto;
padding: 18px 20px;
gap: 0;
}
.dp-badge-item {
display: flex;
align-items: center;
gap: 10px;
padding: 0 28px;
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.dp-badge-item:last-child {
border-right: none;
}
.dp-badge-icon {
width: auto;
height: auto;
background: none;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
color: var(--dp-accent-light);
}
.dp-badge-icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
}
.dp-badge-title {
font-size: 14px !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
color: var(--dp-white) !important;
white-space: nowrap;
}
.dp-badge-desc {
display: none !important;
}
/* ============================================================
7. CATEGORIES GRID
============================================================ */
.dp-categories-section {
padding: var(--dp-section-padding) 0;
}
.dp-section-title {
text-align: center;
margin-bottom: 12px;
}
.dp-section-subtitle {
text-align: center;
color: var(--dp-text-light);
max-width: 600px;
margin: 0 auto 48px auto;
}
.dp-categories-section .wp-block-column {
background: var(--dp-white);
border-radius: var(--dp-radius);
overflow: hidden;
box-shadow: var(--dp-shadow-sm);
transition: var(--dp-transition);
border: 1px solid var(--dp-border);
}
.dp-categories-section .wp-block-column:hover {
transform: translateY(-6px);
box-shadow: var(--dp-shadow-hover);
border-color: var(--dp-secondary-light);
}
.dp-categories-section .wp-block-column figure {
margin: 0;
overflow: hidden;
}
.dp-categories-section .wp-block-column figure img {
transition: var(--dp-transition);
width: 100%;
height: 200px;
object-fit: cover;
}
.dp-categories-section .wp-block-column:hover figure img {
transform: scale(1.05);
}
.dp-categories-section .wp-block-column h3 {
font-size: 16px !important;
padding: 16px 20px 4px;
margin: 0 !important;
}
.dp-categories-section .wp-block-column p {
padding: 0 20px 20px;
font-size: 14px;
color: var(--dp-text-light);
margin: 0;
}
/* --- Categories Grid Dynamic (shortcode) --- */
.dp-categories-grid-dynamic {
display: grid;
gap: 24px;
}
.dp-categories-grid-dynamic.dp-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.dp-categories-grid-dynamic.dp-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.dp-categories-grid-dynamic.dp-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
/* --- Slider shared styles --- */
.dp-slider-container {
position: relative;
overflow: clip;
}
.dp-categories-slider,
.dp-products-slider {
padding-bottom: 48px;
padding-top: 10px;
padding-inline: 4px;
overflow: clip visible;
}
.dp-categories-slider .swiper-wrapper,
.dp-products-slider .swiper-wrapper {
padding-top: 2px;
}
.dp-categories-slider .swiper-slide,
.dp-products-slider .swiper-slide {
height: auto;
}
/* Swiper nav arrows */
.dp-slider-container .swiper-button-prev,
.dp-slider-container .swiper-button-next {
width: 42px;
height: 42px;
background: var(--dp-white);
border-radius: 50%;
box-shadow: 0 2px 12px rgba(0,0,0,0.12);
transition: var(--dp-transition);
top: calc(50% - 24px);
}
.dp-slider-container .swiper-button-prev:hover,
.dp-slider-container .swiper-button-next:hover {
background: var(--dp-primary);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.dp-slider-container .swiper-button-prev::after,
.dp-slider-container .swiper-button-next::after {
font-size: 16px;
font-weight: 700;
color: var(--dp-primary);
transition: var(--dp-transition);
}
.dp-slider-container .swiper-button-prev:hover::after,
.dp-slider-container .swiper-button-next:hover::after {
color: var(--dp-white);
}
/* Swiper pagination dots */
.dp-slider-container .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: var(--dp-gray);
opacity: 0.4;
transition: var(--dp-transition);
}
.dp-slider-container .swiper-pagination-bullet-active {
background: var(--dp-accent);
opacity: 1;
width: 24px;
border-radius: 5px;
}
.dp-cat-card {
display: block;
background: var(--dp-white);
border-radius: var(--dp-radius);
overflow: hidden;
box-shadow: var(--dp-shadow-sm);
transition: var(--dp-transition);
border: 1px solid var(--dp-border);
text-decoration: none;
color: inherit;
}
.dp-cat-card:hover {
transform: translateY(-6px);
box-shadow: var(--dp-shadow-hover);
border-color: var(--dp-secondary-light);
text-decoration: none;
color: inherit;
}
.dp-cat-card-img {
overflow: hidden;
aspect-ratio: 4 / 3;
}
.dp-cat-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--dp-transition);
}
.dp-cat-card:hover .dp-cat-card-img img {
transform: scale(1.05);
}
.dp-cat-card-body {
padding: 16px 20px 20px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
}
.dp-cat-card-title {
font-size: 16px !important;
font-weight: 700 !important;
margin: 0 !important;
color: var(--dp-primary);
width: 100%;
}
.dp-cat-card-count {
font-size: 13px;
color: var(--dp-text-light);
}
.dp-cat-card-arrow {
font-size: 14px;
color: var(--dp-accent);
margin-left: auto;
font-weight: 600;
transition: var(--dp-transition);
}
.dp-cat-card:hover .dp-cat-card-arrow {
transform: translateX(4px);
}
/* --- Product Slider cards --- */
.dp-product-card {
background: var(--dp-white);
border-radius: var(--dp-radius);
overflow: hidden;
box-shadow: var(--dp-shadow-sm);
border: 1px solid var(--dp-border);
transition: var(--dp-transition);
height: 100%;
display: flex;
flex-direction: column;
}
.dp-product-card:hover {
box-shadow: var(--dp-shadow-hover);
border-color: var(--dp-secondary-light);
}
.dp-product-card-img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: #fff;
border-bottom: 1px solid var(--dp-border);
display: flex;
align-items: center;
justify-content: center;
}
.dp-product-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 20px;
transition: var(--dp-transition);
mix-blend-mode: multiply;
}
.dp-product-card:hover .dp-product-card-img img {
transform: none;
}
.dp-product-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--dp-accent);
color: var(--dp-white);
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
z-index: 1;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dp-product-card-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
flex: 1;
gap: 6px;
}
.dp-product-card-title {
font-size: 13px;
font-weight: 600;
color: var(--dp-primary);
text-decoration: none;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8em;
}
.dp-product-card-title:hover {
color: var(--dp-secondary);
}
.dp-product-card-price {
font-size: 16px;
font-weight: 700;
color: var(--dp-primary);
margin-top: auto;
min-height: 24px;
}
.dp-product-card-price del {
font-size: 14px;
color: var(--dp-text-light);
font-weight: 400;
}
.dp-product-card-price ins {
text-decoration: none;
color: var(--dp-accent);
}
.dp-product-card a.dp-product-card-btn {
display: inline-block;
text-align: center;
background: var(--dp-primary);
color: var(--dp-white);
padding: 10px 16px;
border-radius: var(--dp-radius-sm);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: var(--dp-transition);
margin-top: 4px;
}
.dp-product-card a.dp-product-card-btn:hover {
background: var(--dp-accent);
color: var(--dp-white);
}
/* ============================================================
8. PRODUCT CARDS / WOOCOMMERCE
============================================================ */
.dp-products-section {
padding: var(--dp-section-padding) 0;
background: var(--dp-lighter);
}
/* Product card styling */
.dp-products-section .products li.product,
.woocommerce ul.products li.product {
background: var(--dp-white);
border-radius: var(--dp-radius);
overflow: hidden;
box-shadow: var(--dp-shadow-sm);
transition: var(--dp-transition);
border: 1px solid var(--dp-border);
padding-bottom: 20px;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
box-shadow: var(--dp-shadow-hover);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 15px;
font-weight: 600;
color: var(--dp-primary);
padding: 12px 16px 4px;
}
.woocommerce ul.products li.product .price {
color: var(--dp-secondary);
font-weight: 700;
font-size: 18px;
padding: 0 16px;
}
.woocommerce ul.products li.product .price del {
color: var(--dp-gray);
font-size: 14px;
font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
color: var(--dp-accent);
text-decoration: none;
font-weight: 700;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
background-color: var(--dp-primary) !important;
color: var(--dp-white) !important;
border-radius: var(--dp-radius-sm);
font-weight: 600;
font-size: 13px;
padding: 10px 20px;
margin: 8px 16px 0;
transition: var(--dp-transition);
border: none;
text-transform: none;
letter-spacing: 0;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background-color: var(--dp-accent) !important;
transform: translateY(-1px);
}
/* Sale badge */
.woocommerce span.onsale {
background-color: var(--dp-accent);
color: var(--dp-white);
font-weight: 700;
border-radius: var(--dp-radius-sm);
padding: 4px 12px;
font-size: 13px;
line-height: 1.5;
min-height: auto;
min-width: auto;
}
/* Product images — match home card style */
.woocommerce ul.products li.product figure {
position: relative;
border-bottom: 1px solid var(--dp-border);
background: #fff;
}
.woocommerce ul.products li.product a img {
border-radius: 0;
transition: var(--dp-transition);
object-fit: contain;
padding: 20px;
mix-blend-mode: multiply;
aspect-ratio: 4 / 3;
width: 100%;
height: auto;
}
.woocommerce ul.products li.product:hover a img {
opacity: 0.92;
}
/* Product card — category meta */
.woocommerce ul.products li.product .entry-meta {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0 16px;
margin: 0;
gap: 0;
}
.woocommerce ul.products li.product .entry-meta .meta-categories {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.woocommerce ul.products li.product .entry-meta .meta-categories a {
color: var(--dp-text-light);
text-decoration: none;
transition: var(--dp-transition);
}
.woocommerce ul.products li.product .entry-meta .meta-categories a:hover {
color: var(--dp-accent);
}
/* Star rating */
.woocommerce .star-rating span::before {
color: var(--dp-accent);
}
/* ============================================================
8b. SINGLE PRODUCT PAGE (Ficha de producto)
============================================================ */
/* --- Summary: prevent flex-stretch so it doesn't match gallery height --- */
.single-product .entry-summary {
align-self: flex-start;
}
/* --- Hide only the second Blocksy divider (after add-to-cart, before meta) --- */
.single-product .entry-summary-items > .ct-product-add-to-cart ~ .ct-product-divider {
display: none;
}
/* --- Product gallery --- */
.single-product .woocommerce-product-gallery .ct-media-container {
border-radius: var(--dp-radius) !important;
}
/* Override Blocksy default 3/4 ratio — use 4/3 for landscape-friendly images */
.single-product .woocommerce-product-gallery .ct-media-container img {
aspect-ratio: 4 / 3 !important;
object-fit: contain;
background: #fff;
}
.single-product .woocommerce-product-gallery .flexy-pills .ct-media-container {
border: 2px solid transparent;
transition: var(--dp-transition-fast);
}
.single-product .woocommerce-product-gallery .flexy-pills .ct-media-container:hover,
.single-product .woocommerce-product-gallery .flexy-pills .active .ct-media-container {
border-color: var(--dp-secondary);
}
.single-product .woocommerce-product-gallery__trigger {
background: var(--dp-white) !important;
border-radius: 50%;
box-shadow: var(--dp-shadow-sm);
transition: var(--dp-transition);
}
.single-product .woocommerce-product-gallery__trigger:hover {
background: var(--dp-primary) !important;
color: var(--dp-white);
}
/* --- Sale badge on single product --- */
.single-product span.onsale {
background-color: var(--dp-accent);
color: var(--dp-white);
font-weight: 700;
border-radius: var(--dp-radius-sm);
padding: 6px 16px;
font-size: 14px;
line-height: 1.5;
min-height: auto;
min-width: auto;
z-index: 2;
}
/* --- Product title --- */
.single-product .entry-summary .product_title,
.single-product .entry-summary h1.product_title {
font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
font-weight: 400;
color: var(--dp-primary);
line-height: 1.2;
letter-spacing: -0.01em;
}
/* --- Rating --- */
.single-product .woocommerce-product-rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.single-product .woocommerce-product-rating .star-rating {
color: var(--dp-accent);
font-size: 15px;
}
.single-product .woocommerce-product-rating .woocommerce-review-link {
color: var(--dp-text-light);
font-size: 13px;
text-decoration: none;
transition: var(--dp-transition-fast);
}
.single-product .woocommerce-product-rating .woocommerce-review-link:hover {
color: var(--dp-secondary);
}
/* --- Price --- */
.single-product .summary .price,
.single-product .entry-summary .price {
color: var(--dp-secondary);
font-size: 28px;
font-weight: 700;
margin-bottom: 16px;
}
.single-product .entry-summary .price del {
color: var(--dp-gray);
font-size: 20px;
font-weight: 400;
opacity: 0.7;
}
.single-product .entry-summary .price ins {
color: var(--dp-accent);
text-decoration: none;
font-weight: 800;
}
/* --- Short description --- */
.single-product .woocommerce-product-details__short-description {
color: var(--dp-text-light);
font-size: 15px;
line-height: 1.7;
}
.single-product .woocommerce-product-details__short-description p:last-child {
margin-bottom: 0;
}
/* --- Quantity input --- */
.single-product .quantity .qty,
.single-product .quantity input[type="number"] {
border: 2px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
padding: 10px 12px;
font-size: 16px;
font-weight: 600;
color: var(--dp-primary);
text-align: center;
min-width: 70px;
transition: var(--dp-transition-fast);
background: var(--dp-white);
}
.single-product .quantity .qty:focus {
border-color: var(--dp-secondary);
outline: none;
box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.12);
}
/* Blocksy quantity buttons */
.single-product .ct-quantity-input .ct-increase,
.single-product .ct-quantity-input .ct-decrease {
color: var(--dp-primary);
transition: var(--dp-transition-fast);
}
.single-product .ct-quantity-input .ct-increase:hover,
.single-product .ct-quantity-input .ct-decrease:hover {
color: var(--dp-secondary);
}
/* --- Add to cart button --- */
.single-product .single_add_to_cart_button {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 16px;
padding: 14px 36px;
transition: var(--dp-transition);
border: none;
text-transform: none;
letter-spacing: 0.3px;
}
.single-product .single_add_to_cart_button:hover {
background-color: var(--dp-accent-hover) !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(230, 126, 34, 0.3);
}
/* --- Variations / variable product --- */
.single-product .variations {
margin-bottom: 20px;
}
.single-product .variations td {
padding: 8px 0;
vertical-align: middle;
}
.single-product .variations .label label {
font-weight: 600;
color: var(--dp-primary);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.single-product .variations select {
border: 2px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
padding: 10px 14px;
font-size: 14px;
color: var(--dp-text);
background: var(--dp-white);
transition: var(--dp-transition-fast);
min-width: 200px;
}
.single-product .variations select:focus {
border-color: var(--dp-secondary);
outline: none;
box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.12);
}
.single-product .reset_variations {
color: var(--dp-text-light);
font-size: 13px;
text-decoration: none;
transition: var(--dp-transition-fast);
}
.single-product .reset_variations:hover {
color: var(--dp-accent);
}
/* --- Product meta (SKU, categories, tags) --- */
.single-product .product_meta {
font-size: 13px;
color: var(--dp-text-light);
line-height: 2;
}
.single-product .product_meta > span {
display: block;
}
.single-product .product_meta .sku_wrapper .sku {
font-weight: 600;
color: var(--dp-primary);
}
.single-product .product_meta a {
color: var(--dp-secondary);
text-decoration: none;
transition: var(--dp-transition-fast);
}
.single-product .product_meta a:hover {
color: var(--dp-accent);
}
/* --- Payment methods / trust icons --- */
.single-product .ct-payment-methods {
padding-top: 16px;
}
/* --- Product tabs — constrain width like product-entry-wrapper --- */
.single-product .woocommerce-tabs {
margin-inline: auto;
width: var(--theme-container-width);
max-width: var(--theme-block-max-width);
}
/* --- Product tabs --- */
.single-product .woocommerce-tabs ul.tabs {
padding: 0;
margin: 0 0 28px 0;
list-style: none;
}
.single-product .woocommerce-tabs ul.tabs li {
border: none;
background: none;
margin: 0;
padding: 0;
position: relative;
}
.single-product .woocommerce-tabs ul.tabs li a {
display: block;
padding: 12px 24px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--dp-text-light);
text-decoration: none;
transition: var(--dp-transition-fast);
}
.single-product .woocommerce-tabs ul.tabs li a:hover {
color: var(--dp-primary);
}
.single-product .woocommerce-tabs ul.tabs li.active a {
color: var(--dp-primary);
}
/* Use Blocksy's built-in ::before indicator with our accent color */
.single-product .woocommerce-tabs ul.tabs li.active::before {
background: var(--dp-accent);
}
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
padding: 24px 0;
color: var(--dp-text);
font-size: 15px;
line-height: 1.8;
}
.single-product .woocommerce-tabs .panel h2 {
font-size: 1.35rem;
font-weight: 700;
color: var(--dp-primary);
margin-bottom: 16px;
}
/* Additional info table */
.single-product .woocommerce-product-attributes {
width: 100%;
border-collapse: collapse;
}
.single-product .woocommerce-product-attributes th {
font-weight: 600;
color: var(--dp-primary);
padding: 10px 16px;
text-align: left;
background: var(--dp-lighter);
border-bottom: 1px solid var(--dp-border);
font-size: 14px;
width: 35%;
}
.single-product .woocommerce-product-attributes td {
padding: 10px 16px;
border-bottom: 1px solid var(--dp-border);
font-size: 14px;
color: var(--dp-text);
}
.single-product .woocommerce-product-attributes td p {
margin: 0;
}
/* Accordion tabs (Blocksy type-3) */
.single-product .woocommerce-tabs[data-type*="type-3"] .ct-accordion {
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius);
overflow: hidden;
margin-bottom: 8px;
}
.single-product .woocommerce-tabs[data-type*="type-3"] .ct-accordion-title {
padding: 14px 20px;
font-weight: 600;
color: var(--dp-primary);
background: var(--dp-lighter);
transition: var(--dp-transition-fast);
}
.single-product .woocommerce-tabs[data-type*="type-3"] .ct-accordion-title:hover {
background: var(--dp-light);
}
.single-product .woocommerce-tabs[data-type*="type-3"] .ct-accordion.active .ct-accordion-title {
border-bottom: 1px solid var(--dp-border);
color: var(--dp-secondary);
}
/* --- Reviews --- */
.single-product #reviews {
margin-top: 8px;
}
.single-product #reviews .comment-reply-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--dp-primary);
margin-bottom: 16px;
}
.single-product #reviews .commentlist {
list-style: none;
padding: 0;
}
.single-product #reviews .commentlist li {
border-bottom: 1px solid var(--dp-border);
padding: 20px 0;
}
.single-product #reviews .commentlist li:last-child {
border-bottom: none;
}
.single-product #reviews .commentlist .comment-text {
margin-left: 0;
}
.single-product #reviews .commentlist .meta {
font-size: 13px;
color: var(--dp-text-light);
margin-bottom: 8px;
}
.single-product #reviews .commentlist .meta strong {
color: var(--dp-primary);
}
.single-product #reviews .commentlist .description p {
color: var(--dp-text);
line-height: 1.7;
font-size: 14px;
}
/* Review form */
.single-product #review_form .comment-form label {
font-weight: 600;
color: var(--dp-primary);
font-size: 14px;
display: block;
margin-bottom: 6px;
}
.single-product #review_form .comment-form input[type="text"],
.single-product #review_form .comment-form input[type="email"],
.single-product #review_form .comment-form textarea {
width: 100%;
border: 2px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
padding: 10px 14px;
font-size: 14px;
color: var(--dp-text);
transition: var(--dp-transition-fast);
background: var(--dp-white);
}
.single-product #review_form .comment-form input:focus,
.single-product #review_form .comment-form textarea:focus {
border-color: var(--dp-secondary);
outline: none;
box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.12);
}
.single-product #review_form .comment-form .form-submit input[type="submit"] {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: none;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 14px;
padding: 12px 28px;
cursor: pointer;
transition: var(--dp-transition);
}
.single-product #review_form .comment-form .form-submit input[type="submit"]:hover {
background-color: var(--dp-accent-hover) !important;
transform: translateY(-1px);
box-shadow: var(--dp-shadow);
}
/* Star rating input in review form */
.single-product #review_form .stars a {
color: var(--dp-accent);
}
/* --- Related products & upsells --- */
.single-product section.related,
.single-product section.up-sells,
.single-product .related.products,
.single-product .upsells.products {
margin-top: 56px;
padding-top: 48px;
border-top: 2px solid var(--dp-border);
}
.single-product section.related > h2,
.single-product section.up-sells > h2,
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 700;
color: var(--dp-primary);
margin-bottom: 28px;
position: relative;
padding-bottom: 12px;
}
.single-product section.related > h2::after,
.single-product section.up-sells > h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 3px;
background: var(--dp-accent);
border-radius: 2px;
}
/* --- Breadcrumbs on single product --- */
.single-product .ct-breadcrumbs {
font-size: 13px;
color: var(--dp-text-light);
margin-bottom: 8px;
}
.single-product .ct-breadcrumbs a {
color: var(--dp-secondary);
}
.single-product .ct-breadcrumbs a:hover {
color: var(--dp-accent);
}
/* --- Trust badges under add to cart --- */
.dp-product-trust {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
padding: 20px;
background: var(--dp-lighter);
border-radius: var(--dp-radius);
border: 1px solid var(--dp-border);
}
.dp-product-trust-item {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 calc(50% - 8px);
min-width: 150px;
}
.dp-product-trust-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--dp-white);
border-radius: 50%;
box-shadow: var(--dp-shadow-sm);
color: var(--dp-secondary);
}
.dp-product-trust-icon svg {
width: 18px;
height: 18px;
}
.dp-product-trust-text {
font-size: 12px;
font-weight: 600;
color: var(--dp-primary);
line-height: 1.4;
}
.dp-product-trust-text span {
display: block;
font-weight: 400;
color: var(--dp-text-light);
font-size: 11px;
}
/* Shop page */
.woocommerce-result-count {
color: var(--dp-text-light);
}
.woocommerce-ordering select {
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
padding: 8px 12px;
}
/* ============================================================
9. CTA SECTIONS — Solid with dot pattern
============================================================ */
.dp-cta-section {
background-color: var(--dp-primary);
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size:
40px 40px,
40px 40px,
20px 20px;
padding: 72px 0;
text-align: center;
position: relative;
}
.dp-cta-section h2 {
color: var(--dp-white) !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important;
margin-bottom: 12px !important;
}
.dp-cta-section p {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 17px;
max-width: 600px;
margin: 0 auto 28px auto;
}
.dp-cta-section .wp-block-button__link {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
font-weight: 700;
font-size: 16px;
padding: 16px 40px;
border-radius: var(--dp-radius-sm);
transition: var(--dp-transition);
border: none;
}
.dp-cta-section .wp-block-button__link:hover {
background-color: var(--dp-accent-hover) !important;
box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35);
}
/* Secondary CTA variant */
.dp-cta-light {
background: var(--dp-light);
}
.dp-cta-light h2 {
color: var(--dp-primary) !important;
}
.dp-cta-light p {
color: var(--dp-text-light) !important;
}
/* ============================================================
10. FAQ SECTION — Menor protagonismo
============================================================ */
.dp-faq-section {
padding: 64px 0 72px !important;
background: var(--dp-lighter);
}
.dp-faq-section .dp-section-title {
font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
}
.dp-faq-section details {
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius);
margin-bottom: 10px;
transition: var(--dp-transition);
overflow: hidden;
background: var(--dp-white);
}
.dp-faq-section details:hover {
border-color: var(--dp-secondary-light);
}
.dp-faq-section details[open] {
border-color: var(--dp-secondary);
box-shadow: var(--dp-shadow-sm);
}
.dp-faq-section details summary {
padding: 16px 22px;
font-weight: 600;
font-size: 15px;
color: var(--dp-primary);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: var(--dp-transition-fast);
}
.dp-faq-section details summary::-webkit-details-marker {
display: none;
}
.dp-faq-section details summary::after {
content: '+';
font-size: 20px;
font-weight: 300;
color: var(--dp-accent);
transition: var(--dp-transition);
flex-shrink: 0;
margin-left: 16px;
}
.dp-faq-section details[open] summary::after {
content: '−';
}
.dp-faq-section details[open] summary {
border-bottom: 1px solid var(--dp-border);
background: var(--dp-lighter);
}
.dp-faq-section details > div,
.dp-faq-section details > p {
padding: 16px 22px;
color: var(--dp-text-light);
line-height: 1.7;
font-size: 14px;
}
/* ============================================================
11. NEWSLETTER SECTION — Solid with dot pattern
============================================================ */
.dp-newsletter-section {
background-color: var(--dp-secondary);
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size:
40px 40px,
40px 40px,
20px 20px;
padding: 72px 24px !important;
text-align: center;
position: relative;
margin-bottom: 0 !important;
}
.dp-newsletter-section h2 {
color: var(--dp-white) !important;
margin-bottom: 8px !important;
}
.dp-newsletter-section p {
color: rgba(255, 255, 255, 0.85) !important;
margin-bottom: 28px;
}
.dp-newsletter-section form {
max-width: 500px;
margin: 0 auto;
display: flex;
gap: 10px;
}
.dp-newsletter-section input[type="email"] {
flex: 1;
padding: 14px 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--dp-radius-sm);
background: rgba(255, 255, 255, 0.15);
color: var(--dp-white);
font-size: 15px;
outline: none;
transition: var(--dp-transition);
box-sizing: border-box;
height: 50px;
}
.dp-newsletter-section input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.dp-newsletter-section input[type="email"]:focus {
border-color: var(--dp-accent-light);
background: rgba(255, 255, 255, 0.2);
}
.dp-newsletter-section button,
.dp-newsletter-section input[type="submit"] {
background: var(--dp-accent);
color: var(--dp-white);
border: none;
padding: 14px 28px;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: var(--dp-transition);
box-sizing: border-box;
height: 50px;
}
.dp-newsletter-section button:hover,
.dp-newsletter-section input[type="submit"]:hover {
background: var(--dp-accent-hover);
}
/* ============================================================
12. ABOUT PAGE
============================================================ */
.dp-about-section {
padding: var(--dp-section-padding) 0;
}
.dp-about-story {
padding: var(--dp-section-padding) 0;
}
.dp-about-story .wp-block-media-text {
gap: 48px;
}
.dp-values-grid .wp-block-column {
background: var(--dp-white);
border-radius: var(--dp-radius);
padding: 36px 28px;
text-align: center;
box-shadow: var(--dp-shadow-sm);
border: 1px solid var(--dp-border);
transition: var(--dp-transition);
}
.dp-values-grid .wp-block-column:hover {
transform: translateY(-4px);
box-shadow: var(--dp-shadow);
border-color: var(--dp-secondary-light);
}
.dp-values-grid .dp-value-icon {
font-size: 40px;
margin-bottom: 16px;
display: block;
}
.dp-values-grid h3 {
font-size: 18px !important;
margin-bottom: 10px !important;
}
.dp-values-grid p {
color: var(--dp-text-light);
font-size: 14px;
}
/* Stats / Numbers — Premium Counters */
.dp-stats-section {
background: linear-gradient(135deg, var(--dp-primary-dark) 0%, var(--dp-primary) 50%, var(--dp-primary-light) 100%);
padding: 72px 0;
position: relative;
overflow: hidden;
}
/* Diagonal industrial texture */
.dp-stats-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 60px,
rgba(255, 255, 255, 0.02) 60px,
rgba(255, 255, 255, 0.02) 61px
);
pointer-events: none;
}
/* Glow accents */
.dp-stats-section::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 50%, rgba(230, 126, 34, 0.1) 0%, transparent 40%),
radial-gradient(circle at 90% 50%, rgba(41, 128, 185, 0.1) 0%, transparent 40%);
pointer-events: none;
}
.dp-stats-section .wp-block-columns {
position: relative;
z-index: 1;
}
.dp-stats-section .wp-block-column {
text-align: center;
padding: 28px 20px;
position: relative;
}
/* Vertical luminous divider between stats */
.dp-stats-section .wp-block-column + .wp-block-column::before {
content: '';
position: absolute;
left: 0;
top: 15%;
height: 70%;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(230, 126, 34, 0.4), rgba(41, 128, 185, 0.3), transparent);
}
.dp-stats-section .dp-stat-number {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
background: linear-gradient(135deg, var(--dp-accent-light), var(--dp-accent), #f5b041);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.15;
margin-bottom: 8px;
filter: drop-shadow(0 2px 8px rgba(230, 126, 34, 0.25));
}
.dp-stats-section h4,
.dp-stats-section p {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 15px;
font-weight: 500;
margin: 0 !important;
letter-spacing: 0.01em;
}
/* ============================================================
13. CONTACT PAGE
============================================================ */
.dp-contact-section {
padding: var(--dp-section-padding) 0;
}
.dp-contact-info {
background: var(--dp-light);
border-radius: var(--dp-radius);
padding: 36px;
}
.dp-contact-info h3 {
font-size: 20px !important;
margin-bottom: 24px !important;
}
.dp-contact-item {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--dp-border);
}
.dp-contact-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.dp-contact-item-icon {
width: 44px;
height: 44px;
background: var(--dp-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--dp-white);
font-size: 18px;
flex-shrink: 0;
}
.dp-contact-item h4 {
font-size: 14px !important;
margin: 0 0 4px 0 !important;
color: var(--dp-primary) !important;
}
.dp-contact-item p {
margin: 0 !important;
color: var(--dp-text-light);
font-size: 14px;
}
/* Contact form styling */
.dp-contact-section .wpcf7,
.dp-contact-section .wpforms-container {
background: var(--dp-white);
border-radius: var(--dp-radius);
padding: 36px;
box-shadow: var(--dp-shadow-sm);
border: 1px solid var(--dp-border);
}
.dp-contact-section input[type="text"],
.dp-contact-section input[type="email"],
.dp-contact-section input[type="tel"],
.dp-contact-section textarea,
.dp-contact-section select {
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
padding: 12px 16px;
font-size: 15px;
transition: var(--dp-transition-fast);
width: 100%;
font-family: inherit;
}
.dp-contact-section input:focus,
.dp-contact-section textarea:focus,
.dp-contact-section select:focus {
border-color: var(--dp-secondary);
outline: none;
box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.12);
}
.dp-contact-section input[type="submit"],
.dp-contact-section button[type="submit"] {
background: var(--dp-accent);
color: var(--dp-white);
border: none;
border-radius: var(--dp-radius-sm);
padding: 14px 36px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: var(--dp-transition);
}
.dp-contact-section input[type="submit"]:hover,
.dp-contact-section button[type="submit"]:hover {
background: var(--dp-accent-hover);
transform: translateY(-2px);
box-shadow: var(--dp-shadow);
}
/* Map container */
.dp-map-section {
margin-top: 48px;
}
.dp-map-section iframe {
border-radius: var(--dp-radius);
border: 1px solid var(--dp-border);
}
/* ============================================================
14. BUTTONS (Global)
============================================================ */
.wp-block-button__link {
border-radius: var(--dp-radius-sm);
font-weight: 600;
font-size: 15px;
padding: 14px 32px;
transition: var(--dp-transition);
}
/* Primary button */
.dp-btn-primary .wp-block-button__link,
.is-style-fill .wp-block-button__link {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: none;
}
.dp-btn-primary .wp-block-button__link:hover,
.is-style-fill .wp-block-button__link:hover {
background-color: var(--dp-accent-hover) !important;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(230, 126, 34, 0.35);
}
/* Outline button */
.dp-btn-outline .wp-block-button__link,
.is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: var(--dp-white) !important;
border: 2px solid var(--dp-white) !important;
}
.dp-btn-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:hover {
background-color: var(--dp-white) !important;
color: var(--dp-primary) !important;
}
/* Dark variant */
.dp-btn-dark .wp-block-button__link {
background-color: var(--dp-primary) !important;
color: var(--dp-white) !important;
}
.dp-btn-dark .wp-block-button__link:hover {
background-color: var(--dp-primary-light) !important;
transform: translateY(-2px);
}
/* ============================================================
15. ABOUT BRIEF (for Home page)
============================================================ */
.dp-about-brief {
padding: 80px 0 100px !important;
background: var(--dp-light) !important;
background-color: var(--dp-light) !important;
position: relative;
overflow: visible;
}
/* Wave transition removed — clean separation */
.dp-about-brief .wp-block-media-text__content h2 {
color: var(--dp-primary);
position: relative;
padding-bottom: 16px;
margin-bottom: 20px;
}
.dp-about-brief .wp-block-media-text__content h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--dp-accent);
border-radius: 2px;
}
.dp-about-brief .wp-block-media-text__media img {
border-radius: var(--dp-radius);
}
/* ============================================================
NEW-1. BRANDS / PARTNERS LOGO BAR
============================================================ */
.dp-brands-section {
padding: 48px 0 !important;
background: var(--dp-white);
border-bottom: 1px solid var(--dp-border);
}
.dp-brands-label {
text-align: center;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dp-gray);
font-weight: 600;
margin-bottom: 28px;
}
.dp-brands-logos {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 32px 48px;
max-width: var(--dp-container-max);
margin: 0 auto;
padding: 0 20px;
}
.dp-brands-logos img,
.dp-brands-logos .wp-block-image img {
height: 44px;
width: auto;
object-fit: contain;
filter: grayscale(100%) opacity(0.5);
transition: var(--dp-transition);
}
.dp-brands-logos img:hover,
.dp-brands-logos .wp-block-image:hover img {
filter: grayscale(0%) opacity(1);
}
/* Swiper brands variant */
.dp-brands-slider .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
}
.dp-brands-slider .swiper-slide img {
height: 40px;
width: auto;
object-fit: contain;
filter: grayscale(100%) opacity(0.45);
transition: var(--dp-transition);
}
.dp-brands-slider .swiper-slide:hover img {
filter: grayscale(0%) opacity(1);
}
/* Brand name badges (fallback when no logos uploaded) */
.dp-brand-badge {
display: inline-flex;
align-items: center;
padding: 8px 20px;
background: var(--dp-lighter);
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
font-size: 14px;
font-weight: 600;
color: var(--dp-primary);
letter-spacing: 0.02em;
transition: var(--dp-transition);
}
.dp-brand-badge:hover {
background: var(--dp-secondary);
color: var(--dp-white);
border-color: var(--dp-secondary);
}
/* ============================================================
NEW-2. SECTORS / INDUSTRIES SERVED — Dark feature grid
============================================================ */
.dp-sectors-section {
padding: 72px 0 !important;
background-color: var(--dp-primary) !important;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
background-size: 40px 40px !important;
}
.dp-sectors-section h2,
.dp-sectors-section .dp-section-title,
.dp-sectors-section .dp-section-header h2 {
color: var(--dp-white) !important;
}
.dp-sectors-section .dp-section-subtitle,
.dp-sectors-section p.dp-section-subtitle,
.dp-sectors-section .dp-section-header p {
color: rgba(255, 255, 255, 0.65) !important;
}
.dp-sectors-section .dp-section-title-decorated::after {
background: var(--dp-accent) !important;
}
.dp-sectors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: var(--dp-container-max);
margin: 0 auto;
padding: 0 20px;
}
.dp-sector-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--dp-radius);
padding: 28px 24px;
text-align: left;
transition: var(--dp-transition);
position: relative;
}
.dp-sector-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--dp-accent);
}
.dp-sector-num {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: var(--dp-accent);
letter-spacing: 0.1em;
margin-bottom: 14px;
background: rgba(230, 126, 34, 0.12);
padding: 3px 10px;
border-radius: 3px;
}
.dp-sector-card h3 {
font-size: 17px !important;
margin-bottom: 10px !important;
color: var(--dp-white) !important;
text-align: left;
}
.dp-sector-card p {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
margin: 0;
text-align: left;
}
/* Remove old icon styles */
.dp-sector-icon {
display: none;
}
/* ============================================================
NEW-3. HOW WE WORK — Process Steps — Premium
============================================================ */
.dp-process-section {
padding: var(--dp-section-padding) 0 !important;
background: var(--dp-primary);
position: relative;
overflow: hidden;
}
.dp-process-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(41, 128, 185, 0.15), transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(230, 126, 34, 0.08), transparent 50%);
pointer-events: none;
}
/* Grid pattern overlay */
.dp-process-section::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.dp-process-section h2 {
color: var(--dp-white) !important;
}
.dp-process-section .dp-section-subtitle {
color: rgba(255, 255, 255, 0.7) !important;
}
.dp-process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
max-width: var(--dp-container-max);
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
/* Horizontal connector line */
.dp-process-connector {
position: absolute;
top: 48px;
left: calc(12.5% + 16px);
right: calc(12.5% + 16px);
height: 2px;
background: linear-gradient(90deg, var(--dp-accent), var(--dp-secondary-light), var(--dp-accent));
opacity: 0.3;
z-index: 0;
}
.dp-process-step {
text-align: center;
position: relative;
z-index: 1;
padding: 0 8px;
animation: dp-fadeInUp 0.5s ease both;
animation-delay: var(--step-delay, 0s);
}
.dp-step-number-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.dp-step-number {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 2px solid rgba(230, 126, 34, 0.5);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 800;
color: var(--dp-accent-light);
transition: var(--dp-transition);
position: relative;
z-index: 1;
box-shadow: 0 0 20px rgba(230, 126, 34, 0.1);
}
.dp-process-step:hover .dp-step-number {
background: var(--dp-accent);
color: var(--dp-white);
border-color: var(--dp-accent);
box-shadow: 0 0 24px rgba(230, 126, 34, 0.3);
}
/* Mini icon — hidden (removed from design) */
.dp-step-icon-mini {
display: none;
}
.dp-process-step h3 {
font-size: 17px !important;
color: var(--dp-white) !important;
margin-bottom: 8px !important;
font-weight: 700;
}
.dp-process-step p {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.65;
}
/* ============================================================
NEW-4. TESTIMONIALS
============================================================ */
.dp-testimonials-section {
padding: var(--dp-section-padding) 0 !important;
background: var(--dp-lighter);
}
.dp-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: var(--dp-container-max);
margin: 0 auto;
padding: 0 20px;
}
.dp-testimonial-card {
background: var(--dp-white);
border-radius: var(--dp-radius);
padding: 32px 28px;
box-shadow: var(--dp-shadow-sm);
border: 1px solid var(--dp-border);
position: relative;
transition: var(--dp-transition);
}
.dp-testimonial-card:hover {
transform: translateY(-4px);
box-shadow: var(--dp-shadow);
}
/* Quote mark decorative */
.dp-testimonial-card::before {
content: '"';
position: absolute;
top: 16px;
right: 24px;
font-size: 56px;
line-height: 1;
font-family: Georgia, serif;
color: var(--dp-accent);
opacity: 0.15;
}
.dp-testimonial-stars {
color: var(--dp-accent);
font-size: 16px;
margin-bottom: 12px;
letter-spacing: 2px;
}
.dp-testimonial-text {
font-size: 14px;
color: var(--dp-text-light);
line-height: 1.7;
margin-bottom: 20px;
font-style: italic;
}
.dp-testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.dp-testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--dp-primary);
color: var(--dp-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
}
.dp-testimonial-name {
font-size: 15px;
font-weight: 600;
color: var(--dp-primary);
line-height: 1.3;
}
.dp-testimonial-role {
font-size: 13px;
color: var(--dp-text-light);
}
/* ============================================================
NEW-5. GUARANTEES & SUPPORT — Checkmark List
============================================================ */
.dp-guarantees-section {
padding: 56px 0 !important;
background: var(--dp-lighter);
border-top: 1px solid var(--dp-border);
border-bottom: 1px solid var(--dp-border);
}
.dp-guarantees-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: var(--dp-container-max);
margin: 0 auto;
padding: 0 20px;
}
.dp-guarantee-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
}
.dp-check-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
color: var(--dp-accent);
margin-top: 1px;
}
/* Hide old icon containers */
.dp-guarantee-icon {
display: none;
}
.dp-guarantee-item h4 {
font-size: 15px !important;
margin: 0 0 4px !important;
color: var(--dp-primary) !important;
}
.dp-guarantee-item p {
font-size: 13px;
color: var(--dp-text-light);
line-height: 1.5;
margin: 0;
}
/* ============================================================
NEW-6. WHATSAPP CHAT WIDGET
============================================================ */
.dp-wa-widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
pointer-events: none;
}
.dp-wa-fab,
.dp-wa-open .dp-wa-popup {
pointer-events: auto;
}
/* FAB button */
.dp-wa-fab {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #25d366;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
transition: var(--dp-transition);
position: relative;
}
.dp-wa-fab:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
background-color: #1da851;
}
.dp-wa-fab svg {
width: 30px;
height: 30px;
fill: var(--dp-white);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.dp-wa-fab .dp-wa-fab-icon {
opacity: 1;
transform: scale(1);
}
.dp-wa-fab .dp-wa-fab-close {
position: absolute;
opacity: 0;
transform: scale(0) rotate(-90deg);
}
.dp-wa-open .dp-wa-fab .dp-wa-fab-icon {
opacity: 0;
transform: scale(0) rotate(90deg);
}
.dp-wa-open .dp-wa-fab .dp-wa-fab-close {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* Popup card */
.dp-wa-popup {
width: 340px;
background: var(--dp-white);
border-radius: var(--dp-radius-lg);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
transform: scale(0.8) translateY(20px);
opacity: 0;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
transform-origin: bottom right;
}
.dp-wa-open .dp-wa-popup {
transform: scale(1) translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Header */
.dp-wa-popup-header {
background: #075e54;
padding: 16px 18px;
display: flex;
align-items: center;
gap: 12px;
}
.dp-wa-popup-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: #128c7e;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dp-wa-popup-info {
flex: 1;
min-width: 0;
}
.dp-wa-popup-info strong {
color: var(--dp-white);
font-size: 14px;
display: block;
line-height: 1.3;
}
.dp-wa-popup-info span {
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
}
.dp-wa-popup-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
font-size: 24px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: var(--dp-transition-fast);
}
.dp-wa-popup-close:hover {
color: var(--dp-white);
}
/* Body — chat bubble */
.dp-wa-popup-body {
padding: 20px 18px;
background: #e5ddd5;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2' fill='%23d1c7b7' fill-opacity='.12'/%3E%3C/svg%3E");
}
.dp-wa-bubble {
background: var(--dp-white);
border-radius: 0 12px 12px 12px;
padding: 12px 16px;
font-size: 14px;
line-height: 1.55;
color: var(--dp-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
max-width: 90%;
position: relative;
}
.dp-wa-bubble::before {
content: '';
position: absolute;
top: 0;
left: -8px;
width: 0;
height: 0;
border-top: 8px solid var(--dp-white);
border-left: 8px solid transparent;
}
/* Footer — input area */
.dp-wa-popup-footer {
padding: 12px 14px;
background: var(--dp-white);
display: flex;
align-items: flex-end;
gap: 10px;
border-top: 1px solid var(--dp-border);
}
.dp-wa-input {
flex: 1;
border: 1px solid var(--dp-border);
border-radius: 20px;
padding: 10px 16px;
font-size: 14px;
font-family: inherit;
resize: none;
outline: none;
line-height: 1.4;
max-height: 80px;
transition: var(--dp-transition-fast);
color: var(--dp-text);
}
.dp-wa-input:focus {
border-color: #25d366;
box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.15);
}
.dp-wa-input::placeholder {
color: var(--dp-gray);
}
.dp-wa-send {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
background: #25d366;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--dp-transition);
}
.dp-wa-send:hover {
background: #1da851;
transform: scale(1.08);
}
/* ============================================================
NEW-7. SECTION UTILITIES
============================================================ */
/* Section title with decorative accent bar */
.dp-section-title-decorated {
text-align: center;
position: relative;
padding-bottom: 16px;
margin-bottom: 12px;
}
.dp-section-title-decorated::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 3px;
background: var(--dp-accent);
border-radius: 2px;
}
/* Industrial background textures */
.dp-bg-blueprint {
background-color: var(--dp-lighter);
background-image:
linear-gradient(rgba(26, 58, 92, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(26, 58, 92, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
.dp-bg-frost {
background: linear-gradient(180deg, var(--dp-lighter) 0%, var(--dp-white) 100%);
position: relative;
}
.dp-bg-frost::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background:
radial-gradient(ellipse at 10% 0%, rgba(41, 128, 185, 0.05), transparent 40%),
radial-gradient(ellipse at 90% 100%, rgba(41, 128, 185, 0.04), transparent 40%);
pointer-events: none;
}
/* ============================================================
16. ANIMATIONS
============================================================ */
@keyframes dp-fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dp-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.dp-animate {
animation: dp-fadeInUp 0.6s ease forwards;
}
/* Pulse removed — clean interactions */
.dp-pulse {
animation: none;
}
/* Mascot floating animation */
@keyframes dp-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
/* Mascot entrance — slide up + fade in */
@keyframes dp-mascotEntrance {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
17. BREADCRUMBS
============================================================ */
.ct-breadcrumbs {
font-size: 13px;
color: var(--dp-text-light);
padding: 12px 0;
}
.ct-breadcrumbs a {
color: var(--dp-secondary);
}
.ct-breadcrumbs a:hover {
color: var(--dp-accent);
}
/* ============================================================
18. WOOCOMMERCE PAGES (Cart, Checkout)
============================================================ */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #place_order {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: none;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 16px;
padding: 16px 32px;
transition: var(--dp-transition);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-checkout #place_order:hover {
background-color: var(--dp-accent-hover) !important;
transform: translateY(-1px);
box-shadow: var(--dp-shadow);
}
.woocommerce table.shop_table {
border-radius: var(--dp-radius);
overflow: hidden;
border: 1px solid var(--dp-border);
}
.woocommerce table.shop_table th {
background: var(--dp-light);
color: var(--dp-primary);
font-weight: 600;
}
/* Coupon field */
.woocommerce .coupon .input-text {
border-radius: var(--dp-radius-sm);
border: 1px solid var(--dp-border);
padding: 10px 14px;
}
.woocommerce .coupon .button {
background-color: var(--dp-primary) !important;
color: var(--dp-white) !important;
border-radius: var(--dp-radius-sm);
border: none;
font-weight: 600;
}
/* ============================================================
18b. WOOCOMMERCE CART BLOCK (WooCommerce Blocks / React)
============================================================ */
/* --- Page title area --- */
.page-id-13 .entry-header,
.woocommerce-cart .entry-header {
text-align: center;
padding: 40px 0 24px;
}
/* --- Cart container --- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout.alignwide {
max-width: var(--dp-container-max) !important;
margin: 0 auto !important;
padding: 32px 20px 60px;
width: 100%;
}
/* Constrain the full-width container on cart/checkout pages */
.page-id-13 .ct-container-full,
.woocommerce-cart .ct-container-full,
.woocommerce-checkout .ct-container-full {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.page-id-13 .entry-content.is-layout-constrained > *,
.woocommerce-checkout .entry-content.is-layout-constrained > * {
max-width: var(--dp-container-max);
margin-left: auto !important;
margin-right: auto !important;
}
/* --- Main layout (items + totals side by side) --- */
.wc-block-cart .wc-block-cart__main {
display: flex;
gap: 40px;
align-items: start;
max-width: 100%;
}
.wc-block-cart .wc-block-cart__main > *:first-child {
flex: 1;
min-width: 0;
}
.wc-block-cart .wc-block-cart__sidebar {
flex: 0 0 340px;
width: 340px;
max-width: 100%;
}
/* --- Cart items table --- */
.wc-block-cart-items,
.wc-block-cart__items {
width: 100%;
}
.wc-block-cart .wc-block-cart__items {
flex: 1;
min-width: 0;
}
/* Ensure the table inside stretches fully */
.wc-block-cart-items table,
.wc-block-cart-items .wc-block-cart-items__header,
.wc-block-cart-items .wc-block-cart-items__row {
width: 100%;
}
.wc-block-cart-items .wc-block-cart-items__header {
background: var(--dp-light);
border-radius: var(--dp-radius-sm) var(--dp-radius-sm) 0 0;
}
.wc-block-cart-items .wc-block-cart-items__header span,
.wc-block-cart-items .wc-block-cart-items__header th {
color: var(--dp-primary);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 12px 16px;
}
/* Fix header alignment */
.wc-block-cart-items table {
table-layout: fixed;
border-collapse: collapse;
}
.wc-block-cart-items .wc-block-cart-items__header-image {
width: 80px;
}
.wc-block-cart-items .wc-block-cart-items__header-product {
text-align: left;
}
.wc-block-cart-items .wc-block-cart-items__header-total {
text-align: right;
width: 120px;
}
.wc-block-cart-items .wc-block-cart-items__row {
border-bottom: 1px solid var(--dp-border);
padding: 20px 0;
}
.wc-block-cart-items .wc-block-cart-items__row:last-child {
border-bottom: none;
}
/* Product image in cart */
.wc-block-cart-item__image img {
border-radius: var(--dp-radius-sm);
border: 1px solid var(--dp-border);
object-fit: contain;
background: var(--dp-white);
}
/* Product name */
.wc-block-components-product-name {
color: var(--dp-primary) !important;
font-weight: 600;
font-size: 15px;
text-decoration: none !important;
transition: var(--dp-transition-fast);
}
.wc-block-components-product-name:hover {
color: var(--dp-secondary) !important;
}
/* Product metadata (short description, variation info) */
.wc-block-components-product-metadata {
font-size: 13px;
color: var(--dp-text-light);
margin-top: 4px;
}
/* Product price */
.wc-block-cart .wc-block-components-product-price {
font-weight: 700;
color: var(--dp-text);
font-size: 15px;
}
/* Quantity selector */
.wc-block-components-quantity-selector {
border: 1px solid var(--dp-border) !important;
border-radius: var(--dp-radius-sm) !important;
overflow: hidden;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
font-weight: 600;
color: var(--dp-text);
font-size: 14px;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
color: var(--dp-text-light);
transition: var(--dp-transition-fast);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
color: var(--dp-primary);
background: var(--dp-light);
}
/* Remove item button */
.wc-block-cart-item__remove-link {
color: var(--dp-text-light) !important;
font-size: 13px;
transition: var(--dp-transition-fast);
}
.wc-block-cart-item__remove-link:hover {
color: var(--dp-error) !important;
}
/* --- Totals sidebar --- */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block {
background: var(--dp-lighter);
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius);
padding: 28px 24px;
position: sticky;
top: 100px;
}
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
border-color: var(--dp-border) !important;
}
/* Totals title */
.wc-block-cart__totals-title {
font-size: 18px;
font-weight: 700;
color: var(--dp-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 2px solid var(--dp-primary);
}
/* Totals rows */
.wc-block-components-totals-item {
padding: 12px 0;
}
.wc-block-components-totals-item__label {
color: var(--dp-text);
font-weight: 500;
}
.wc-block-components-totals-item__value {
font-weight: 600;
color: var(--dp-text);
}
/* Footer item (total estimado) */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font-size: 16px;
font-weight: 700;
color: var(--dp-primary);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 20px;
font-weight: 800;
color: var(--dp-primary);
}
/* Coupon toggle */
.wc-block-components-totals-coupon a,
.wc-block-components-totals-coupon__button-link {
color: var(--dp-secondary);
font-weight: 500;
}
/* Coupon input */
.wc-block-components-totals-coupon .wc-block-components-text-input input {
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
padding: 10px 14px;
}
.wc-block-components-totals-coupon .wc-block-components-button {
background: var(--dp-primary) !important;
color: var(--dp-white) !important;
border-radius: var(--dp-radius-sm);
font-weight: 600;
}
/* Shipping row */
.wc-block-components-totals-shipping .wc-block-components-totals-shipping__via {
color: var(--dp-success);
font-weight: 600;
}
/* Proceed to checkout button */
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: none !important;
border-radius: var(--dp-radius-sm) !important;
font-weight: 700;
font-size: 16px;
padding: 16px 32px;
width: 100%;
text-align: center;
transition: var(--dp-transition);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
background-color: var(--dp-accent-hover) !important;
transform: translateY(-1px);
box-shadow: var(--dp-shadow);
}
/* --- Empty cart --- */
.wc-block-cart__empty-cart__title {
color: var(--dp-primary);
font-size: 24px;
margin-bottom: 16px;
}
.wp-block-woocommerce-empty-cart-block {
text-align: center;
padding: 80px 20px;
}
.wp-block-woocommerce-empty-cart-block a {
color: var(--dp-accent);
font-weight: 600;
}
.wp-block-woocommerce-empty-cart-block a:hover {
color: var(--dp-accent-hover);
}
/* --- Cart Notices --- */
.wc-block-components-notice-banner {
border-radius: var(--dp-radius-sm) !important;
padding: 14px 20px;
margin-bottom: 20px;
font-size: 14px;
}
.wc-block-components-notice-banner.is-success {
background: #eafaf1;
border-left: 4px solid var(--dp-success);
color: #1e6b42;
}
.wc-block-components-notice-banner.is-error {
background: #fdf0ef;
border-left: 4px solid var(--dp-error);
color: #922820;
}
/* --- Cart page responsive --- */
@media (max-width: 999px) {
.wc-block-cart .wc-block-cart__main {
flex-direction: column;
gap: 24px;
}
.wc-block-cart .wc-block-cart__sidebar {
flex: 1;
width: 100%;
}
.wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block {
position: static;
}
.wp-block-woocommerce-cart {
padding: 20px 16px 40px;
}
}
@media (max-width: 689px) {
.wc-block-cart-items .wc-block-cart-items__row {
padding: 16px 0;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 18px;
}
}
/* Country selector — spacing below name/surname row */
.wc-block-components-address-form .wc-block-components-address-form__country.wc-block-components-country-input {
margin-top: 20px !important;
}
/* ============================================================
18b-3. MINI-CART DROPDOWN
============================================================ */
/* Dropdown box */
.ct-cart-content {
border: 1px solid var(--dp-border) !important;
border-radius: var(--dp-radius) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}
/* "Ver carrito" button */
.ct-cart-content .woocommerce-mini-cart__buttons .button.wc-forward:first-child {
background-color: var(--dp-white) !important;
color: var(--dp-primary) !important;
border: 2px solid var(--dp-primary) !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--dp-transition-fast);
}
.ct-cart-content .woocommerce-mini-cart__buttons .button.wc-forward:first-child:hover {
background-color: var(--dp-primary) !important;
color: var(--dp-white) !important;
}
/* "Finalizar compra" button */
.ct-cart-content .woocommerce-mini-cart__buttons .button.checkout.wc-forward {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: 2px solid var(--dp-accent) !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--dp-transition-fast);
}
.ct-cart-content .woocommerce-mini-cart__buttons .button.checkout.wc-forward:hover {
background-color: var(--dp-accent-hover) !important;
border-color: var(--dp-accent-hover) !important;
}
/* Side panel (#woo-cart-panel) buttons */
#woo-cart-panel .woocommerce-mini-cart__buttons .button.wc-forward:first-child {
background-color: var(--dp-white) !important;
color: var(--dp-primary) !important;
border: 2px solid var(--dp-primary) !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--dp-transition-fast);
}
#woo-cart-panel .woocommerce-mini-cart__buttons .button.wc-forward:first-child:hover {
background-color: var(--dp-primary) !important;
color: var(--dp-white) !important;
}
#woo-cart-panel .woocommerce-mini-cart__buttons .button.checkout.wc-forward {
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: 2px solid var(--dp-accent) !important;
border-radius: var(--dp-radius-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--dp-transition-fast);
}
#woo-cart-panel .woocommerce-mini-cart__buttons .button.checkout.wc-forward:hover {
background-color: var(--dp-accent-hover) !important;
border-color: var(--dp-accent-hover) !important;
}
/* ============================================================
18c. ADD-TO-CART NOTIFICATION (toast style)
============================================================ */
/* Toast notification — all WooCommerce messages */
body.dp-theme .woocommerce-message,
body.dp-theme .woocommerce-info {
position: fixed !important;
top: 24px;
right: 24px;
left: auto !important;
z-index: 99999;
max-width: 420px;
width: auto;
background: var(--dp-white) !important;
border: 1px solid var(--dp-border);
border-left: 4px solid var(--dp-success);
border-radius: var(--dp-radius-sm) !important;
box-shadow: var(--dp-shadow-lg);
padding: 16px 20px 16px 48px !important;
font-size: 14px;
color: var(--dp-text) !important;
line-height: 1.5;
display: flex !important;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-height: auto !important;
animation: dpToastSlideIn 0.4s ease;
margin: 0 !important;
}
/* Icon (::before pseudo from Blocksy/WooCommerce) */
body.dp-theme .woocommerce-message::before,
body.dp-theme .woocommerce-info::before {
position: absolute !important;
left: 16px !important;
top: 50% !important;
transform: translateY(-50%);
inset-inline-start: 16px !important;
color: var(--dp-success);
opacity: 1;
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
line-height: 18px !important;
}
/* "Ver carrito" button */
body.dp-theme .woocommerce-message .button,
body.dp-theme .woocommerce-message .wc-forward,
body.dp-theme .woocommerce-info .button {
display: inline-block !important;
background-color: var(--dp-accent) !important;
color: var(--dp-white) !important;
border: none !important;
border-radius: var(--dp-radius-sm) !important;
font-weight: 600;
font-size: 13px;
padding: 8px 16px !important;
margin: 0 !important;
margin-inline-start: auto !important;
text-decoration: none !important;
transition: var(--dp-transition-fast);
float: none !important;
order: 2;
white-space: nowrap;
min-height: auto !important;
line-height: 1.4 !important;
}
body.dp-theme .woocommerce-message .button:hover,
body.dp-theme .woocommerce-message .wc-forward:hover,
body.dp-theme .woocommerce-info .button:hover {
background-color: var(--dp-accent-hover) !important;
transform: translateY(-1px);
}
@keyframes dpToastSlideIn {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* WooCommerce error toast */
body.dp-theme .woocommerce-error {
position: fixed !important;
top: 24px;
right: 24px;
left: auto !important;
z-index: 99999;
max-width: 420px;
width: auto;
background: var(--dp-white) !important;
border: 1px solid var(--dp-border);
border-left: 4px solid var(--dp-error);
border-radius: var(--dp-radius-sm) !important;
box-shadow: var(--dp-shadow-lg);
padding: 16px 20px 16px 48px !important;
font-size: 14px;
color: var(--dp-text) !important;
animation: dpToastSlideIn 0.4s ease;
margin: 0 !important;
}
body.dp-theme .woocommerce-error::before {
position: absolute !important;
left: 16px !important;
top: 50% !important;
transform: translateY(-50%);
inset-inline-start: 16px !important;
color: var(--dp-error);
}
/* Toast on pages with Blocksy wrapper */
.blocksy-woo-messages-default .woocommerce-message,
.blocksy-woo-messages-default .woocommerce-info {
position: fixed !important;
top: 24px;
right: 24px;
left: auto !important;
z-index: 99999;
}
/* Toast responsive — mobile */
@media (max-width: 689px) {
body.dp-theme .woocommerce-message,
body.dp-theme .woocommerce-info,
body.dp-theme .woocommerce-error {
top: 12px;
right: 12px;
left: 12px !important;
max-width: calc(100% - 24px);
font-size: 13px;
padding: 14px 16px 14px 44px !important;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
body.dp-theme .woocommerce-message::before,
body.dp-theme .woocommerce-info::before,
body.dp-theme .woocommerce-error::before {
left: 14px !important;
inset-inline-start: 14px !important;
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
}
body.dp-theme .woocommerce-message .button,
body.dp-theme .woocommerce-message .wc-forward {
width: 100%;
text-align: center;
margin-top: 4px !important;
}
}
/* ============================================================
19. MISCELLANEOUS
============================================================ */
/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--dp-light);
}
::-webkit-scrollbar-thumb {
background: var(--dp-gray);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--dp-primary);
}
/* Selection color */
::selection {
background: var(--dp-secondary);
color: var(--dp-white);
}
/* Pagination */
.ct-pagination .page-numbers {
border-radius: var(--dp-radius-sm);
transition: var(--dp-transition-fast);
}
.ct-pagination .page-numbers.current,
.ct-pagination .page-numbers:hover {
background-color: var(--dp-primary);
color: var(--dp-white);
}
/* Blocksy notice styling */
.woocommerce-message {
border-top-color: var(--dp-success);
}
.woocommerce-error {
border-top-color: var(--dp-error);
}
/* Back to top button */
.ct-back-to-top {
background-color: var(--dp-primary) !important;
color: var(--dp-white) !important;
border-radius: 50% !important;
box-shadow: var(--dp-shadow);
transition: var(--dp-transition);
}
.ct-back-to-top:hover {
background-color: var(--dp-accent) !important;
transform: translateY(-3px);
}
/* ============================================================
20. RESPONSIVE
============================================================ */
@media (max-width: 999px) {
.dp-hero-section .wp-block-cover {
min-height: auto !important;
}
.dp-hero-section h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}
.dp-hero-mascot {
width: 120px;
opacity: 0.1;
}
.dp-trust-badges .wp-block-columns {
flex-wrap: wrap;
}
.dp-trust-badges .wp-block-column {
flex-basis: 50% !important;
}
.dp-categories-section .wp-block-columns {
flex-wrap: wrap;
}
.dp-categories-section .wp-block-column {
flex-basis: calc(50% - 16px) !important;
}
/* Dynamic components */
.dp-trust-badges-dynamic,
.dp-trust-strip-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0 !important;
}
.dp-trust-strip-item,
.dp-badge-item {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 14px 16px;
justify-content: center;
gap: 10px;
}
.dp-trust-strip-item:nth-child(odd),
.dp-badge-item:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.dp-trust-strip-item:nth-last-child(-n+2),
.dp-badge-item:nth-last-child(-n+2) {
border-bottom: none;
}
/* Slider arrows hidden on tablet */
.dp-slider-container .swiper-button-prev,
.dp-slider-container .swiper-button-next {
display: none;
}
.dp-stats-section .wp-block-column {
flex-basis: 50% !important;
}
/* Hide stat dividers on tablet */
.dp-stats-section .wp-block-column + .wp-block-column::before {
display: none;
}
/* New sections tablet */
.dp-sectors-grid {
grid-template-columns: repeat(2, 1fr);
}
.dp-process-steps {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
/* Hide horizontal connector on tablet */
.dp-process-connector {
display: none;
}
.dp-process-steps::before {
display: none;
}
.dp-testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.dp-guarantees-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Single product — tablet */
.single-product .woocommerce-tabs ul.tabs {
gap: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
padding: 10px 16px;
font-size: 12px;
}
.single-product section.related,
.single-product section.up-sells {
margin-top: 40px;
padding-top: 32px;
}
.dp-product-trust {
gap: 12px;
padding: 16px;
}
.dp-product-trust-item {
flex: 1 1 calc(50% - 6px);
}
}
@media (max-width: 689px) {
:root {
--dp-section-padding: 48px;
}
.dp-hero-section .wp-block-cover {
min-height: auto !important;
padding: 48px 16px !important;
}
.dp-hero-section h1 {
font-size: 1.6rem !important;
}
.dp-hero-mascot {
display: none;
}
.dp-trust-badges .wp-block-column {
flex-basis: 100% !important;
padding: 16px;
}
.dp-categories-section .wp-block-column {
flex-basis: 100% !important;
}
/* Dynamic components */
.dp-trust-badges-dynamic,
.dp-trust-strip-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0 !important;
align-items: stretch;
}
.dp-trust-strip-item,
.dp-badge-item {
justify-content: center;
border-right: none;
border-left: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 14px 12px;
gap: 8px;
}
.dp-trust-strip-item:nth-child(odd),
.dp-badge-item:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.dp-trust-strip-item:nth-last-child(-n+2),
.dp-badge-item:nth-last-child(-n+2) {
border-bottom: none;
}
.dp-trust-strip-text,
.dp-badge-title {
font-size: 12px !important;
white-space: normal !important;
text-align: center;
line-height: 1.3;
}
.dp-trust-strip-icon svg,
.dp-badge-icon svg {
width: 20px;
height: 20px;
}
.dp-stats-section .wp-block-column {
flex-basis: 100% !important;
padding: 12px;
}
.dp-stats-section .wp-block-column + .wp-block-column::before {
display: none;
}
.dp-newsletter-section form {
flex-direction: column;
}
.dp-contact-section .wp-block-columns {
flex-direction: column-reverse;
}
/* New sections mobile */
.dp-sectors-grid {
grid-template-columns: 1fr;
}
.dp-process-steps {
grid-template-columns: 1fr;
gap: 20px;
}
.dp-process-connector {
display: none;
}
.dp-testimonials-grid {
grid-template-columns: 1fr;
}
.dp-guarantees-grid {
grid-template-columns: 1fr;
}
.dp-brands-logos {
gap: 20px 32px;
}
.dp-brands-logos img,
.dp-brands-logos .wp-block-image img {
height: 32px;
}
/* WooCommerce mobile */
.woocommerce ul.products[class*="columns-"] li.product {
width: 100% !important;
margin-right: 0 !important;
}
/* Single product — mobile */
.single-product .entry-summary .product_title,
.single-product .entry-summary h1.product_title {
font-size: 1.35rem;
}
.single-product .entry-summary .price {
font-size: 24px;
}
.single-product .woocommerce-product-gallery {
border-radius: var(--dp-radius);
}
.single-product .woocommerce-tabs ul.tabs {
flex-wrap: wrap;
}
.single-product .woocommerce-tabs ul.tabs li {
flex: 1 1 auto;
}
.single-product .woocommerce-tabs ul.tabs li a {
padding: 10px 12px;
font-size: 11px;
text-align: center;
letter-spacing: 0.4px;
}
.single-product .variations select {
min-width: 100%;
}
.single-product .single_add_to_cart_button {
width: 100%;
padding: 14px 20px;
text-align: center;
}
.single-product section.related,
.single-product section.up-sells {
margin-top: 32px;
padding-top: 24px;
}
.dp-product-trust {
gap: 10px;
padding: 14px;
}
.dp-product-trust-item {
flex: 1 1 100%;
}
.dp-product-trust-icon {
width: 32px;
height: 32px;
}
.dp-product-trust-icon svg {
width: 16px;
height: 16px;
}
/* WhatsApp widget mobile */
.dp-wa-fab {
width: 52px;
height: 52px;
}
.dp-wa-fab svg {
width: 26px;
height: 26px;
}
.dp-wa-popup {
width: calc(100vw - 32px);
max-width: 340px;
}
}
/* ============================================================
21. HEADER INLINE SEARCH (replaces Blocksy modal search)
============================================================ */
.dp-header-search {
display: flex;
align-items: center;
flex: 1;
max-width: 80%;
}
.dp-header-search-form {
display: flex;
align-items: center;
position: relative;
width: 100%;
}
.dp-header-search-input {
width: 100%;
padding: 8px 40px 8px 14px;
border: 1px solid var(--dp-border);
border-radius: 4px;
background: var(--dp-white);
font-size: 14px;
line-height: 1.4;
color: var(--dp-text);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.dp-header-search-input::placeholder {
color: var(--dp-gray);
}
.dp-header-search-input:focus {
border-color: var(--dp-secondary);
box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.15);
}
.dp-header-search-btn {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
padding: 0;
border: none;
border-radius: 0 4px 4px 0;
background: var(--dp-secondary);
color: var(--dp-white);
cursor: pointer;
transition: background 0.2s;
}
.dp-header-search-btn svg {
width: 16px;
height: 16px;
display: block;
fill: currentColor;
}
.dp-header-search-btn:hover {
background: var(--dp-primary);
}
/* Hide the Blocksy search modal since we no longer trigger it */
#search-modal {
display: none !important;
}
@media (max-width: 689px) {
.dp-header-search {
max-width: 100%;
}
}
/* ============================================================
22. SIDEBAR — Shop Categories Navigation
============================================================ */
/*
* Actual rendered HTML:
* .ct-sidebar > .ct-widget.widget_nav_menu
* > h2.widget-title
* > div.menu-*-container > ul.widget-menu > li.menu-item > a
*/
/* ── Widget card ─────────────────────────────────── */
.ct-sidebar .ct-widget.widget_nav_menu {
background: var(--dp-white);
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-lg);
padding: 0 !important;
box-shadow: var(--dp-shadow);
overflow: hidden;
text-align: left;
}
/* Gradient accent bar */
.ct-sidebar .ct-widget.widget_nav_menu::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, var(--dp-primary) 0%, var(--dp-secondary) 50%, var(--dp-accent) 100%);
}
/* ── Widget title — clickable collapse header ────── */
.ct-sidebar .ct-widget.widget_nav_menu .widget-title {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--dp-primary) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 16px 20px !important;
margin: 0 !important;
border-bottom: 1px solid var(--dp-border);
background: var(--dp-lighter);
display: flex !important;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
text-align: left;
}
/* Grid icon */
.ct-sidebar .ct-widget.widget_nav_menu .widget-title::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232980b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
}
/* Chevron indicator */
.ct-sidebar .ct-widget.widget_nav_menu .widget-title::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-left: auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231a3a5c' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='3,4.5 6,7.5 9,4.5'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
transition: transform 0.3s ease;
}
/* Rotated chevron when collapsed */
.ct-sidebar .ct-widget.widget_nav_menu.dp-widget-collapsed .widget-title::after {
transform: rotate(-90deg);
}
/* ── List wrapper (animated collapse target) ─────── */
.ct-sidebar .ct-widget.widget_nav_menu .dp-cat-list-wrap {
overflow: hidden;
}
/* ── Menu list ───────────────────────────────────── */
.ct-sidebar .ct-widget.widget_nav_menu ul.menu,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu {
list-style: none !important;
padding: 6px 0 !important;
margin: 0 !important;
text-align: left;
}
/* ── Menu items ──────────────────────────────────── */
.ct-sidebar .ct-widget.widget_nav_menu ul.menu > li,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu > li {
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(220, 230, 240, 0.4);
}
.ct-sidebar .ct-widget.widget_nav_menu ul.menu > li:last-child,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu > li:last-child {
border-bottom: none;
}
/* ── Menu links ──────────────────────────────────── */
.ct-sidebar .ct-widget.widget_nav_menu ul.menu li a,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu li a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 11px 20px !important;
color: var(--dp-text) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all 0.2s ease;
border-left: 3px solid transparent;
line-height: 1.4;
}
/* Dot indicator */
.ct-sidebar .ct-widget.widget_nav_menu ul.menu > li > a::before,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu > li > a::before {
content: '';
width: 7px;
height: 7px;
min-width: 7px;
border-radius: 2px;
background: var(--dp-border);
transition: all 0.2s ease;
flex-shrink: 0;
}
/* ── Hover state ─────────────────────────────────── */
.ct-sidebar .ct-widget.widget_nav_menu ul.menu li a:hover,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu li a:hover {
background: rgba(41, 128, 185, 0.05);
color: var(--dp-secondary) !important;
border-left-color: var(--dp-secondary);
}
.ct-sidebar .ct-widget.widget_nav_menu ul.menu > li > a:hover::before,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu > li > a:hover::before {
background: var(--dp-secondary);
border-radius: 50%;
}
/* ── Active / current page ───────────────────────── */
.ct-sidebar .ct-widget.widget_nav_menu ul.menu li.current-menu-item > a,
.ct-sidebar .ct-widget.widget_nav_menu ul.menu li.current_page_item > a,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu li.current-menu-item > a,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu li.current_page_item > a {
background: rgba(41, 128, 185, 0.06) !important;
color: var(--dp-secondary) !important;
font-weight: 700 !important;
border-left-color: var(--dp-accent) !important;
}
.ct-sidebar .ct-widget.widget_nav_menu ul.menu li.current-menu-item > a::before,
.ct-sidebar .ct-widget.widget_nav_menu ul.menu li.current_page_item > a::before,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu li.current-menu-item > a::before,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu li.current_page_item > a::before {
background: var(--dp-accent);
border-radius: 50%;
}
/* ── Sub-menus (if any children exist) ───────────── */
.ct-sidebar .ct-widget.widget_nav_menu ul.menu .sub-menu,
.ct-sidebar .ct-widget.widget_nav_menu ul.widget-menu .sub-menu {
padding: 4px 0 4px 0 !important;
margin: 0 0 0 20px !important;
border-left: 2px solid var(--dp-border);
list-style: none !important;
}
.ct-sidebar .ct-widget.widget_nav_menu ul.menu .sub-menu li a {
font-size: 12.5px !important;
color: var(--dp-text-light) !important;
padding: 8px 14px 8px 16px !important;
}
.ct-sidebar .ct-widget.widget_nav_menu ul.menu .sub-menu li a::before {
content: '';
width: 5px;
height: 5px;
min-width: 5px;
border-radius: 50%;
background: var(--dp-border);
flex-shrink: 0;
}
.ct-sidebar .ct-widget.widget_nav_menu ul.menu .sub-menu li a:hover {
color: var(--dp-secondary) !important;
}
.ct-sidebar .ct-widget.widget_nav_menu ul.menu .sub-menu li a:hover::before {
background: var(--dp-secondary);
}
/* ============================================================
23. SHOP HERO BANNER
============================================================ */
.dp-shop-hero {
position: relative;
min-height: 260px;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
background-color: var(--dp-primary);
background-image: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
overflow: hidden;
margin-bottom: 48px;
border-radius: var(--dp-radius);
}
/* Use an actual image if available — set via inline style or Customizer */
.dp-shop-hero[style*="background-image"] {
background-blend-mode: overlay;
}
.dp-shop-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(17, 40, 64, 0.88) 0%,
rgba(26, 58, 92, 0.80) 50%,
rgba(41, 128, 185, 0.65) 100%
);
z-index: 1;
}
.dp-shop-hero-content {
position: relative;
z-index: 2;
max-width: 680px;
padding: 56px 48px;
}
.dp-shop-hero-content .dp-hero-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(230, 126, 34, 0.9);
color: var(--dp-white);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 4px;
margin-bottom: 20px;
}
.dp-shop-hero-content h1 {
color: var(--dp-white) !important;
font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
margin-bottom: 16px !important;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.dp-shop-hero-content p {
color: rgba(255, 255, 255, 0.88) !important;
font-size: clamp(0.95rem, 1.8vw, 1.1rem) !important;
line-height: 1.7;
margin: 0;
max-width: 540px;
}
/* ============================================================
23b. CATEGORY HERO BANNER
============================================================ */
/* Hide Blocksy default hero on category pages */
body.dp-product-category .hero-section {
display: none !important;
}
.dp-cat-hero {
position: relative;
min-height: 260px;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
background-color: var(--dp-primary);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
margin-bottom: 48px;
border-radius: var(--dp-radius);
}
.dp-cat-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(17, 40, 64, 0.88) 0%,
rgba(26, 58, 92, 0.80) 50%,
rgba(41, 128, 185, 0.65) 100%
);
z-index: 1;
}
.dp-cat-hero-content {
position: relative;
z-index: 2;
max-width: 680px;
padding: 56px 48px;
}
.dp-cat-hero-content h1 {
color: var(--dp-white) !important;
font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
margin: 0 0 16px 0 !important;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.dp-cat-hero-content p {
color: rgba(255, 255, 255, 0.88) !important;
font-size: clamp(0.95rem, 1.8vw, 1.1rem) !important;
line-height: 1.7;
margin: 0 0 16px 0;
max-width: 540px;
}
.dp-cat-hero-count {
display: inline-block;
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 5px 14px;
border-radius: 4px;
backdrop-filter: blur(4px);
}
/* ============================================================
24. SHOP HOMEPAGE — Custom sections layout
============================================================ */
/* Hide default product loop on shop root */
body.dp-shop-root .woocommerce-result-count,
body.dp-shop-root .woocommerce-ordering {
display: none !important;
}
body.dp-shop-root ul.products {
display: none !important;
}
body.dp-shop-root .woocommerce-pagination {
display: none !important;
}
/* Homepage wrapper — stays inside sidebar layout */
.dp-shop-homepage {
width: 100%;
}
/* Each section */
.dp-shop-section {
padding: 0px 0;
margin-bottom:50px;
}
.dp-shop-section-alt {
background: var(--dp-light);
border-radius: var(--dp-radius);
padding: 48px 24px;
margin-bottom: 50px;
}
.dp-shop-section-alt > .dp-shop-section-header,
.dp-shop-section-alt > .dp-slider-container {
max-width: 100%;
}
.dp-shop-section-brands {
background: var(--dp-white);
text-align: center;
}
.dp-shop-section-trust {
padding-top: 32px;
padding-bottom: 32px;
}
/* Section headers — inline layout: icon | title + subtitle */
.dp-shop-section-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--dp-border);
}
/* Section icon — compact circle */
.dp-section-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 10px;
background: var(--dp-light);
color: var(--dp-secondary);
transition: var(--dp-transition);
}
.dp-section-icon svg {
width: 22px;
height: 22px;
}
.dp-section-icon-sale {
background: #fef3e6;
color: var(--dp-accent);
}
.dp-section-icon-star {
background: #fffbe6;
color: #d4a017;
}
.dp-section-icon-grid {
background: #eef6ff;
color: var(--dp-secondary);
}
.dp-shop-section-header h2 {
font-size: clamp(1.15rem, 2.2vw, 1.4rem) !important;
font-weight: 700 !important;
color: var(--dp-primary) !important;
margin: 0 !important;
line-height: 1.3;
}
.dp-shop-section-header h2::after {
display: none;
}
.dp-shop-section-header p {
font-size: 14px;
color: var(--dp-text-light);
margin: 2px 0 0;
line-height: 1.4;
}
/* Brands placeholder */
.dp-brands-placeholder {
padding: 40px 24px;
background: var(--dp-lighter);
border: 2px dashed var(--dp-border);
border-radius: var(--dp-radius);
max-width: 800px;
margin: 0 auto;
}
.dp-brands-note {
color: var(--dp-text-light);
font-size: 14px;
}
.dp-brands-note code {
background: var(--dp-light);
padding: 2px 8px;
border-radius: 4px;
font-size: 13px;
}
/* CTA section at bottom of shop homepage */
.dp-shop-cta {
text-align: center;
}
.dp-shop-cta-inner {
background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-primary-dark) 100%);
border-radius: var(--dp-radius-lg);
padding: 56px 32px;
max-width: 800px;
margin: 0 auto;
}
.dp-shop-cta-inner h2 {
color: var(--dp-white) !important;
font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
margin-bottom: 12px !important;
}
.dp-shop-cta-inner p {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 16px;
max-width: 520px;
margin: 0 auto 28px auto;
}
.dp-shop-cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.dp-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border-radius: var(--dp-radius-sm);
font-size: 15px;
font-weight: 700;
text-decoration: none !important;
transition: var(--dp-transition);
cursor: pointer;
border: none;
}
.dp-btn-accent {
background: var(--dp-accent);
color: var(--dp-white) !important;
}
.dp-btn-accent:hover {
background: var(--dp-accent-hover);
color: var(--dp-white) !important;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(230, 126, 34, 0.4);
}
.dp-btn-wa {
background: #25d366;
color: var(--dp-white) !important;
}
.dp-btn-wa:hover {
background: #1da851;
color: var(--dp-white) !important;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
}
/* Hide Blocksy default hero on shop root page (we have our own) */
body.dp-shop-root .hero-section {
display: none !important;
}
/* ============================================================
25. RESPONSIVE — Sidebar & Shop Homepage
============================================================ */
@media (max-width: 999px) {
.dp-shop-hero,
.dp-cat-hero {
min-height: 260px;
}
.dp-shop-hero-content,
.dp-cat-hero-content {
padding: 40px 20px;
}
.dp-shop-section {
padding: 40px 16px;
}
.dp-shop-cta-inner {
padding: 40px 20px;
}
}
@media (max-width: 689px) {
.dp-shop-hero,
.dp-cat-hero {
min-height: 220px;
text-align: center;
justify-content: center;
}
.dp-shop-hero-content,
.dp-cat-hero-content {
padding: 32px 16px;
}
.dp-shop-section-header {
flex-direction: column;
text-align: center;
gap: 10px;
}
.dp-shop-section {
padding: 32px 12px;
}
.dp-shop-cta-buttons {
flex-direction: column;
align-items: center;
}
.dp-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.ct-sidebar .ct-widget.widget_product_categories,
.ct-sidebar .ct-widget.widget_block {
padding: 16px 18px;
}
}
/* ============================================================
25b. FOOTER — Mobile fixes
============================================================ */
@media (max-width: 999px) {
/* Hide mascot on tablet & mobile */
.ct-footer [data-column="widget-area-5"],
#block-11 {
display: none !important;
}
}
@media (max-width: 689px) {
/* Center all footer columns on mobile */
.ct-footer [data-row="middle"] [data-column] {
text-align: center;
}
/* Center widget titles + move accent underline to center */
.ct-footer .widget-title,
.ct-footer h3.widget-title,
.ct-footer h4 {
text-align: center;
}
.ct-footer .widget-title::after,
.ct-footer h4::after {
left: 50%;
transform: translateX(-50%);
}
/* Center footer links */
.ct-footer .widget ul {
text-align: center;
}
/* Remove left-arrow on mobile (doesn't make sense centered) */
.ct-footer .widget ul li a::before {
display: none;
}
/* Center footer paragraphs & descriptions */
.ct-footer p,
.ct-footer .widget p {
text-align: center;
}
/* Center social icons */
.ct-footer .wp-block-social-links {
justify-content: center !important;
}
.ct-footer .ct-social-box {
justify-content: center;
}
/* Hide mascot on mobile */
.ct-footer [data-column="widget-area-5"],
#block-11 {
display: none !important;
}
/* Center footer logo */
.ct-footer [data-column="widget-area-1"],
.ct-footer [data-column="widget-area-1"] img {
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
/* Center bottom row items & reduce gap */
.ct-footer [data-row="bottom"] {
text-align: center;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.ct-footer [data-row="bottom"] .ct-container {
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
}
.ct-footer [data-row="bottom"] p {
text-align: center !important;
margin: 0 !important;
}
.ct-footer .ct-footer-copyright {
text-align: center;
}
}
/* ============================================================
26. PRINT
============================================================ */
@media print {
.ct-header,
.ct-footer,
.ct-back-to-top,
.dp-cta-section,
.dp-newsletter-section {
display: none !important;
}
body {
font-size: 12pt;
color: #000;
}
}
/* ============================================================
27. 404 PAGE
============================================================ */
.dp-404 {
padding: 64px 20px 56px;
background:
radial-gradient(ellipse at 20% 50%, rgba(41, 128, 185, 0.04) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(230, 126, 34, 0.04) 0%, transparent 50%),
#f7fafd;
}
.dp-404__hero {
display: flex;
align-items: center;
gap: 48px;
max-width: 900px;
margin: 0 auto;
}
/* --- Illustration (compact, side) --- */
.dp-404__illustration {
flex-shrink: 0;
width: 220px;
}
.dp-404__svg {
width: 100%;
height: auto;
display: block;
}
/* Floating particles */
.dp-404__particle {
animation: dp404-float 4s ease-in-out infinite;
}
.dp-404__particle--1 { animation-duration: 3.5s; }
.dp-404__particle--2 { animation-duration: 4.5s; animation-delay: 0.5s; }
.dp-404__particle--3 { animation-duration: 3.8s; animation-delay: 1s; }
.dp-404__particle--4 { animation-duration: 4.2s; animation-delay: 1.5s; }
@keyframes dp404-float {
0%, 100% { transform: translateY(0); opacity: 0.25; }
50% { transform: translateY(-8px); opacity: 0.45; }
}
.dp-404__vapor {
animation: dp404-vapor 3s ease-in-out infinite;
}
@keyframes dp404-vapor {
0%, 100% { opacity: 0.15; transform: translateY(0); }
50% { opacity: 0.3; transform: translateY(-5px); }
}
/* --- Content (main text, search, buttons) --- */
.dp-404__content {
flex: 1;
min-width: 0;
}
.dp-404 .dp-404__code {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #e67e22;
background: rgba(230, 126, 34, 0.1);
padding: 5px 14px;
border-radius: 50px;
margin-bottom: 12px;
}
.dp-404 .dp-404__title {
font-size: clamp(1.6rem, 3.5vw, 2.25rem);
font-weight: 800;
color: #1a3a5c;
margin: 0 0 12px;
line-height: 1.2;
}
.dp-404 .dp-404__desc {
font-size: 1rem;
color: #6c7a89;
line-height: 1.65;
margin: 0 0 24px;
}
/* --- Search --- */
.dp-404 .dp-404__search {
margin-bottom: 24px;
}
.dp-404 .dp-404__search-form {
display: flex;
flex-direction: row;
max-width: 420px;
background: #ffffff;
border: 2px solid #dce6f0;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(26, 58, 92, 0.06);
}
.dp-404 .dp-404__search-form:focus-within {
border-color: #2980b9;
box-shadow: 0 0 0 4px rgba(41, 128, 185, 0.12);
}
.dp-404 .dp-404__search-input {
flex: 1;
border: none !important;
padding: 12px 16px !important;
font-size: 0.9rem;
font-family: inherit;
color: #1e2a3a;
background: transparent !important;
outline: none;
min-width: 0;
box-shadow: none !important;
margin: 0 !important;
height: auto !important;
}
.dp-404 .dp-404__search-input::placeholder {
color: #8e99a4;
}
.dp-404 .dp-404__search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
min-width: 48px;
border: none !important;
background: #2980b9 !important;
color: #ffffff !important;
cursor: pointer;
transition: all 0.15s ease;
padding: 12px;
margin: 0 !important;
border-radius: 0 !important;
}
.dp-404 .dp-404__search-btn:hover {
background: #1a3a5c !important;
}
/* --- Action buttons --- */
.dp-404 .dp-404__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dp-404 .dp-404__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
border-radius: 8px;
text-decoration: none !important;
transition: all 0.3s ease;
cursor: pointer;
line-height: 1.4;
border: 2px solid transparent;
}
.dp-404 .dp-404__btn--primary {
background: #e67e22 !important;
color: #ffffff !important;
border-color: #e67e22;
box-shadow: 0 3px 10px rgba(230, 126, 34, 0.25);
}
.dp-404 .dp-404__btn--primary:hover {
background: #d35400 !important;
border-color: #d35400;
transform: translateY(-2px);
box-shadow: 0 5px 16px rgba(230, 126, 34, 0.35);
color: #ffffff !important;
}
.dp-404 .dp-404__btn--secondary {
background: #2980b9 !important;
color: #ffffff !important;
border-color: #2980b9;
box-shadow: 0 3px 10px rgba(41, 128, 185, 0.2);
}
.dp-404 .dp-404__btn--secondary:hover {
background: #1a3a5c !important;
border-color: #1a3a5c;
transform: translateY(-2px);
box-shadow: 0 5px 16px rgba(41, 128, 185, 0.3);
color: #ffffff !important;
}
.dp-404 .dp-404__btn--outline {
background: transparent !important;
color: #1a3a5c !important;
border: 2px solid #dce6f0;
}
.dp-404 .dp-404__btn--outline:hover {
border-color: #2980b9;
color: #2980b9 !important;
background: rgba(41, 128, 185, 0.05) !important;
transform: translateY(-2px);
}
/* --- Explore section (carousels) --- */
.dp-404__explore {
padding: 0 20px 48px;
background: #f7fafd;
border-top: 1px solid #e8eff6;
margin-top: 0;
}
.dp-404__explore-inner {
max-width: 1200px;
margin: 0 auto;
}
.dp-404__explore-block {
margin-bottom: 32px;
padding-top: 28px;
}
.dp-404__explore-block:last-child {
margin-bottom: 0;
}
.dp-404__explore-heading {
font-size: 1.05rem;
font-weight: 600;
color: #6c7a89;
margin: 0 0 16px;
padding-bottom: 0;
border-bottom: none;
display: flex;
align-items: center;
gap: 8px;
}
.dp-404__explore-heading::before {
content: '';
display: inline-block;
width: 3px;
height: 16px;
background: #2980b9;
border-radius: 2px;
}
/* --- Responsive --- */
@media (max-width: 689px) {
.dp-404 {
padding: 48px 16px 40px;
}
.dp-404__hero {
flex-direction: column;
text-align: center;
gap: 20px;
}
.dp-404__illustration {
width: 130px;
}
.dp-404 .dp-404__desc {
font-size: 0.9rem;
}
.dp-404 .dp-404__search-form {
flex-direction: column;
}
.dp-404 .dp-404__search-btn {
width: 100% !important;
border-radius: 0 !important;
}
.dp-404 .dp-404__actions {
justify-content: center;
}
.dp-404__explore {
padding: 0 16px 40px;
}
.dp-404__explore-heading {
font-size: 1.1rem;
}
}
@media (min-width: 690px) and (max-width: 999px) {
.dp-404__illustration {
width: 150px;
}
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.dp-404__particle,
.dp-404__vapor {
animation: none;
}
.dp-404 .dp-404__btn:hover {
transform: none;
}
}
/* ============================================================
24. WOOCOMMERCE MY ACCOUNT PAGE
============================================================ */
/* --- Page container --- */
.woocommerce-account .ct-container-full {
max-width: var(--dp-container-max);
margin: 0 auto;
padding: 48px 20px 80px;
}
.woocommerce-account .entry-content > .woocommerce {
display: flex;
gap: 40px;
align-items: flex-start;
}
/* --- Navigation sidebar --- */
.woocommerce-account .ct-acount-nav,
.woocommerce-account .woocommerce-MyAccount-navigation {
flex: 0 0 250px;
min-width: 250px;
background: var(--dp-white);
border-radius: var(--dp-radius);
box-shadow: var(--dp-shadow-sm);
overflow: hidden;
border: 1px solid var(--dp-border);
/* Override Blocksy palette variables */
--account-nav-background-initial-color: var(--dp-white);
--account-nav-background-active-color: var(--dp-light);
--account-nav-text-active-color: var(--dp-primary);
--account-nav-text-initial-color: var(--dp-text);
--account-nav-divider-color: transparent;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 8px 0;
}
.woocommerce-MyAccount-navigation ul li {
margin: 0;
padding: 0;
}
.woocommerce-MyAccount-navigation ul li a {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 22px;
color: var(--dp-text) !important;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: var(--dp-transition-fast);
border-left: 3px solid transparent;
height: auto !important;
}
/* Remove bottom divider on last item before logout to avoid double border */
.woocommerce-MyAccount-navigation ul li:not(:last-child) a {
border-bottom: 1px solid var(--dp-border);
}
.woocommerce-MyAccount-navigation ul li:last-child a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
border-bottom: none !important;
}
/* Blocksy icon font - style the ::before icons */
.woocommerce-MyAccount-navigation ul li a::before {
color: var(--dp-gray);
font-size: 15px !important;
transition: var(--dp-transition-fast);
}
.woocommerce-MyAccount-navigation ul li a:hover {
background: var(--dp-lighter) !important;
color: var(--dp-secondary) !important;
border-left-color: var(--dp-secondary);
}
.woocommerce-MyAccount-navigation ul li a:hover::before {
color: var(--dp-secondary);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.is-active > a,
.woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
background: var(--dp-light) !important;
color: var(--dp-primary) !important;
font-weight: 600;
border-left-color: var(--dp-secondary);
border-radius: 0;
}
.woocommerce-MyAccount-navigation ul li.is-active a::before {
color: var(--dp-secondary);
}
/* Logout link special styling */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
border-top: 1px solid var(--dp-border);
margin-top: 4px;
padding-top: 4px;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
color: var(--dp-text-light) !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
color: var(--dp-error) !important;
border-left-color: var(--dp-error);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before {
color: var(--dp-error);
}
/* --- Main content area --- */
.woocommerce-MyAccount-content {
flex: 1;
min-width: 0;
background: var(--dp-white);
border-radius: var(--dp-radius);
box-shadow: var(--dp-shadow-sm);
padding: 32px 36px;
border: 1px solid var(--dp-border);
}
.woocommerce-MyAccount-content > p:first-child {
font-size: 1rem;
line-height: 1.7;
color: var(--dp-text);
margin-bottom: 24px;
}
.woocommerce-MyAccount-content > p a {
color: var(--dp-secondary);
font-weight: 600;
text-decoration: none;
}
.woocommerce-MyAccount-content > p a:hover {
color: var(--dp-accent);
text-decoration: underline;
}
/* --- Section headings inside content --- */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
color: var(--dp-primary);
font-weight: 700;
margin-bottom: 16px;
font-size: 1.35rem;
}
.woocommerce-MyAccount-content h3 {
font-size: 1.15rem;
}
/* --- Addresses grid (col2-set / u-columns) --- */
.woocommerce-MyAccount-content .col2-set,
.woocommerce-MyAccount-content .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.woocommerce-MyAccount-content .col2-set .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
background: var(--dp-white);
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius);
padding: 24px;
position: relative;
}
.woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title,
.woocommerce-MyAccount-content .woocommerce-Address header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--dp-border);
}
.woocommerce-MyAccount-content .woocommerce-Address h2,
.woocommerce-MyAccount-content .woocommerce-Address h3 {
margin: 0 !important;
font-size: 1.05rem !important;
color: var(--dp-primary);
}
.woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title a,
.woocommerce-MyAccount-content .woocommerce-Address header a,
.woocommerce-MyAccount-content .woocommerce-Address header a.edit {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--dp-secondary);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
padding: 6px 14px;
border-radius: var(--dp-radius-sm);
border: 1px solid var(--dp-secondary);
transition: var(--dp-transition-fast);
white-space: nowrap;
}
.woocommerce-MyAccount-content .woocommerce-Address header a:hover,
.woocommerce-MyAccount-content .woocommerce-Address header a.edit:hover {
background: var(--dp-secondary);
color: var(--dp-white);
}
.woocommerce-MyAccount-content .woocommerce-Address address {
font-style: normal;
color: var(--dp-text-light);
line-height: 1.7;
font-size: 0.93rem;
}
/* --- Orders table --- */
.woocommerce-MyAccount-content .woocommerce-orders-table {
width: 100%;
border-collapse: collapse;
border-radius: var(--dp-radius);
overflow: hidden;
border: 1px solid var(--dp-border);
}
.woocommerce-MyAccount-content .woocommerce-orders-table th {
background: var(--dp-light);
color: var(--dp-primary);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 16px;
text-align: left;
}
.woocommerce-MyAccount-content .woocommerce-orders-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--dp-border);
font-size: 0.93rem;
color: var(--dp-text);
vertical-align: middle;
}
.woocommerce-MyAccount-content .woocommerce-orders-table tr:last-child td {
border-bottom: none;
}
.woocommerce-MyAccount-content .woocommerce-orders-table tr:hover td {
background: var(--dp-lighter);
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button {
display: inline-block;
padding: 8px 18px;
font-size: 0.82rem;
font-weight: 600;
border-radius: var(--dp-radius-sm);
background: var(--dp-secondary);
color: var(--dp-white) !important;
text-decoration: none;
transition: var(--dp-transition-fast);
border: none;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button:hover {
background: var(--dp-primary);
transform: translateY(-1px);
}
/* --- Forms (edit account, edit address) --- */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-address-fields {
max-width: 640px;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
margin-bottom: 20px;
}
.woocommerce-MyAccount-content .form-row label {
display: block;
font-weight: 600;
font-size: 0.88rem;
color: var(--dp-primary);
margin-bottom: 6px;
}
.woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
font-size: 0.93rem;
color: var(--dp-text);
background: var(--dp-white);
transition: var(--dp-transition-fast);
font-family: inherit;
}
.woocommerce-MyAccount-content .form-row input.input-text:focus,
.woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-MyAccount-content .form-row textarea:focus {
border-color: var(--dp-secondary);
box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.12);
outline: none;
}
.woocommerce-MyAccount-content .form-row .required {
color: var(--dp-error);
}
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 32px;
background: var(--dp-accent);
color: var(--dp-white) !important;
font-size: 0.95rem;
font-weight: 700;
border: none;
border-radius: var(--dp-radius-sm);
cursor: pointer;
transition: var(--dp-transition);
text-transform: none;
letter-spacing: 0.01em;
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .button:hover {
background: var(--dp-accent-hover);
transform: translateY(-1px);
box-shadow: var(--dp-shadow);
}
/* --- Login / Register form (unauthorized) --- */
.woocommerce .ct-woo-unauthorized,
.woocommerce-account:not(.logged-in) .entry-content > .woocommerce {
display: block;
max-width: 480px;
margin: 0 auto;
padding: 48px 0 80px;
}
.woocommerce .ct-woo-unauthorized h2,
.woocommerce-account:not(.logged-in) .woocommerce h2 {
color: var(--dp-primary);
font-size: 1.6rem;
font-weight: 800;
text-align: center;
margin-bottom: 32px;
}
.woocommerce .ct-woo-unauthorized .woocommerce-form-login,
.woocommerce .ct-woo-unauthorized .woocommerce-form-register {
background: var(--dp-white);
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-lg);
box-shadow: var(--dp-shadow);
padding: 36px 32px;
}
.woocommerce .ct-woo-unauthorized .woocommerce-form-login .form-row,
.woocommerce .ct-woo-unauthorized .woocommerce-form-register .form-row {
margin-bottom: 20px;
}
.woocommerce .ct-woo-unauthorized label {
display: block;
font-weight: 600;
font-size: 0.88rem;
color: var(--dp-primary);
margin-bottom: 6px;
}
.woocommerce .ct-woo-unauthorized input.input-text {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius-sm);
font-size: 0.95rem;
transition: var(--dp-transition-fast);
}
.woocommerce .ct-woo-unauthorized input.input-text:focus {
border-color: var(--dp-secondary);
box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.12);
outline: none;
}
.woocommerce .ct-woo-unauthorized .woocommerce-form-login__submit,
.woocommerce .ct-woo-unauthorized .woocommerce-form-register__submit {
width: 100%;
padding: 14px 24px;
background: var(--dp-accent) !important;
color: var(--dp-white) !important;
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: var(--dp-radius-sm);
cursor: pointer;
transition: var(--dp-transition);
margin-top: 8px;
}
.woocommerce .ct-woo-unauthorized .woocommerce-form-login__submit:hover,
.woocommerce .ct-woo-unauthorized .woocommerce-form-register__submit:hover {
background: var(--dp-accent-hover) !important;
transform: translateY(-1px);
box-shadow: var(--dp-shadow);
}
.woocommerce .ct-woo-unauthorized .woocommerce-form__label-for-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--dp-text-light);
}
.woocommerce .ct-woo-unauthorized .lost_password {
text-align: center;
margin-top: 16px;
}
.woocommerce .ct-woo-unauthorized .lost_password a {
color: var(--dp-secondary);
font-size: 0.9rem;
text-decoration: none;
}
.woocommerce .ct-woo-unauthorized .lost_password a:hover {
color: var(--dp-accent);
text-decoration: underline;
}
/* --- Notices / Messages --- */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
background: var(--dp-light);
border-left: 4px solid var(--dp-secondary);
padding: 16px 20px;
border-radius: var(--dp-radius-sm);
margin-bottom: 24px;
font-size: 0.93rem;
color: var(--dp-text);
}
.woocommerce-MyAccount-content .woocommerce-error {
background: #fef2f2;
border-left: 4px solid var(--dp-error);
padding: 16px 20px;
border-radius: var(--dp-radius-sm);
margin-bottom: 24px;
font-size: 0.93rem;
color: var(--dp-error);
}
/* --- Empty states --- */
.woocommerce-MyAccount-content .woocommerce-info {
text-align: center;
padding: 32px 20px;
}
/* ============================================================
24b. MY ACCOUNT — RESPONSIVE
============================================================ */
@media (max-width: 999px) {
.woocommerce-account .entry-content > .woocommerce {
flex-direction: column;
gap: 24px;
}
.woocommerce-account .ct-acount-nav,
.woocommerce-account .woocommerce-MyAccount-navigation {
flex: none;
min-width: 100%;
width: 100%;
}
.woocommerce-MyAccount-navigation ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 12px;
}
.woocommerce-MyAccount-navigation ul li a {
padding: 10px 16px;
border-left: none !important;
border-radius: var(--dp-radius-sm);
font-size: 0.88rem;
}
.woocommerce-MyAccount-navigation ul li a:hover {
border-left-color: transparent !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.is-active > a {
border-left-color: transparent !important;
border-radius: var(--dp-radius-sm) !important;
background: var(--dp-primary) !important;
color: var(--dp-white) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a::before {
color: var(--dp-white);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.woocommerce-MyAccount-content {
padding: 24px 20px;
}
.woocommerce-MyAccount-content .col2-set,
.woocommerce-MyAccount-content .woocommerce-Addresses {
grid-template-columns: 1fr;
}
.woocommerce-account .ct-container-full {
padding: 32px 16px 60px;
}
}
@media (max-width: 689px) {
.woocommerce-MyAccount-navigation ul li a::before {
display: none;
}
.woocommerce-MyAccount-navigation ul li a {
padding: 8px 12px;
font-size: 0.82rem;
}
.woocommerce .ct-woo-unauthorized .woocommerce-form-login,
.woocommerce .ct-woo-unauthorized .woocommerce-form-register {
padding: 24px 20px;
}
.woocommerce-MyAccount-content .woocommerce-orders-table {
font-size: 0.85rem;
}
.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table td {
padding: 10px 12px;
}
}
/* ============================================================
CONTENIDO LEGAL / INFORMATIVO
Wrapper: …
============================================================ */
.dp-legal-content {
max-width: 860px;
margin: 0 auto;
padding: 48px 24px 64px;
}
.dp-legal-content h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--dp-primary);
margin-bottom: 8px;
}
.dp-legal-content h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--dp-primary);
margin-top: 32px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--dp-border);
}
.dp-legal-content p {
font-size: 1rem;
line-height: 1.8;
color: var(--dp-text);
margin-bottom: 16px;
}
.dp-legal-content ul,
.dp-legal-content ol {
margin: 0 0 20px 8px;
padding-left: 20px;
}
.dp-legal-content ul {
list-style: none;
}
.dp-legal-content ul li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-size: 0.97rem;
line-height: 1.7;
color: var(--dp-text);
}
.dp-legal-content ul li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dp-secondary);
}
.dp-legal-content ol li {
margin-bottom: 10px;
font-size: 0.97rem;
line-height: 1.7;
color: var(--dp-text);
padding-left: 4px;
}
.dp-legal-content ol li::marker {
color: var(--dp-secondary);
font-weight: 700;
}
.dp-legal-content li strong {
color: var(--dp-primary);
}
.dp-legal-content hr {
border: none;
border-top: 1px solid var(--dp-border);
margin: 28px 0;
}
.dp-legal-content em {
color: var(--dp-text-light);
font-size: 0.9rem;
}
.dp-legal-content a {
color: var(--dp-secondary);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s;
}
.dp-legal-content a:hover {
color: var(--dp-accent);
}
@media (max-width: 689px) {
.dp-legal-content {
padding: 32px 16px 48px;
}
.dp-legal-content h2 {
font-size: 1.4rem;
}
.dp-legal-content h3 {
font-size: 1.1rem;
}
.dp-legal-content p,
.dp-legal-content ul li,
.dp-legal-content ol li {
font-size: 0.93rem;
}
}