@charset "UTF-8";
/*
Theme Name:  Dropt Beer
Theme URI:   https://dropt.beer
Author:      Dropt Studio
Author URI:  https://dropt.beer
Description: Custom dark SaaS theme for dropt.beer — glassmorphism nav, hero orbs, WooCommerce ready, full SEO system built in.
Version:     1.0.0
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: droptbeer
Tags:        dark, custom-menu, custom-logo, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready, blog, e-commerce
*/


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Brand palette */
    --db-bg:              #0a0a12;
    --db-bg-2:            #0f0f1a;
    --db-bg-3:            #13131f;
    --db-surface:         rgba(255,255,255,0.04);
    --db-surface-hover:   rgba(255,255,255,0.08);
    --db-border:          rgba(255,255,255,0.08);
    --db-border-hover:    rgba(108,92,231,0.5);

    /* Accent */
    --db-purple:          #6c5ce7;
    --db-purple-light:    #a29bfe;
    --db-cyan:            #00cec9;
    --db-cyan-light:      #81ecec;
    --db-yellow:          #FFC400;
    --db-grad:            linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    --db-grad-subtle:     linear-gradient(135deg, rgba(108,92,231,0.15) 0%, rgba(0,206,201,0.15) 100%);

    /* Text */
    --db-text:            #e8e8f0;
    --db-text-muted:      #8888aa;
    --db-text-faint:      #555570;

    /* Typography */
    --db-font-heading:    'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
    --db-font-body:       'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --db-font-size:       1.0625rem;
    --db-line-height:     1.75;

    /* Glassmorphism */
    --db-glass-bg:        rgba(255,255,255,0.05);
    --db-glass-border:    rgba(255,255,255,0.1);
    --db-glass-blur:      blur(20px);
    --db-glass-shadow:    0 8px 32px rgba(0,0,0,0.4);

    /* Layout */
    --db-nav-height:      72px;
    --db-max-width:       1200px;
    --db-wide-width:      1400px;
    --db-content-width:   960px;

    /* Radius */
    --db-radius-sm:       8px;
    --db-radius-md:       16px;
    --db-radius-lg:       24px;
    --db-radius-pill:     100px;

    /* Transitions */
    --db-ease:            cubic-bezier(0.4,0,0.2,1);
    --db-dur:             0.3s;
}


/* ==========================================================================
   2. CSS RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

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

button,
input,
select,
textarea { font: inherit; }

a { color: inherit; }

ul,
ol { list-style: none; }


/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */
html,
body {
    background-color: var(--db-bg);
    color: var(--db-text);
    font-family: var(--db-font-body);
    font-size: var(--db-font-size);
    line-height: var(--db-line-height);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--db-font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--db-text);
}

h1 { font-size: clamp(2rem,   5vw, 4rem);   }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem,3vw, 1.75rem);}
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem;  }
h6 { font-size: 1rem;    }

p { margin-bottom: 1.25em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--db-purple-light);
    text-decoration: underline;
    text-decoration-color: rgba(162,155,254,0.3);
    transition: color var(--db-dur) var(--db-ease);
}
a:hover { color: var(--db-cyan); text-decoration-color: rgba(0,206,201,0.4); }

strong, b { font-weight: 600; }
em, i     { font-style: italic; }

blockquote {
    border-left: 3px solid var(--db-purple);
    padding-left: 1.25rem;
    color: var(--db-text-muted);
    font-style: italic;
    margin: 1.5rem 0;
}

code {
    background: var(--db-bg-2);
    border: 1px solid var(--db-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.875em;
}

pre {
    background: var(--db-bg-2);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    padding: 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
pre code { background: none; border: none; padding: 0; font-size: 0.875rem; }

hr {
    border: none;
    border-top: 1px solid var(--db-border);
    margin: 2rem 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
th, td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--db-border);
    font-size: 0.9rem;
}
th {
    font-family: var(--db-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

ul, ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}
ul { list-style: disc; }
ol { list-style: decimal; }
li { margin-bottom: 0.4rem; }

img { border-radius: var(--db-radius-sm); }

figure { margin: 1.5rem 0; }
figcaption {
    font-size: 0.8rem;
    color: var(--db-text-faint);
    margin-top: 0.5rem;
    text-align: center;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
#page.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--db-bg);
}

#content.site-content {
    flex: 1;
}

.site-main {
    margin-top: 0;
    padding-top: 0;
}

/* Default block width */
.entry-content > *,
.page-content > * {
    max-width: var(--db-content-width);
    margin-left: auto;
    margin-right: auto;
}

.entry-content > *.alignwide,
.page-content  > *.alignwide {
    max-width: var(--db-wide-width);
}

.alignwide  { max-width: var(--db-wide-width) !important; }

.alignfull {
    max-width:    100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
}

.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.alignleft   { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright  { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }


/* ==========================================================================
   5. ACCESSIBILITY
   ========================================================================== */
.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
}
.screen-reader-text:focus {
    clip: auto !important;
    display: block;
    height: auto; width: auto;
    background: var(--db-bg-2);
    color: var(--db-text);
    padding: 14px 20px;
    z-index: 100000;
    font-size: 0.875rem;
    top: 5px; left: 5px;
    border-radius: var(--db-radius-sm);
    border: 1px solid var(--db-border);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   6. STICKY GLASSMORPHISM NAV
   ========================================================================== */
#masthead {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(10,10,18,0.75);
    backdrop-filter: var(--db-glass-blur);
    -webkit-backdrop-filter: var(--db-glass-blur);
    border-bottom: 1px solid var(--db-border);
    box-shadow: 0 1px 40px rgba(0,0,0,0.5);
    transition: background var(--db-dur) var(--db-ease),
                box-shadow var(--db-dur) var(--db-ease);
    min-height: var(--db-nav-height);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 clamp(16px,4vw,48px);
}

#masthead.scrolled {
    background: rgba(10,10,18,0.97);
    box-shadow: 0 2px 60px rgba(0,0,0,0.7);
}

