/* ==========================================================================
   Danois by Njordwyn — B2B Dealer Portal Template
   Custom CSS with CSS Custom Properties
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --dp-primary-dark: #1a1a1a;
    --dp-warm-sand: #868678;
    --dp-light-sand: #f5f0eb;
    --dp-medium: #8b7e6e;
    --dp-white: #ffffff;
    --dp-success: #5c7a5c;
    --dp-error: #a34444;
    --dp-border: #e5e0d8;

    /* Derived Colors */
    --dp-warm-sand-hover: #6e6e62;
    --dp-warm-sand-light: rgba(134, 134, 120, 0.1);
    --dp-primary-dark-90: rgba(26, 26, 26, 0.9);
    --dp-overlay: rgba(26, 26, 26, 0.5);

    /* Typography — matches danois-by-njordwyn.dk (Inter) */
    --dp-font-heading: 'Inter', sans-serif;
    --dp-font-body: 'Inter', sans-serif;
    --dp-font-size-base: 15px;
    --dp-font-size-sm: 13px;
    --dp-font-size-xs: 11px;
    --dp-font-size-lg: 17px;
    --dp-font-size-xl: 22px;
    --dp-font-size-2xl: 28px;
    --dp-font-size-3xl: 32px;
    --dp-letter-spacing: 0.05em;
    --dp-line-height-base: 1.6;
    --dp-line-height-heading: 1.1;

    /* Spacing */
    --dp-space-xs: 0.25rem;
    --dp-space-sm: 0.5rem;
    --dp-space-md: 1rem;
    --dp-space-lg: 1.5rem;
    --dp-space-xl: 2rem;
    --dp-space-2xl: 3rem;
    --dp-space-3xl: 4rem;

    /* Layout */
    --dp-container-max: 1280px;
    --dp-container-padding: 1.5rem;
    --dp-header-height: 72px;
    --dp-sidebar-width: 280px;

    /* Borders & Radius */
    --dp-radius-sm: 2px;
    --dp-radius-md: 4px;
    --dp-radius-lg: 8px;

    /* Shadows */
    --dp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --dp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --dp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --dp-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --dp-transition: 0.2s ease;
    --dp-transition-slow: 0.3s ease;
}


/* --------------------------------------------------------------------------
   2. FONT FACE DECLARATIONS
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-v20-latin-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-v20-latin-600italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}


/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-base);
    line-height: var(--dp-line-height-base);
    letter-spacing: var(--dp-letter-spacing);
    color: var(--dp-primary-dark);
    background-color: var(--dp-light-sand);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--dp-warm-sand);
    text-decoration: none;
    transition: color var(--dp-transition);
}

a:hover {
    color: var(--dp-warm-sand-hover);
}

a:focus-visible {
    outline: 2px solid var(--dp-warm-sand);
    outline-offset: 2px;
    border-radius: var(--dp-radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dp-font-heading);
    font-weight: 400;
    line-height: var(--dp-line-height-heading);
    letter-spacing: var(--dp-letter-spacing);
    color: var(--dp-primary-dark);
    margin: 0 0 var(--dp-space-md) 0;
}

h1 { font-size: var(--dp-font-size-3xl); }
h2 { font-size: var(--dp-font-size-2xl); }
h3 { font-size: var(--dp-font-size-xl); }
h4 { font-size: var(--dp-font-size-lg); }

p {
    margin: 0 0 var(--dp-space-md) 0;
}

ul, ol {
    margin: 0 0 var(--dp-space-md) 0;
    padding-left: var(--dp-space-lg);
}

hr {
    border: none;
    border-top: 1px solid var(--dp-border);
    margin: var(--dp-space-xl) 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}


/* --------------------------------------------------------------------------
   4. LAYOUT: CONTAINER
   -------------------------------------------------------------------------- */
.dp-container {
    max-width: var(--dp-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--dp-container-padding);
    padding-right: var(--dp-container-padding);
}

.dp-wrapper-fluid .dp-container {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   5. DASHBOARD LAYOUT: SIDEBAR NAVIGATION
   -------------------------------------------------------------------------- */

/* Body-level grid: sidebar + main area */
.dp-dashboard {
    display: grid;
    grid-template-columns: var(--dp-sidebar-width) 1fr;
    min-height: 100vh;
}

/* --- Sidebar --- */
.dp-sidebar-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #ecebeb;
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}

.dp-sidebar-header {
    padding: var(--dp-space-xl) var(--dp-space-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dp-sidebar-header .dp-brand-link {
    color: var(--dp-primary-dark);
}

.dp-sidebar-header .dp-logo-text {
    color: var(--dp-primary-dark);
    font-size: var(--dp-font-size-lg);
}

.dp-sidebar-header .dp-logo-img {
    width: 160px;
    height: auto;
}

/* Sidebar menu */
.dp-sidebar-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: var(--dp-space-md) 0;
}

.dp-sidebar-item {
    margin: 0;
}

.dp-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    padding: 0.875rem var(--dp-space-lg);
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-left: 3px solid transparent;
    transition: color var(--dp-transition), background var(--dp-transition), border-color var(--dp-transition);
}

.dp-sidebar-link:hover {
    color: var(--dp-primary-dark);
    background: rgba(0, 0, 0, 0.04);
}

.dp-sidebar-item.is-active .dp-sidebar-link {
    color: var(--dp-primary-dark);
    background: rgba(0, 0, 0, 0.06);
    border-left-color: var(--dp-primary-dark);
}

.dp-sidebar-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* Sidebar separator (non-clickable parent label) */
.dp-sidebar-separator {
    cursor: default;
}

/* Sidebar submenu */
.dp-sidebar-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dp-sidebar-subitem {
    margin: 0;
}

.dp-sidebar-sublink {
    display: block;
    padding: 0.5rem var(--dp-space-lg) 0.5rem calc(var(--dp-space-lg) + 3px + 22px + var(--dp-space-md));
    color: rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    position: relative;
    transition: color var(--dp-transition), background var(--dp-transition);
}

.dp-sidebar-sublink::before {
    content: "–";
    position: absolute;
    left: calc(var(--dp-space-lg) + 3px + 6px);
    color: rgba(0, 0, 0, 0.25);
}

.dp-sidebar-sublink:hover {
    color: var(--dp-primary-dark);
    background: rgba(0, 0, 0, 0.04);
}

.dp-sidebar-subitem.is-active .dp-sidebar-sublink {
    color: var(--dp-primary-dark);
    font-weight: 500;
}

/* Keep parent highlighted when a child is active */
.dp-sidebar-item.is-active.has-children .dp-sidebar-link {
    color: var(--dp-primary-dark);
    border-left-color: var(--dp-primary-dark);
}

/* Sidebar footer: houses the topbar modules (cart) */
.dp-sidebar-footer {
    margin-top: auto;
    padding: var(--dp-space-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--dp-primary-dark);
    font-size: var(--dp-font-size-sm);
}

/* Hide PhocaCart module extras that are not needed */
.dp-sidebar-footer .ph-compare-module-box,
.dp-sidebar-footer .ph-wishlist-module-box,
.dp-sidebar-footer .ph-currency-select-box,
.dp-sidebar-footer .ph-cb,
.dp-sidebar-footer .ph-mod-desc {
    display: none !important;
}

/* Sidebar overlay (mobile) */
.dp-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--dp-overlay);
    z-index: 199;
    opacity: 0;
    transition: opacity var(--dp-transition-slow);
}

.dp-sidebar-overlay.is-visible {
    display: block;
    opacity: 1;
}


/* --------------------------------------------------------------------------
   6. DASHBOARD TOPBAR
   -------------------------------------------------------------------------- */
.dp-dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--dp-space-xl);
    background: var(--dp-white);
    border-bottom: 1px solid var(--dp-border);
}

.dp-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    min-width: 0;
    flex: 1;
}

.dp-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    flex-shrink: 0;
}

/* Sidebar toggle button: hidden on desktop, shown on mobile */
.dp-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dp-primary-dark);
    padding: 0;
    flex-shrink: 0;
    transition: color var(--dp-transition);
}

.dp-sidebar-toggle:hover {
    color: var(--dp-warm-sand);
}

/* User name in topbar */
.dp-user-name {
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    color: var(--dp-primary-dark);
    white-space: nowrap;
}

/* Topbar-right module position */
.dp-topbar-right .jmoddiv {
    display: contents;
}

/* Cart icon in topbar */
.dp-topbar-right .dp-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dp-primary-dark);
    text-decoration: none;
    padding: 4px;
    transition: color var(--dp-transition);
}

.dp-topbar-right .dp-cart-icon:hover {
    color: var(--dp-warm-sand);
}

.dp-topbar-right .dp-cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--dp-warm-sand);
    color: var(--dp-white);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* Brand link (used in sidebar header) */
.dp-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--dp-primary-dark);
}

.dp-logo-img {
    height: 40px;
    width: auto;
}

.dp-logo-text {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xl);
    font-weight: 400;
    color: var(--dp-primary-dark);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   7. DASHBOARD MAIN & CONTENT AREA
   -------------------------------------------------------------------------- */
.dp-dashboard-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--dp-white);
    min-width: 0;
}

.dp-dashboard-content {
    flex: 1;
    padding: var(--dp-space-xl);
    width: 100%;
}

.dp-main {
    min-width: 0;
}

.dp-breadcrumbs-wrap {
    margin-bottom: 0;
}

.dp-main-top {
    margin-bottom: var(--dp-space-xl);
}

.dp-main-bottom {
    margin-top: var(--dp-space-xl);
}


/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.dp-footer {
    background: var(--dp-primary-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--dp-space-2xl) 0;
    font-size: var(--dp-font-size-sm);
}

.dp-footer a {
    color: var(--dp-warm-sand);
    text-decoration: none;
}

.dp-footer a:hover {
    color: var(--dp-white);
}

.dp-footer h3,
.dp-footer h4 {
    color: var(--dp-white);
    font-size: var(--dp-font-size-lg);
    margin-bottom: var(--dp-space-md);
}

/* Footer container layout */
.dp-footer .dp-container {
    text-align: center;
}

/* Phoca footer particles: clean up branding */
.dp-footer .ph-particles-footer {
    font-size: var(--dp-font-size-xs);
    color: rgba(255, 255, 255, 0.4);
    padding: var(--dp-space-md) 0;
}

/* Hide Phoca/Joomla branding logos in footer */
.dp-footer .ph-particles-footer img,
.dp-footer .ph-particles-footer-joomla,
.dp-footer .ph-particles-footer-phoca {
    display: none;
}

.dp-footer .ph-particles-footer a {
    color: rgba(255, 255, 255, 0.4);
}

/* Footer module grid */
.dp-footer .dp-container > div {
    margin-bottom: var(--dp-space-md);
}

.dp-footer .dp-container > div:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   9. BUTTONS
   -------------------------------------------------------------------------- */
.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-space-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    border-radius: var(--dp-radius-sm);
    cursor: pointer;
    transition: all var(--dp-transition);
    text-decoration: none;
    line-height: 1.4;
    min-height: 44px;
}

.dp-btn:focus-visible {
    outline: 2px solid var(--dp-warm-sand);
    outline-offset: 2px;
}

.dp-btn-primary {
    background: var(--dp-warm-sand);
    color: var(--dp-white);
    border-color: var(--dp-warm-sand);
}

.dp-btn-primary:hover {
    background: var(--dp-warm-sand-hover);
    border-color: var(--dp-warm-sand-hover);
    color: var(--dp-white);
}

.dp-btn-secondary {
    background: transparent;
    color: var(--dp-primary-dark);
    border-color: var(--dp-border);
}

.dp-btn-secondary:hover {
    border-color: var(--dp-warm-sand);
    color: var(--dp-warm-sand);
}

.dp-btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--dp-font-size-xs);
    min-height: 36px;
}

.dp-btn-lg {
    padding: 1rem 2rem;
    font-size: var(--dp-font-size-base);
}

.dp-btn-block {
    display: flex;
    width: 100%;
}

/* Bootstrap / PhocaCart button overrides */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: var(--dp-warm-sand) !important;
    border-color: var(--dp-warm-sand) !important;
    color: var(--dp-white) !important;
    font-family: var(--dp-font-body);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--dp-radius-sm);
    transition: all var(--dp-transition);
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
    background: var(--dp-warm-sand-hover) !important;
    border-color: var(--dp-warm-sand-hover) !important;
}

.btn-secondary,
.btn.btn-secondary {
    background: transparent !important;
    border-color: var(--dp-border) !important;
    color: var(--dp-primary-dark) !important;
    border-radius: var(--dp-radius-sm);
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    border-color: var(--dp-warm-sand) !important;
    color: var(--dp-warm-sand) !important;
}

.btn-success,
.btn.btn-success {
    background: var(--dp-success) !important;
    border-color: var(--dp-success) !important;
    color: var(--dp-white) !important;
    border-radius: var(--dp-radius-sm);
}

.btn-success:hover,
.btn.btn-success:hover {
    background: #4a6a4a !important;
    border-color: #4a6a4a !important;
}

.btn-danger,
.btn.btn-danger {
    background: transparent !important;
    border-color: var(--dp-error) !important;
    color: var(--dp-error) !important;
    border-radius: var(--dp-radius-sm);
}

.btn-danger:hover,
.btn.btn-danger:hover {
    background: var(--dp-error) !important;
    color: var(--dp-white) !important;
}

/* PhocaCart alert boxes */
.ph-alert,
.alert {
    padding: var(--dp-space-md);
    border-radius: var(--dp-radius-sm);
    margin-bottom: var(--dp-space-md);
    font-size: var(--dp-font-size-sm);
}

.alert-danger,
.ph-alert-error {
    background: rgba(163, 68, 68, 0.08);
    border: 1px solid rgba(163, 68, 68, 0.2);
    color: var(--dp-error);
}

.alert-success,
.ph-alert-success {
    background: rgba(92, 122, 92, 0.08);
    border: 1px solid rgba(92, 122, 92, 0.2);
    color: var(--dp-success);
}

.alert-warning,
.ph-alert-warning {
    background: rgba(139, 126, 110, 0.08);
    border: 1px solid rgba(139, 126, 110, 0.2);
    color: var(--dp-medium);
}

.alert-info,
.ph-alert-info {
    background: rgba(134, 134, 120, 0.06);
    border: 1px solid var(--dp-border);
    color: var(--dp-primary-dark);
}

.ph-alert-small {
    padding: var(--dp-space-sm) var(--dp-space-md);
    font-size: var(--dp-font-size-xs);
}


/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.dp-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-base);
    color: var(--dp-primary-dark);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
    line-height: 1.4;
}

.dp-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    border-color: var(--dp-warm-sand);
    box-shadow: 0 0 0 3px var(--dp-warm-sand-light);
}

label,
.form-label {
    display: block;
    margin-bottom: var(--dp-space-xs);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    color: var(--dp-primary-dark);
}

.dp-form-group {
    margin-bottom: var(--dp-space-lg);
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}


/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.dp-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
    transition: box-shadow var(--dp-transition-slow), transform var(--dp-transition-slow);
}

.dp-card:hover {
    box-shadow: var(--dp-shadow-hover);
    transform: translateY(-2px);
}

.dp-card-body {
    padding: var(--dp-space-lg);
}

/* .dp-card-image is used on product grid image links — see Product Grid section */

.dp-card:hover .dp-card-image img {
    transform: scale(1.03);
}


/* --------------------------------------------------------------------------
   12. BREADCRUMBS
   -------------------------------------------------------------------------- */
.dp-breadcrumbs-wrap ol,
.dp-breadcrumbs-wrap .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.dp-breadcrumbs-wrap li + li::before {
    content: '/';
    margin: 0 var(--dp-space-sm);
    color: var(--dp-border);
}

.dp-breadcrumbs-wrap .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: var(--dp-border);
}

.dp-breadcrumbs-wrap a {
    color: var(--dp-medium);
}

.dp-breadcrumbs-wrap a:hover {
    color: var(--dp-warm-sand);
}


/* --------------------------------------------------------------------------
   13. LOGIN PAGE
   -------------------------------------------------------------------------- */
.dp-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--dp-light-sand);
    padding: var(--dp-space-xl);
}

.dp-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--dp-white);
    padding: var(--dp-space-3xl) var(--dp-space-2xl);
    border: 1px solid var(--dp-border);
    text-align: center;
}

.dp-login-logo {
    margin-bottom: var(--dp-space-2xl);
}

.dp-login-logo img {
    max-height: 48px;
    margin: 0 auto;
}

.dp-login-logo .dp-logo-text {
    display: block;
    font-size: var(--dp-font-size-2xl);
}

.dp-login-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-lg);
    color: var(--dp-medium);
    font-weight: 400;
    margin-bottom: var(--dp-space-2xl);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dp-login-form .dp-form-group {
    text-align: left;
}

.dp-login-form .dp-btn-primary {
    width: 100%;
    margin-top: var(--dp-space-md);
}

