/*
Theme Name: PJ Creative Center
Theme URI: https://pjcreativecenter.com
Author: PJ Creative Center
Author URI: https://pjcreativecenter.com
Description: Application theme untuk PJ Creative Center — lapisan antarmuka dan pengalaman pengguna.
Version: 2.4.104
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pj-creative-center
Tags: one-column, custom-colors, custom-menu, featured-images, theme-options
*/

/* ============================================
   CSS VARIABLES & BASE
   ============================================ */
:root {
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --walnut-50: #faf6f1;
    --walnut-100: #f5f0e8;
    --walnut-200: #e5dfd3;
    --walnut-300: #d4c9b8;
    --walnut-400: #a89882;
    --walnut-500: #78716c;
    --walnut-600: #57534e;
    --walnut-700: #44403c;
    --walnut-800: #292524;
    --walnut-900: #1c1917;

    /* PJCC global typography system — presentation only. */
    --pjcc-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --pjcc-body-size: 16px;
    --pjcc-body-line-height: 1.6;
    --pjcc-heading-line-height: 1.25;
    --pjcc-body-color: #292524;
    --pjcc-muted-color: #57534e;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--pjcc-font-family);
    background: #fff;
    color: #292524;
    line-height: var(--pjcc-body-line-height);
    font-size: var(--pjcc-body-size);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Global typography: normalize text-bearing elements without changing component layout.
 * Page-specific components may still control their own size/weight where needed. */
body,
body button,
body input,
body textarea,
body select,
body option,
body optgroup,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body li,
body label,
body small,
body strong,
body em,
body blockquote,
body th,
body td,
body figcaption,
body summary,
body legend,
body dt,
body dd,
body span {
    font-family: var(--pjcc-font-family);
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    line-height: var(--pjcc-heading-line-height);
}

body p, body li {
    line-height: var(--pjcc-body-line-height);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .container { padding: 0 1.5rem; }
}

@media (min-width: 1024px) {
    .container { padding: 0 2rem; }
}

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
    background: #292524;
    color: #d6d3d1;
    font-size: 0.8rem;
    padding: 0.5rem 0;
}

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.top-bar-left a,
.top-bar-right a {
    color: #d6d3d1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}

.top-bar-left a:hover,
.top-bar-right a:hover {
    color: #fb923c;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.top-bar-separator {
    opacity: 0.5;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border-bottom: 1px solid #e5dfd3;
    transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    padding: 0 1rem;
}

.pjcc-company-logo {
    width: var(--pjcc-logo-size, 40px);
    height: var(--pjcc-logo-size, 40px);
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
}

.pjcc-footer-company-logo {
    width: 36px;
    height: 36px;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.logo-main svg {
    flex-shrink: 0;
}

.logo-text {
    font-weight: 800;
    font-size: 1.25rem;
    color: #ea580c;
    line-height: 1.2;
}

.logo-text span {
    color: #1c1917;
}

.logo-tagline {
    font-size: 0.68rem;
    color: #78716c;
    margin-top: -2px;
}

/* Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
}

.nav-list a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #44403c;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-list a svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.nav-list a:hover,
.nav-list .current-menu-item a {
    background: #fff7ed;
    color: #ea580c;
}

.nav-list a:hover svg,
.nav-list .current-menu-item a svg {
    opacity: 1;
}

/* Desktop Mega Menu */
.nav-list > li {
    position: relative;
}

.pjcc-nav-chevron {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    transition: transform 0.2s;
    opacity: 0.5;
}

.nav-list > li:hover .pjcc-nav-chevron,
.nav-list > li:focus-within .pjcc-nav-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

.pjcc-mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    background: #fff;
    border: 1px solid #e5dfd3;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    padding: 1.25rem 0;
    z-index: 100;
    margin-top: 8px;
}

.nav-list > li:hover > .pjcc-mega-menu {
    display: block;
    animation: pjccMegaFade 0.2s ease;
}

@keyframes pjccMegaFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pjcc-mega-menu-inner {
    padding: 0 0.5rem;
}

.pjcc-mega-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pjcc-mega-menu-list li a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #44403c;
    transition: all 0.15s;
    text-decoration: none;
}

.pjcc-mega-menu-list li a svg {
    width: 18px;
    height: 18px;
    opacity: 0.5;
    flex-shrink: 0;
}

.pjcc-mega-menu-list li a:hover {
    background: #fff7ed;
    color: #ea580c;
}

.pjcc-mega-menu-list li a:hover svg {
    opacity: 1;
}

/* Mobile Submenu Accordion */
.pjcc-mobile-submenu-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #44403c;
    transition: all 0.2s;
    text-decoration: none;
}

.pjcc-mobile-submenu-toggle svg:first-child {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.pjcc-mobile-submenu-toggle:hover {
    background: #fff7ed;
    color: #ea580c;
}

.pjcc-mobile-chevron {
    margin-left: auto;
    transition: transform 0.2s;
    opacity: 0.4;
}

.pjcc-mobile-submenu-toggle.open .pjcc-mobile-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

.pjcc-mobile-submenu-items a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.5rem 0.7rem 3rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: #57534e;
    transition: all 0.2s;
}

.pjcc-mobile-submenu-items a svg {
    width: 18px;
    height: 18px;
    opacity: 0.5;
}

.pjcc-mobile-submenu-items a:hover {
    background: #fff7ed;
    color: #ea580c;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
}

.header-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid #e5dfd3;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #57534e;
}

.header-action-btn:hover {
    border-color: #fb923c;
    color: #ea580c;
    background: #fff7ed;
}

.header-action-btn svg {
    width: 18px;
    height: 18px;
}

.btn-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 3px 12px rgba(234, 88, 12, 0.3);
    transition: all 0.25s;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(234, 88, 12, 0.4);
}