/* Branding */
.site-branding { flex: 1; min-width: 0; }

.site-title,
.site-title a {
    font-family: var(--db-font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
    background: var(--db-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-description {
    font-size: 0.72rem;
    color: var(--db-text-faint);
    letter-spacing: 0.04em;
}

.site-logo img,
.custom-logo { max-height: 44px; width: auto; }

/* Nav */
#site-navigation { display: flex; align-items: center; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu > li > a {
    font-family: var(--db-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--db-text-muted);
    padding: 8px 14px;
    border-radius: var(--db-radius-sm);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease),
                background var(--db-dur) var(--db-ease);
    display: block;
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a {
    color: var(--db-text);
    background: var(--db-surface);
}

/* Dropdowns */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(15,15,26,0.98);
    backdrop-filter: var(--db-glass-blur);
    -webkit-backdrop-filter: var(--db-glass-blur);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-md);
    box-shadow: var(--db-glass-shadow);
    padding: 8px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--db-dur) var(--db-ease);
    list-style: none;
    z-index: 100;
}

.nav-menu li { position: relative; }

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu .sub-menu a {
    font-size: 0.875rem;
    color: var(--db-text-muted);
    padding: 10px 18px;
    text-decoration: none;
    display: block;
    transition: color var(--db-dur) var(--db-ease),
                background var(--db-dur) var(--db-ease);
}
.nav-menu .sub-menu a:hover { color: var(--db-cyan); background: var(--db-surface); }

/* Mobile toggle button — full styles in Section 25 */

/* Search toggle */
.nav-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--db-text-muted);
    padding: 8px 10px;
    border-radius: var(--db-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease),
                background var(--db-dur) var(--db-ease);
}
.nav-search-toggle:hover { color: var(--db-purple); background: var(--db-surface); }

.nav-search-form {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(15,15,26,0.98);
    backdrop-filter: var(--db-glass-blur);
    -webkit-backdrop-filter: var(--db-glass-blur);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-md);
    padding: 16px;
    box-shadow: var(--db-glass-shadow);
    min-width: 300px;
    z-index: 100;
}
.nav-search-form.active { display: block; }

.nav-search-form input[type="search"] {
    width: 100%;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    color: var(--db-text);
    padding: 10px 14px;
    font-family: var(--db-font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--db-dur) var(--db-ease);
}
.nav-search-form input[type="search"]:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.2);
}

/* Desktop nav: always visible on desktop */
@media (min-width: 769px) {
    #site-navigation { display: flex !important; }
}
/* Mobile: desktop nav hidden — drawer handles navigation */
@media (max-width: 768px) {
    #site-navigation { display: none !important; }
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.db-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--db-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--db-radius-pill);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--db-dur) var(--db-ease);
    white-space: nowrap;
}

.db-btn--primary {
    background: var(--db-grad);
    color: #fff;
    box-shadow: 0 4px 24px rgba(108,92,231,0.35);
}
.db-btn--primary:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(108,92,231,0.5);
}

.db-btn--ghost {
    background: transparent;
    color: var(--db-text-muted);
    border: 1px solid var(--db-border);
}
.db-btn--ghost:hover {
    color: var(--db-text);
    border-color: var(--db-border-hover);
    background: var(--db-surface);
    text-decoration: none;
    transform: translateY(-2px);
}


/* ==========================================================================
   8. HERO SECTION
   ========================================================================== */
.db-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--db-bg);
}

/* Subtle grid overlay */
.db-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(108,92,231,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108,92,231,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* Floating orbs */
.db-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: db-float 8s ease-in-out infinite;
}
.db-hero__orb--1 {
    width: 600px; height: 600px;
    background: rgba(108,92,231,0.18);
    top: -200px; right: -150px;
    animation-delay: 0s;
}
.db-hero__orb--2 {
    width: 400px; height: 400px;
    background: rgba(0,206,201,0.12);
    bottom: -100px; left: -100px;
    animation-delay: -3s;
}
.db-hero__orb--3 {
    width: 300px; height: 300px;
    background: rgba(255,196,0,0.06);
    top: 40%; left: 40%;
    animation-delay: -5s;
}

@keyframes db-float {
    0%, 100% { transform: translateY(0) scale(1);   }
    50%       { transform: translateY(-30px) scale(1.05); }
}

.db-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: clamp(40px,10vw,120px) clamp(16px,4vw,48px);
    max-width: 860px;
}

.db-hero__eyebrow {
    display: inline-block;
    font-family: var(--db-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--db-purple-light);
    background: rgba(108,92,231,0.1);
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: var(--db-radius-pill);
    padding: 6px 16px;
    margin-bottom: 24px;
}

.db-hero__title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--db-text);
    margin-bottom: 24px;
}

.db-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--db-text-muted);
    max-width: 580px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

.db-hero__cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   9. STATS BAR
   ========================================================================== */