/* Password toggle button */
.dp-login-form .password-group .input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.dp-login-form .password-group .input-group input[type="password"],
.dp-login-form .password-group .input-group input[type="text"] {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.dp-login-form .input-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-left: none;
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
    cursor: pointer;
    color: var(--dp-medium);
    transition: color var(--dp-transition);
    padding: 0;
}

.dp-login-form .input-password-toggle:hover {
    color: var(--dp-primary-dark);
}

/* Eye icon via SVG — replaces missing joomla-fontawesome */
.dp-login-form .input-password-toggle .icon-eye::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.dp-login-form .input-password-toggle .icon-eye-slash::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 01-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 01-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.dp-login-footer {
    margin-top: var(--dp-space-xl);
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.dp-login-footer a {
    color: var(--dp-warm-sand);
}


/* --------------------------------------------------------------------------
   14. PHOCACART: CATEGORY VIEW (Product Grid)
   -------------------------------------------------------------------------- */

/* Category header */
.pc-category-view {
    /* Override PhocaCart default styles */
}

.ph-category-header {
    margin-bottom: var(--dp-space-lg);
}

.ph-category-header h1,
.ph-category-header .page-header {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-3xl);
    font-weight: 400;
    color: var(--dp-primary-dark);
    margin-bottom: var(--dp-space-md);
    border: none;
    padding: 0;
}

.ph-category-desc {
    color: var(--dp-medium);
    font-size: var(--dp-font-size-base);
    line-height: var(--dp-line-height-base);
    max-width: 720px;
}

/* Subcategories */
.ph-subcategories-box .ph-item-box {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
    transition: box-shadow var(--dp-transition-slow), transform var(--dp-transition-slow);
}

.ph-subcategories-box .ph-item-box:hover {
    box-shadow: var(--dp-shadow-hover);
    transform: translateY(-2px);
}

/* Product grid: shared-border container (matches main site design) */
#phItems .row,
#phItems .ph-items-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(400px, auto);
    gap: 0;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
    background: var(--dp-white);
}

.ph-item-box {
    background: var(--dp-white);
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--dp-border);
    border-bottom: 1px solid var(--dp-border);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: none;
}

/* Remove right border on last column */
.ph-item-box:nth-child(3n) {
    border-right: none;
}

/* No shadow/lift on hover — clean design */
.ph-item-box:hover {
    box-shadow: none;
    transform: none;
}

/* Content area doesn't collapse — always visible below image */
.ph-item-box .ph-item-content {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Hide clearfix divs inside CSS Grid — they break grid cell count */
#phItems .ph-cb {
    display: none;
}

.row-item {
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex: none;
}

.ph-thumbnail {
    border: none !important;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: none;
}

/* Product image area — white bg, fills available space */
.jf_ph_cat_item_grid {
    flex: 1;
    min-height: 0;
}

.dp-card-image {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--dp-white);
    height: 100%;
}

/* PhocaCart image wrappers — fill the image area */
.dp-card-image .phIBoxOH {
    position: absolute;
    inset: 0;
}

.dp-card-image .phIBox {
    width: 100%;
    height: 100%;
}

/* Product image — contained with padding */
.dp-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    padding: 0;
    transition: transform var(--dp-transition-slow);
}

.ph-item-box:hover .dp-card-image img {
    transform: scale(1.03);
}

/* Product content — left-aligned: name, manufacturer, price */
.ph-item-content {
    padding: var(--dp-space-lg) var(--dp-space-xl) var(--dp-space-xl);
    display: flex;
    flex-direction: column;
    background: var(--dp-white);
    text-align: left;
}

/* Hide description in grid view */
.ph-item-content .ph-item-desc,
.ph-item-content .ph-category-desc-box {
    display: none;
}

/* Hide stock status in grid view */
.ph-item-content .ph-category-stock-box,
.ph-item-content .ph-item-stock-box {
    display: none;
}

/* Hide action buttons, tags, description in grid view */
.ph-item-content .ph-category-action-buttons {
    display: none;
}

.ph-item-content .ph-tag-box {
    display: none;
}

.ph-item-content .ph-cb {
    display: none;
}

/* Hide action icons (quickview, wishlist, compare overlays) */
.ph-category-action-icons,
.ph-category-action-box-icons .ph-category-action-icons,
.ph-category-action-box-fade-icons,
.ph-category-action-fade-icons {
    display: none !important;
}

/* Price spacing and left-align (override PhocaCart centering) */
.ph-item-content .ph-category-price-box,
.ph-item-content .ph-item-price-box {
    margin-top: var(--dp-space-sm);
    text-align: left;
}

.ph-item-content .ph-category-action-box-buttons,
.ph-item-content .ph-item-action-box {
    text-align: left;
}

/* Override PhocaCart float:right on price — left-align instead */
.ph-category-price-box .ph-price-brutto,
.ph-category-price-box .ph-price-netto,
.ph-item-price-box .ph-price-brutto,
.ph-item-price-box .ph-price-netto {
    float: left !important;
}

/* Product name in grid — override h3 heading size and PhocaCart h3.grid centering */
h3.grid,
.ph-item-content .ph-product-header,
.ph-item-content .ph-item-header,
.ph-item-content .ph-category-item-header {
    font-family: var(--dp-font-body);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
}

.ph-item-content .ph-product-header a,
.ph-item-content .ph-item-header a,
.ph-item-content .ph-category-item-header a {
    font-family: var(--dp-font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--dp-primary-dark);
    text-decoration: none;
    transition: color var(--dp-transition);
    letter-spacing: 0;
}

.ph-item-content .ph-item-header a:hover,
.ph-item-content .ph-category-item-header a:hover {
    color: var(--dp-warm-sand);
}

/* Manufacturer text under product name — hide "Manufacturer: " prefix text */
.ph-item-content .ph-manufacturer-box {
    color: var(--dp-medium);
    margin: 4px 0 0 0;
    font-size: 0;
    line-height: 1.4;
}

.ph-item-content .ph-manufacturer-box a {
    font-size: 14px;
    color: var(--dp-medium);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.ph-item-content .ph-manufacturer-box a:hover {
    color: var(--dp-warm-sand);
}

.ph-manufacturer-box-header {
    display: none;
}

/* Hide labels (New, Sale, Popular) in grid — clean look */
.ph-label-box {
    display: none;
}

/* Labels: keep rules for product detail page */
.pc-item-view .ph-label-box {
    display: flex;
    position: absolute;
    top: var(--dp-space-sm);
    left: var(--dp-space-sm);
    z-index: 10;
    flex-direction: column;
    gap: var(--dp-space-xs);
}

.ph-label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: var(--dp-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--dp-radius-sm);
}

.ph-label-new {
    background: var(--dp-warm-sand);
    color: var(--dp-white);
}

.ph-label-hot {
    background: var(--dp-error);
    color: var(--dp-white);
}

.ph-label-feat {
    background: var(--dp-primary-dark);
    color: var(--dp-white);
}


/* --------------------------------------------------------------------------
   15. PHOCACART: PRICES
   -------------------------------------------------------------------------- */
.ph-category-price-box,
.ph-item-price-box {
    margin: var(--dp-space-sm) 0 0 0;
}

.ph-price-brutto,
.ph-price-netto {
    font-family: var(--dp-font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--dp-primary-dark);
    line-height: 1.3;
    letter-spacing: 0;
}

/* Hide "PRICE" label text in grid */
.ph-price-txt,
.ph-price-netto-txt,
.ph-price-brutto-txt,
.ph-tax-txt {
    display: none;
}

.ph-price-original {
    text-decoration: line-through;
    color: var(--dp-medium);
    font-size: var(--dp-font-size-sm);
}

.ph-line-through {
    text-decoration: line-through;
    color: var(--dp-medium);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
}

.ph-price-discount {
    color: var(--dp-error);
}

.ph-price-discount-product,
.ph-price-discount-cart {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xl);
    font-weight: 400;
}

.ph-tax {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.ph-price-base {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}


/* --------------------------------------------------------------------------
   16. PHOCACART: STOCK STATUS
   -------------------------------------------------------------------------- */
.ph-category-stock-box,
.ph-item-stock-box {
    margin: var(--dp-space-sm) 0;
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.ph-stock-txt {
    font-weight: 400;
}

.ph-stock-status-in-stock {
    color: var(--dp-success);
}

.ph-stock-status-out-of-stock {
    color: var(--dp-error);
}

.ph-stock-status-low-stock {
    color: var(--dp-warm-sand);
}


/* --------------------------------------------------------------------------
   17. PHOCACART: ACTION ICONS & BUTTONS
   -------------------------------------------------------------------------- */
.ph-category-action-box-icons {
    position: relative;
}

.ph-category-action-icons {
    position: absolute;
    top: var(--dp-space-sm);
    right: var(--dp-space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--dp-space-xs);
    z-index: 5;
}

.ph-category-action-icons a,
.ph-category-action-icons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: 50%;
    color: var(--dp-primary-dark);
    font-size: var(--dp-font-size-sm);
    transition: all var(--dp-transition);
    cursor: pointer;
    opacity: 0;
    transform: translateX(8px);
}

.ph-item-box:hover .ph-category-action-icons a,
.ph-item-box:hover .ph-category-action-icons button {
    opacity: 1;
    transform: translateX(0);
}

.ph-category-action-icons a:hover,
.ph-category-action-icons button:hover {
    background: var(--dp-warm-sand);
    border-color: var(--dp-warm-sand);
    color: var(--dp-white);
}

/* Fade-in action icons */
.ph-category-action-box-fade-icons {
    margin-top: var(--dp-space-sm);
}

.ph-category-action-fade-icons {
    display: flex;
    gap: var(--dp-space-xs);
    justify-content: center;
}

/* Add to cart button styling */
.ph-category-action-buttons {
    margin-top: var(--dp-space-sm);
}

.ph-category-action-buttons .phjAddToCart,
.ph-category-action-buttons .btn-primary {
    width: 100%;
}

/* PhocaCart add to cart buttons */
.phjAddToCart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-space-sm);
    padding: 0.625rem 1.25rem;
    background: var(--dp-warm-sand);
    color: var(--dp-white);
    border: none;
    border-radius: var(--dp-radius-sm);
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--dp-transition);
    min-height: 44px;
    width: 100%;
}

.phjAddToCart:hover {
    background: var(--dp-warm-sand-hover);
}


/* --------------------------------------------------------------------------
   18. PHOCACART: ITEM VIEW (Product Detail)
   -------------------------------------------------------------------------- */

/* Main container */
.pc-item-view {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* Back-to-category link */
.pc-item-view .ph-top {
    margin-bottom: var(--dp-space-sm);
}

.pc-item-view .ph-top a {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-xs);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--dp-transition);
}

.pc-item-view .ph-top a:hover {
    color: var(--dp-primary-dark);
}

/* Two-column product layout */
.pc-item-view > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
}

/* SALE / discount banner — restyle as small label */
.pc-item-view > .row.pc-status-discount-product::before,
.pc-item-view > .row.pc-status-discount-cart::before {
    display: none !important;
}

/* Image panel (left) */
.pc-item-view .ph-item-view-image-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: var(--dp-space-lg);
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--dp-border);
}

.pc-item-view .ph-item-image-full-box {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-item-view .ph-item-image-full-box img {
    max-width: 100%;
    max-height: 360px;
    height: auto;
    object-fit: contain;
}

/* Additional images thumbnails */
.pc-item-view .ph-item-image-add-box {
    display: flex !important;
    gap: var(--dp-space-xs);
    flex-wrap: wrap;
    margin-top: var(--dp-space-md);
    justify-content: center;
}

.pc-item-view .ph-item-image-add-box > div {
    width: 56px !important;
    max-width: 56px !important;
    flex: none !important;
    padding: 0 !important;
}

.pc-item-view .ph-item-image-add-box a {
    display: block;
    width: 56px;
    height: 56px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    overflow: hidden;
    padding: 6px;
    background: var(--dp-white);
    transition: border-color var(--dp-transition);
}

.pc-item-view .ph-item-image-add-box a:hover {
    border-color: var(--dp-warm-sand);
}

.pc-item-view .ph-item-image-add-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* Product data panel (right) */
.pc-item-view .ph-item-view-data-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: var(--dp-space-lg);
}

/* Product title */
.pc-item-view .ph-item-price-panel h1 {
    font-family: var(--dp-font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--dp-primary-dark);
    margin: 0 0 var(--dp-space-sm) 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Price area */
.pc-item-view .ph-item-price-box {
    margin: var(--dp-space-sm) 0;
    padding: var(--dp-space-sm) 0;
    border-top: 1px solid var(--dp-border);
    border-bottom: 1px solid var(--dp-border);
}

.pc-item-view .ph-item-price-box .ph-price-brutto,
.pc-item-view .ph-item-price-box .ph-price-netto {
    font-size: 20px;
    font-weight: 600;
    float: none !important;
}

.pc-item-view .ph-item-price-box .ph-price-original {
    font-size: 16px;
    text-decoration: line-through;
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-xs);
}

.pc-item-view .ph-item-price-box .ph-price-discount {
    color: var(--dp-error);
}

/* Description */
.pc-item-view .ph-desc {
    margin: var(--dp-space-sm) 0;
    font-size: var(--dp-font-size-sm);
    line-height: 1.6;
    color: var(--dp-dark);
}

.pc-item-view .ph-desc ul {
    padding-left: 1.25rem;
    margin: var(--dp-space-sm) 0;
}

.pc-item-view .ph-desc li {
    margin-bottom: var(--dp-space-xs);
}

/* Manufacturer, stock, delivery, IDs — info rows */
.pc-item-view .ph-item-manufacturer-box,
.pc-item-view .ph-item-stock-box,
.pc-item-view .ph-item-delivery-date-box,
.pc-item-view .ph-item-size-box,
.pc-item-view .ph-item-id-box,
.pc-item-view .ph-item-reward-box {
    display: flex;
    align-items: baseline;
    gap: var(--dp-space-sm);
    padding: var(--dp-space-xs) 0;
    font-size: var(--dp-font-size-sm);
    color: var(--dp-dark);
}

.pc-item-view .ph-manufacturer-txt,
.pc-item-view .ph-stock-txt,
.pc-item-view .ph-delivery-date-txt,
.pc-item-view .ph-sku-txt,
.pc-item-view .ph-ean-txt,
.pc-item-view .ph-reward-txt {
    color: var(--dp-medium);
    white-space: nowrap;
}

.pc-item-view .ph-item-sku-box,
.pc-item-view .ph-item-ean-box {
    display: flex;
    align-items: baseline;
    gap: var(--dp-space-sm);
    font-size: var(--dp-font-size-sm);
}

/* Stock status colors */
.pc-item-view .ph-stock.ph-stock-in-stock {
    color: var(--dp-success);
}

.pc-item-view .ph-stock.ph-stock-out-of-stock {
    color: var(--dp-error);
}

/* Clear both overrides */
.pc-item-view .ph-cb {
    clear: both;
    height: 0;
}

.pc-item-view .ph-top-space {
    margin-top: var(--dp-space-sm);
}

/* Attribute options */
.pc-item-view .ph-item-attributes-box {
    margin: var(--dp-space-sm) 0;
    padding-top: var(--dp-space-sm);
    border-top: 1px solid var(--dp-border);
}

.pc-item-view .ph-available-options-title {
    font-size: var(--dp-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-md);
}

.pc-item-view .ph-attribute-title {
    font-size: var(--dp-font-size-sm);
    font-weight: 500;
    margin-bottom: var(--dp-space-xs);
}

.pc-item-view .ph-attribute-options select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    font-size: var(--dp-font-size-base);
    margin-bottom: var(--dp-space-md);
    background: var(--dp-white);
}

/* Add to cart */
.pc-item-view .ph-item-add-to-cart-box {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    margin-top: var(--dp-space-sm);
    padding-top: var(--dp-space-sm);
    border-top: 1px solid var(--dp-border);
    float: none !important;
}

.pc-item-view .ph-form-quantity {
    display: flex;
    align-items: center;
    gap: var(--dp-space-xs);
}

.pc-item-view .ph-form-quantity label {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    margin: 0;
}

.pc-item-view .ph-input-quantity {
    width: 56px !important;
    max-width: 56px !important;
    height: 40px;
    text-align: center;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    font-size: var(--dp-font-size-base);
}

.pc-item-view .ph-form-button {
    flex: 1;
}

.pc-item-view .ph-form-button .ph-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-space-sm);
    padding: 0.6rem 1.25rem;
    font-size: var(--dp-font-size-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--dp-primary-dark);
    color: var(--dp-white);
    border: none;
    border-radius: var(--dp-radius-sm);
    cursor: pointer;
    transition: background var(--dp-transition);
}

.pc-item-view .ph-form-button .ph-btn:hover {
    background: var(--dp-warm-sand);
}

/* Compare / Wishlist buttons */
.pc-item-view .ph-category-item-compare-box,
.pc-item-view .ph-category-item-wishlist-box {
    display: inline-flex;
    float: none !important;
    margin-top: var(--dp-space-sm);
}