.btn-header-cta svg {
    width: 16px;
    height: 16px;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background: #292524;
    transition: all 0.3s;
    border-radius: 2px;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-nav-overlay.active {
    opacity: 1;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: white;
    z-index: 999;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5dfd3;
}

.mobile-nav-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e5dfd3;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-nav-close:hover {
    border-color: #ea580c;
    color: #ea580c;
}

.mobile-nav-links {
    padding: 1rem 0;
}

.mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #44403c;
    transition: all 0.2s;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.current-menu-item {
    background: #fff7ed;
    color: #ea580c;
}

.mobile-nav-links a svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.mobile-nav-links a:hover svg {
    opacity: 1;
}

.mobile-nav-cta {
    padding: 1.5rem;
    border-top: 1px solid #e5dfd3;
}

.mobile-nav-cta .btn-header-cta {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
}

/* ============================================
   BUTTONS (Common)
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn-primary {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.35);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.45);
}

.btn-secondary {
    background: white;
    color: #44403c;
    border: 1.5px solid #e5dfd3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    border-color: #fb923c;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.btn-secondary svg {
    color: #78716c;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    padding: 100px 0 80px;
    background: linear-gradient(135deg, #faf6f1 0%, #fff7ed 50%, #ffedd5 100%);
    min-height: 85vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(251, 146, 60, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(234, 88, 12, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 620px;
    z-index: 2;
}

.hero-visual {
    flex: 1;
    max-width: 500px;
    display: block;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ea580c;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.15);
    margin-bottom: 1.5rem;
}

.hero-badge-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #1c1917;
}

.hero-title span {
    background: linear-gradient(135deg, #f97316, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: 1.15rem;
    color: #57534e;
    margin-bottom: 2rem;
    max-width: 560px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e5dfd3;
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ea580c;
    display: block;
}

.hero-stat-label {
    font-size: 0.75rem;
    color: #78716c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hero Illustration Card */
.hero-illustration {
    background: white;
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(234, 88, 12, 0.12), 0 8px 25px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.hero-illustration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f97316, #fb923c, #f59e0b);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.product-card {
    background: linear-gradient(135deg, #faf6f1, #fff7ed);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: #fb923c;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.12);
}

.product-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-card-icon svg {
    width: 22px;
    height: 22px;
}

.product-card-info h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #292524;
    margin-bottom: 0.15rem;
}

.product-card-info p {
    font-size: 0.72rem;
    color: #78716c;
    line-height: 1.3;
}

.product-card-icon.orange { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.product-card-icon.orange svg { color: #d97706; }
.product-card-icon.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.product-card-icon.blue svg { color: #2563eb; }
.product-card-icon.green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.product-card-icon.green svg { color: #059669; }
.product-card-icon.purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.product-card-icon.purple svg { color: #7c3aed; }
.product-card-icon.teal { background: linear-gradient(135deg, #ccfbf1, #99f6e4); }
.product-card-icon.teal svg { color: #0d9488; }

.hero-illustration-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5dfd3;
}

.hero-illustration-stat {
    flex: 1;
    text-align: center;
}

.hero-illustration-stat strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ea580c;
    display: block;
}

.hero-illustration-stat span {
    font-size: 0.65rem;
    color: #78716c;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Float Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

.floating-delay {
    animation: float 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* ============================================
   SECTIONS (Common)
   ============================================ */
.section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1c1917;
    margin-bottom: 0.75rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #78716c;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   SERVICES / CATEGORIES GRID
   ============================================ */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.category-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e5dfd3;
    transition: all 0.3s;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: #fb923c;
}

.category-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.category-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s;
}

.category-card:hover .category-icon::before {
    opacity: 1;
}

.category-icon svg {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.category-card:hover .category-icon svg {
    transform: scale(1.1);
}

.category-icon.walnut {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.category-icon.walnut::before { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.category-icon.orange {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.category-icon.orange::before { background: linear-gradient(135deg, #f59e0b, #d97706); }

.category-icon.green {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.category-icon.green::before { background: linear-gradient(135deg, #10b981, #059669); }

.category-icon.purple {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.category-icon.purple::before { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.category-icon.teal {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.category-icon.teal::before { background: linear-gradient(135deg, #14b8a6, #0d9488); }

.category-icon.pink {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.category-icon.pink::before { background: linear-gradient(135deg, #ec4899, #db2777); }

.category-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1c1917;
}

.category-card p {
    color: #78716c;
    font-size: 0.95rem;
    line-height: 1.6;
}

.category-card .category-link {
    color: #ea580c;
    font-weight: 600;
    margin-top: 1rem;
    display: inline-block;
    font-size: 0.9rem;
    transition: gap 0.2s;
}

.category-card:hover .category-link {
    padding-left: 5px;
}

/* ============================================
   FEATURES
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.feature-item {
    text-align: center;
    padding: 2rem 1.5rem;
}

.feature-icon {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.feature-icon::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    top: -10px;
    right: -10px;
}

.feature-icon svg {
    width: 36px;
    height: 36px;
    transition: transform 0.3s ease;
}

.feature-icon .pjcc-feature-visual {
    display:flex !important;
    width:100% !important;
    height:100% !important;
    align-items:center;
    justify-content:center;
    border-radius:inherit;
    overflow:hidden;
}
.feature-icon .pjcc-feature-visual img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.feature-icon .pjcc-feature-visual:not(:has(img)) {
    background:transparent;
}


.feature-item:hover .feature-icon svg {
    transform: scale(1.15) rotate(5deg);
}

.feature-icon.orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.feature-icon.green { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.feature-icon.blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.feature-icon.purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.4); }

.feature-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1c1917;
}

.feature-item p {
    color: #78716c;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ============================================
   STEPS (How to Order)
   ============================================ */
.steps-section {
    background: #faf6f1;
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
}

.step-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 0;
    position: relative;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 68px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #e5dfd3, #fb923c);
}

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
}

.step-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1c1917;
}

.step-content p {
    color: #78716c;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.testimonial-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e5dfd3;
    transition: all 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.testimonial-stars {
    color: #f59e0b;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.testimonial-text {
    color: #44403c;
    font-style: italic;
    margin-bottom: 1.25rem;
    line-height: 1.7;
    font-size: 0.95rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.testimonial-info h4 {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1c1917;
}

.testimonial-info p {
    color: #78716c;
    font-size: 0.85rem;
}

/* ============================================
   FAQ
   ============================================ */
.faq-section {
    background: #faf6f1;
}

.faq-container {
    max-width: 750px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border: 1px solid #e5dfd3;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.3s;
}

.faq-item.active {
    border-color: #fb923c;
}

.faq-question {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #44403c;
    font-family: inherit;
    transition: color 0.2s;
}

.faq-item.active .faq-question {
    color: #ea580c;
}

.faq-toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #faf6f1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #78716c;
}

.faq-item.active .faq-toggle {
    background: #ea580c;
    color: white;
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    padding: 0 1.5rem 1.25rem;
    max-height: 500px;
}

.faq-answer p {
    color: #57534e;
    line-height: 1.7;
    font-size: 0.95rem;
}



/* Homepage FAQ: concise highlights; full list lives on the dedicated FAQ page. */
.faq-home-more { text-align:center; margin-top:1.5rem; }
.faq-home-more-link { display:inline-flex; align-items:center; gap:.45rem; color:#ea580c; font-weight:800; text-decoration:none; padding:.7rem 1rem; border:1px solid #fdba74; border-radius:10px; background:#fff; transition:.2s ease; }
.faq-home-more-link:hover { background:#fff7ed; border-color:#ea580c; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    color: white;
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -40%;
    right: -15%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-section .container {
    position: relative;
    z-index: 1;
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.15rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: white;
    color: #ea580c;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.25s;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.cta-btn svg {
    width: 22px;
    height: 22px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: linear-gradient(180deg, #1c1917 0%, #292524 100%);
    color: #fff;
    padding: 0 0 30px;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ea580c, #fb923c, #f59e0b);
}

.footer-main {
    padding: 60px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
}

.footer-brand {
    max-width: 300px;
}

.footer-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.footer-brand-logo svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.footer-brand h3 {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    color: #fff;
    font-weight: 700;
}

.footer-brand h3 span {
    color: #fb923c;
}

.footer-brand-tagline {
    color: #fb923c;
    line-height: 1.45;
    font-size: 0.9rem;
    font-weight: 700;
    margin: -0.25rem 0 0.7rem;
}

.footer-brand > p {
    color: #a89882;
    line-height: 1.7;
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
}

.footer-contact {
    margin-top: 1.25rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    color: #d6d3d1;
    font-size: 0.9375rem;
}

.footer-contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #fb923c;
    margin-top: 2px;
}

.footer-contact-item a {
    color: #d6d3d1;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-contact-item a:hover {
    color: #fb923c;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d6d3d1;
    transition: all 0.25s;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-social a:hover {
    background: #ea580c;
    color: white;
    border-color: #ea580c;
    transform: translateY(-3px);
}

.footer-social a svg {
    width: 18px;
    height: 18px;
}

/* Footer Columns */
.footer-column h4 {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #ea580c, #fb923c);
    border-radius: 1px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.65rem;
}

.footer-links a {
    color: #a89882;
    text-decoration: none;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s;
}

.footer-links a:hover {
    color: #fb923c;
    padding-left: 5px;
}

.footer-links a svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.footer-links a:hover svg {
    opacity: 1;
}

/* Newsletter */
.footer-newsletter p {
    color: #a89882;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.newsletter-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.25s;
}

.newsletter-input::placeholder {
    color: #78716c;
}

.newsletter-input:focus {
    outline: none;
    border-color: #ea580c;
    background: rgba(255, 255, 255, 0.08);
}

.newsletter-btn {
    width: 100%;
    padding: 0.8rem 1.25rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
}

.newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35);
}

.newsletter-btn svg {
    width: 18px;
    height: 18px;
}

/* Payment Methods */
.footer-payment {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-payment-label {
    font-size: 0.8125rem;
    color: #78716c;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-methods {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.payment-badge {
    padding: 0.35rem 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 0.72rem;
    color: #a89882;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.payment-badge svg { width: 16px; height: 16px; flex: 0 0 16px; }
.payment-badge-bca,.payment-badge-bri{background:#0756a8;color:#fff;border-color:#0756a8;box-shadow:0 3px 10px rgba(7,86,168,.18)}
.payment-badge-shopeepay,.payment-badge-shopee{background:#ee4d2d;color:#fff;border-color:#ee4d2d;box-shadow:0 3px 10px rgba(238,77,45,.18)}

/* Footer Bottom */
.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem 0;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    color: #78716c;
    font-size: 0.875rem;
}

.footer-copyright a {
    color: #a89882;
    text-decoration: none;
}

.footer-copyright a:hover {
    color: #fb923c;
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom-links a {
    color: #a89882;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom-links a:hover {
    color: #fb923c;
}

/* Back to Top */
.back-to-top {
    position: absolute;
    right: 30px;
    top: -20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
    transition: all 0.25s;
    border: none;
    z-index: 5;
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.5);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   HEADER & FOOTER VISUAL CONSISTENCY
   Presentation-only refinements; no functional changes.
   ============================================ */
.site-header,
.site-header * {
    font-family: inherit;
}

.nav-list a,
.pjcc-mega-menu-list li a {
    line-height: 1.35;
}

.footer-column h4 {
    line-height: 1.3;
}

.footer-links a,
.footer-contact-item,
.footer-newsletter p,
.footer-copyright,
.footer-bottom-links a {
    line-height: 1.55;
}

.payment-badge {
    line-height: 1.25;
}

@media (max-width: 768px) {
    .header-inner {
        height: 68px;
    }
    .logo-text {
        font-size: 1.125rem;
    }
    .mobile-nav-links a {
        font-size: 1rem;
        line-height: 1.4;
    }
    .footer-main {
        padding: 48px 0 32px;
    }
}

/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: transform 0.2s;
    text-decoration: none;
}

.wa-float:hover {
    transform: scale(1.1);
}

.wa-float svg {
    width: 28px;
    height: 28px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .top-bar { display: none; }
    .nav-list { display: none; }
    .header-actions { display: none; }
    .hero-visual { display: none; }
    .hero-section { min-height: auto; padding: 80px 0 60px; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .menu-toggle { display: flex; }
    .mobile-nav, .mobile-nav-overlay { display: block; }
}

@media (max-width: 768px) {
    .logo-tagline { display: none; }
    .section { padding: 60px 0; }
    .section-title { font-size: 1.75rem; }
    .hero-stats { gap: 1.5rem; }
    .hero-stat-number { font-size: 1.25rem; }
}

@media (max-width: 640px) {
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .categories-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-social { justify-content: center; }
    .cta-section h2 { font-size: 1.75rem; }
    .cta-section p { font-size: 1rem; }
}

/* ============================================
   RUNNING TEXT / TICKER BAR
   ============================================ */
.ticker-bar {
    position: relative;
    background: linear-gradient(90deg, #ea580c, #f97316, #ea580c);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    overflow: hidden;
    z-index: 1000;
    display: flex;
    align-items: center;
    height: 36px;
}

.ticker-inner {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 40px;
}

.ticker-track {
    display: inline-block;
    animation: ticker-scroll 35s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-block;
    padding: 0 1.5rem;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 36px;
    background: rgba(0,0,0,0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.ticker-close:hover {
    background: rgba(0,0,0,0.3);
}

/* ============================================
   PROMO IMAGE CAROUSEL / SLIDER
   ============================================ */
.promo-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1c1917;
}

.carousel-slides {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-slide {
    min-width: 100%;
    position: relative;
}

.carousel-slide-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.carousel-content {
    flex: 1;
    min-width: 0;
}

.carousel-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.carousel-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    margin: 0 0 1rem;
    max-width: 500px;
    line-height: 1.6;
}

.carousel-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #ea580c;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.65rem 1.5rem;
    border-radius: 9999px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

.carousel-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    color: #ea580c;
}

.carousel-emoji {
    font-size: 5rem;
    opacity: 0.2;
    user-select: none;
    flex-shrink: 0;
}

/* Arrow Navigation */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s, background 0.2s;
}

.promo-carousel:hover .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    background: rgba(255,255,255,0.35);
}

.carousel-arrow-left {
    left: 12px;
}

.carousel-arrow-right {
    right: 12px;
}

/* Dot Navigation */
.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.carousel-dot.active {
    width: 28px;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.5);
}

.carousel-dot:hover {
    background: rgba(255,255,255,0.6);
}

/* Carousel Responsive */
@media (max-width: 768px) {
    .carousel-slide-inner {
        padding: 1.5rem 1rem;
    }

    .carousel-title {
        font-size: 1.25rem;
    }

    .carousel-desc {
        font-size: 0.85rem;
    }

    .carousel-emoji {
        font-size: 3rem;
    }

    .carousel-arrow {
        width: 30px;
        height: 30px;
    }

    .carousel-cta {
        font-size: 0.8rem;
        padding: 0.5rem 1.2rem;
    }
}

@media (max-width: 480px) {
    .carousel-emoji {
        display: none;
    }

    .carousel-desc {
        font-size: 0.8rem;
        max-width: 100%;
    }

    .carousel-title {
        font-size: 1.1rem;
    }
}

/* ============================================
   HOMEPAGE SECTION — NEW SECTIONS
   ============================================ */

/* Produk Kami Section */
.category-icon.amber {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}

.category-icon.amber::before {
    background: #f59e0b;
}

/* Featured Card (DocuScan, Library) */
.pjcc-featured-card {
    background: linear-gradient(135deg, #faf6f1, #fff7ed);
    border: 1px solid #e5dfd3;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.pjcc-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.pjcc-featured-card .featured-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.pjcc-featured-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1c1917;
    margin: 0 0 0.75rem;
}

.pjcc-featured-card p {
    font-size: 0.95rem;
    color: #78716c;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.pjcc-featured-card .featured-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ea580c;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s;
}

.pjcc-featured-card .featured-link:hover {
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .pjcc-featured-card {
        padding: 1.5rem;
    }
    .pjcc-featured-card .featured-icon {
        font-size: 2.5rem;
    }
    .pjcc-featured-card h3 {
        font-size: 1.25rem;
    }
}


/* =========================================================
    — MOBILE UI & RESPONSIVE LAYER
   Visual/responsive layer only. Existing functionality untouched.
   ========================================================= */

/* Horizontal overflow is intentionally left unchanged here.
   Header and navigation share the same scroll context.
*/

/* Make embedded media and controls respect the viewport. */
img, svg, video, iframe, canvas {
    max-width: 100%;
}
input, select, textarea, button {
    max-width: 100%;
}

/* Header: preserve logo/menu usability on narrow devices. */
@media (max-width: 1024px) {
    .header-inner {
        height: 64px;
        padding-left: 14px;
        padding-right: 10px;
        gap: 10px;
    }
    .logo-wrapper {
        min-width: 0;
        flex: 1 1 auto;
    }
    .logo-main {
        min-width: 0;
    }
    .logo-text {
        font-size: 1.05rem;
        white-space: nowrap;
    }
    .menu-toggle {
        flex: 0 0 auto;
    }
}

/* General phone spacing. */
@media (max-width: 640px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .section {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .section-subtitle {
        font-size: .94rem;
        line-height: 1.55;
    }

    /* Homepage cards/grids */
    .category-card,
    .pjcc-featured-card {
        padding: 1.25rem;
    }

    /* Products */
    .pjcc-prod-toolbar {
        gap: 8px;
    }
    .pjcc-prod-search,
    .pjcc-prod-sort {
        width: 100%;
        min-width: 0;
    }
    .pjcc-prod-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .pjcc-prod-card-content {
        padding: 12px;
    }
    .pjcc-prod-actions {
        gap: 7px;
    }
    .pjcc-prod-cta,
    .pjcc-prod-wa-link {
        min-height: 42px;
    }

    /* Calculator */
    .pjcc-calc-root,
    .pjcc-calc-page {
        width: 100%;
        max-width: 100%;
    }
    .pjcc-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        flex-wrap: nowrap;
    }
    .pjcc-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .pjcc-calc-grid {
        grid-template-columns: 1fr !important;
    }
    .pjcc-card {
        min-width: 0;
    }
    .pjcc-input,
    .pjcc-select {
        width: 100%;
        min-height: 44px;
    }
    .pjcc-radio-group {
        grid-template-columns: 1fr !important;
    }
    .pjcc-radio-item {
        min-width: 0;
    }

    /* Cart */
    .pjcc-cart-wrap {
        width: 100%;
        max-width: 100%;
    }
    .pjcc-cart-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pjcc-cart-table {
        min-width: 620px;
    }
    .pjcc-cart-mobile {
        width: 100%;
    }
    .pjcc-cart-bottom,
    .pjcc-cart-btns {
        width: 100%;
    }
    .pjcc-cart-btns {
        flex-direction: column;
    }
    .pjcc-cart-btn-continue,
    .pjcc-cart-btn-checkout {
        width: 100%;
        justify-content: center;
    }

    /* Checkout */
    .pjcc-chk-wrap {
        width: 100%;
        max-width: 100%;
    }
    .pjcc-chk-table {
        width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pjcc-chk-form-grid {
        grid-template-columns: 1fr !important;
    }
    .pjcc-chk-field.full {
        grid-column: auto !important;
    }
    .pjcc-chk-pay-grid {
        grid-template-columns: 1fr !important;
    }
    .pjcc-chk-ship-opt {
        width: 100%;
    }

    /* Login/register */
    .pjcc-auth-page {
        padding: 18px 12px !important;
    }
    .pjcc-auth-container {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px !important;
        border-radius: 16px;
    }
    .pjcc-auth-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pjcc-auth-tab {
        flex: 1 0 auto;
        min-width: 100px;
        white-space: nowrap;
    }
    .pjcc-auth-input {
        width: 100%;
        min-height: 44px;
    }
    .pjcc-auth-btn {
        width: 100%;
        min-height: 44px;
    }

    /* Modal/dialog safety */
    .pjcc-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px;
    }

    /* Tables elsewhere in the theme: scroll instead of breaking the viewport. */
    .section table,
    .content-area table,
    .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Buttons remain thumb-friendly. */
    .btn {
        min-height: 42px;
    }
}

/* Very narrow phones (320–390px). */
@media (max-width: 390px) {
    .header-inner {
        padding-left: 10px;
    }
    .logo-text {
        font-size: .96rem;
    }
    .pjcc-cart-table {
        min-width: 560px;
    }
}

/* =========================================================
    — MOBILE CLICK / POINTER EVENTS
   Fix: inactive full-screen mobile overlay was intercepting
   all taps on the page.
   ========================================================= */
.mobile-nav-overlay {
    pointer-events: none;
}
.mobile-nav-overlay.active {
    pointer-events: auto;
}

/* =========================================================
    — MOBILE NAV / TOUCH LAYER REPAIR
   ========================================================= */
@media (max-width: 1024px) {
    .mobile-nav-overlay {
        display: block;
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }
    .mobile-nav-overlay.active {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
    }
    .mobile-nav {
        display: block;
        visibility: hidden;
        pointer-events: none;
    }
    .mobile-nav.active {
        visibility: visible;
        pointer-events: auto;
    }
    .mobile-nav,
    .mobile-nav a,
    .mobile-nav button,
    .menu-toggle,
    .header-action-btn {
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-close,
    .menu-toggle,
    .mobile-nav-links a,
    .mobile-nav-account-link,
    .mobile-nav-cta a {
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }
}
@media (max-width: 640px) {
    .mobile-nav-account-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px 16px;
        border-top: 1px solid #e5dfd3;
        border-bottom: 1px solid #e5dfd3;
    }
    .mobile-nav-account-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        padding: 9px 8px;
        border: 1px solid #e7e1d8;
        border-radius: 10px;
        background: #fff;
        color: #292524;
        text-decoration: none;
        font-size: .82rem;
        font-weight: 600;
    }
}

/* =========================================================
    — MOBILE INTERACTION LAYER
   ========================================================= */
@media (max-width: 1024px) {
    .mobile-nav-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        z-index: 9998 !important;
    }
    .mobile-nav-overlay.active {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        z-index: 9998 !important;
    }

    .mobile-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 9999 !important;
        -webkit-user-select: none;
        user-select: none;
    }
    .mobile-nav.active {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-nav-close {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-nav a,
    .mobile-nav button,
    .mobile-nav svg,
    .menu-toggle {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none;
    }

    /* Prevent the mobile tap from looking like a large text-selection block. */
    .mobile-nav *,
    .mobile-nav a,
    .mobile-nav button {
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* Never let a hidden drawer retain an interaction layer. */
    body:not(.pjcc-mobile-menu-open) .mobile-nav,
    body:not(.pjcc-mobile-menu-open) .mobile-nav-overlay {
        pointer-events: none !important;
    }

    body.pjcc-mobile-menu-open .mobile-nav {
        pointer-events: auto !important;
    }
}

/* Remove the native blue selection flash on PJCC interactive controls. */
.pjcc-mobile-menu-open ::selection {
    background: transparent;
    color: inherit;
}


/* =========================================================
    — MOBILE CLOSE + PRODUCT LIST REPAIR
   ========================================================= */

@media (max-width:1024px){
  .mobile-nav-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:99998!important;
    pointer-events:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
  .mobile-nav-overlay.active{
    pointer-events:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .mobile-nav{
    position:fixed!important;
    z-index:99999!important;
  }
  .mobile-nav-close{
    position:absolute!important;
    z-index:100002!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }

  /* Pseudo layers must never intercept touches or paint selection-like blocks. */
  .pjcc-prod-card::before,
  .pjcc-prod-card::after,
  .pjcc-prod-card-content::before,
  .pjcc-prod-card-content::after{
    pointer-events:none!important;
  }
  .pjcc-prod-card,
  .pjcc-prod-card a,
  .pjcc-prod-card button,
  .pjcc-prod-card .btn{
    -webkit-tap-highlight-color:transparent!important;
  }
}

@media (max-width:640px){
  /* Product LIST: fixed image column + flexible content column. */
  .pjcc-prod-grid.list,
  .pjcc-prod-grid.is-list,
  .pjcc-product-grid.list,
  .pjcc-product-grid.is-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-card,
  .pjcc-prod-grid.is-list .pjcc-prod-card,
  .pjcc-product-grid.list .pjcc-prod-card,
  .pjcc-product-grid.is-list .pjcc-prod-card{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-card-image,
  .pjcc-prod-grid.is-list .pjcc-prod-card-image,
  .pjcc-product-grid.list .pjcc-prod-card-image,
  .pjcc-product-grid.is-list .pjcc-prod-card-image{
    width:92px!important;
    min-width:92px!important;
    height:100%!important;
    min-height:120px!important;
    object-fit:cover!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-card-content,
  .pjcc-prod-grid.is-list .pjcc-prod-card-content,
  .pjcc-product-grid.list .pjcc-prod-card-content,
  .pjcc-product-grid.is-list .pjcc-prod-card-content{
    min-width:0!important;
    width:auto!important;
    padding:11px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-card-title,
  .pjcc-prod-grid.is-list .pjcc-prod-card-title,
  .pjcc-product-grid.list .pjcc-prod-card-title,
  .pjcc-product-grid.is-list .pjcc-prod-card-title{
    min-width:0!important;
    margin:0!important;
    font-size:.94rem!important;
    line-height:1.25!important;
    overflow-wrap:anywhere!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-card-desc,
  .pjcc-prod-grid.is-list .pjcc-prod-card-desc,
  .pjcc-product-grid.list .pjcc-prod-card-desc,
  .pjcc-product-grid.is-list .pjcc-prod-card-desc{
    min-width:0!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    font-size:.78rem!important;
    line-height:1.35!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-price,
  .pjcc-prod-grid.is-list .pjcc-prod-price,
  .pjcc-product-grid.list .pjcc-prod-price,
  .pjcc-product-grid.is-list .pjcc-prod-price{
    margin-top:auto!important;
    white-space:nowrap!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-actions,
  .pjcc-prod-grid.is-list .pjcc-prod-actions,
  .pjcc-product-grid.list .pjcc-prod-actions,
  .pjcc-product-grid.is-list .pjcc-prod-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:6px!important;
    width:100%!important;
    margin-top:5px!important;
  }

  .pjcc-prod-grid.list .pjcc-prod-actions > *,
  .pjcc-prod-grid.is-list .pjcc-prod-actions > *,
  .pjcc-product-grid.list .pjcc-prod-actions > *,
  .pjcc-product-grid.is-list .pjcc-prod-actions > *{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    min-height:38px!important;
    padding:6px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media (max-width:390px){
  .pjcc-prod-grid.list .pjcc-prod-card,
  .pjcc-prod-grid.is-list .pjcc-prod-card,
  .pjcc-product-grid.list .pjcc-prod-card,
  .pjcc-product-grid.is-list .pjcc-prod-card{
    grid-template-columns:82px minmax(0,1fr)!important;
  }
  .pjcc-prod-grid.list .pjcc-prod-card-image,
  .pjcc-prod-grid.is-list .pjcc-prod-card-image,
  .pjcc-product-grid.list .pjcc-prod-card-image,
  .pjcc-product-grid.is-list .pjcc-prod-card-image{
    width:82px!important;
    min-width:82px!important;
  }
  .pjcc-prod-grid.list .pjcc-prod-actions,
  .pjcc-prod-grid.is-list .pjcc-prod-actions,
  .pjcc-product-grid.list .pjcc-prod-actions,
  .pjcc-product-grid.is-list .pjcc-prod-actions{
    grid-template-columns:1fr!important;
  }
}

/*  — ORDER WEB PRIMARY / WHATSAPP SUPPORT */
.pjcc-svc-order-btns{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  align-items:center!important;
}
.pjcc-svc-order-btns .pjcc-svc-order-submit{
  flex:1 1 240px!important;
  min-height:42px!important;
}
.pjcc-svc-order-btns .pjcc-svc-order-wa,
.pjcc-svc-order-btns .pjcc-svc-order-cancel{
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:9px 14px!important;
  border-radius:9px!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.pjcc-svc-order-btns .pjcc-svc-order-wa{
  background:#25D366!important;
  color:#fff!important;
}
@media(max-width:600px){
  .pjcc-svc-order-btns{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .pjcc-svc-order-btns>*{
    width:100%!important;
  }
}

/* Modern Icon System */
.pjcc-modern-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.pjcc-hero-title-icon{width:1.05em;height:1.05em;margin-right:.35em;vertical-align:-.12em;opacity:.95}
.pjcc-modern-icon svg{overflow:visible}

.pjcc-nav-icon{width:1.2rem;height:1.2rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 1.2rem;margin-right:.5rem;opacity:.82;transition:transform .2s ease,opacity .2s ease}.pjcc-nav-icon svg{width:100%;height:100%}.menu-item:hover .pjcc-nav-icon,.current-menu-item .pjcc-nav-icon{opacity:1;transform:translateY(-1px)}


/* ============================================
   PJCC CONSOLIDATED FEATURE + ICON SYSTEM
   ============================================ */
.pjcc-products-section { background: linear-gradient(180deg,#fff 0%,#fcfbf8 100%); }
.pjcc-products-header { margin-bottom: 2.25rem; }
.pjcc-section-kicker { display:block; width:100%; margin-bottom:.7rem; font-size:.72rem; font-weight:800; letter-spacing:.16em; color:#c2410c; }
.pjcc-products-header .section-title { display:block; width:100%; margin-top:0; }
.pjcc-section-kicker::before { content:'';width:28px;height:2px;margin-right:9px;border-radius:99px;background:currentColor; }
.pjcc-product-categories { grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem; }
.pjcc-product-category { position:relative;display:block;min-height:315px;padding:1.55rem;overflow:hidden;color:inherit;text-decoration:none;border:1px solid #e7e2d9;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 5px 18px rgba(28,25,23,.035);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.pjcc-product-category::after { content:'';position:absolute;width:170px;height:170px;right:-95px;bottom:-105px;border-radius:50%;background:currentColor;opacity:.035;transition:transform .35s ease,opacity .35s ease; }
.pjcc-product-category:hover { transform:translateY(-7px);border-color:#d6cfc4;box-shadow:0 18px 42px rgba(28,25,23,.10); }
.pjcc-product-category:hover::after { transform:scale(1.35);opacity:.06; }
.pjcc-category-top { display:flex;align-items:center;justify-content:space-between;min-height:25px;margin-bottom:1.25rem; }
.pjcc-category-label { font-size:.67rem;font-weight:800;letter-spacing:.12em;color:#a8a29e; }
.pjcc-category-arrow { width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #eee9e1;border-radius:50%;color:#78716c;background:#fff;transition:transform .25s ease,color .25s ease,background .25s ease; }
.pjcc-category-arrow svg { width:17px;height:17px; }
.pjcc-product-category:hover .pjcc-category-arrow { transform:translateX(3px);color:#fff;background:#ea580c;border-color:#ea580c; }
.pjcc-product-category .category-icon { width:66px;height:66px;margin-bottom:1.15rem;border-radius:18px;box-shadow:none; }
.pjcc-product-category .category-icon::before { display:none; }
.pjcc-product-category .category-icon svg.pjcc-category-svg { width:31px;height:31px;stroke-width:1.75; }
.pjcc-product-category h3 { margin:0 0 .55rem;font-size:1.22rem;line-height:1.25;letter-spacing:-.015em; }
.pjcc-product-category p { min-height:4.7em;margin:0;font-size:.9rem;line-height:1.65;color:#78716c; }
.pjcc-product-category .category-link { margin-top:1.25rem;font-size:.84rem;font-weight:750;color:#c2410c; }
.pjcc-product-book .category-icon { background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb; }
.pjcc-product-merch .category-icon { background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#7c3aed; }
.pjcc-product-atk .category-icon { background:linear-gradient(135deg,#fffbeb,#fef3c7);color:#b45309; }
@media (max-width:900px){.pjcc-product-categories{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.pjcc-product-categories{grid-template-columns:1fr;gap:1rem}.pjcc-product-category{min-height:auto;padding:1.35rem}.pjcc-product-category p{min-height:0}}
/* Desktop submenu interaction: stable, forgiving hit-area */
.nav-list > li.menu-item-has-children > a{display:inline-flex;align-items:center}

/* Desktop submenu: remove the hover-gap that made the dropdown disappear while
   the pointer travelled from the parent item to a submenu item. The invisible
   bridge preserves the visual spacing without sacrificing the hit-area. */
@media (min-width: 901px){
    .nav-list > li.menu-item-has-children:hover > .pjcc-mega-menu,
    .nav-list > li.menu-item-has-children:focus-within > .pjcc-mega-menu{
        display:block;
    }
    .pjcc-mega-menu{
        margin-top:0;
        pointer-events:auto;
    }
    .pjcc-mega-menu::before{
        content:"";
        position:absolute;
        top:-10px;
        left:0;
        right:0;
        height:10px;
    }
    .pjcc-mega-menu-list li a{
        min-height:42px;
        padding:.72rem 1rem;
        transition:background-color .12s ease,color .12s ease;
    }
    .pjcc-mega-menu-list li a:hover,
    .pjcc-mega-menu-list li a:focus-visible{
        background:#fffaf5;
        color:#c2410c;
        outline:none;
    }
}

.pjcc-mobile-submenu-head{display:flex;align-items:center}
.pjcc-mobile-parent-link{flex:1}
.pjcc-mobile-submenu-toggle{margin-left:auto;border:0;background:transparent;cursor:pointer}
.pjcc-mobile-submenu-items[hidden]{display:none!important}

/* PJCC SUBMENU — PREMIUM / CALM VISUAL POLISH */
@media (min-width:901px){
  .pjcc-mega-menu{
    min-width:320px;
    max-width:380px;
    padding:.7rem;
    border:1px solid rgba(231,229,228,.95);
    border-radius:20px;
    background:rgba(255,255,255,.98);
    box-shadow:0 22px 55px rgba(28,25,23,.14),0 4px 14px rgba(28,25,23,.06);
    transform:translateX(-50%) translateY(4px);
    transform-origin:top center;
    animation:pjccSubmenuIn .18s cubic-bezier(.2,.75,.25,1) both;
  }
  .pjcc-mega-menu::after{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    width:12px;
    height:12px;
    background:#fff;
    border-left:1px solid #e7e5e4;
    border-top:1px solid #e7e5e4;
    transform:translateX(-50%) rotate(45deg);
  }
  .pjcc-mega-menu-inner{padding:.25rem}
  .pjcc-mega-menu-list{display:grid;gap:3px}
  .pjcc-mega-menu-list li a{
    position:relative;
    min-height:48px;
    padding:.72rem .85rem;
    border:1px solid transparent;
    border-radius:13px;
    gap:.75rem;
    font-size:.86rem;
    font-weight:650;
    color:#3f3a36;
    background:transparent;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
  }
  .pjcc-mega-menu-list li a::before{
    content:"";
    width:4px;
    height:18px;
    border-radius:99px;
    background:linear-gradient(180deg,#f59e0b,#ea580c);
    opacity:0;
    transform:scaleY(.5);
    transition:.16s ease;
    flex:0 0 4px;
  }
  .pjcc-mega-menu-list li a svg{width:19px;height:19px;color:#a8a29e;opacity:.8;transition:.16s ease}
  .pjcc-mega-menu-list li a:hover,
  .pjcc-mega-menu-list li a:focus-visible{
    color:#c2410c;
    background:linear-gradient(90deg,#fff7ed,#fffaf5);
    border-color:#fed7aa;
    box-shadow:0 4px 12px rgba(234,88,12,.07);
    transform:translateX(2px);
    outline:none;
  }
  .pjcc-mega-menu-list li a:hover::before,
  .pjcc-mega-menu-list li a:focus-visible::before{opacity:1;transform:scaleY(1)}
  .pjcc-mega-menu-list li a:hover svg,
  .pjcc-mega-menu-list li a:focus-visible svg{color:#ea580c;opacity:1;transform:scale(1.05)}
}
@keyframes pjccSubmenuIn{from{opacity:0;transform:translateX(-50%) translateY(0) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(4px) scale(1)}}


/* =========================================================
   UNIVERSAL EDITABLE PAGE CONTENT LAYER
   Native WordPress/Gutenberg content for eligible public pages.
   ========================================================= */
.pjcc-editable-page-content{
  width:min(1120px,calc(100% - 32px));
  margin:1.5rem auto 3.5rem;
  padding:1.5rem;
  background:linear-gradient(180deg,#fffdfa 0%,#fff 100%);
  border:1px solid #ece7df;
  border-radius:24px;
  box-shadow:0 10px 32px rgba(28,25,23,.045);
}
.pjcc-editable-page-content--after-module{margin-top:1.25rem}
.pjcc-editable-featured-image{margin:0 0 1.35rem;overflow:hidden;border-radius:18px;border:1px solid #eee7df;background:#faf7f2}
.pjcc-editable-featured-image img{display:block;width:100%;height:auto;max-height:460px;object-fit:cover}
.pjcc-editable-content{font-size:.96rem;line-height:1.85;color:#57534e}
.pjcc-editable-content>*:first-child{margin-top:0}
.pjcc-editable-content>*:last-child{margin-bottom:0}
.pjcc-editable-content h2,.pjcc-editable-content h3,.pjcc-editable-content h4{color:#292524;line-height:1.3}
.pjcc-editable-content h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-top:1.5rem}
.pjcc-editable-content h3{font-size:1.1rem;margin-top:1.25rem}
.pjcc-editable-content p{margin:.75rem 0}
.pjcc-editable-content img{max-width:100%;height:auto;border-radius:14px}
.pjcc-editable-content figure{margin:1.25rem 0}
.pjcc-editable-content figcaption{font-size:.76rem;color:#78716c;text-align:center;margin-top:.45rem}
.pjcc-editable-content a{color:#c2410c;font-weight:700}
.pjcc-editable-content .wp-block-button__link{background:#ea580c;color:#fff;border-radius:11px;padding:.7rem 1rem}
.pjcc-editable-content .wp-block-gallery{margin:1.25rem 0}
.pjcc-editable-content .wp-block-cover,.pjcc-editable-content .wp-block-media-text{border-radius:18px;overflow:hidden}
@media(max-width:600px){
  .pjcc-editable-page-content{width:calc(100% - 24px);padding:1rem;border-radius:18px;margin-bottom:2.5rem}
  .pjcc-editable-content{font-size:.9rem}
}


/* PJCC Visual Library — unified renderer/sizing rules. */
.pjcc-visual-image{display:block;max-width:100%;width:100%;height:100%;overflow:hidden;border-radius:inherit;position:relative;z-index:1;}
.pjcc-visual-image img,.pjcc-category-visual{display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border-radius:inherit;}
.category-icon:has(.pjcc-visual-image){overflow:hidden;padding:0;}
.category-icon .pjcc-visual-image{width:100%;height:100%;}
.category-icon.pjcc-visual-slot-small{width:82px;height:82px;overflow:hidden;padding:0;}
.category-icon.pjcc-visual-slot-medium{width:104px;height:96px;overflow:hidden;padding:0;}
.category-icon.pjcc-visual-slot-large{width:124px;height:108px;overflow:hidden;padding:0;}
.category-icon.pjcc-visual-slot-full{width:100%;height:150px;overflow:hidden;padding:0;margin-bottom:1.15rem;}
.category-icon.pjcc-visual-slot-small,.category-icon.pjcc-visual-slot-medium,.category-icon.pjcc-visual-slot-large,.category-icon.pjcc-visual-slot-full{border-radius:18px;}

/* PJCC VISUAL LIBRARY — DISPLAY SIZE IS AUTHORITATIVE
 * The plugin's Small/Medium/Large/Full Card setting controls the actual
 * presentation slot. Full Card is a wide visual area, not a 64px icon.
 */
.category-icon.pjcc-visual-slot-small{width:72px;height:72px;}
.category-icon.pjcc-visual-slot-medium{width:100px;height:92px;}
.category-icon.pjcc-visual-slot-large{width:140px;height:118px;}
.category-icon.pjcc-visual-slot-full{width:100%;height:180px;min-height:180px;}

/* Product cards have their own 66px icon rule; the Visual Library must win. */
.pjcc-product-category .category-icon.pjcc-visual-slot-small{width:72px;height:72px;}
.pjcc-product-category .category-icon.pjcc-visual-slot-medium{width:100px;height:92px;}
.pjcc-product-category .category-icon.pjcc-visual-slot-large{width:140px;height:118px;}
.pjcc-product-category .category-icon.pjcc-visual-slot-full{width:100%;height:180px;min-height:180px;margin-bottom:1.15rem;}

/* Service-page visual slots */
.pjcc-svc-icon.pjcc-visual-slot-small{width:72px;height:72px;}
.pjcc-svc-icon.pjcc-visual-slot-medium{width:100px;height:92px;}
.pjcc-svc-icon.pjcc-visual-slot-large{width:140px;height:118px;}
.pjcc-svc-icon.pjcc-visual-slot-full{width:240px;height:180px;min-height:180px;}
.pjcc-svc-icon .pjcc-visual-image{width:100%;height:100%;}

/* Full Card image is a visual banner inside the card content area. */
.category-card .category-icon.pjcc-visual-slot-full,
.pjcc-svc-card .pjcc-svc-icon.pjcc-visual-slot-full{border-radius:18px;}

@media(max-width:768px){
  .category-icon.pjcc-visual-slot-full,
  .pjcc-product-category .category-icon.pjcc-visual-slot-full{height:160px;min-height:160px;}
  .pjcc-svc-icon.pjcc-visual-slot-full{width:100%;height:170px;min-height:170px;}
}


/* PJCC VISUAL LIBRARY — CHILD-SIZE FALLBACK
 * Some legacy homepage components render the visual without an outer
 * pjcc_visual_slot_class(). The rendered visual itself still carries its
 * authoritative size, so the host must inherit that size automatically.
 */
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-small){
  width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important;max-width:72px!important;padding:0!important;overflow:hidden!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-medium){
  width:100px!important;height:92px!important;min-width:100px!important;min-height:92px!important;max-width:100px!important;padding:0!important;overflow:hidden!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-large){
  width:140px!important;height:118px!important;min-width:140px!important;min-height:118px!important;max-width:140px!important;padding:0!important;overflow:hidden!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-full){
  width:100%!important;height:180px!important;min-width:0!important;min-height:180px!important;max-width:none!important;padding:0!important;overflow:hidden!important;
}

/* =========================================================
   PJCC VISUAL LIBRARY — CROSS-PAGE AUTHORITATIVE SIZING
   The Visual Library controls presentation size consistently across every
   known host component. The image source remains full-resolution; CSS controls
   the visible slot so a setting never turns into a tiny thumbnail.
   ========================================================= */
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-small{
  width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important;max-width:72px!important;
  overflow:hidden!important;padding:0!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-medium{
  width:100px!important;height:92px!important;min-width:100px!important;min-height:92px!important;max-width:100px!important;
  overflow:hidden!important;padding:0!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-large{
  width:140px!important;height:118px!important;min-width:140px!important;min-height:118px!important;max-width:140px!important;
  overflow:hidden!important;padding:0!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-full{
  width:100%!important;height:180px!important;min-width:0!important;min-height:180px!important;max-width:none!important;
  overflow:hidden!important;padding:0!important;margin-right:0!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-small .pjcc-visual-image,
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-medium .pjcc-visual-image,
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-large .pjcc-visual-image,
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-full .pjcc-visual-image{
  width:100%!important;height:100%!important;max-width:none!important;display:block!important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-full .pjcc-category-visual{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}
@media(max-width:768px){
  :where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon).pjcc-visual-slot-full{
    width:100%!important;height:170px!important;min-height:170px!important;
  }
}


/* =========================================================
   PJCC VISUAL DESIGN SYSTEM — SAFE PRESENTATION LAYER
   Inspired by the approved PJCC service artwork:
   red + gold + black, glossy commercial surfaces, strong hierarchy.
   IMPORTANT: CSS-only. No URLs, settings, database, AJAX, forms, or
   business logic are changed by this layer.
   ========================================================= */

/* --- Brand surface polish: additive overrides only --- */
:root {
    --pjcc-red: #e30613;
    --pjcc-red-dark: #b9040e;
    --pjcc-gold: #f7c600;
    --pjcc-gold-deep: #e89b00;
    --pjcc-black: #111111;
    --pjcc-panel: #171717;
    --pjcc-white: #ffffff;
}

/* Section titles echo the visual language without changing content. */
.section-title {
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    display: block;
    width: 74px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pjcc-gold), var(--pjcc-red));
}

/* --- Homepage service cards --- */
.category-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(247,198,0,.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(247,198,0,.08), transparent 34%),
        #fff;
    box-shadow: 0 8px 24px rgba(17,17,17,.055);
}
.category-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pjcc-red), var(--pjcc-gold), var(--pjcc-red));
    opacity: .95;
}
.category-card:hover {
    border-color: rgba(230,6,19,.38);
    box-shadow: 0 16px 34px rgba(17,17,17,.11), 0 3px 0 rgba(247,198,0,.85);
}

/* Service visual host: keep the approved artwork intact. */
.category-icon .pjcc-visual-image,
.pjcc-svc-icon .pjcc-visual-image,
.pjcc-product-category-icon .pjcc-visual-image,
.pjcc-feature-icon .pjcc-visual-image {
    background: transparent !important;
}
.category-icon .pjcc-visual-image.pjcc-visual-aspect-wide img,
.pjcc-svc-icon .pjcc-visual-image.pjcc-visual-aspect-wide img,
.pjcc-product-category-icon .pjcc-visual-image.pjcc-visual-aspect-wide img,
.pjcc-feature-icon .pjcc-visual-image.pjcc-visual-aspect-wide img {
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}
.category-icon .pjcc-visual-image.pjcc-visual-aspect-square img,
.pjcc-svc-icon .pjcc-visual-image.pjcc-visual-aspect-square img,
.pjcc-product-category-icon .pjcc-visual-image.pjcc-visual-aspect-square img,
.pjcc-feature-icon .pjcc-visual-image.pjcc-visual-aspect-square img,
.category-icon .pjcc-visual-image.pjcc-visual-aspect-standard img,
.pjcc-svc-icon .pjcc-visual-image.pjcc-visual-aspect-standard img,
.pjcc-product-category-icon .pjcc-visual-image.pjcc-visual-aspect-standard img,
.pjcc-feature-icon .pjcc-visual-image.pjcc-visual-aspect-standard img {
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

/* Wide artwork gets a wider presentation slot when the Visual Library
   size is not Full Card. Existing square/tall artwork keeps its old sizing. */
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-aspect-wide.pjcc-visual-small) {
    width: 120px !important;
    height: 68px !important;
    min-width: 120px !important;
    min-height: 68px !important;
    max-width: 120px !important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-aspect-wide.pjcc-visual-medium) {
    width: 180px !important;
    height: 102px !important;
    min-width: 180px !important;
    min-height: 102px !important;
    max-width: 180px !important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-aspect-wide.pjcc-visual-large) {
    width: 240px !important;
    height: 135px !important;
    min-width: 240px !important;
    min-height: 135px !important;
    max-width: 240px !important;
}
:where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-aspect-wide.pjcc-visual-full) {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-width: none !important;
}

/* On service cards, Full Card is the preferred presentation for the new
   16:9 artwork; the image is fitted rather than cropped. */
.pjcc-svc-icon.pjcc-visual-slot-full .pjcc-visual-image.pjcc-visual-aspect-wide img,
.category-card .category-icon.pjcc-visual-slot-full .pjcc-visual-image.pjcc-visual-aspect-wide img {
    object-fit: contain !important;
}

/* --- Text/link polish --- */
.category-card h3 {
    color: var(--pjcc-black);
    font-weight: 800;
}
.category-card .category-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 13px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--pjcc-red), var(--pjcc-red-dark));
    box-shadow: 0 5px 14px rgba(230,6,19,.18);
    font-weight: 700;
}
.category-card .category-link:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(230,6,19,.26);
}

/* --- Service-page cards, where available --- */
.pjcc-svc-card {
    border-color: rgba(247,198,0,.26);
    box-shadow: 0 9px 26px rgba(17,17,17,.06);
}
.pjcc-svc-card:hover {
    border-color: rgba(230,6,19,.36);
    box-shadow: 0 16px 34px rgba(17,17,17,.10);
}
.pjcc-svc-price {
    color: var(--pjcc-red);
    font-weight: 800;
}

/* --- Buttons: match approved service graphics --- */
.btn-primary {
    background: linear-gradient(135deg, #e30613 0%, #c90510 72%, #a9040d 100%);
    border: 1px solid rgba(247,198,0,.55);
    box-shadow: 0 5px 18px rgba(230,6,19,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover {
    box-shadow: 0 9px 24px rgba(230,6,19,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-secondary {
    border-color: rgba(247,198,0,.48);
}
.btn-secondary:hover {
    border-color: var(--pjcc-red);
    color: var(--pjcc-red);
}

/* --- Small-screen safety: do not force horizontal overflow. --- */
@media (max-width: 768px) {
    :where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-aspect-wide.pjcc-visual-large) {
        width: min(240px, 100%) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
    }
    :where(.category-icon,.pjcc-svc-icon,.pjcc-product-category-icon,.pjcc-feature-icon):has(> .pjcc-visual-image.pjcc-visual-aspect-wide.pjcc-visual-full) {
        height: 170px !important;
        min-height: 170px !important;
    }
}

/* End safe presentation layer. */

/* =========================================================
   PJCC HERO ENGINE — CANONICAL PRESENTATION LAYER
   One renderer, one component contract, one height authority.
   Plugin owns data; Theme owns presentation only.
   ========================================================= */
.pjcc-hero-engine-unified{
    position:relative;
    width:100%;
    height:400px !important;
    min-height:400px !important;
    max-height:400px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    background:#fff;
    background-repeat:no-repeat;
    background-size:cover !important;
    background-position:center center;
    color:var(--pjcc-hero-title-color,#171717);
}
.pjcc-hero-engine-unified::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.94) 28%,rgba(255,255,255,.68) 50%,rgba(255,255,255,.12) 76%,rgba(255,255,255,0) 100%);
}
.pjcc-hero-engine-unified::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,#ef2b18 0%,#ff8a00 46%,#ffc21a 72%,rgba(255,255,255,0) 100%);
    opacity:.82;
}
.pjcc-hero-engine-unified .pjcc-page-hero__inner{
    position:relative;
    z-index:2;
    width:min(1280px,calc(100% - 32px));
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 auto;
    display:flex;
    align-items:center;
    box-sizing:border-box;
    padding:48px 0 76px;
}
.pjcc-hero-engine-unified .pjcc-page-hero__copy{max-width:720px;width:100%}
.pjcc-hero-engine-unified .pjcc-page-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid #fed7aa;
    background:#fff7ed;
    color:#9a3412;
    padding:9px 14px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.03em;
    margin-bottom:18px;
}
.pjcc-hero-engine-unified h1{
    margin:0 0 18px;
    max-width:820px;
    font-size:clamp(40px,5.6vw,72px);
    line-height:.98;
    letter-spacing:-3px;
    font-weight:950;
    color:var(--pjcc-hero-title-color,#171717);
    text-wrap:balance;
}
.pjcc-hero-engine-unified .pjcc-hero-highlight{color:var(--pjcc-hero-highlight-color,#f97316)}
.pjcc-hero-engine-unified p{
    margin:0;
    white-space:pre-line;
    max-width:700px;
    color:var(--pjcc-hero-subtitle-color,var(--pjcc-hero-body-color,#374151));
    font-size:18px;
    line-height:1.65;
}
.pjcc-hero-engine-unified .pjcc-page-hero__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
}
.pjcc-hero-engine-unified .pjcc-page-hero__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 20px;
    min-height:46px;
    border-radius:12px;
    border:1.5px solid #171717;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    transition:.2s;
}
.pjcc-hero-engine-unified .pjcc-page-hero__btn.is-primary{background:#f97316;border-color:#f97316;color:#fff !important}
.pjcc-hero-engine-unified .pjcc-page-hero__btn.is-secondary{background:#171717;border-color:#171717;color:#fff !important}
.pjcc-hero-engine-unified .pjcc-page-hero__btn:hover{transform:translateY(-1px)}
.pjcc-hero-engine-unified .pjcc-hero-title-icon{width:1.05em;height:1.05em;margin-right:.35em;vertical-align:-.12em;opacity:.95}
.pjcc-hero-engine-unified .pjcc-breadcrumb{margin-top:0;font-size:.82rem;color:#78716c}
.pjcc-hero-engine-unified .pjcc-breadcrumb a{color:#ea580c;text-decoration:none;font-weight:650}
.pjcc-hero-engine-unified .pjcc-breadcrumb a:hover{text-decoration:underline}

/* Breadcrumb is part of the Hero artwork area: static, inside the Hero, anchored at the bottom.
 * It must not create a separate band below the Hero or push the Hero artwork upward. */
.pjcc-hero-breadcrumb-bar{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    z-index:4;
    box-sizing:border-box;
    background:transparent;
    border:0;
    pointer-events:auto;
}
.pjcc-hero-breadcrumb-bar__inner{width:min(1280px,calc(100% - 32px));max-width:none;margin:0 auto;padding:10px 0 18px;box-sizing:border-box;}
.pjcc-hero-breadcrumb-bar .pjcc-breadcrumb{font-size:.82rem;color:#57534e;line-height:1.4;text-shadow:0 1px 2px rgba(255,255,255,.75);}
.pjcc-hero-breadcrumb-bar .pjcc-breadcrumb a{color:#ea580c;text-decoration:none;font-weight:700;}
.pjcc-hero-breadcrumb-bar .pjcc-breadcrumb a:hover{text-decoration:underline;}
@media (max-width: 768px){.pjcc-hero-breadcrumb-bar__inner{width:calc(100% - 32px);padding:8px 0 14px;}}

/* All page Hero variants use the same canonical presentation. Page-specific differences come only from Plugin data (text, image, position, overlay, buttons). */
/* Image supplied by Hero Manager: preserve the image and apply the configured overlay. */
.pjcc-hero-engine-unified.pjcc-hero-has-image::before{background:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.06) 28%,rgba(255,255,255,.025) 52%,rgba(255,255,255,0) 76%,rgba(255,255,255,0) 100%)}
.pjcc-hero-engine-unified.pjcc-hero-has-image{color:#171717}
.pjcc-hero-engine-unified.pjcc-hero-has-image p{color:var(--pjcc-hero-subtitle-color,var(--pjcc-hero-body-color,#3f3f46))}

/* Visual clarity: page Hero image stays crisp; only a very light readability veil remains. */
.pjcc-hero-engine-unified.pjcc-hero-has-image::before{opacity:1;filter:none}
.pjcc-hero-engine-unified.pjcc-hero-has-image{filter:none}

/* Calculator fallback: clean white when Hero Manager has no image. */
.pjcc-hero-engine-unified.pjcc-calculator-hero:not(.pjcc-hero-has-image){background-image:none !important;background-color:#fff !important}
.pjcc-hero-engine-unified.pjcc-calculator-hero:not(.pjcc-hero-has-image)::before{background:#fff !important}

@media (max-width:1023px){
    .pjcc-hero-engine-unified{height:320px !important;min-height:320px !important;max-height:320px !important}
    .pjcc-hero-engine-unified .pjcc-page-hero__inner{width:calc(100% - 32px);padding:28px 0 56px}
    .pjcc-hero-engine-unified h1{font-size:clamp(2rem,5.6vw,3.2rem);line-height:1.02;letter-spacing:-.04em}
    .pjcc-hero-engine-unified p{font-size:1rem;line-height:1.5}
}
@media (max-width:767px){
    .pjcc-hero-engine-unified{height:280px !important;min-height:280px !important;max-height:280px !important}
    .pjcc-hero-engine-unified .pjcc-page-hero__inner{height:100% !important;padding:22px 0 48px}
    .pjcc-hero-engine-unified h1{font-size:clamp(1.75rem,7vw,2.55rem);line-height:1.05;letter-spacing:-.035em}
    .pjcc-hero-engine-unified p{font-size:.95rem;line-height:1.48}
    .pjcc-hero-engine-unified .pjcc-page-hero__actions{justify-content:flex-start;margin-top:18px}
}
@media (max-width:599px){
    .pjcc-hero-engine-unified{height:240px !important;min-height:240px !important;max-height:240px !important}
    .pjcc-hero-engine-unified .pjcc-page-hero__inner{height:100% !important;padding:16px 0 42px}
    .pjcc-hero-engine-unified h1{font-size:clamp(1.55rem,8vw,2.15rem);line-height:1.06;letter-spacing:-.03em}
    .pjcc-hero-engine-unified p{font-size:.88rem;line-height:1.42}
    .pjcc-hero-engine-unified .pjcc-page-hero__actions{flex-direction:column;align-items:stretch;gap:8px;margin-top:14px}
    .pjcc-hero-engine-unified .pjcc-page-hero__btn{width:100%;min-height:42px;padding:10px 16px}
}


/* Print: all plugin-owned Hero output is non-printing. */
@media print{
    .pjcc-hero-engine-unified{display:none !important}
}


/* Product store-card visual isolation.
 * Visual Library size is an editorial/source setting and must not resize the
 * fixed product-store card slot. Store cards use a stable 100% x 88px frame
 * and contain the source artwork so no logo/card artwork is cropped.
 */
.pjcc-proto-stores .store-icon.pjcc-store-visual {
    width:100% !important; height:88px !important; min-width:0; min-height:88px;
    padding:0 !important; margin-bottom:14px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.pjcc-proto-stores .store-icon.pjcc-store-visual .pjcc-visual-image {
    width:100% !important; height:100% !important; min-width:0; min-height:0;
    display:flex !important; align-items:center; justify-content:center;
    overflow:hidden; border-radius:inherit;
}
.pjcc-proto-stores .store-icon.pjcc-store-visual .pjcc-category-visual {
    width:100% !important; height:100% !important; max-width:100%;
    object-fit:contain !important; object-position:center center !important;
    margin:0 !important; padding:0 !important; border-radius:inherit;
}
.pjcc-proto-stores .store-icon.pjcc-store-visual .pjcc-visual-image img {
    object-fit:contain !important; object-position:center center !important;
}


/* ============================================
   FOOTER COMPACT SPACING
   Presentation-only: reduce vertical footprint.
   ============================================ */
.site-footer .footer-main { padding: 38px 0 24px; }
.site-footer .footer-grid { gap: 1.75rem; }
.site-footer .footer-brand-logo { margin-bottom: .9rem; }
.site-footer .footer-brand > p { margin-bottom: .9rem; line-height: 1.6; }
.site-footer .footer-contact { margin-top: .9rem; }
.site-footer .footer-contact-item { margin-bottom: .6rem; }
.site-footer .footer-social { margin-top: 1rem; }
.site-footer .footer-column h4 { margin-bottom: .9rem; padding-bottom: .55rem; }
.site-footer .footer-links li { margin-bottom: .48rem; }
.site-footer .footer-newsletter p { margin-bottom: .75rem; }
.site-footer .footer-payment { margin-top: 1rem; padding-top: .9rem; }
.site-footer .footer-payment-label { margin-bottom: .55rem; }
.site-footer .footer-bottom { padding: 1rem 0; }
.site-footer .footer-bottom-inner { gap: .75rem; }

@media (max-width: 1024px) {
    .site-footer .footer-main { padding: 34px 0 22px; }
}

@media (max-width: 640px) {
    .site-footer .footer-main { padding: 30px 0 18px; }
    .site-footer .footer-grid { gap: 1.25rem; }
    .site-footer .footer-column h4 { margin-bottom: .75rem; }
    .site-footer .footer-payment { margin-top: .85rem; padding-top: .75rem; }
    .site-footer .footer-bottom { padding: .85rem 0; }
}

/* Reusable scroll-reveal utility: opt-in via data-pjcc-motion.
   Existing homepage motion remains the source behavior. */
[data-pjcc-motion]{opacity:1;transform:none;}
[data-pjcc-motion].pjcc-motion-item{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
[data-pjcc-motion].pjcc-motion-item.pjcc-motion-fast{transition-duration:.45s;}
@media (prefers-reduced-motion: reduce){[data-pjcc-motion].pjcc-motion-item{opacity:1;transform:none;transition:none;}}