.db-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
    gap: 1px;
    background: var(--db-border);
    border-top: 1px solid var(--db-border);
    border-bottom: 1px solid var(--db-border);
}

.db-stat {
    background: var(--db-bg-2);
    padding: clamp(20px,4vw,40px) 24px;
    text-align: center;
    transition: background var(--db-dur) var(--db-ease);
}
.db-stat:hover { background: var(--db-bg-3); }

.db-stat__number {
    font-family: var(--db-font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    background: var(--db-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 6px;
}

.db-stat__label {
    font-size: 0.8rem;
    color: var(--db-text-faint);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ==========================================================================
   10. SECTIONS & CARDS
   ========================================================================== */
.db-section {
    padding: clamp(60px,10vw,120px) clamp(16px,4vw,48px);
    max-width: var(--db-max-width);
    margin: 0 auto;
}

.db-section--full {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

.db-section__header {
    text-align: center;
    margin-bottom: clamp(40px,6vw,72px);
}

.db-section__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--db-purple-light);
    margin-bottom: 12px;
}

.db-section__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--db-text);
    margin-bottom: 16px;
}

.db-section__subtitle {
    font-size: 1.05rem;
    color: var(--db-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Card grid */
.db-card-grid { display: grid; gap: 24px; }
.db-card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
.db-card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(380px,1fr)); }

/* Glass card */
.db-card {
    background: var(--db-glass-bg);
    border: 1px solid var(--db-glass-border);
    border-radius: var(--db-radius-lg);
    padding: clamp(24px,4vw,36px);
    backdrop-filter: var(--db-glass-blur);
    -webkit-backdrop-filter: var(--db-glass-blur);
    transition: transform var(--db-dur) var(--db-ease),
                border-color var(--db-dur) var(--db-ease),
                box-shadow var(--db-dur) var(--db-ease);
}
.db-card:hover {
    transform: translateY(-6px);
    border-color: var(--db-border-hover);
    box-shadow: 0 20px 60px rgba(108,92,231,0.15);
}

.db-card__icon {
    font-size: 2rem;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    width: 52px; height: 52px;
    background: var(--db-grad-subtle);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: var(--db-radius-md);
    justify-content: center;
}

.db-card__title {
    font-family: var(--db-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--db-text);
    margin-bottom: 10px;
}
.db-card__title a {
    color: var(--db-text);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease);
}
.db-card__title a:hover { color: var(--db-purple-light); }

.db-card__body {
    font-size: 0.9rem;
    color: var(--db-text-muted);
    line-height: 1.7;
    margin-bottom: 0;
}


/* ==========================================================================
   11. GRADIENT TEXT UTILITY
   ========================================================================== */
.db-gradient-text {
    background: var(--db-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================================
   12. ENTRY HEADER  —  Option C hybrid
       Dark bar + #FFC400 bottom stripe + white uppercase title
   ========================================================================== */
.entry-header {
    background: var(--db-bg-2);
    border-bottom: 3px solid var(--db-yellow);
    padding: 0.75rem clamp(16px,4vw,48px);
    margin-bottom: 0;
}

.entry-header::before,
.entry-header::after { display: none !important; }

.entry-header > * {
    max-width: var(--db-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.entry-title {
    font-family: var(--db-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--db-text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

.entry-title a {
    color: var(--db-text);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease);
}
.entry-title a:hover { color: var(--db-yellow); }

/* Featured image sits flush below the bar */
.entry-header + .post-thumbnail,
.post-thumbnail { margin-top: 0; }

.post-thumbnail img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}


/* ==========================================================================
   13. ENTRY CONTENT
   ========================================================================== */
.db-content-wrap {
    max-width: var(--db-content-width);
    margin: clamp(32px,4vw,60px) auto;
    padding: 0 24px;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 0.8rem;
    color: var(--db-text-faint);
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--db-border);
}
.entry-meta a { color: var(--db-text-faint); text-decoration: none; }
.entry-meta a:hover { color: var(--db-purple-light); }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--db-font-heading);
    color: var(--db-text);
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.entry-footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--db-border);
    font-size: 0.8rem;
    color: var(--db-text-faint);
}
.entry-footer a { color: var(--db-text-faint); }
.entry-footer a:hover { color: var(--db-purple-light); }

/* Category / tag links */
.cat-links a,
.tags-links a {
    display: inline-block;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-pill);
    padding: 3px 10px;
    font-size: 0.75rem;
    color: var(--db-text-muted);
    text-decoration: none;
    margin: 2px;
    transition: all var(--db-dur) var(--db-ease);
}
.cat-links a:hover,
.tags-links a:hover {
    border-color: var(--db-purple);
    color: var(--db-purple-light);
}


/* ==========================================================================
   14. SHARE BUTTONS
   ========================================================================== */
.custom-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--db-border);
}

.custom-share a,
.custom-share button.copy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--db-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--db-radius-pill);
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    color: var(--db-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--db-dur) var(--db-ease);
}
.custom-share a:hover,
.custom-share button.copy-link:hover {
    background: var(--db-surface-hover);
    border-color: var(--db-border-hover);
    color: var(--db-text);
    transform: translateY(-2px);
    text-decoration: none;
}


/* ==========================================================================
   15. POST NAVIGATION
   ========================================================================== */