.pc-item-view .ph-category-item-compare a,
.pc-item-view .ph-category-item-wishlist a {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-xs);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    text-decoration: none;
    transition: color var(--dp-transition);
}

.pc-item-view .ph-category-item-compare a:hover,
.pc-item-view .ph-category-item-wishlist a:hover {
    color: var(--dp-primary-dark);
}

/* Label box inside product detail */
.pc-item-view .ph-label-box {
    position: absolute;
    top: var(--dp-space-md);
    left: var(--dp-space-md);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--dp-space-xs);
}

/* Tag labels (Sale, etc.) — restyle as elegant small badges */
.pc-item-view .ph-corner-icon-wrapper {
    float: none;
    position: static;
}

.pc-item-view .ph-corner-icon {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--dp-radius-sm);
    background: var(--dp-primary-dark) !important;
    color: var(--dp-white) !important;
}

/* Bottom section (tabs) */
.pc-item-view .ph-item-bottom-box {
    margin-top: var(--dp-space-md);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
}

/* Tab navigation */
.pc-item-view .nav-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--dp-border);
    background: #fafafa;
}

.pc-item-view .nav-tabs .nav-item {
    margin: 0;
}

.pc-item-view .nav-tabs .nav-link {
    display: block;
    padding: var(--dp-space-md) var(--dp-space-xl);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-medium);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    border-radius: 0;
    transition: color var(--dp-transition), border-color var(--dp-transition);
}

.pc-item-view .nav-tabs .nav-link:hover {
    color: var(--dp-primary-dark);
}

.pc-item-view .nav-tabs .nav-link.active {
    color: var(--dp-primary-dark);
    border-bottom-color: var(--dp-primary-dark);
    background: var(--dp-white);
}

/* Tab content */
.pc-item-view .tab-content {
    padding: var(--dp-space-lg);
}

.pc-item-view .tab-content > .tab-pane {
    display: none;
}

.pc-item-view .tab-content > .tab-pane.active {
    display: block;
}

.pc-item-view .tab-content > .tab-pane.fade {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pc-item-view .tab-content > .tab-pane.fade.show {
    opacity: 1;
}

.pc-item-view .tab-content .ph-tab-pane {
    font-size: var(--dp-font-size-base);
    line-height: 1.7;
    color: var(--dp-dark);
}

/* --------------------------------------------------------------------------
   Specifications — editorial ingredient list
   -------------------------------------------------------------------------- */
.pc-item-view #phspecification {
    counter-reset: dp-spec;
}

.pc-item-view .ph-spec-group-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--dp-warm-sand);
    margin: 0 0 var(--dp-space-lg) 0;
    padding-bottom: var(--dp-space-sm);
    border-bottom: 1px solid var(--dp-border);
    position: relative;
}

.pc-item-view .ph-spec-group-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 32px;
    height: 1px;
    background: var(--dp-primary-dark);
}

.pc-item-view #phspecification .row {
    counter-increment: dp-spec;
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: baseline;
    gap: var(--dp-space-md);
    padding: 0.85rem 0;
    margin: 0;
    border-bottom: 1px solid var(--dp-border);
    position: relative;
}

.pc-item-view #phspecification .row:last-child {
    border-bottom: none;
}

.pc-item-view #phspecification .row::before {
    content: counter(dp-spec, decimal-leading-zero);
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--dp-warm-sand);
    font-variant-numeric: tabular-nums;
    align-self: center;
}

.pc-item-view #phspecification .row > [class*="col-"] {
    padding: 0;
    flex: none;
    max-width: none;
}

.pc-item-view #phspecification .row > [class*="col-"]:first-of-type {
    grid-column: 2;
}

.pc-item-view #phspecification .row > [class*="col-"]:last-of-type {
    grid-column: 3;
    text-align: right;
}

.pc-item-view .ph-spec-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-base);
    font-weight: 400;
    color: var(--dp-primary-dark);
    line-height: 1.4;
    padding: 0;
}

.pc-item-view .ph-spec-value {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    color: var(--dp-medium);
    font-variant-numeric: tabular-nums;
    padding: 0;
}

.pc-item-view #phspecification .row:has(.ph-spec-value:empty) {
    grid-template-columns: 2.25rem 1fr;
}

.pc-item-view #phspecification .row:has(.ph-spec-value:empty) .ph-spec-title::after {
    content: "";
}

.pc-item-view .ph-spec-value:empty {
    display: none;
}

@media (max-width: 600px) {
    .pc-item-view #phspecification .row {
        grid-template-columns: 1.75rem 1fr auto;
        gap: var(--dp-space-sm);
        padding: 0.75rem 0;
    }
}

/* Reviews */
.pc-item-view .bs-callout {
    border-left: 3px solid var(--dp-border);
    padding: var(--dp-space-md) var(--dp-space-lg);
    margin-bottom: var(--dp-space-md);
    background: #fafafa;
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}

.pc-item-view .ph-reviews-name {
    font-size: var(--dp-font-size-base);
    font-weight: 600;
    margin-bottom: var(--dp-space-xs);
}

.pc-item-view .ph-reviews-review {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-dark);
    margin-top: var(--dp-space-xs);
}

/* Product navigation (prev/next) */
.pc-item-view .ph-item-navigation {
    display: flex !important;
    justify-content: space-between;
    margin-top: var(--dp-space-xl);
}

.pc-item-view .ph-item-navigation a {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-xs);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    text-decoration: none;
    padding: var(--dp-space-sm) var(--dp-space-md);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    background: var(--dp-white);
    transition: color var(--dp-transition), border-color var(--dp-transition);
}

.pc-item-view .ph-item-navigation a:hover {
    color: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
}

/* Tags */
.pc-item-view .ph-item-tag-box {
    margin-top: var(--dp-space-lg);
}

.pc-item-view .ph-item-tag-box h3 {
    font-size: var(--dp-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-sm);
}

/* Related products in tabs */
.pc-item-view .ph-item-thumbnail-related {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
    background: var(--dp-white);
    height: 100%;
}

.pc-item-view .ph-item-thumbnail-related .ph-item-content {
    padding: var(--dp-space-md);
    text-align: center;
}

.pc-item-view .ph-item-thumbnail-related img {
    max-width: 100%;
    height: auto;
}

.pc-item-view .ph-item-thumbnail-related h4 {
    font-size: var(--dp-font-size-sm);
    margin: var(--dp-space-sm) 0;
}

/* Show price labels on product detail (hidden globally in section 15) */
.pc-item-view .ph-price-original-txt {
    display: block;
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

/* Hide PhocaCart info line at bottom */
.pc-item-view + div:last-child {
    display: none;
}

/* Responsive: stack on mobile */
@media (max-width: 767.98px) {
    .pc-item-view > .row {
        grid-template-columns: 1fr;
    }

    .pc-item-view .ph-item-view-image-box {
        border-right: none;
        border-bottom: 1px solid var(--dp-border);
    }

    .pc-item-view .ph-item-price-panel h1 {
        font-size: 22px;
    }

    .pc-item-view .ph-item-add-to-cart-box {
        flex-direction: column;
        align-items: stretch;
    }

    .pc-item-view .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* --------------------------------------------------------------------------
   19. PHOCACART: CHECKOUT
   -------------------------------------------------------------------------- */
.pc-checkout-view {
    max-width: 1200px;
    margin: 0 auto;
}

.pc-checkout-view h1 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-2xl);
    font-weight: 300;
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    margin-bottom: var(--dp-space-xl);
}

/* ---- Two-column checkout grid: cart (left 3fr) | info (right 2fr) ---- */
.ph-checkout-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--dp-space-xl);
    align-items: start;
}

/* Left column: product table (sticky so it follows scroll) */
.ph-checkout-col-cart {
    min-width: 0;
    position: sticky;
    top: var(--dp-space-xl);
    align-self: start;
}

/* Right column: dealer info steps */
.ph-checkout-col-info {
    min-width: 0;
}

/* ---- Cart section ---- */
.ph-checkout-cart-box {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    padding: var(--dp-space-md);
    margin-bottom: var(--dp-space-md);
}

/* Grid rows inside cart */
.ph-checkout-cart-box > .row,
.ph-checkout-cart-box > div > .row {
    display: grid;
    grid-template-columns: 40px 1fr 80px 90px;
    gap: 0 var(--dp-space-sm);
    align-items: center;
}

/* Header row */
.ph-checkout-cart-row-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-medium);
    font-weight: 400;
    padding-bottom: var(--dp-space-xs);
    border-bottom: 2px solid var(--dp-border);
    margin-bottom: var(--dp-space-xs);
}

/* Hide image column header text */
.ph-checkout-cart-row-header .ph-checkout-cart-image {
    font-size: 0;
}

/* HR separator rows */
.ph-checkout-cart-row-hr {
    display: block !important;
    padding: 0;
}

.ph-checkout-cart-row-hr > div {
    grid-column: 1 / -1;
}

.ph-hr {
    border: none;
    border-top: 1px solid var(--dp-border);
    margin: var(--dp-space-xs) 0;
}

/* Item rows */
.ph-checkout-cart-row-item {
    padding: var(--dp-space-xs) 0;
    border-bottom: 1px solid var(--dp-border);
}

/* Cart image */
.ph-checkout-cart-image img,
.ph-checkout-cart-box .ph-img-cart-checkout {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--dp-radius-sm);
    border: 1px solid var(--dp-border);
}

.ph-no-image {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-light-sand);
    border-radius: var(--dp-radius-sm);
    color: var(--dp-medium);
    font-size: 10px;
}

/* Product title */
.ph-checkout-cart-title a {
    color: var(--dp-primary-dark);
    text-decoration: none;
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    line-height: 1.3;
}

.ph-checkout-cart-title a:hover {
    color: var(--dp-warm-sand);
}

.ph-cart-unit-price {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-text-muted);
    margin-top: 0.25rem;
}

/* Price columns */
.ph-checkout-cart-netto,
.ph-checkout-cart-tax,
.ph-checkout-cart-brutto {
    font-size: var(--dp-font-size-sm);
    text-align: right;
    white-space: nowrap;
}

.ph-checkout-cart-brutto {
    font-weight: 500;
}

/* Quantity cell */
.ph-checkout-cart-quantity {
    text-align: center;
}

.ph-checkout-cart-quantity .form-inline,
.ph-checkout-cart-quantity .phItemCartUpdateBoxForm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.ph-checkout-cart-quantity .input-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ph-checkout-cart-quantity .ph-input-quantity {
    width: 36px !important;
    padding: 0.2rem 0.15rem;
    text-align: center;
    font-size: var(--dp-font-size-xs);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
}

/* Update/Delete buttons */
.ph-checkout-cart-quantity .btn-success,
.ph-checkout-cart-quantity .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    background: var(--dp-white);
    color: var(--dp-medium);
    cursor: pointer;
    transition: all var(--dp-transition);
    font-size: 0;
}

.ph-checkout-cart-quantity .btn-success svg,
.ph-checkout-cart-quantity .btn-danger svg {
    width: 12px;
    height: 12px;
}

.ph-checkout-cart-quantity .btn-success:hover {
    border-color: var(--dp-success);
    color: var(--dp-success);
    background: var(--dp-white);
}

.ph-checkout-cart-quantity .btn-danger:hover {
    border-color: var(--dp-error);
    color: var(--dp-error);
    background: var(--dp-white);
}

/* Attribute rows */
.ph-checkout-cart-row-attributes {
    display: block !important;
    padding: 0 0 var(--dp-space-xs) 0;
    margin-left: calc(40px + var(--dp-space-sm));
    border-bottom: 1px solid var(--dp-border);
}

.ph-checkout-attribute-box {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--dp-space-sm);
}

.ph-checkout-attribute-item {
    font-size: 10px;
    color: var(--dp-medium);
}

/* Discount rows */
.ph-checkout-discount-row {
    padding: 2px 0;
    font-size: var(--dp-font-size-xs);
    color: var(--dp-success);
}

.ph-line-through {
    text-decoration: line-through;
    color: var(--dp-medium);
}

/* Shipping & payment info box */
.dp-cart-info-box {
    background: var(--dp-light-sand);
    border-radius: 6px;
    padding: var(--dp-space-sm) var(--dp-space-md);
    margin: var(--dp-space-sm) 0;
    display: inline-block;
}

.dp-cart-info-line {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    line-height: 1.8;
}

.dp-cart-info-label {
    font-weight: 600;
    color: var(--dp-primary-dark);
}

/* ---- Totals section ---- */
.ph-checkout-cart-row-subtotal {
    display: flex !important;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--dp-space-md);
    padding: 2px 0;
}

/* Hide empty space column in totals */
.ph-checkout-cart-row-subtotal > .col-0 {
    display: none !important;
}

/* Title in totals */
.ph-checkout-cart-row-subtotal > div:nth-last-child(2) {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

/* Price in totals */
.ph-checkout-cart-row-subtotal > div:last-child {
    font-size: var(--dp-font-size-sm);
    text-align: right;
    white-space: nowrap;
    min-width: 90px;
}

/* Total row (final) */
.ph-cart-total-box,
.ph-checkout-cart-row-total-box,
.ph-checkout-cart-row-currency-box {
    border-top: 2px solid var(--dp-primary-dark);
    margin-top: var(--dp-space-xs);
    padding-top: var(--dp-space-sm) !important;
}

.ph-cart-total-box > div:nth-last-child(2),
.ph-checkout-cart-row-total-box > div:nth-last-child(2),
.ph-checkout-cart-row-currency-box > div:nth-last-child(2) {
    font-size: var(--dp-font-size-base) !important;
    font-weight: 500;
    color: var(--dp-primary-dark) !important;
}

.ph-cart-total-box > div:last-child,
.ph-checkout-cart-row-total-box > div:last-child,
.ph-checkout-cart-row-currency-box > div:last-child {
    font-size: var(--dp-font-size-lg) !important;
    font-weight: 600;
    color: var(--dp-primary-dark);
}

/* Points received info */
.ph-ceckout-points-received {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-success);
    margin-top: var(--dp-space-sm);
}

/* --------------------------------------------------------------------------
   Order Confirmation (Info) Page
   -------------------------------------------------------------------------- */
.dp-info-view {
    min-height: 50vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.dp-info-container {
    text-align: center;
    max-width: 480px;
    padding: var(--dp-space-xl) var(--dp-space-lg);
}

.dp-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--dp-success);
    color: var(--dp-white);
    font-size: 28px;
    margin-bottom: var(--dp-space-lg);
}

.dp-info-icon-error {
    background: var(--dp-error);
}

.dp-info-heading {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xl);
    font-weight: 400;
    color: var(--dp-primary-dark);
    letter-spacing: var(--dp-letter-spacing);
    margin: 0 0 var(--dp-space-sm);
    line-height: var(--dp-line-height-heading);
}

.dp-info-message {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    margin: 0 0 var(--dp-space-lg);
    line-height: var(--dp-line-height-base);
}

.dp-info-actions {
    margin-top: var(--dp-space-lg);
}

.dp-info-btn {
    display: inline-block;
    padding: 10px 28px;
    background: var(--dp-primary-dark);
    color: var(--dp-white);
    font-size: var(--dp-font-size-sm);
    font-weight: 500;
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
}

.dp-info-btn:hover {
    background: var(--dp-warm-sand);
    color: var(--dp-white);
}

.dp-info-extra {
    margin-top: var(--dp-space-md);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    text-align: left;
}

/* Empty cart */
.ph-cart-empty {
    text-align: center;
    padding: var(--dp-space-xl);
    font-size: var(--dp-font-size-base);
    color: var(--dp-medium);
}

/* Stock/quantity warnings in cart */
.ph-checkout-cart-row-stock,
.ph-checkout-cart-row-min-quantity,
.ph-checkout-cart-row-min-multiple-quantity {
    display: block !important;
    padding: var(--dp-space-xs) 0;
}

/* ---- Checkout step boxes (login, address, shipping, payment, confirm) ---- */
.ph-checkout-box,
.ph-checkout-box-login,
.ph-checkout-box-address,
.ph-checkout-box-shipping,
.ph-checkout-box-payment,
.ph-checkout-confirm-box-row,
.ph-checkout-coupon-box,
.ph-checkout-login-box {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    padding: var(--dp-space-lg);
    margin-bottom: var(--dp-space-md);
}

/* Step header row — no extra margin */
.ph-checkout-box-row {
    margin: 0;
}

/* Step headers */
.ph-checkout-box-header {
    display: flex;
    align-items: center;
    gap: var(--dp-space-sm);
}

.ph-checkout-box-header h3 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-lg);
    font-weight: 500;
    margin: 0 0 var(--dp-space-md) 0;
    padding-bottom: var(--dp-space-sm);
    border-bottom: 1px solid var(--dp-border);
    width: 100%;
    color: var(--dp-primary-dark);
}