.post-navigation {
    border-top: 1px solid var(--db-border);
    padding-top: 40px;
    margin-top: 40px;
    max-width: var(--db-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px,4vw,48px);
    padding-right: clamp(16px,4vw,48px);
    display: flex;
    gap: 24px;
}
.post-navigation .nav-previous,
.post-navigation .nav-next { flex: 1; }
.post-navigation .nav-next { text-align: right; }

.post-navigation .meta-nav {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--db-text-faint);
    display: block;
    margin-bottom: 6px;
}
.post-navigation .post-title {
    font-family: var(--db-font-heading);
    font-size: 0.95rem;
    color: var(--db-text-muted);
}
.post-navigation a { text-decoration: none; }
.post-navigation a:hover .post-title { color: var(--db-purple-light); }


/* ==========================================================================
   16. AUTHOR BIO
   ========================================================================== */
.author-bio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--db-glass-bg);
    border: 1px solid var(--db-glass-border);
    border-radius: var(--db-radius-lg);
    padding: 28px;
    margin: 40px auto;
    max-width: var(--db-content-width);
}

.author-bio .avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.author-bio__name {
    font-family: var(--db-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--db-text);
    margin-bottom: 6px;
}
.author-bio__desc { font-size: 0.875rem; color: var(--db-text-muted); }


/* ==========================================================================
   17. COMMENTS
   ========================================================================== */
.comments-area {
    max-width: var(--db-content-width);
    margin: 0 auto;
    padding: 0 clamp(16px,4vw,48px) clamp(60px,8vw,100px);
}

.comments-title,
.comment-reply-title {
    font-family: var(--db-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--db-text);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--db-border);
}

.comment-list { list-style: none; padding: 0; }

.comment-body {
    background: var(--db-glass-bg);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-md);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.comment-author .fn {
    font-family: var(--db-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--db-text);
    font-style: normal;
}
.comment-metadata a,
.comment-metadata time {
    font-size: 0.78rem;
    color: var(--db-text-faint);
    text-decoration: none;
}
.comment-content p { font-size: 0.9rem; color: var(--db-text-muted); margin-top: 10px; }

.comment-reply-link {
    font-size: 0.78rem;
    color: var(--db-text-faint);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease);
}
.comment-reply-link:hover { color: var(--db-purple-light); }

.children { padding-left: 24px; list-style: none; }


/* ==========================================================================
   18. PAGINATION
   ========================================================================== */
.pagination,
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 40px 0; }

.page-numbers,
.nav-links a,
.nav-links span {
    font-family: var(--db-font-body);
    font-size: 0.875rem;
    color: var(--db-text-muted);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    padding: 8px 14px;
    text-decoration: none;
    transition: all var(--db-dur) var(--db-ease);
    display: inline-block;
}
.page-numbers:hover,
.nav-links a:hover {
    color: var(--db-text);
    border-color: var(--db-purple);
    background: rgba(108,92,231,0.1);
}
.page-numbers.current {
    background: var(--db-grad);
    color: #fff;
    border-color: transparent;
}
.page-numbers.dots { border-color: transparent; background: none; }


/* ==========================================================================
   19. FOOTER
   ========================================================================== */
#colophon {
    background: var(--db-bg-2);
    border-top: 1px solid var(--db-border);
    padding: clamp(40px,6vw,80px) clamp(16px,4vw,48px);
}

.footer-inner {
    max-width: var(--db-max-width);
    margin: 0 auto;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.footer-nav a {
    font-size: 0.875rem;
    color: var(--db-text-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--db-radius-sm);
    transition: all var(--db-dur) var(--db-ease);
}
.footer-nav a:hover { color: var(--db-text); background: var(--db-surface); }

.footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footer-logo img { max-height: 36px; width: auto; opacity: 0.7; transition: opacity var(--db-dur) var(--db-ease); }
.footer-logo img:hover { opacity: 1; }

.footer-site-name {
    font-family: var(--db-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--db-text-muted);
}

.footer-instagram a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--db-text-muted);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--db-radius-pill);
    border: 1px solid var(--db-border);
    transition: all var(--db-dur) var(--db-ease);
}
.footer-instagram a:hover {
    color: var(--db-text);
    border-color: rgba(225,48,108,0.4);
    background: rgba(225,48,108,0.06);
    text-decoration: none;
}

.footer-copy,
.footer-privacy a,
.footer-powered a {
    font-size: 0.78rem;
    color: var(--db-text-faint);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease);
}
.footer-privacy a:hover,
.footer-powered a:hover { color: var(--db-purple-light); }


/* ==========================================================================
   20. SIDEBAR / WIDGETS
   ========================================================================== */
.widget-area {
    background: var(--db-bg-2);
    border-top: 1px solid var(--db-border);
    padding: clamp(40px,6vw,64px) clamp(16px,4vw,48px);
}
.widget { margin-bottom: 40px; }
.widget-title {
    font-family: var(--db-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--db-text-muted);
    margin-bottom: 16px;
}
.widget a { color: var(--db-text-muted); font-size: 0.9rem; }
.widget a:hover { color: var(--db-purple-light); }
.widget ul { list-style: none; padding: 0; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--db-border); }


/* ==========================================================================
   21. SEARCH & 404
   ========================================================================== */
.db-page-header {
    padding: clamp(60px,8vw,100px) clamp(16px,4vw,48px) clamp(40px,6vw,64px);
    text-align: center;
    max-width: var(--db-max-width);
    margin: 0 auto;
}
.db-page-header h1 { margin-bottom: 16px; }
.db-page-header p  { color: var(--db-text-muted); }

.search-results article,
.archive article {
    border-bottom: 1px solid var(--db-border);
    padding: 32px 0;
}

.search-no-results .search-form,
.error-404 .search-form { margin-top: 32px; }


/* ==========================================================================
   22. FORMS
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
    width: 100%;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    color: var(--db-text);
    padding: 10px 14px;
    font-family: var(--db-font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--db-dur) var(--db-ease),
                box-shadow var(--db-dur) var(--db-ease);
    margin-bottom: 16px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.2);
}

textarea { resize: vertical; min-height: 120px; }

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--db-text-muted);
    margin-bottom: 6px;
}

button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    background: var(--db-grad);
    color: #fff;
    border: none;
    border-radius: var(--db-radius-pill);
    padding: 12px 28px;
    font-family: var(--db-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--db-dur) var(--db-ease);
    box-shadow: 0 4px 24px rgba(108,92,231,0.35);
    width: auto;
    margin-bottom: 0;
}
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(108,92,231,0.5);
}

.comment-form .form-submit { margin-top: 8px; }


/* ==========================================================================
   23. WOOCOMMERCE
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--db-glass-bg);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-md);
    padding: 16px 20px;
    color: var(--db-text-muted);
    margin-bottom: 24px;
    list-style: none;
}
.woocommerce-error { border-color: rgba(231,76,60,0.4); }
.woocommerce-message { border-color: rgba(0,206,201,0.3); }

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
}

.woocommerce ul.products li.product {
    background: var(--db-glass-bg);
    border: 1px solid var(--db-glass-border);
    border-radius: var(--db-radius-lg);
    padding: 20px;
    transition: transform var(--db-dur) var(--db-ease),
                box-shadow var(--db-dur) var(--db-ease);
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(108,92,231,0.15);
}

.woocommerce ul.products li.product a img { border-radius: var(--db-radius-md); margin-bottom: 16px; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--db-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--db-text);
}

.woocommerce ul.products li.product .price {
    color: var(--db-cyan);
    font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button {
    background: var(--db-grad);
    color: #fff !important;
    border: none;
    border-radius: var(--db-radius-pill);
    padding: 10px 22px;
    font-family: var(--db-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--db-dur) var(--db-ease);
    display: inline-block;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108,92,231,0.4);
}

.woocommerce .quantity input { max-width: 80px; }

.woocommerce .single-product .entry-summary .price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--db-cyan);
    margin-bottom: 20px;
}


/* ==========================================================================
   24. SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--db-bg-2); }
::-webkit-scrollbar-thumb {
    background: rgba(108,92,231,0.4);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--db-purple); }


/* ==========================================================================
   25. NAV ICONS, HAMBURGER & CART BADGE
   ========================================================================== */

/* Icon group — always a horizontal row */
.db-nav-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Generic icon button */
.db-nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--db-radius-sm);
    background: transparent;
    border: none;
    color: var(--db-text-muted);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: color var(--db-dur) var(--db-ease),
                background var(--db-dur) var(--db-ease);
    position: relative;
}
.db-nav-icon-btn:hover {
    color: var(--db-text);
    background: var(--db-surface);
    text-decoration: none;
}

/* Search icon wrap */
.db-nav-icon-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Cart badge */
.db-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--db-purple);
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}
.db-cart-count.has-items { display: flex; }

/* Hamburger button */
#mobile-menu-toggle {
    display: none;          /* hidden on desktop */
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--db-text-muted);
    border-radius: var(--db-radius-sm);
    transition: background var(--db-dur) var(--db-ease);
    margin-left: 4px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
#mobile-menu-toggle:hover { background: var(--db-surface); color: var(--db-text); }

.db-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
    pointer-events: none;
}
.db-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s var(--db-ease),
                opacity  0.3s var(--db-ease);
}
#mobile-menu-toggle[aria-expanded="true"] .db-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#mobile-menu-toggle[aria-expanded="true"] .db-hamburger span:nth-child(2) {
    opacity: 0; transform: scaleX(0);
}
#mobile-menu-toggle[aria-expanded="true"] .db-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Show hamburger on mobile; hide desktop nav on mobile */
@media (max-width: 768px) {
    #mobile-menu-toggle { display: flex; }
    #site-navigation    { display: none !important; }
}
/* Ensure desktop nav is always visible on desktop */
@media (min-width: 769px) {
    #site-navigation { display: flex !important; }
    #mobile-menu-toggle { display: none !important; }
}


/* ==========================================================================
   26. MOBILE SLIDE-IN DRAWER
   ========================================================================== */

/* Drawer — always in DOM, hidden off-screen by default */
#mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 88vw);
    height: 100%;
    background: rgba(10,10,18,0.98);
    backdrop-filter: var(--db-glass-blur);
    -webkit-backdrop-filter: var(--db-glass-blur);
    border-right: 1px solid var(--db-border);
    z-index: 9999;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.35s var(--db-ease),
                visibility 0s linear 0.35s;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
#mobile-nav-drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s var(--db-ease),
                visibility 0s linear 0s;
}

/* Overlay */
#mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s var(--db-ease),
                visibility 0s linear 0.35s;
}
#mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity 0.35s var(--db-ease),
                visibility 0s linear 0s;
}

/* On desktop — completely remove from layout */
@media (min-width: 769px) {
    #mobile-nav-drawer  { display: none !important; }
    #mobile-nav-overlay { display: none !important; }
}

body.db-menu-open { overflow: hidden; }