/* Passive step headers (steps not yet active) */
.ph-checkout-box-header-pas h3 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-base);
    font-weight: 400;
    margin: 0;
    color: var(--dp-medium);
}

/* Step status icons and number boxes — hidden (no numbering) */
.ph-checkout-status-icon,
.ph-checkout-icon-spec-box {
    display: none !important;
}

/* Step action area */
.ph-checkout-box-action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-space-md);
}

.ph-checkout-box-action > [class*="col-"] {
    flex: 1;
    min-width: 200px;
}

/* Box sub-headers (e.g. "Faktureringsadresse", "Leveringsadresse") */
.ph-box-header {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--dp-space-sm);
    padding-bottom: var(--dp-space-xs);
    color: var(--dp-medium);
    border-bottom: 1px solid var(--dp-border);
}

/* ---- Address display (view mode — custom formatted) ---- */
.dp-address-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dp-space-md);
}

.dp-address-block {
    font-size: var(--dp-font-size-sm);
    line-height: 1.7;
    color: var(--dp-primary-dark);
}

.dp-address-label {
    font-size: var(--dp-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-xs);
}

.dp-address-company {
    font-weight: 500;
}

.dp-address-meta {
    margin-top: var(--dp-space-sm);
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.dp-address-actions {
    text-align: right;
    margin-top: var(--dp-space-sm);
}

/* Fallback for pre-rendered address rows (edit mode) */
.ph-checkout-billing-row,
.ph-checkout-shipping-row {
    font-size: var(--dp-font-size-sm);
    line-height: 1.5;
    color: var(--dp-primary-dark);
    padding: 0;
}

.ph-checkout-billing-row > [class*="col-"],
.ph-checkout-shipping-row > [class*="col-"] {
    padding: 0;
    margin: 0;
    line-height: 1.7;
}

/* Hide shipping & payment boxes — auto-submitted, costs shown in cart totals */
.ph-checkout-box-shipping,
.ph-checkout-box-payment {
    display: none !important;
}

/* ---- Shipping/Payment edit — compact radio list ---- */
.dp-shipping-edit {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dp-shipping-option {
    display: flex;
    align-items: center;
    gap: var(--dp-space-sm);
    padding: var(--dp-space-sm) 0;
    border-bottom: 1px solid var(--dp-border);
    cursor: pointer;
    font-size: var(--dp-font-size-sm);
}

.dp-shipping-option:last-child {
    border-bottom: none;
}

.dp-shipping-option input[type="radio"] {
    flex-shrink: 0;
    accent-color: var(--dp-warm-sand);
}

.dp-shipping-option-title {
    flex: 1;
}

.dp-shipping-option-price {
    font-weight: 500;
    white-space: nowrap;
    color: var(--dp-primary-dark);
}

/* Edit/save buttons — compact inline placement */
.ph-checkout-address-edit,
.ph-checkout-shipping-edit,
.ph-checkout-payment-edit,
.ph-checkout-address-save,
.ph-checkout-shipping-save,
.ph-checkout-payment-save {
    float: none !important;
    text-align: right;
    margin-top: var(--dp-space-sm);
}

.ph-checkout-address-edit .btn,
.ph-checkout-shipping-edit .btn,
.ph-checkout-payment-edit .btn,
.ph-checkout-address-save .btn,
.ph-checkout-shipping-save .btn,
.ph-checkout-payment-save .btn {
    font-size: var(--dp-font-size-xs);
    padding: 0.35rem 0.75rem;
}

/* ---- Address form fields (edit mode) ---- */
.ph-checkout-box-address label,
.ph-checkout-box-address .control-label {
    display: block;
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin-bottom: 2px;
}

.ph-checkout-box-address .control-group {
    margin-bottom: var(--dp-space-sm);
}

/* ---- Shipping & payment method selectors ---- */
.ph-checkout-shipping-item,
.ph-checkout-payment-item {
    padding: var(--dp-space-sm) 0;
    border-bottom: 1px solid var(--dp-border);
}

.ph-checkout-shipping-item:last-child,
.ph-checkout-payment-item:last-child {
    border-bottom: none;
}

.ph-shipping-title,
.ph-payment-title {
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
}

.ph-shipping-price-box,
.ph-payment-price-box {
    font-size: var(--dp-font-size-sm);
}

/* Radio inputs */
.ph-checkout-box-action input[type="radio"] {
    margin-right: var(--dp-space-xs);
    accent-color: var(--dp-warm-sand);
}

.ph-checkout-box-action label {
    cursor: pointer;
    font-size: var(--dp-font-size-sm);
}

/* ---- Confirm section ---- */
.ph-checkout-confirm-box-row-checkboxes {
    margin-top: var(--dp-space-md);
}

.ph-checkout-checkbox-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--dp-space-xs);
    margin-bottom: var(--dp-space-sm);
    font-size: var(--dp-font-size-sm);
}

.ph-checkout-checkbox-confirm input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--dp-warm-sand);
}

/* Confirm order button */
.ph-checkout-confirm {
    float: none !important;
    text-align: right;
    margin-top: var(--dp-space-md);
}

.ph-checkout-confirm .btn-primary {
    font-size: var(--dp-font-size-base) !important;
    padding: 0.75rem 2rem !important;
}

/* Order comment textarea */
.ph-checkout-confirm-row textarea {
    width: 100%;
    min-height: 60px;
    font-size: var(--dp-font-size-sm);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    padding: var(--dp-space-sm);
}

/* Checkout buttons — smaller in info column */
.ph-checkout-btn-login {
    margin-top: var(--dp-space-sm);
}

.ph-checkout-check-box label {
    font-size: var(--dp-font-size-sm);
}

/* Shipping/payment description */
.ph-checkout-shipping-desc,
.ph-checkout-payment-desc {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin-top: var(--dp-space-xs);
}

/* PhocaCart float clear */
.ph-cb {
    clear: both;
    height: 0;
    overflow: hidden;
}

/* PhocaCart utility classes */
.ph-right {
    text-align: right;
}

.ph-hidden,
.ph-display-none {
    display: none !important;
}

.ph-visibility-hidden {
    visibility: hidden;
}

.ph-vertical-align {
    align-items: center;
}

/* PhocaCart input group */
.input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* PhocaCart form inline */
.form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dp-space-sm);
}

/* Small text */
.ph-small {
    font-size: var(--dp-font-size-xs);
}

/* Zero-width columns (hidden) */
.col-0,
.col-sm-0,
.col-md-0 {
    display: none !important;
}

/* PhocaCart pull utilities */
.ph-pull-right,
.pull-right {
    float: right;
}


/* --------------------------------------------------------------------------
   20. PHOCACART: ORDERS
   -------------------------------------------------------------------------- */
.pc-orders-view {
    /* Order list */
}

.ph-orders-box {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
}

.ph-orders-box table {
    width: 100%;
    border-collapse: collapse;
}

.ph-orders-box th {
    font-size: var(--dp-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-medium);
    padding: var(--dp-space-md);
    border-bottom: 2px solid var(--dp-border);
    text-align: left;
    font-weight: 400;
    background: var(--dp-light-sand);
}

.ph-orders-box td {
    padding: var(--dp-space-md);
    border-bottom: 1px solid var(--dp-border);
    vertical-align: middle;
}

.ph-orders-box tr:last-child td {
    border-bottom: none;
}

.ph-orders-box tr:hover td {
    background: var(--dp-warm-sand-light);
}

/* Order status badges */
.ph-order-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ph-order-status-pending {
    background: rgba(196, 169, 125, 0.15);
    color: var(--dp-warm-sand-hover);
}

.ph-order-status-confirmed {
    background: rgba(92, 122, 92, 0.15);
    color: var(--dp-success);
}

.ph-order-status-cancelled {
    background: rgba(163, 68, 68, 0.15);
    color: var(--dp-error);
}


/* --------------------------------------------------------------------------
   21. PHOCACART: ACCOUNT
   -------------------------------------------------------------------------- */
.pc-account-view {
    max-width: 800px;
    margin: 0 auto;
}

/* Hide default PhocaCart header on account page */
.pc-account-view > .ph-header {
    display: none;
}

/* Account cards */
.dp-account-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    overflow: hidden;
    margin-bottom: var(--dp-space-xl);
}

.dp-account-card-header {
    padding: var(--dp-space-lg) var(--dp-space-xl);
    border-bottom: 1px solid var(--dp-border);
}

.dp-account-card-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-base);
    font-weight: 500;
    color: var(--dp-primary-dark);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dp-account-card-body {
    padding: var(--dp-space-xl);
}

/* Reward points */
.dp-account-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dp-account-reward-label {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
}

.dp-account-reward-value {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xl);
    font-weight: 600;
    color: var(--dp-primary-dark);
}

/* Address grid — two columns */
.dp-account-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dp-space-2xl);
}

.dp-account-address-label {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-md);
    padding-bottom: var(--dp-space-xs);
    border-bottom: 1px solid var(--dp-border);
}

/* Address form fields — make label-above layout */
.dp-account-address-col .row.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--dp-space-sm);
}

.dp-account-address-col .row.form-group > [class*="col-"] {
    width: 100%;
    flex: none;
    padding: 0;
}

.dp-account-address-col .control-label,
.dp-account-address-col .control-label label {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin-bottom: 2px;
    font-weight: 400;
}

.dp-account-address-col .form-control,
.dp-account-address-col .form-select,
.dp-account-address-col select {
    font-size: var(--dp-font-size-sm);
    padding: 0.6rem 0.75rem;
}

/* Same address checkbox */
.dp-account-same-address {
    margin-top: var(--dp-space-lg);
    padding-top: var(--dp-space-lg);
    border-top: 1px solid var(--dp-border);
}

.dp-account-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-sm);
    cursor: pointer;
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
}

.dp-account-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--dp-warm-sand);
    cursor: pointer;
    flex-shrink: 0;
}

/* Actions (save button) */
.dp-account-actions {
    margin-top: var(--dp-space-xl);
    padding-top: var(--dp-space-lg);
    border-top: 1px solid var(--dp-border);
    display: flex;
    justify-content: flex-end;
}

/* Profile edit section */
.dp-account-profile-edit .com-users-profile__edit {
    max-width: none;
}

.dp-account-profile-edit fieldset {
    margin-bottom: var(--dp-space-xl);
}

.dp-account-profile-edit legend {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dp-medium);
    padding-bottom: var(--dp-space-xs);
    border-bottom: 1px solid var(--dp-border);
    margin-bottom: var(--dp-space-md);
    width: 100%;
}

.dp-account-profile-edit .control-group {
    margin-bottom: var(--dp-space-sm);
}

.dp-account-profile-edit .control-label,
.dp-account-profile-edit .control-label label {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin-bottom: 2px;
    font-weight: 400;
}

.dp-account-profile-edit .form-control,
.dp-account-profile-edit .form-select {
    font-size: var(--dp-font-size-sm);
    padding: 0.6rem 0.75rem;
}

.dp-account-profile-edit .com-users-profile__edit-submit {
    margin-top: var(--dp-space-xl);
    padding-top: var(--dp-space-lg);
    border-top: 1px solid var(--dp-border);
    display: flex;
    gap: var(--dp-space-sm);
    justify-content: flex-end;
}

.dp-account-profile-edit .com-users-profile__edit-submit .controls {
    display: flex;
    gap: var(--dp-space-sm);
}

.dp-account-profile-edit .com-users-profile__edit-submit .btn-danger {
    background: transparent !important;
    border: 1px solid var(--dp-border) !important;
    color: var(--dp-primary-dark) !important;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--dp-radius-sm);
    padding: 0.5rem 1rem;
    min-height: 36px;
    cursor: pointer;
    transition: all var(--dp-transition);
}

.dp-account-profile-edit .com-users-profile__edit-submit .btn-danger:hover {
    border-color: var(--dp-error) !important;
    color: var(--dp-error) !important;
}

.dp-account-profile-edit .com-users-profile__edit-submit .btn-primary {
    font-size: var(--dp-font-size-xs) !important;
    padding: 0.5rem 1rem !important;
    min-height: 36px;
}

/* Tax info */
.dp-account-tax-info {
    margin-top: var(--dp-space-md);
    font-size: var(--dp-font-size-sm);
}

/* Login / Register grid */
.dp-account-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dp-space-2xl);
}

.dp-account-login-col {
    font-size: var(--dp-font-size-sm);
}

/* Account responsive */
@media (max-width: 767.98px) {
    .dp-account-address-grid,
    .dp-account-login-grid {
        grid-template-columns: 1fr;
        gap: var(--dp-space-xl);
    }

    .dp-account-card-body {
        padding: var(--dp-space-lg);
    }

    .dp-account-card-header {
        padding: var(--dp-space-md) var(--dp-space-lg);
    }
}


/* --------------------------------------------------------------------------
   22. PHOCACART: CART MODULE
   -------------------------------------------------------------------------- */
.ph-cart-module-box {
    position: relative;
}

.dp-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--dp-primary-dark);
    transition: color var(--dp-transition);
}

.dp-cart-icon:hover {
    color: var(--dp-warm-sand);
}

.dp-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--dp-warm-sand);
    color: var(--dp-white);
    font-size: 10px;
    font-weight: 600;
    border-radius: 100px;
    line-height: 1;
}

/* Cart dropdown */
.ph-cart-module-box .dropdown-menu {
    min-width: 320px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    box-shadow: var(--dp-shadow-lg);
    padding: var(--dp-space-lg);
}


/* --------------------------------------------------------------------------
   23. PAGINATION
   -------------------------------------------------------------------------- */
.pagination,
.ph-pagination {
    display: flex;
    list-style: none;
    margin: var(--dp-space-xl) 0;
    padding: 0;
    gap: var(--dp-space-xs);
    justify-content: center;
}

.pagination li a,
.pagination li span,
.ph-pagination li a,
.ph-pagination li span,
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--dp-space-sm);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    transition: all var(--dp-transition);
    text-decoration: none;
}

.pagination li a:hover,
.ph-pagination li a:hover,
.page-link:hover {
    border-color: var(--dp-warm-sand);
    color: var(--dp-warm-sand);
}

.pagination li.active span,
.pagination li.active a,
.ph-pagination li.active span,
.page-item.active .page-link {
    background: var(--dp-warm-sand);
    border-color: var(--dp-warm-sand);
    color: var(--dp-white);
}

.pagination li.disabled span,
.page-item.disabled .page-link {
    color: var(--dp-border);
    cursor: default;
}


/* --------------------------------------------------------------------------
   24. ALERTS & MESSAGES
   -------------------------------------------------------------------------- */
.alert,
#system-message-container .alert {
    padding: var(--dp-space-md) var(--dp-space-lg);
    margin-bottom: var(--dp-space-lg);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    font-size: var(--dp-font-size-sm);
}

.alert-success {
    background: rgba(92, 122, 92, 0.1);
    border-color: rgba(92, 122, 92, 0.3);
    color: var(--dp-success);
}

.alert-danger,
.alert-error {
    background: rgba(163, 68, 68, 0.1);
    border-color: rgba(163, 68, 68, 0.3);
    color: var(--dp-error);
}

.alert-warning {
    background: rgba(196, 169, 125, 0.1);
    border-color: rgba(196, 169, 125, 0.3);
    color: var(--dp-warm-sand-hover);
}

.alert-info {
    background: rgba(139, 126, 110, 0.1);
    border-color: rgba(139, 126, 110, 0.3);
    color: var(--dp-medium);
}


/* --------------------------------------------------------------------------
   25. ERROR PAGE
   -------------------------------------------------------------------------- */
.dp-error-page .dp-error-content {
    text-align: center;
    padding: var(--dp-space-3xl) var(--dp-space-xl);
}

.dp-error-code {
    font-family: var(--dp-font-heading);
    font-size: 6rem;
    font-weight: 400;
    color: var(--dp-border);
    margin-bottom: var(--dp-space-md);
    line-height: 1;
}

.dp-error-message {
    font-size: var(--dp-font-size-xl);
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-xl);
}

.dp-error-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--dp-primary-dark);
    color: var(--dp-white);
    font-size: var(--dp-font-size-xs);
    border-radius: var(--dp-radius-sm);
}

.dp-error-detail {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
}


/* --------------------------------------------------------------------------
   26. OFFLINE PAGE
   -------------------------------------------------------------------------- */
.dp-offline-page {
    background: var(--dp-light-sand);
}

.dp-offline-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--dp-space-xl);
}

.dp-offline-card {
    width: 100%;
    max-width: 480px;
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    padding: var(--dp-space-3xl) var(--dp-space-2xl);
    text-align: center;
}

.dp-offline-header {
    margin-bottom: var(--dp-space-2xl);
}

.dp-offline-logo {
    margin-bottom: var(--dp-space-xl);
}

.dp-offline-message {
    color: var(--dp-medium);
    font-size: var(--dp-font-size-base);
}

.dp-offline-login label {
    text-align: left;
}

.dp-offline-login .dp-input {
    margin-bottom: var(--dp-space-md);
}