/* Drawer header */
.db-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--db-border);
    flex-shrink: 0;
}
.db-mobile-nav__brand {
    font-family: var(--db-font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    background: var(--db-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.db-mobile-nav__header button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    color: var(--db-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--db-dur) var(--db-ease);
}
.db-mobile-nav__header button:hover {
    color: var(--db-text);
    border-color: var(--db-border-hover);
}

/* Drawer nav */
.db-mobile-nav__menu { flex: 1; padding: 12px 0; overflow-y: auto; }

.db-mobile-menu { list-style: none; padding: 0; margin: 0; }
.db-mobile-menu li { position: relative; }
.db-mobile-menu > li > a {
    display: block;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--db-text-muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: color var(--db-dur) var(--db-ease),
                background var(--db-dur) var(--db-ease);
}
.db-mobile-menu > li > a:hover,
.db-mobile-menu > li.current-menu-item > a {
    color: var(--db-text);
    background: var(--db-surface);
}

/* Sub-menu toggle arrow */
.db-submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.04);
    color: var(--db-text-faint);
    cursor: pointer;
    transition: color var(--db-dur) var(--db-ease);
}
.db-submenu-toggle.open { color: var(--db-purple-light); }
.db-submenu-toggle.open svg { transform: rotate(180deg); }
.db-submenu-toggle svg { transition: transform 0.3s var(--db-ease); }

.db-mobile-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--db-ease);
    background: rgba(255,255,255,0.02);
}
.db-mobile-menu .menu-item-has-children.open > .sub-menu { max-height: 500px; }

.db-mobile-menu .sub-menu a {
    display: block;
    padding: 10px 20px 10px 32px;
    font-size: 0.875rem;
    color: var(--db-text-faint);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: color var(--db-dur) var(--db-ease);
}
.db-mobile-menu .sub-menu a:hover { color: var(--db-cyan); }

/* Drawer footer */
.db-mobile-nav__footer {
    padding: 16px 20px 24px;
    border-top: 1px solid var(--db-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.db-mobile-nav__action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--db-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--db-text-muted);
    text-decoration: none;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    transition: all var(--db-dur) var(--db-ease);
}
.db-mobile-nav__action:hover {
    color: var(--db-text);
    border-color: var(--db-border-hover);
    text-decoration: none;
}
.db-mobile-nav__action--cta {
    background: var(--db-grad);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    justify-content: center;
}
.db-mobile-nav__action--cta:hover {
    color: #fff;
    box-shadow: 0 4px 20px rgba(108,92,231,0.4);
    transform: translateY(-1px);
    text-decoration: none;
}


/* ==========================================================================
   27. WOOCOMMERCE SINGLE PRODUCT PAGE
   ========================================================================== */

.db-product-page {
    max-width: var(--db-max-width);
    margin: 0 auto;
    padding: 0 clamp(16px,4vw,48px) clamp(60px,8vw,100px);
}

/* Breadcrumb */
.db-product-breadcrumb {
    padding: 16px 0 8px;
    font-size: 0.8rem;
    color: var(--db-text-faint);
}
.db-product-breadcrumb a {
    color: var(--db-text-faint);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease);
}
.db-product-breadcrumb a:hover { color: var(--db-purple-light); }

/* Two-column layout */
.db-product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px,5vw,64px);
    align-items: start;
    padding: clamp(24px,4vw,48px) 0;
}
@media (max-width: 768px) {
    .db-product-layout { grid-template-columns: 1fr; }
}

/* ---- Gallery ---- */
.db-gallery { display: flex; flex-direction: column; gap: 12px; }

.db-gallery__main {
    position: relative;
    border-radius: var(--db-radius-lg);
    overflow: hidden;
    background: var(--db-bg-2);
    border: 1px solid var(--db-border);
    aspect-ratio: 1 / 1;
}

.db-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: opacity 0.15s ease;
}

.db-gallery__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--db-radius-pill);
}
.db-gallery__badge--sale {
    background: var(--db-grad);
    color: #fff;
}
.db-gallery__badge--oos {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.4);
    color: #e74c3c;
}

.db-gallery__thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.db-thumb {
    width: 68px;
    height: 68px;
    border: 2px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--db-bg-2);
    padding: 0;
    transition: border-color var(--db-dur) var(--db-ease);
    flex-shrink: 0;
}
.db-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.db-thumb:hover,
.db-thumb.active { border-color: var(--db-purple); }

/* ---- Summary column ---- */
.db-product-summary-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.db-product-cat {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--db-purple-light);
    margin: 0;
}
.db-product-cat a {
    color: inherit;
    text-decoration: none;
}

.db-product-title {
    font-family: var(--db-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--db-text);
    margin: 0;
    line-height: 1.15;
}

.db-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--db-text-muted);
}
.db-product-rating .star-rating { font-size: 0.9em; }
.db-product-rating__count { color: var(--db-text-faint); font-size: 0.8rem; }

.db-product-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--db-cyan);
    line-height: 1;
}
.db-product-price del { color: var(--db-text-faint); font-size: 1rem; font-weight: 400; margin-right: 8px; }
.db-product-price ins { text-decoration: none; }

.db-product-short-desc {
    font-size: 0.95rem;
    color: var(--db-text-muted);
    line-height: 1.75;
}
.db-product-short-desc p { margin-bottom: 0.75em; }
.db-product-short-desc p:last-child { margin-bottom: 0; }

/* Add-to-cart form area */
.db-product-form .quantity { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.db-product-form .quantity input[type="number"] {
    width: 80px;
    text-align: center;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    color: var(--db-text);
    padding: 10px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
}
.db-product-form .single_add_to_cart_button {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 14px 28px;
    border-radius: var(--db-radius-pill);
    margin-bottom: 0;
}
.db-product-form .cart { display: flex; flex-direction: column; gap: 0; }

/* Trust badges */
.db-product-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--db-border);
    border-bottom: 1px solid var(--db-border);
}
.db-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--db-text-faint);
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-pill);
    padding: 5px 12px;
    white-space: nowrap;
}
.db-trust-badge svg { flex-shrink: 0; color: var(--db-purple-light); }

/* Product meta (SKU, categories) */
.db-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.8rem;
    color: var(--db-text-faint);
}
.db-product-meta em {
    font-style: normal;
    color: var(--db-text-muted);
}
.db-product-meta a {
    color: var(--db-text-muted);
    text-decoration: none;
}
.db-product-meta a:hover { color: var(--db-purple-light); }

/* Tabs */
.db-product-tabs-wrap {
    margin-top: clamp(40px,6vw,64px);
    border-top: 1px solid var(--db-border);
}
.db-product-tabs-wrap .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0 0 -1px;
    border-bottom: none;
}
.db-product-tabs-wrap .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.db-product-tabs-wrap .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 14px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--db-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--db-dur) var(--db-ease),
                border-color var(--db-dur) var(--db-ease);
}
.db-product-tabs-wrap .woocommerce-tabs ul.tabs li a:hover { color: var(--db-text); }
.db-product-tabs-wrap .woocommerce-tabs ul.tabs li.active a {
    color: var(--db-purple-light);
    border-bottom-color: var(--db-purple);
}
.db-product-tabs-wrap .woocommerce-tabs .panel {
    padding: clamp(24px,4vw,40px) 0;
    border-top: 1px solid var(--db-border);
    color: var(--db-text-muted);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* Related products */
.db-related-wrap {
    margin-top: clamp(40px,6vw,72px);
    border-top: 1px solid var(--db-border);
    padding-top: clamp(32px,5vw,56px);
}
.db-related-wrap .related.products > h2 {
    font-family: var(--db-font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--db-text);
    margin-bottom: 32px;
}


/* ==========================================================================
   28. NEW 4-COLUMN FOOTER
   ========================================================================== */

.db-footer {
    background: var(--db-bg-2);
    border-top: 1px solid var(--db-border);
    padding: clamp(48px,7vw,88px) clamp(16px,4vw,48px) 0;
}

.db-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(32px,5vw,60px);
    max-width: var(--db-max-width);
    margin: 0 auto;
    padding-bottom: clamp(40px,6vw,64px);
}
@media (max-width: 960px) {
    .db-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .db-footer__grid { grid-template-columns: 1fr; }
}

/* Brand column */
.db-footer__brand { display: flex; flex-direction: column; gap: 14px; }

.db-footer__logo img { max-height: 40px; width: auto; }

.db-footer__name {
    font-family: var(--db-font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    background: var(--db-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    display: inline-block;
}

.db-footer__desc {
    font-size: 0.875rem;
    color: var(--db-text-faint);
    line-height: 1.7;
    margin: 0;
}

.db-footer__email {
    font-size: 0.875rem;
    color: var(--db-text-muted);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease);
}
.db-footer__email:hover { color: var(--db-cyan); }

.db-footer__socials {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.db-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--db-text-faint);
    text-decoration: none;
    transition: all var(--db-dur) var(--db-ease);
}
.db-footer__socials a:hover {
    color: var(--db-text);
    border-color: var(--db-border-hover);
    background: var(--db-surface);
}

/* Regular columns */
.db-footer__col {}

.db-footer__heading {
    font-family: var(--db-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--db-text-muted);
    margin-bottom: 16px;
}

.db-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-footer__links a {
    font-size: 0.875rem;
    color: var(--db-text-faint);
    text-decoration: none;
    transition: color var(--db-dur) var(--db-ease);
    display: inline-block;
}
.db-footer__links a:hover { color: var(--db-text); }

/* Services column — pill style */
.db-footer__links--pills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}
.db-footer__links--pills a {
    background: rgba(0,206,201,0.06);
    border: 1px solid rgba(0,206,201,0.18);
    border-radius: var(--db-radius-pill);
    padding: 5px 12px;
    font-size: 0.78rem;
    color: var(--db-cyan-light);
}
.db-footer__links--pills a:hover {
    background: rgba(0,206,201,0.14);
    border-color: var(--db-cyan);
    color: #fff;
}

/* Divider */
.db-footer__divider {
    height: 1px;
    background: var(--db-border);
    max-width: var(--db-max-width);
    margin: 0 auto;
}

/* Bottom bar */
.db-footer__bottom {
    max-width: var(--db-max-width);
    margin: 0 auto;
    padding: 20px 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.db-footer__copy {
    font-size: 0.78rem;
    color: var(--db-text-faint);
}
.db-footer__tagline {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--db-yellow);
    font-family: var(--db-font-heading);
}


/* ==========================================================================
   29. SERVICE PAGE COMPONENTS
       (checklist, process steps, FAQ accordion, reveal/tilt animations,
        section-alt, cta-section, highlight, badge)
   ========================================================================== */

/* Alt section background */
.db-section-alt { background: var(--db-bg-2); }