.dp-offline-login button[type="submit"] {
    width: 100%;
    margin-top: var(--dp-space-md);
}


/* --------------------------------------------------------------------------
   27. PHOCACART: MISCELLANEOUS COMPONENT STYLES
   -------------------------------------------------------------------------- */

/* Clear floats (PhocaCart uses many) */
.ph-cb {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

/* PhocaCart hidden/display utilities */
.ph-visibility-hidden {
    visibility: hidden;
}

.ph-display-none {
    display: none;
}

/* Item description */
.ph-item-desc {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    margin: var(--dp-space-sm) 0;
    line-height: var(--dp-line-height-base);
}

/* Tags */
.ph-tag-box {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin: var(--dp-space-sm) 0;
}

.ph-tag-box-header {
    font-weight: 400;
}

/* Manufacturer */
.ph-manufacturer-box {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin: var(--dp-space-sm) 0;
}

/* Star rating */
.ph-rating {
    display: inline-flex;
    gap: 2px;
    margin: var(--dp-space-sm) 0;
}

.ph-rating svg {
    width: 16px;
    height: 16px;
    fill: var(--dp-warm-sand);
}

.ph-rating svg.empty {
    fill: var(--dp-border);
}

/* Attributes/Options box */
.ph-attribute-box {
    margin: var(--dp-space-md) 0;
}

.ph-attribute-box select {
    max-width: 100%;
}

.ph-attribute-box label {
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
}

/* Wishlist / Compare buttons (category icons) */
.ph-wishlist-btn,
.ph-compare-btn,
.ph-quickview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Back link in category header */
.ph-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-sm);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-md);
    transition: color var(--dp-transition);
}

.ph-back-link:hover {
    color: var(--dp-warm-sand);
}

/* Product description bottom */
.ph-desc-bottom {
    margin-top: var(--dp-space-2xl);
    padding-top: var(--dp-space-xl);
    border-top: 1px solid var(--dp-border);
    color: var(--dp-medium);
    line-height: var(--dp-line-height-base);
}

/* PhocaCart info box ("Powered by Phoca Cart") — hidden globally */
.ph-info-box,
div[style*="text-align:right"][style*="display:block"] {
    display: none !important;
}

/* View Product button */
.ph-category-view-btn,
a.ph-view-product {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-sm);
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--dp-primary-dark);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: all var(--dp-transition);
    cursor: pointer;
}

.ph-category-view-btn:hover,
a.ph-view-product:hover {
    border-color: var(--dp-warm-sand);
    color: var(--dp-warm-sand);
}

/* PhocaCart action button row in product cards */
.ph-category-action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--dp-space-sm);
    margin-top: var(--dp-space-sm);
}

/* BS5 btn overrides inside PhocaCart */
.pc-category-view .btn,
.ph-item-box .btn {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    border-radius: var(--dp-radius-sm);
}

.pc-category-view .btn-primary,
.ph-item-box .btn-primary {
    background: var(--dp-warm-sand);
    border-color: var(--dp-warm-sand);
    color: var(--dp-white);
}

.pc-category-view .btn-primary:hover,
.ph-item-box .btn-primary:hover {
    background: var(--dp-warm-sand-hover);
    border-color: var(--dp-warm-sand-hover);
}

.pc-category-view .btn-secondary,
.pc-category-view .btn-outline-secondary,
.ph-item-box .btn-secondary {
    background: transparent;
    border-color: var(--dp-border);
    color: var(--dp-primary-dark);
}

.pc-category-view .btn-secondary:hover,
.pc-category-view .btn-outline-secondary:hover,
.ph-item-box .btn-secondary:hover {
    border-color: var(--dp-warm-sand);
    color: var(--dp-warm-sand);
}

/* Checkout section rows — use flex for non-cart boxes */
.ph-checkout-box-login .row,
.ph-checkout-address-box .row,
.ph-checkout-shipping-box .row,
.ph-checkout-payment-box .row,
.ph-checkout-confirm-box .row,
.ph-checkout-coupon-box .row,
.ph-checkout-login-box .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.ph-checkout-box-login .row > [class*="col-"],
.ph-checkout-address-box .row > [class*="col-"],
.ph-checkout-shipping-box .row > [class*="col-"],
.ph-checkout-payment-box .row > [class*="col-"],
.ph-checkout-confirm-box .row > [class*="col-"],
.ph-checkout-coupon-box .row > [class*="col-"],
.ph-checkout-login-box .row > [class*="col-"] {
    flex: 1;
    min-width: 0;
}

/* Full-width cols */
.ph-checkout-box-login .col-12,
.ph-checkout-address-box .col-12,
.ph-checkout-shipping-box .col-12,
.ph-checkout-payment-box .col-12 {
    flex: 0 0 100%;
}

/* Right/left borders on login section split */
.ph-right-border {
    border-right: 1px solid var(--dp-border);
    padding-right: var(--dp-space-lg);
}

.ph-left-border {
    padding-left: var(--dp-space-lg);
}

/* Account page sections */
.ph-account-section {
    margin-bottom: var(--dp-space-xl);
}

/* PhocaCart popup container */
#phContainer {
    position: relative;
    z-index: 1000;
}

/* Quick view popup */
.ph-quickview-popup {
    background: var(--dp-white);
    border-radius: var(--dp-radius-md);
    box-shadow: var(--dp-shadow-lg);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}


/* --------------------------------------------------------------------------
   28. RESPONSIVE: MOBILE-FIRST BREAKPOINTS
   -------------------------------------------------------------------------- */

/* Dashboard mobile: sidebar becomes off-canvas drawer */
@media (max-width: 991.98px) {
    .dp-dashboard {
        display: block;
    }

    .dp-sidebar-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform var(--dp-transition-slow);
    }

    .dp-sidebar-nav.is-open {
        transform: translateX(0);
    }

    .dp-sidebar-toggle {
        display: flex;
    }

    .dp-dashboard-content {
        padding: var(--dp-space-lg);
    }

    /* Product grid: 2 columns on tablet */
    #phItems .row,
    #phItems .ph-items-row,
    .pc-category-view .row {
        grid-template-columns: repeat(2, 1fr);
    }

    .ph-item-box:nth-child(3n) {
        border-right: 1px solid var(--dp-border);
    }

    .ph-item-box:nth-child(2n) {
        border-right: none;
    }

    .dp-product-detail {
        grid-template-columns: 1fr;
    }

    .dp-product-gallery {
        border-right: none;
        border-bottom: 1px solid var(--dp-border);
    }

    /* Orders table responsive */
    .ph-orders-box {
        overflow-x: auto;
    }

    .ph-orders-box table {
        min-width: 600px;
    }

    /* Checkout: stack columns on tablet */
    .ph-checkout-grid {
        grid-template-columns: 1fr;
    }

    .ph-checkout-col-cart {
        position: static;
    }

    .pc-checkout-view {
        max-width: 900px;
    }
}

/* Tablet / mobile typography — matches main site */
@media (max-width: 768px) {
    :root {
        --dp-font-size-base: 13px;
    }
}

/* Small devices (max: 576px) */
@media (max-width: 575.98px) {
    :root {
        --dp-container-padding: 1rem;
        --dp-font-size-3xl: 26px;
        --dp-font-size-2xl: 22px;
        --dp-font-size-xl: 18px;
    }

    .dp-dashboard-content {
        padding: var(--dp-space-md);
    }

    .dp-dashboard-topbar {
        padding: 0 var(--dp-space-md);
    }

    .dp-product-detail {
        grid-template-columns: 1fr;
    }

    .dp-product-gallery {
        border-right: none;
        border-bottom: 1px solid var(--dp-border);
    }

    /* Product grid: single column on small screens */
    #phItems .row,
    #phItems .ph-items-row,
    .pc-category-view .row {
        grid-template-columns: 1fr;
    }

    .ph-item-box:nth-child(2n),
    .ph-item-box:nth-child(3n) {
        border-right: none;
    }

    .ph-item-content {
        padding: var(--dp-space-md);
    }

    .ph-price-brutto,
    .ph-price-netto {
        font-size: var(--dp-font-size-base);
    }

    .dp-login-card {
        padding: var(--dp-space-xl);
    }

    .ph-checkout-box,
    .ph-checkout-box-login,
    .ph-checkout-address-box,
    .ph-checkout-shipping-box,
    .ph-checkout-payment-box,
    .ph-checkout-confirm-box-row,
    .ph-checkout-coupon-box,
    .ph-checkout-login-box,
    .ph-checkout-cart-box {
        padding: var(--dp-space-md);
    }

    /* Cart: stack items vertically on mobile */
    .ph-checkout-cart-box > .row,
    .ph-checkout-cart-box > div > .row {
        grid-template-columns: 1fr;
        gap: var(--dp-space-xs);
    }

    .ph-checkout-cart-row-header {
        display: none !important;
    }

    .ph-checkout-cart-row-item {
        display: flex !important;
        flex-wrap: wrap;
        gap: var(--dp-space-sm);
        padding: var(--dp-space-md) 0;
    }

    .ph-checkout-cart-row-item .ph-checkout-cart-image {
        flex: 0 0 60px;
    }

    .ph-checkout-cart-row-item .ph-checkout-cart-title {
        flex: 1;
        min-width: 0;
    }

    .ph-checkout-cart-row-item .ph-checkout-cart-quantity {
        flex: 0 0 100%;
        text-align: left;
        margin-top: var(--dp-space-xs);
    }

    .ph-checkout-cart-row-item .ph-checkout-cart-brutto {
        flex: 0 0 auto;
        text-align: right;
        margin-left: auto;
    }

    .ph-checkout-cart-row-item .ph-checkout-cart-netto,
    .ph-checkout-cart-row-item .ph-checkout-cart-tax {
        flex: 0 0 auto;
        font-size: var(--dp-font-size-xs);
    }

    .ph-checkout-cart-row-attributes {
        margin-left: 0;
    }

    /* Totals on mobile */
    .ph-checkout-cart-row-subtotal {
        gap: var(--dp-space-md);
    }

    /* Login split — stack on mobile */
    .ph-right-border {
        border-right: none;
        border-bottom: 1px solid var(--dp-border);
        padding-right: 0;
        padding-bottom: var(--dp-space-lg);
        margin-bottom: var(--dp-space-lg);
    }

    .ph-left-border {
        padding-left: 0;
    }
}

/* Large devices: auto-fill handles column count based on available width */


/* --------------------------------------------------------------------------
   29. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
    .dp-sidebar-nav,
    .dp-sidebar-overlay,
    .dp-dashboard-topbar,
    .dp-footer,
    .dp-breadcrumbs-wrap,
    .ph-category-action-icons,
    .ph-category-action-buttons,
    .dp-cart-icon,
    #phContainer {
        display: none !important;
    }

    body.dp-dashboard {
        display: block;
        background: white;
        color: black;
        font-size: 12pt;
    }

    .dp-dashboard-main {
        min-height: auto;
    }

    .dp-container {
        max-width: 100%;
        padding: 0;
    }

    .dp-dashboard-content {
        padding: 0;
    }

    .ph-item-box {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}


/* --------------------------------------------------------------------------
   30. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Joomla frontend editing badges: compact and non-disruptive */
.jmoddiv {
    position: relative;
}

/* Edit module buttons - hide by default, show on hover */
.jmodeditmodule {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 50;
    opacity: 0;
    transition: opacity var(--dp-transition);
    pointer-events: none;
}

.jmoddiv:hover > .jmodeditmodule {
    opacity: 1;
    pointer-events: auto;
}

/* Hide Edit Module badges completely in sidebar/topbar */
.dp-sidebar-nav .jmoddiv > .jmodeditmodule,
.dp-dashboard-topbar .jmoddiv > .jmodeditmodule,
.dp-sidebar-footer .jmoddiv > .jmodeditmodule {
    display: none !important;
}

/* Make jmoddiv wrappers transparent to flex/grid layouts */
.dp-sidebar-footer .jmoddiv,
.dp-topbar-right .jmoddiv {
    display: contents;
}

/* Focus-visible outlines for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--dp-warm-sand);
    outline-offset: 2px;
}

/* Skip to content link */
.dp-skip-link {
    position: absolute;
    top: -100%;
    left: var(--dp-space-md);
    padding: var(--dp-space-sm) var(--dp-space-md);
    background: var(--dp-warm-sand);
    color: var(--dp-white);
    z-index: 1000;
    font-size: var(--dp-font-size-sm);
    border-radius: var(--dp-radius-sm);
    transition: top 0.2s;
}

.dp-skip-link:focus {
    top: var(--dp-space-md);
}


/* --------------------------------------------------------------------------
   31. PHOCACART: BOOTSTRAP 5 GRID OVERRIDES
   -------------------------------------------------------------------------- */
/* Override BS5 row/col for PhocaCart to use CSS Grid instead */
.pc-category-view .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0;
}

.pc-category-view .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    flex: none;
}

/* PhocaCart ordering/display controls */
.ph-ordering-box,
.ph-limit-box,
.ph-category-ordering-box {
    display: flex;
    align-items: center;
    gap: var(--dp-space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--dp-space-lg);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
}

.ph-ordering-box select,
.ph-limit-box select,
.ph-category-ordering-box select {
    width: auto;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    padding: 0.375rem 0.75rem;
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    background: var(--dp-white);
}

.ph-ordering-box select:focus,
.ph-limit-box select:focus,
.ph-category-ordering-box select:focus {
    border-color: var(--dp-warm-sand);
    outline: none;
}

/* Pagination top bar — product count + layout toggle */
.dp-pagination-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dp-space-lg);
    padding: 0;
}

.dp-product-count {
    font-size: var(--dp-font-size-base);
    font-weight: 400;
    color: var(--dp-primary-dark);
    font-style: italic;
}

.dp-layout-toggle {
    display: flex;
    gap: 0;
}

/* Legacy PhocaCart pagination top (fallback) */
.ph-pagination-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dp-space-lg);
    padding: 0;
}

.ph-pagination-top .ph-pag-top-row {
    flex: none;
    width: auto !important;
    max-width: none !important;
    padding: 0;
}

/* Grid/List view toggle buttons */
.ph-switch-layout-box,
.ph-category-switch-box,
.phItemSwitchLayoutType {
    display: inline-flex;
    gap: 2px;
}

.phItemSwitchLayoutType {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dp-border);
    border-radius: 0;
    background: var(--dp-white);
    color: var(--dp-medium);
    transition: all var(--dp-transition);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.phItemSwitchLayoutType + .phItemSwitchLayoutType {
    border-left: none;
}

.phItemSwitchLayoutType:hover,
.phItemSwitchLayoutType.active {
    border-color: var(--dp-primary-dark);
    color: var(--dp-primary-dark);
}

.ph-switch-layout-box a,
.ph-switch-layout-box button,
.ph-category-switch-box a,
.ph-category-switch-box button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dp-border);
    border-radius: 0;
    background: var(--dp-white);
    color: var(--dp-medium);
    transition: all var(--dp-transition);
    text-decoration: none;
    cursor: pointer;
}

.ph-switch-layout-box a:hover,
.ph-switch-layout-box a.active,
.ph-category-switch-box a:hover,
.ph-category-switch-box a.active {
    border-color: var(--dp-primary-dark);
    color: var(--dp-primary-dark);
}

/* PhocaCart category item header styling */
.ph-item h3,
.ph-item h4 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-lg);
    font-weight: 400;
    margin-bottom: var(--dp-space-sm);
}

.ph-item h3 a,
.ph-item h4 a {
    color: var(--dp-primary-dark);
    text-decoration: none;
}

.ph-item h3 a:hover,
.ph-item h4 a:hover {
    color: var(--dp-warm-sand);
}

/* PhocaCart form styling within product cards */
.pc-category-view form {
    margin: 0;
}

/* PhocaCart quantity input in category */
.pc-category-view input[type="number"] {
    width: 60px;
    text-align: center;
}


/* --------------------------------------------------------------------------
   32. DASHBOARD WIDGETS (mod_danois_dashboard)
   -------------------------------------------------------------------------- */
.dp-dashboard-widgets {
    display: flex;
    flex-direction: column;
    gap: var(--dp-space-xl);
}

/* Welcome banner */
.dp-widget-welcome {
    padding: var(--dp-space-xl) 0 0 0;
}

.dp-widget-welcome-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-2xl);
    font-weight: 400;
    color: var(--dp-primary-dark);
    margin: 0 0 var(--dp-space-xs) 0;
}

.dp-widget-welcome-sub {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    margin: 0;
}

/* KPI cards row */
.dp-widget-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dp-space-lg);
}

.dp-kpi-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: var(--dp-space-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--dp-space-lg);
}

.dp-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--dp-radius-md);
    background: var(--dp-light-sand);
    color: var(--dp-primary-dark);
    flex-shrink: 0;
}

.dp-kpi-icon--pending {
    background: rgba(196, 169, 125, 0.12);
    color: var(--dp-warm-sand);
}