/* CTA section wrapper */
.db-cta-section {
    padding: clamp(40px,8vw,100px) clamp(16px,4vw,48px);
}

/* Highlight box */
.db-highlight {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: var(--db-grad-subtle);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: var(--db-radius-lg);
    padding: clamp(40px,6vw,72px) clamp(24px,4vw,56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Badge pill */
.db-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    background: rgba(108,92,231,0.12);
    border: 1px solid rgba(108,92,231,0.3);
    border-radius: var(--db-radius-pill);
    padding: 6px 16px;
    color: var(--db-purple-light);
}

/* Checklist */
.db-checklist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 680px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 12px 32px;
}
.db-checklist li {
    font-size: 0.925rem;
    color: var(--db-text-muted);
    padding-left: 24px;
    position: relative;
    margin-bottom: 0;
}
.db-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--db-cyan);
    font-weight: 700;
}

/* Process steps */
.db-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 24px;
    counter-reset: step-counter;
}
.db-step {
    background: var(--db-glass-bg);
    border: 1px solid var(--db-glass-border);
    border-radius: var(--db-radius-lg);
    padding: clamp(20px,3vw,32px);
    position: relative;
    padding-top: clamp(32px,4vw,48px);
    counter-increment: step-counter;
}
.db-step::before {
    content: counter(step-counter, decimal-leading-zero);
    position: absolute;
    top: 20px;
    left: 24px;
    font-family: var(--db-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--db-purple-light);
    background: rgba(108,92,231,0.1);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: var(--db-radius-pill);
    padding: 3px 8px;
}
.db-step__title {
    font-family: var(--db-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--db-text);
    margin-bottom: 8px;
}
.db-step__body {
    font-size: 0.875rem;
    color: var(--db-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* FAQ accordion */
.db-faq {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-faq-item {
    background: var(--db-glass-bg);
    border: 1px solid var(--db-glass-border);
    border-radius: var(--db-radius-md);
    overflow: hidden;
    transition: border-color var(--db-dur) var(--db-ease);
}
.db-faq-item.open { border-color: rgba(108,92,231,0.35); }
.db-faq-q {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 18px 20px;
    font-family: var(--db-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--db-text-muted);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: color var(--db-dur) var(--db-ease);
}
.db-faq-q:hover { color: var(--db-text); }
.db-faq-item.open .db-faq-q { color: var(--db-text); }
.db-faq-q .icon {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--db-purple-light);
    transition: transform 0.3s var(--db-ease);
    flex-shrink: 0;
    line-height: 1;
}
.db-faq-item.open .db-faq-q .icon { transform: rotate(45deg); }
.db-faq-a {
    max-height: 0;
    overflow: hidden;
    font-size: 0.9rem;
    color: var(--db-text-faint);
    line-height: 1.75;
    transition: max-height 0.35s var(--db-ease),
                padding 0.35s var(--db-ease);
    padding: 0 20px;
}
.db-faq-item.open .db-faq-a {
    max-height: 300px;
    padding: 0 20px 18px;
}

/* Scroll reveal */
.db-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--db-ease),
                transform 0.6s var(--db-ease);
}
.db-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3D tilt — base state (JS applies inline transform on hover) */
.db-tilt { will-change: transform; transform-style: preserve-3d; }

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
    .db-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .db-tilt { will-change: auto; }
}


/* ==========================================================================
   30. SERVICES ARCHIVE PAGE  (/services/)
   ========================================================================== */

/* Shorter hero for interior pages */
.db-hero--short { min-height: 70vh; }

/* 3-column service card grid, 2-col at tablet, 1-col mobile */
.db-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 960px) {
    .db-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .db-services-grid { grid-template-columns: 1fr; }
}

/* Individual service card */
.db-service-card {
    background: var(--db-glass-bg);
    border: 1px solid var(--db-glass-border);
    border-radius: var(--db-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: transform var(--db-dur) var(--db-ease),
                border-color var(--db-dur) var(--db-ease),
                box-shadow var(--db-dur) var(--db-ease);
}
.db-service-card:hover {
    transform: translateY(-6px);
    border-color: var(--db-border-hover);
    box-shadow: 0 24px 60px rgba(108,92,231,0.15);
}

/* Icon strip at top */
.db-service-card__icon {
    font-size: 2rem;
    padding: 28px 28px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--db-grad-subtle);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: var(--db-radius-md);
    margin: 28px 28px 0;
}

/* Body */
.db-service-card__body {
    flex: 1;
    padding: 20px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Category tag */
.db-service-card__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--db-purple-light);
    background: rgba(108,92,231,0.1);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: var(--db-radius-pill);
    padding: 3px 10px;
    align-self: flex-start;
}

.db-service-card__title {
    font-family: var(--db-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--db-text);
    margin: 0;
    line-height: 1.25;
}

.db-service-card__desc {
    font-size: 0.875rem;
    color: var(--db-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Bullet highlights */
.db-service-card__bullets {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.db-service-card__bullets li {
    font-size: 0.8rem;
    color: var(--db-text-faint);
    padding-left: 18px;
    position: relative;
    margin: 0;
}
.db-service-card__bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--db-cyan);
    font-weight: 700;
    font-size: 0.75rem;
}

/* CTA button strip at bottom */
.db-service-card__footer {
    padding: 0 28px 28px;
    margin-top: auto;
}
.db-service-card__cta {
    width: 100%;
    justify-content: center;
    font-size: 0.875rem;
    padding: 11px 20px;
}