.dp-kpi-icon--products {
    background: rgba(92, 122, 92, 0.1);
    color: var(--dp-success);
}

.dp-kpi-icon--spent {
    background: rgba(26, 26, 26, 0.06);
    color: var(--dp-primary-dark);
}

.dp-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dp-kpi-value {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xl);
    font-weight: 600;
    color: var(--dp-primary-dark);
    line-height: 1.2;
    white-space: nowrap;
}

.dp-kpi-label {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--dp-space-xs);
}

/* Widget card (used for recent orders, etc.) */
.dp-widget-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    overflow: hidden;
}

.dp-widget-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dp-space-lg) var(--dp-space-xl);
    border-bottom: 1px solid var(--dp-border);
}

.dp-widget-card-title {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-base);
    font-weight: 600;
    color: var(--dp-primary-dark);
    margin: 0;
}

.dp-widget-card-link {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-warm-sand);
    text-decoration: none;
    font-weight: 400;
}

.dp-widget-card-link:hover {
    color: var(--dp-warm-sand-hover);
}

/* Dashboard table */
.dp-widget-table-wrap {
    overflow-x: auto;
}

.dp-widget-table {
    width: 100%;
    border-collapse: collapse;
}

.dp-widget-table thead th {
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-medium);
    padding: var(--dp-space-md) var(--dp-space-xl);
    text-align: left;
    background: var(--dp-light-sand);
    border-bottom: 1px solid var(--dp-border);
    white-space: nowrap;
}

.dp-widget-table tbody td {
    padding: var(--dp-space-md) var(--dp-space-xl);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    border-bottom: 1px solid var(--dp-border);
    white-space: nowrap;
}

.dp-widget-table tbody tr:last-child td {
    border-bottom: none;
}

.dp-widget-table tbody tr:hover td {
    background: var(--dp-warm-sand-light);
}

.dp-widget-table-id {
    font-weight: 600;
}

.dp-widget-table-amount {
    font-weight: 600;
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-base);
}

.dp-text-right {
    text-align: right;
}

/* Status badges */
.dp-status-badge {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    border-radius: 100px;
    letter-spacing: 0.02em;
    background: rgba(139, 126, 110, 0.12);
    color: var(--dp-medium);
}

/* Pending */
.dp-status-1 {
    background: rgba(196, 169, 125, 0.15);
    color: var(--dp-warm-sand-hover);
}

/* Confirmed / Completed */
.dp-status-2,
.dp-status-3 {
    background: rgba(92, 122, 92, 0.12);
    color: var(--dp-success);
}

/* Cancelled / Refunded */
.dp-status-4,
.dp-status-5 {
    background: rgba(163, 68, 68, 0.12);
    color: var(--dp-error);
}

/* Shipped */
.dp-status-6 {
    background: rgba(26, 26, 26, 0.08);
    color: var(--dp-primary-dark);
}

/* Empty state */
.dp-widget-empty {
    padding: var(--dp-space-3xl) var(--dp-space-xl);
    text-align: center;
    color: var(--dp-medium);
}

.dp-widget-empty p {
    margin-bottom: var(--dp-space-lg);
}

/* Quick action cards */
.dp-widget-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dp-space-lg);
}

.dp-action-card {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    padding: var(--dp-space-lg) var(--dp-space-xl);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    text-decoration: none;
    color: var(--dp-primary-dark);
    transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-action-card:hover {
    border-color: var(--dp-warm-sand);
    box-shadow: var(--dp-shadow-sm);
    color: var(--dp-primary-dark);
}

.dp-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--dp-radius-md);
    background: var(--dp-light-sand);
    color: var(--dp-warm-sand);
    flex-shrink: 0;
}

.dp-action-label {
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
}

/* Responsive dashboard widgets */
@media (max-width: 991.98px) {
    .dp-widget-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .dp-widget-kpis {
        grid-template-columns: 1fr;
    }

    .dp-widget-actions {
        grid-template-columns: 1fr;
    }

    .dp-kpi-card {
        padding: var(--dp-space-lg);
    }

    .dp-widget-table thead th,
    .dp-widget-table tbody td {
        padding: var(--dp-space-sm) var(--dp-space-md);
    }
}


/* --------------------------------------------------------------------------
   21. ORDER HISTORY PAGE (dp-orders-*)
   -------------------------------------------------------------------------- */

/* Page container */
.dp-orders-page {
    max-width: 100%;
}

/* Header: title + search */
.dp-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dp-space-lg);
    margin-bottom: var(--dp-space-lg);
}

.dp-orders-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-2xl);
    font-weight: 600;
    color: var(--dp-primary-dark);
    margin: 0;
    white-space: nowrap;
}

.dp-orders-search {
    position: relative;
    max-width: 280px;
    width: 100%;
}

.dp-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dp-medium);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.dp-search-input {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.25rem;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    background: var(--dp-white);
    color: var(--dp-primary-dark);
    transition: border-color var(--dp-transition);
    outline: none;
}

.dp-search-input:focus {
    border-color: var(--dp-warm-sand);
}

.dp-search-input::placeholder {
    color: var(--dp-medium);
}

/* Filter tabs */
.dp-orders-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-space-sm);
    margin-bottom: var(--dp-space-lg);
}

.dp-filter-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-medium);
    background: transparent;
    border: 1px solid var(--dp-border);
    border-radius: 100px;
    cursor: pointer;
    transition: all var(--dp-transition);
    white-space: nowrap;
}

.dp-filter-tab:hover {
    border-color: var(--dp-warm-sand);
    color: var(--dp-warm-sand);
}

.dp-filter-tab.is-active {
    background: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
    color: var(--dp-white);
}

/* Orders table overrides */
.dp-orders-table.dp-widget-table tbody td {
    white-space: normal;
}

.dp-text-center {
    text-align: center;
}

/* Clickable order rows */
.dp-order-row {
    cursor: pointer;
    transition: background var(--dp-transition);
}

.dp-order-row:hover td {
    background: var(--dp-warm-sand-light);
}

.dp-order-row.is-expanded td {
    background: var(--dp-warm-sand-light);
    border-bottom-color: transparent;
}

/* Expand chevron */
.dp-expand-col {
    width: 40px;
    text-align: center;
}

.dp-expand-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dp-medium);
    transition: transform var(--dp-transition-slow);
}

.is-expanded > .dp-expand-chevron,
.is-expanded .dp-expand-chevron,
.dp-order-row.is-expanded .dp-expand-chevron {
    transform: rotate(180deg);
}

/* Detail row */
.dp-order-detail {
    display: none;
}

.dp-order-detail.is-visible {
    display: table-row;
}

.dp-order-detail > td {
    padding: 0 !important;
    border-bottom: 1px solid var(--dp-border);
}

.dp-order-detail-inner {
    padding: var(--dp-space-xl) var(--dp-space-xl);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-top: none;
    border-radius: 0 0 var(--dp-radius-md) var(--dp-radius-md);
    margin: 0 var(--dp-space-md) var(--dp-space-md);
}

/* Detail sections */
.dp-detail-section {
    margin-bottom: var(--dp-space-lg);
    padding-bottom: var(--dp-space-lg);
    border-bottom: 1px solid var(--dp-border);
}

.dp-detail-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.dp-detail-heading {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-medium);
    margin: 0 0 var(--dp-space-sm) 0;
}

/* Nested products table */
.dp-detail-products-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--dp-light-sand);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
}

.dp-detail-products-table thead th {
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-medium);
    padding: var(--dp-space-sm) var(--dp-space-md);
    text-align: left;
    border-bottom: 1px solid var(--dp-border);
}

.dp-detail-products-table tbody td {
    padding: var(--dp-space-sm) var(--dp-space-md);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    border-bottom: 1px solid var(--dp-border);
}

.dp-detail-products-table tbody tr:last-child td {
    border-bottom: none;
}

.dp-detail-sku {
    color: var(--dp-medium);
    font-size: var(--dp-font-size-xs);
    white-space: nowrap;
}

.dp-product-attributes {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin-top: 2px;
}

/* Summary row: info-box left, totals right */
.dp-detail-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dp-space-lg);
}

.dp-detail-summary-row .dp-cart-info-box {
    margin: 0;
    align-self: flex-start;
}

/* Totals section */
.dp-detail-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 320px;
    margin-left: auto;
}

.dp-detail-total-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--dp-space-xs) 0;
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
}

.dp-detail-total-label {
    color: var(--dp-medium);
}

.dp-detail-total-amount {
    font-family: var(--dp-font-heading);
    text-align: right;
    margin-left: var(--dp-space-xl);
}

.dp-detail-total-final {
    border-top: 1px solid var(--dp-border);
    margin-top: var(--dp-space-xs);
    padding-top: var(--dp-space-sm);
    font-weight: 600;
}

.dp-detail-total-final .dp-detail-total-label {
    color: var(--dp-primary-dark);
    font-weight: 600;
}

.dp-detail-total-final .dp-detail-total-amount {
    font-size: var(--dp-font-size-base);
}

/* Shipping info in detail */
.dp-detail-shipping-row {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    margin-bottom: var(--dp-space-xs);
}

.dp-detail-shipping-row:last-child {
    margin-bottom: 0;
}

/* Action buttons compact variant */
.dp-order-action-btn.dp-btn.dp-btn-sm {
    padding: 0.375rem 0.75rem;
    min-height: 32px;
    text-transform: none;
    letter-spacing: 0;
}

.dp-order-actions {
    white-space: nowrap;
}

/* Reorder button */
.dp-detail-reorder {
    text-align: left;
}

.dp-reorder-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-xs);
}

.dp-reorder-btn svg {
    flex-shrink: 0;
}

.dp-reorder-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

@keyframes dp-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dp-spin {
    animation: dp-spin 1s linear infinite;
}

/* Empty state */
.dp-orders-empty {
    padding: var(--dp-space-3xl) var(--dp-space-xl);
    text-align: center;
    color: var(--dp-medium);
    font-size: var(--dp-font-size-sm);
}

/* --- Mobile Cards --- */
.dp-orders-mobile {
    display: none;
}

.dp-order-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    margin-bottom: var(--dp-space-md);
    overflow: hidden;
}

.dp-order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dp-space-md) var(--dp-space-lg);
    cursor: pointer;
    transition: background var(--dp-transition);
}

.dp-order-card-header:hover {
    background: var(--dp-warm-sand-light);
}

.dp-order-card.is-expanded .dp-order-card-header {
    background: var(--dp-warm-sand-light);
}

.dp-order-card-summary {
    flex: 1;
    min-width: 0;
}

.dp-order-card-top {
    display: flex;
    align-items: center;
    gap: var(--dp-space-sm);
    margin-bottom: var(--dp-space-xs);
}

.dp-order-card-id {
    font-weight: 600;
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
}

.dp-order-card-meta {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.dp-order-card-amount {
    font-weight: 600;
    font-family: var(--dp-font-heading);
    color: var(--dp-primary-dark);
    font-size: var(--dp-font-size-sm);
}

.dp-order-card-body {
    display: none;
    padding: var(--dp-space-md) var(--dp-space-lg) var(--dp-space-lg);
    background: var(--dp-light-sand);
    border-top: 1px solid var(--dp-border);
}

.dp-order-card.is-expanded .dp-order-card-body {
    display: block;
}

.dp-order-card-actions {
    display: flex;
    gap: var(--dp-space-sm);
    flex-wrap: wrap;
}

/* Mobile product items */
.dp-mobile-product {
    padding: var(--dp-space-sm) 0;
    border-bottom: 1px solid var(--dp-border);
}

.dp-mobile-product:last-child {
    border-bottom: none;
}

.dp-mobile-product-name {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    margin-bottom: 2px;
}

.dp-mobile-product-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.dp-mobile-product-total {
    font-weight: 600;
    color: var(--dp-primary-dark);
}

/* --- Responsive: Order History --- */
@media (max-width: 991.98px) {
    .dp-orders-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dp-orders-search {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .dp-orders-desktop {
        display: none;
    }

    .dp-orders-mobile {
        display: block;
    }

    .dp-orders-title {
        font-size: var(--dp-font-size-xl);
    }
}


/* --------------------------------------------------------------------------
   BOOTSTRAP MODAL (required for PhocaCart add-to-cart popup)
   -------------------------------------------------------------------------- */
.modal {
    z-index: 1055;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden auto;
    outline: 0;
}

.modal.show {
    display: block;
}

.modal-dialog {
    width: auto;
    max-width: 480px;
    margin: 1.75rem auto;
    pointer-events: none;
    position: relative;
}

.modal.fade .modal-dialog {
    transition: transform 0.25s ease-out, opacity 0.25s ease;
    transform: translateY(-30px);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}

.modal-content {
    width: 100%;
    pointer-events: auto;
    background-color: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    outline: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.modal-backdrop {
    z-index: 1050;
    background-color: rgba(26, 26, 26, 0.5);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-header {
    padding: var(--dp-space-lg) var(--dp-space-lg) var(--dp-space-md);
    border-bottom: 1px solid var(--dp-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.modal-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-lg);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: var(--dp-primary-dark);
}

.modal-body {
    padding: var(--dp-space-lg);
    flex: 1 1 auto;
    position: relative;
}

.modal-footer {
    padding: 0 var(--dp-space-lg) var(--dp-space-sm);
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    margin-left: auto;
    color: var(--dp-primary-dark);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    border: 0;
    border-radius: var(--dp-radius-sm);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--dp-transition);
}

.btn-close:hover {
    opacity: 1;
}

/* PhocaCart add-to-cart modal buttons */
#phAddToCartPopup .ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-space-sm);
    padding: 0.625rem 1.25rem;
    border-radius: var(--dp-radius-sm);
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dp-transition);
    min-height: 44px;
    width: 100%;
    margin-bottom: var(--dp-space-sm);
}

#phAddToCartPopup .btn-success {
    background: var(--dp-success);
    border: none;
    color: var(--dp-white);
}

#phAddToCartPopup .btn-success:hover {
    background: #4a6a4a;
}

/* PhocaCart compare/wishlist modals */
#phAddToComparePopup .ph-btn,
#phRemoveFromComparePopup .ph-btn,
#phAddToWishListPopup .ph-btn,
#phRemoveFromWishListPopup .ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-space-sm);
    padding: 0.625rem 1.25rem;
    border-radius: var(--dp-radius-sm);
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    text-decoration: none;
    min-height: 44px;
    width: 100%;
    margin-bottom: var(--dp-space-sm);
}


/* --------------------------------------------------------------------------
   21b. ASK A QUESTION MODAL + IFRAME CONTENT
   -------------------------------------------------------------------------- */

/* Modal iframe fills the modal body */
#phAskAQuestionPopup .modal-body {
    padding: 0;
}

#phAskAQuestionPopup .modal-body iframe {
    width: 100%;
    min-height: 620px;
    border: none;
}

#phAskAQuestionPopup .modal-footer {
    display: none;
}

/* Question view inside iframe (component.php loads template.css) */
.pc-question-view {
    font-family: var(--dp-font-body);
    color: var(--dp-primary-dark);
    padding: var(--dp-space-lg);
}

.pc-question-view h1 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xl);
    font-weight: 400;
    letter-spacing: var(--dp-letter-spacing);
    color: var(--dp-primary-dark);
    margin: 0 0 var(--dp-space-sm);
}

.pc-question-view h2 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-lg);
    font-weight: 500;
    color: var(--dp-primary-dark);
    margin: 0 0 var(--dp-space-md);
}

.pc-question-view .ph-item-image-full-box {
    max-width: 200px;
    margin: 0 auto var(--dp-space-md);
}

.pc-question-view .ph-item-image-full-box img {
    width: 100%;
    height: auto;
    border-radius: var(--dp-radius-sm);
    border: 1px solid var(--dp-border);
}

/* Form labels */
.pc-question-view .control-label label,
.pc-question-view label {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dp-medium);
    margin-bottom: 4px;
    display: block;
}

/* Form inputs */
.pc-question-view input[type="text"],
.pc-question-view input[type="email"],
.pc-question-view input[type="tel"],
.pc-question-view textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-base);
    color: var(--dp-primary-dark);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    outline: none;
    transition: border-color var(--dp-transition);
    box-sizing: border-box;
}

.pc-question-view input[type="text"]:focus,
.pc-question-view input[type="email"]:focus,
.pc-question-view input[type="tel"]:focus,
.pc-question-view textarea:focus {
    border-color: var(--dp-warm-sand);
}

.pc-question-view textarea {
    min-height: 120px;
    resize: vertical;
}

/* Form groups */
.pc-question-view .control-group {
    margin-bottom: var(--dp-space-md);
}

/* Submit button */
.pc-question-view .btn-toolbar {
    margin-top: var(--dp-space-lg);
}

.pc-question-view .btn-toolbar .btn,
.pc-question-view .btn-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dp-white);
    background: var(--dp-primary-dark);
    border: none;
    border-radius: var(--dp-radius-sm);
    cursor: pointer;
    transition: background var(--dp-transition);
}

.pc-question-view .btn-toolbar .btn:hover,
.pc-question-view .btn-toolbar button:hover {
    background: var(--dp-warm-sand);
}

/* Ask question button on product page */
.ph-button-ask-question-box {
    margin-top: var(--dp-space-sm);
}

.ph-button-ask-question-box .ph-btn {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dp-medium);
    background: transparent;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    padding: 8px 16px;
    text-decoration: none;
    transition: all var(--dp-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ph-button-ask-question-box .ph-btn:hover {
    color: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
}

/* --------------------------------------------------------------------------
   22. JOOMLA CONTENT: BLOG VIEW
   -------------------------------------------------------------------------- */

/* Page title */
.dp-blog__title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-2xl);
    font-weight: 300;
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    margin-bottom: var(--dp-space-xl);
}

/* Category description */
.dp-blog__description {
    margin-bottom: var(--dp-space-2xl);
    font-size: var(--dp-font-size-base);
    line-height: var(--dp-line-height-base);
    color: var(--dp-medium);
}

.dp-blog__description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dp-radius-md);
    margin-bottom: var(--dp-space-md);
}

.dp-blog__empty {
    color: var(--dp-medium);
    font-size: var(--dp-font-size-base);
    padding: var(--dp-space-2xl);
    text-align: center;
}

/* 3-column grid with shared borders (matches product grid pattern) */
.dp-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
    background: var(--dp-white);
    margin-bottom: var(--dp-space-2xl);
}

/* Lead items: full-width single column */
.dp-blog__grid--lead {
    grid-template-columns: 1fr;
}

.dp-blog__cell {
    border-right: 1px solid var(--dp-border);
    border-bottom: 1px solid var(--dp-border);
}

.dp-blog__cell:nth-child(3n) {
    border-right: none;
}

/* Remove bottom border from last row */
.dp-blog__grid:not(.dp-blog__grid--lead) .dp-blog__cell:nth-last-child(-n+3):nth-child(3n+1),
.dp-blog__grid:not(.dp-blog__grid--lead) .dp-blog__cell:nth-last-child(-n+3):nth-child(3n+1) ~ .dp-blog__cell {
    border-bottom: none;
}

.dp-blog__grid--lead .dp-blog__cell:last-child {
    border-bottom: none;
}

/* Article card */
.dp-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--dp-white);
}

.dp-blog-card--unpublished {
    opacity: 0.6;
}

/* Card image */
.dp-blog-card__image {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--dp-light-sand);
}

.dp-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dp-transition-slow);
}

.dp-blog-card:hover .dp-blog-card__image img {
    transform: scale(1.03);
}

/* Card body */
.dp-blog-card__body {
    padding: var(--dp-space-lg) var(--dp-space-xl) var(--dp-space-xl);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Date */
.dp-blog-card__date {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    margin-bottom: var(--dp-space-sm);
}

/* Title */
.dp-blog-card__title {
    font-family: var(--dp-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 var(--dp-space-md);
}

.dp-blog-card__title a {
    color: var(--dp-primary-dark);
    text-decoration: none;
}

.dp-blog-card__title a:hover {
    color: var(--dp-warm-sand);
}

/* Intro text */
.dp-blog-card__text {
    font-size: var(--dp-font-size-sm);
    line-height: var(--dp-line-height-base);
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-lg);
    flex: 1;
}

.dp-blog-card__text p:last-child {
    margin-bottom: 0;
}

/* Read more link */
.dp-blog-card__readmore {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-xs);
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    font-weight: 500;
    color: var(--dp-primary-dark);
    text-decoration: none;
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    margin-top: auto;
    transition: color var(--dp-transition);
}

.dp-blog-card__readmore:hover {
    color: var(--dp-warm-sand);
}

.dp-blog-card__readmore svg {
    transition: transform var(--dp-transition);
}

.dp-blog-card__readmore:hover svg {
    transform: translateX(3px);
}

/* Pagination */
.dp-blog__pagination {
    margin-top: var(--dp-space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--dp-space-md);
}

.dp-blog__counter {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    margin: 0;
}

.dp-blog__pagination .pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--dp-space-xs);
}

.dp-blog__pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--dp-space-sm);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    text-decoration: none;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    transition: all var(--dp-transition);
}

.dp-blog__pagination .page-link:hover {
    background: var(--dp-light-sand);
    border-color: var(--dp-warm-sand);
}

.dp-blog__pagination .page-item.active .page-link {
    background: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
    color: var(--dp-white);
}

.dp-blog__pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* Responsive: 2 columns on tablet */
@media (max-width: 991.98px) {
    .dp-blog__grid:not(.dp-blog__grid--lead) {
        grid-template-columns: repeat(2, 1fr);
    }

    .dp-blog__cell:nth-child(3n) {
        border-right: 1px solid var(--dp-border);
    }

    .dp-blog__cell:nth-child(2n) {
        border-right: none;
    }

    /* Reset last-row bottom border for 2-col */
    .dp-blog__grid:not(.dp-blog__grid--lead) .dp-blog__cell:nth-last-child(-n+3):nth-child(3n+1),
    .dp-blog__grid:not(.dp-blog__grid--lead) .dp-blog__cell:nth-last-child(-n+3):nth-child(3n+1) ~ .dp-blog__cell {
        border-bottom: 1px solid var(--dp-border);
    }

    .dp-blog__grid:not(.dp-blog__grid--lead) .dp-blog__cell:nth-last-child(-n+2):nth-child(2n+1),
    .dp-blog__grid:not(.dp-blog__grid--lead) .dp-blog__cell:nth-last-child(-n+2):nth-child(2n+1) ~ .dp-blog__cell {
        border-bottom: none;
    }
}

/* Responsive: single column on mobile */
@media (max-width: 575.98px) {
    .dp-blog__grid,
    .dp-blog__grid:not(.dp-blog__grid--lead) {
        grid-template-columns: 1fr;
    }

    .dp-blog__cell {
        border-right: none !important;
    }

    .dp-blog__cell:last-child {
        border-bottom: none;
    }

    .dp-blog-card__body {
        padding: var(--dp-space-lg);
    }
}


/* --------------------------------------------------------------------------
   23. JOOMLA CONTENT: SINGLE ARTICLE
   -------------------------------------------------------------------------- */

.dp-article {
    max-width: 780px;
    margin: 0 auto;
}

/* Header */
.dp-article__header {
    margin-bottom: var(--dp-space-xl);
}

/* Meta line: date / author / category */
.dp-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    margin-bottom: var(--dp-space-md);
}

.dp-article__meta a {
    color: var(--dp-medium);
    text-decoration: none;
}

.dp-article__meta a:hover {
    color: var(--dp-primary-dark);
}

.dp-article__meta-sep {
    margin: 0 var(--dp-space-sm);
    color: var(--dp-border);
}

.dp-article__meta--below {
    margin-top: var(--dp-space-2xl);
    padding-top: var(--dp-space-lg);
    border-top: 1px solid var(--dp-border);
    margin-bottom: var(--dp-space-md);
}

.dp-article__meta--below span + span::before {
    content: '/';
    margin: 0 var(--dp-space-sm);
    color: var(--dp-border);
}

/* Title */
.dp-article__title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-3xl);
    font-weight: 300;
    line-height: var(--dp-line-height-heading);
    letter-spacing: -0.01em;
    color: var(--dp-primary-dark);
    margin: 0;
}

.dp-article__badge {
    display: inline-block;
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    color: var(--dp-warm-sand);
    background: var(--dp-warm-sand-light);
    padding: 2px 8px;
    border-radius: var(--dp-radius-sm);
    vertical-align: middle;
    margin-left: var(--dp-space-sm);
}

/* Tags */
.dp-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-space-sm);
    margin-bottom: var(--dp-space-xl);
}

.dp-article__tag {
    display: inline-block;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    color: var(--dp-medium);
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    transition: all var(--dp-transition);
}

.dp-article__tag:hover {
    color: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
}

/* Hero image */
.dp-article__hero {
    margin: 0 0 var(--dp-space-2xl);
    border-radius: var(--dp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--dp-border);
}

.dp-article__hero img {
    display: block;
    width: 100%;
    height: auto;
}

.dp-article__intro-image {
    float: right;
    width: 380px;
    margin: 0 0 var(--dp-space-lg) var(--dp-space-xl);
    border-radius: var(--dp-radius-lg);
}

.dp-article__intro-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dp-radius-md);
}

@media (max-width: 600px) {
    .dp-article__intro-image {
        float: none;
        width: 200px;
        margin: 0 auto var(--dp-space-xl);
    }
}

.dp-article__caption {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    padding: var(--dp-space-sm) var(--dp-space-md);
    background: var(--dp-light-sand);
    letter-spacing: var(--dp-letter-spacing);
}

/* Article body — typography */
.dp-article__body {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-base);
    line-height: 1.75;
    color: var(--dp-primary-dark);
}

.dp-article__body p {
    margin-bottom: 1.5em;
}

.dp-article__body h2 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xl);
    font-weight: 400;
    line-height: 1.3;
    color: var(--dp-primary-dark);
    margin: 2em 0 0.75em;
}

.dp-article__body h3 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-lg);
    font-weight: 500;
    line-height: 1.3;
    color: var(--dp-primary-dark);
    margin: 1.75em 0 0.6em;
}

.dp-article__body h4 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-base);
    font-weight: 600;
    line-height: 1.4;
    color: var(--dp-primary-dark);
    margin: 1.5em 0 0.5em;
}

.dp-article__body a {
    color: var(--dp-warm-sand);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--dp-transition);
}

.dp-article__body a:hover {
    color: var(--dp-warm-sand-hover);
}

.dp-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dp-radius-md);
    margin: var(--dp-space-lg) 0;
}

.dp-article__body blockquote {
    margin: var(--dp-space-xl) 0;
    padding: var(--dp-space-lg) var(--dp-space-xl);
    border-left: 3px solid var(--dp-warm-sand);
    background: var(--dp-light-sand);
    border-radius: 0 var(--dp-radius-md) var(--dp-radius-md) 0;
    font-style: italic;
    color: var(--dp-primary-dark-90);
}

.dp-article__body blockquote p:last-child {
    margin-bottom: 0;
}

.dp-article__body ul,
.dp-article__body ol {
    margin: 0 0 1.5em;
    padding-left: 1.5em;
}

.dp-article__body li {
    margin-bottom: 0.4em;
}

.dp-article__body hr {
    border: none;
    border-top: 1px solid var(--dp-border);
    margin: var(--dp-space-2xl) 0;
}

.dp-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--dp-space-xl) 0;
    font-size: var(--dp-font-size-sm);
}

.dp-article__body th,
.dp-article__body td {
    padding: var(--dp-space-sm) var(--dp-space-md);
    border: 1px solid var(--dp-border);
    text-align: left;
}

.dp-article__body th {
    background: var(--dp-light-sand);
    font-weight: 600;
    font-size: var(--dp-font-size-xs);
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    color: var(--dp-medium);
}

.dp-article__body code {
    font-size: 0.9em;
    background: var(--dp-light-sand);
    padding: 2px 6px;
    border-radius: var(--dp-radius-sm);
}

.dp-article__body pre {
    background: var(--dp-primary-dark);
    color: var(--dp-light-sand);
    padding: var(--dp-space-lg);
    border-radius: var(--dp-radius-md);
    overflow-x: auto;
    margin: var(--dp-space-xl) 0;
    font-size: var(--dp-font-size-sm);
    line-height: 1.6;
}

.dp-article__body pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Edit icons override */
.dp-article .icons {
    margin-bottom: var(--dp-space-md);
}

/* Links section */
.dp-article .content-links {
    margin: var(--dp-space-xl) 0;
}

.dp-article .content-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dp-space-sm);
}

.dp-article .content-list a {
    color: var(--dp-warm-sand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dp-article .content-list a:hover {
    color: var(--dp-warm-sand-hover);
}

/* Pagination (multi-page articles) */
.dp-article .pagination {
    display: flex;
    list-style: none;
    margin: var(--dp-space-2xl) 0 0;
    padding: 0;
    gap: var(--dp-space-xs);
}

.dp-article .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--dp-space-sm);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    text-decoration: none;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    transition: all var(--dp-transition);
}

.dp-article .pagination .page-link:hover {
    background: var(--dp-light-sand);
    border-color: var(--dp-warm-sand);
}

/* Responsive */
@media (max-width: 575.98px) {
    .dp-article__title {
        font-size: var(--dp-font-size-2xl);
    }

    .dp-article__body h2 {
        font-size: var(--dp-font-size-lg);
    }

    .dp-article__body h3 {
        font-size: var(--dp-font-size-base);
    }

    .dp-article__hero {
        border-radius: var(--dp-radius-md);
    }
}

/* Hide Joomla default footer */
.jd_footer {
    display: none;
}


/* --------------------------------------------------------------------------
   JDOWNLOADS — Downloads Listing Override
   -------------------------------------------------------------------------- */

.dp-downloads-page {
    padding: var(--dp-space-xl) 0;
}

.dp-downloads-page h1 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-2xl);
    font-weight: 400;
    letter-spacing: var(--dp-letter-spacing);
    color: var(--dp-primary-dark);
    margin-bottom: var(--dp-space-lg);
}

/* Meta bar (count) */
.dp-downloads-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dp-space-lg);
    padding-bottom: var(--dp-space-sm);
    border-bottom: 1px solid var(--dp-border);
}

.dp-downloads-count {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Grid layout — 3 columns, matching PhocaCart product grid */
.dp-downloads-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    overflow: hidden;
    background: var(--dp-white);
}

.dp-download-card {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--dp-border);
    border-bottom: 1px solid var(--dp-border);
    position: relative;
    transition: background var(--dp-transition);
}

.dp-download-card:nth-child(3n) {
    border-right: none;
}

.dp-download-card:hover {
    background: var(--dp-warm-sand-light);
}

/* Visual area — thumbnail or icon */
.dp-download-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: var(--dp-space-lg);
    flex-shrink: 0;
}

.dp-download-thumb {
    display: block;
    width: 100%;
    height: 100%;
}

.dp-download-thumb img {
    width: 100%;
    height: 140px;
    object-fit: contain;
    transition: transform var(--dp-transition-slow);
}

.dp-download-card:hover .dp-download-thumb img {
    transform: scale(1.03);
}

.dp-download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--dp-light-sand);
    color: var(--dp-medium);
    transition: background var(--dp-transition), color var(--dp-transition);
}

.dp-download-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.dp-download-card:hover .dp-download-icon {
    background: var(--dp-warm-sand-light);
    color: var(--dp-warm-sand);
}

.dp-download-icon--default svg {
    width: 32px;
    height: 32px;
}

/* Content section */
.dp-download-content {
    padding: 0 var(--dp-space-lg) var(--dp-space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dp-download-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 var(--dp-space-xs);
    color: var(--dp-primary-dark);
}

.dp-download-title a {
    color: var(--dp-primary-dark);
    text-decoration: none;
    transition: color var(--dp-transition);
}

.dp-download-title a:hover {
    color: var(--dp-warm-sand);
}

.dp-download-category {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-sm);
}

.dp-download-desc {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    line-height: var(--dp-line-height-base);
    margin-bottom: var(--dp-space-md);
    flex: 1;
}

/* Meta info (size, date, downloads) */
.dp-download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-space-md);
    margin-bottom: var(--dp-space-sm);
}

.dp-download-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    white-space: nowrap;
}

.dp-download-meta-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.dp-download-release {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    margin-bottom: var(--dp-space-sm);
}

/* Action buttons */
.dp-download-actions {
    display: flex;
    gap: var(--dp-space-sm);
    padding: var(--dp-space-md) var(--dp-space-lg) var(--dp-space-lg);
    margin-top: auto;
}

.dp-download-actions .dp-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
}

.dp-download-actions .dp-btn svg {
    flex-shrink: 0;
}

/* Pagination */
.dp-downloads-pagination {
    display: flex;
    justify-content: center;
    padding: var(--dp-space-xl) 0;
}

.dp-downloads-pagination .pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--dp-space-xs);
}

.dp-downloads-pagination .pagination li {
    display: inline-block;
}

.dp-downloads-pagination .pagination li a,
.dp-downloads-pagination .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--dp-space-sm);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    text-decoration: none;
    transition: all var(--dp-transition);
}

.dp-downloads-pagination .pagination li a:hover {
    border-color: var(--dp-warm-sand);
    color: var(--dp-warm-sand);
}

.dp-downloads-pagination .pagination li.active span {
    background: var(--dp-warm-sand);
    border-color: var(--dp-warm-sand);
    color: var(--dp-white);
}

.dp-downloads-pagination .pagination li.disabled span {
    opacity: 0.4;
    cursor: default;
}

/* Empty state */
.dp-downloads-empty {
    text-align: center;
    padding: var(--dp-space-3xl) var(--dp-space-xl);
    color: var(--dp-medium);
    font-size: var(--dp-font-size-lg);
}

/* --------------------------------------------------------------------------
   JDOWNLOADS — Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .dp-downloads-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dp-download-card:nth-child(3n) {
        border-right: 1px solid var(--dp-border);
    }

    .dp-download-card:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 576px) {
    .dp-downloads-grid {
        grid-template-columns: 1fr;
    }

    .dp-download-card {
        border-right: none !important;
    }

    .dp-download-actions {
        flex-direction: column;
    }

    .dp-downloads-page h1 {
        font-size: var(--dp-font-size-xl);
    }
}


/* --------------------------------------------------------------------------
   JDOWNLOADS — Categories Grid Layout
   -------------------------------------------------------------------------- */

/* Page wrapper (jd-item-page is set by JDownloads core) */
.jd-item-page {
    max-width: var(--dp-container-max);
    margin: 0 auto;
}

.jd-item-page h1 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-2xl);
    font-weight: 300;
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    color: var(--dp-primary-dark);
    margin-bottom: var(--dp-space-xl);
}

/* Header nav */
.dp-jd-header {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    margin-bottom: var(--dp-space-lg);
    padding-bottom: var(--dp-space-md);
    border-bottom: 1px solid var(--dp-border);
}

.dp-jd-header a {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    text-decoration: none;
    transition: color var(--dp-transition);
}

.dp-jd-header a:hover {
    color: var(--dp-primary-dark);
}

.dp-jd-header .dp-jd-listbox {
    margin-left: auto;
}

.dp-jd-header .dp-jd-listbox select,
.dp-jd-header .dp-jd-listbox .form-select {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    padding: 0.35rem 2rem 0.35rem 0.75rem;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    background-color: var(--dp-white);
    color: var(--dp-primary-dark);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b7e6e' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    cursor: pointer;
}

/* Search box */
.dp-jd-search {
    margin-bottom: var(--dp-space-lg);
}

.dp-jd-search form {
    display: flex;
    gap: 0;
    max-width: 480px;
}

.dp-jd-search input[type="text"] {
    flex: 1;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    padding: 0.6rem 1rem;
    border: 1px solid var(--dp-border);
    border-right: none;
    border-radius: var(--dp-radius-sm) 0 0 var(--dp-radius-sm);
    outline: none;
    transition: border-color var(--dp-transition);
}

.dp-jd-search input[type="text"]:focus {
    border-color: var(--dp-warm-sand);
}

.dp-jd-search button {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.6rem 1.25rem;
    background: var(--dp-primary-dark);
    color: var(--dp-white);
    border: 1px solid var(--dp-primary-dark);
    border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
    cursor: pointer;
    transition: background var(--dp-transition);
}

.dp-jd-search button:hover {
    background: var(--dp-warm-sand-hover);
    border-color: var(--dp-warm-sand-hover);
}

/* Categories grid */
.dp-jd-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dp-space-xl);
    margin-bottom: var(--dp-space-xl);
}

/* Category card */
.dp-jd-cat-card {
    position: relative;
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    overflow: hidden;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.dp-jd-cat-card:hover {
    border-color: var(--dp-warm-sand);
    box-shadow: 0 12px 40px rgba(134, 134, 120, 0.15);
    transform: translateY(-4px);
}

/* Visual area with warm gradient */
.dp-jd-cat-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dp-space-2xl) var(--dp-space-lg);
    background: linear-gradient(145deg, var(--dp-light-sand) 0%, #ece7e0 100%);
    position: relative;
}

.dp-jd-cat-visual::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--dp-space-lg);
    right: var(--dp-space-lg);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dp-border), transparent);
}

.dp-jd-cat-svg {
    width: 52px;
    height: 52px;
    color: var(--dp-warm-sand);
    opacity: 0.7;
    transition: opacity 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.dp-jd-cat-card:hover .dp-jd-cat-svg {
    opacity: 1;
    color: var(--dp-primary-dark);
    transform: scale(1.1);
}

/* Body area */
.dp-jd-cat-body {
    padding: var(--dp-space-lg) var(--dp-space-lg) var(--dp-space-xl);
    text-align: center;
}

.dp-jd-cat-title {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-base);
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0 0 var(--dp-space-sm) 0;
}

.dp-jd-cat-title a {
    color: var(--dp-primary-dark);
    text-decoration: none;
    transition: color var(--dp-transition);
}

.dp-jd-cat-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dp-jd-cat-card:hover .dp-jd-cat-title a {
    color: var(--dp-warm-sand-hover);
}

.dp-jd-cat-count {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dp-medium);
}

/* Footer bar */
.dp-jd-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--dp-space-md);
    border-top: 1px solid var(--dp-border);
    margin-top: var(--dp-space-lg);
}

.dp-jd-footer a {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-medium);
    text-decoration: none;
}

.dp-jd-footer a:hover {
    color: var(--dp-primary-dark);
}

/* --------------------------------------------------------------------------
   JDOWNLOADS — Category Info Block (single category page)
   -------------------------------------------------------------------------- */
.dp-jd-cat-info {
    background: var(--dp-light-sand);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: var(--dp-space-xl);
    margin-bottom: var(--dp-space-xl);
}

.dp-jd-cat-info-desc {
    font-size: var(--dp-font-size-base);
    line-height: 1.7;
    color: var(--dp-primary-dark);
    margin-bottom: var(--dp-space-md);
}

.dp-jd-cat-info-stats {
    display: flex;
    gap: var(--dp-space-xl);
}

.dp-jd-cat-info-stats span {
    font-size: var(--dp-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dp-medium);
}

/* Subheader (pagination row) */
.dp-jd-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--dp-space-md);
    border-bottom: 1px solid var(--dp-border);
    margin-bottom: var(--dp-space-lg);
}

.dp-jd-meta-text {
    font-size: var(--dp-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dp-medium);
}

/* --------------------------------------------------------------------------
   JDOWNLOADS — Subcategories Grid
   -------------------------------------------------------------------------- */
.dp-jd-subcats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--dp-space-md);
    margin-bottom: var(--dp-space-xl);
}

.dp-jd-subcat-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-jd-subcat-card:hover {
    border-color: var(--dp-warm-sand);
    box-shadow: var(--dp-shadow-sm);
}

.dp-jd-subcat-link {
    display: flex;
    align-items: center;
    gap: var(--dp-space-md);
    padding: var(--dp-space-md) var(--dp-space-lg);
    text-decoration: none;
    color: inherit;
}

.dp-jd-subcat-icon {
    color: var(--dp-warm-sand);
    flex-shrink: 0;
}

.dp-jd-subcat-title {
    font-size: var(--dp-font-size-sm);
    font-weight: 500;
    color: var(--dp-primary-dark);
    flex: 1;
}

.dp-jd-subcat-count {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   JDOWNLOADS — Files List (inside a category)
   -------------------------------------------------------------------------- */
.dp-jd-files-section {
    margin-top: var(--dp-space-lg);
}

.dp-jd-files-heading {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dp-warm-sand);
    padding-bottom: var(--dp-space-sm);
    border-bottom: 1px solid var(--dp-border);
    margin-bottom: 0;
    position: relative;
}

.dp-jd-files-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 32px;
    height: 1px;
    background: var(--dp-primary-dark);
}

.dp-jd-files-sort {
    margin-bottom: var(--dp-space-md);
}

.dp-jd-files-sort select,
.dp-jd-files-sort .form-select {
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-sm);
    padding: 0.35rem 2rem 0.35rem 0.75rem;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    background-color: var(--dp-white);
    color: var(--dp-primary-dark);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b7e6e' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    cursor: pointer;
}

.dp-jd-file-row {
    display: grid;
    grid-template-columns: 48px 1fr auto auto auto auto;
    align-items: center;
    gap: var(--dp-space-md);
    padding: var(--dp-space-md) 0;
    border-bottom: 1px solid var(--dp-border);
    transition: background var(--dp-transition);
}

.dp-jd-file-row:hover {
    background: var(--dp-light-sand);
    margin-left: calc(-1 * var(--dp-space-md));
    margin-right: calc(-1 * var(--dp-space-md));
    padding-left: var(--dp-space-md);
    padding-right: var(--dp-space-md);
    border-radius: var(--dp-radius-sm);
}

.dp-jd-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-jd-file-icon img {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.dp-jd-file-info {
    min-width: 0;
}

.dp-jd-file-title {
    font-size: var(--dp-font-size-base);
    font-weight: 500;
    color: var(--dp-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-jd-file-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dp-transition);
}

.dp-jd-file-title a:hover {
    color: var(--dp-warm-sand-hover);
}

.dp-jd-file-assoc {
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
}

.dp-jd-file-assoc:empty {
    display: none;
}

.dp-jd-file-meta {
    text-align: right;
    white-space: nowrap;
}

.dp-jd-file-meta-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dp-warm-sand);
    line-height: 1;
    margin-bottom: 2px;
}

.dp-jd-file-meta span:last-child {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-primary-dark);
}

.dp-jd-file-action {
    text-align: center;
}

.dp-jd-file-action a {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-xs);
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.45rem 1rem;
    background: var(--dp-primary-dark);
    color: var(--dp-white);
    border: 1px solid var(--dp-primary-dark);
    border-radius: var(--dp-radius-sm);
    text-decoration: none;
    transition: all var(--dp-transition);
}

.dp-jd-file-action a:hover {
    background: var(--dp-warm-sand-hover);
    border-color: var(--dp-warm-sand-hover);
}

/* Pagination (shared by all JDownloads views) */
.dp-jd-pagination {
    display: flex;
    align-items: center;
    gap: var(--dp-space-xs);
}

.dp-jd-pagination .pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.dp-jd-pagination .pagination li a,
.dp-jd-pagination .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--dp-space-sm);
    font-size: var(--dp-font-size-xs);
    color: var(--dp-medium);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    text-decoration: none;
    transition: all var(--dp-transition);
}

.dp-jd-pagination .pagination li a:hover {
    color: var(--dp-primary-dark);
    border-color: var(--dp-warm-sand);
    background: var(--dp-light-sand);
}

.dp-jd-pagination .pagination li.active span {
    background: var(--dp-primary-dark);
    border-color: var(--dp-primary-dark);
    color: var(--dp-white);
}

/* File row responsive */
@media (max-width: 1024px) {
    .dp-jd-file-row {
        grid-template-columns: 40px 1fr auto auto;
    }

    .dp-jd-file-hits {
        display: none;
    }
}

@media (max-width: 768px) {
    .dp-jd-file-row {
        grid-template-columns: 36px 1fr auto;
        gap: var(--dp-space-sm);
    }

    .dp-jd-file-date,
    .dp-jd-file-size,
    .dp-jd-file-hits {
        display: none;
    }

    .dp-jd-subheader {
        flex-direction: column;
        gap: var(--dp-space-sm);
        align-items: flex-start;
    }
}

/* JDownloads header nav buttons (Overview / Search) */
.jd-item-page .jdbutton,
.jd-item-page .jd-menu-icon + span,
.jd-item-page a > .jdbutton {
    display: inline-block;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 1.25rem;
    color: var(--dp-medium);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    text-decoration: none;
    transition: all var(--dp-transition);
}

.jd-item-page a:hover > .jdbutton,
.jd-item-page .jdbutton:hover {
    color: var(--dp-primary-dark);
    border-color: var(--dp-warm-sand);
    background: var(--dp-light-sand);
}

/* Hide JDownloads default color/size classes */
.jd-item-page .jdbutton.btn-default,
.jd-item-page .jdbutton.btn-sm,
.jd-item-page .jdbutton.btn-mini,
.jd-item-page .jdbutton.btn-primary {
    all: unset;
    display: inline-block;
    font-family: var(--dp-font-body);
    font-size: var(--dp-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 1.25rem;
    color: var(--dp-medium);
    background: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-sm);
    cursor: pointer;
    transition: all var(--dp-transition);
}

/* Responsive */
@media (max-width: 768px) {
    .dp-jd-categories-grid {
        grid-template-columns: 1fr;
        gap: var(--dp-space-md);
    }

    .dp-jd-cat-card {
        display: flex;
        flex-direction: row;
    }

    .dp-jd-cat-visual {
        padding: var(--dp-space-lg);
        min-width: 80px;
    }

    .dp-jd-cat-visual::after {
        display: none;
    }

    .dp-jd-cat-svg {
        width: 36px;
        height: 36px;
    }

    .dp-jd-cat-body {
        text-align: left;
        display: flex;
        align-items: center;
        gap: var(--dp-space-md);
        padding: var(--dp-space-md) var(--dp-space-lg);
    }

    .dp-jd-cat-title {
        margin: 0;
    }

    .dp-jd-header {
        flex-wrap: wrap;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .dp-jd-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   22. ORDER DETAIL PAGE (ph-idnr-*)
   ============================================================ */

/* Main container */
.ph-idnr-box {
    max-width: var(--dp-container-max);
    margin: 0 auto;
    padding: var(--dp-space-xl) 0;
}

.ph-idnr-box > table {
    width: 100%;
    border-collapse: collapse;
}

/* Page heading */
.ph-idnr-box h1 {
    font-family: var(--dp-font-heading);
    font-size: var(--dp-font-size-2xl);
    font-weight: 300;
    letter-spacing: var(--dp-letter-spacing);
    color: var(--dp-primary-dark);
    margin: 0 0 var(--dp-space-md) 0;
    text-transform: uppercase;
}

/* Order info text */
.ph-idnr-box div {
    font-size: var(--dp-font-size-base);
    line-height: var(--dp-line-height-base);
    color: var(--dp-primary-dark);
}

/* Billing & shipping address boxes */
.ph-idnr-billing-box,
.ph-idnr-shipping-box {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    vertical-align: top;
    padding: 0;
}

.ph-idnr-billing-box-in,
.ph-idnr-shipping-box-in {
    padding: var(--dp-space-lg);
    font-size: var(--dp-font-size-sm);
    line-height: 1.7;
    color: var(--dp-primary-dark);
}

/* Products table */
.ph-idnr-box-in {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--dp-space-xl);
    font-size: var(--dp-font-size-sm);
}

/* Product table header */
.ph-idnr-header-product {
    background-color: var(--dp-primary-dark);
    color: var(--dp-white);
    font-weight: 500;
    letter-spacing: var(--dp-letter-spacing);
    text-transform: uppercase;
    font-size: var(--dp-font-size-xs);
}

.ph-idnr-header-product td {
    padding: var(--dp-space-sm) var(--dp-space-md);
}

/* Product table body rows */
.ph-idnr-body-product td {
    padding: var(--dp-space-sm) var(--dp-space-md);
    border-bottom: 1px solid var(--dp-border);
    vertical-align: top;
}

.ph-idnr-body-product:last-child td {
    border-bottom: none;
}

/* Separator rows */
.ph-idnr-sep-horizontal {
    border-top: 1px solid var(--dp-border);
}

.ph-idnr-sep-horizontal td {
    padding: 0;
    height: var(--dp-space-sm);
}

/* Total section */
.ph-idnr-total {
    font-weight: 500;
}

.ph-idnr-total td {
    padding: var(--dp-space-xs) var(--dp-space-md);
}

/* "To pay" highlight row */
.ph-idnr-to-pay {
    background-color: var(--dp-warm-sand-light);
    font-weight: 600;
    font-size: var(--dp-font-size-lg);
    padding: var(--dp-space-md) !important;
}

.ph-idnr-to-pay-value {
    background-color: var(--dp-warm-sand-light);
    font-weight: 600;
    font-size: var(--dp-font-size-lg);
    text-align: right;
    padding: var(--dp-space-md) !important;
}

/* Description blocks */
.ph-idnr-body-desc {
    font-size: var(--dp-font-size-sm);
    color: var(--dp-warm-sand);
}

.ph-idnr-hr-small {
    height: var(--dp-space-sm);
}

/* Tax recapitulation table */
.ph-idnr-tax-rec {
    width: 70%;
    border-collapse: collapse;
    margin-top: var(--dp-space-md);
    font-size: var(--dp-font-size-sm);
}

.ph-idnr-tax-rec-td {
    border: 1px solid var(--dp-border);
    padding: var(--dp-space-xs) var(--dp-space-sm);
}

/* Right-aligned cells for prices */
.ph-idnr-box-in td[style*="text-align:right"],
.ph-idnr-box-in td[style*="text-align: right"] {
    font-variant-numeric: tabular-nums;
}

/* Responsive: stack billing/shipping on small screens */
@media (max-width: 768px) {
    .ph-idnr-box > table td[colspan="5"],
    .ph-idnr-box > table td[colspan="2"] {
        display: block;
        width: 100% !important;
    }

    .ph-idnr-billing-box,
    .ph-idnr-shipping-box {
        display: block;
        width: 100% !important;
        margin-bottom: var(--dp-space-md);
    }

    .ph-idnr-box-in {
        font-size: var(--dp-font-size-xs);
    }

    .ph-idnr-box h1 {
        font-size: var(--dp-font-size-xl);
    }
}