/* ViperDTF Theme — Complete Stylesheet */

/* ── Design tokens per theme variant ─────────────────────────────────────── */
:root {
    --vdtf-primary:    #ff6b35;  /* injected by plugin */
    --vdtf-accent:     #1a1a2e;  /* injected by plugin */
    --vdtf-radius:     12px;
    --vdtf-radius-lg:  20px;
    --vdtf-shadow:     0 4px 24px rgba(0,0,0,.12);
    --vdtf-shadow-lg:  0 8px 40px rgba(0,0,0,.18);
    --vdtf-transition: all .2s ease;
    --vdtf-container:  1200px;
    --vdtf-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Strike — Bold dark */
body.vdtf-strike {
    --bg:           #0f0f1a;
    --surface:      #1a1a2e;
    --surface-2:    #22223a;
    --surface-3:    #2a2a48;
    --text:         #f0f0f5;
    --text-muted:   #8080a8;
    --text-faint:   #5050780;
    --border:       rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.15);
    --hero-grad:    linear-gradient(135deg, #0a0a18 0%, #1a1a2e 50%, #200a32 100%);
    --nav-bg:       rgba(26,26,46,.95);
    --topbar-bg:    #111128;
    --tile-bg:      #1e1e36;
    --section-alt:  #141428;
    --badge-bg:     rgba(255,107,53,.15);
    --badge-border: rgba(255,107,53,.4);
}
/* Clean — White minimal */
body.vdtf-clean {
    --bg:           #f8fafc;
    --surface:      #ffffff;
    --surface-2:    #f1f5f9;
    --surface-3:    #e2e8f0;
    --text:         #1e293b;
    --text-muted:   #64748b;
    --border:       #e2e8f0;
    --border-strong:#cbd5e1;
    --hero-grad:    linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
    --nav-bg:       rgba(255,255,255,.95);
    --topbar-bg:    #1e293b;
    --tile-bg:      #ffffff;
    --section-alt:  #f1f5f9;
    --badge-bg:     rgba(37,99,235,.1);
    --badge-border: rgba(37,99,235,.3);
}
/* Warm — Cream friendly */
body.vdtf-warm {
    --bg:           #fefce8;
    --surface:      #ffffff;
    --surface-2:    #fff7ed;
    --surface-3:    #fef3c7;
    --text:         #44403c;
    --text-muted:   #78716c;
    --border:       #fde68a;
    --border-strong:#fcd34d;
    --hero-grad:    linear-gradient(135deg, #fef3c7 0%, #fefce8 50%, #fff7ed 100%);
    --nav-bg:       rgba(255,255,255,.95);
    --topbar-bg:    #92400e;
    --tile-bg:      #ffffff;
    --section-alt:  #fff7ed;
    --badge-bg:     rgba(217,119,6,.1);
    --badge-border: rgba(217,119,6,.35);
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family:    var(--vdtf-font);
    background:     var(--bg);
    color:          var(--text);
    line-height:    1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--vdtf-primary); text-decoration: none; transition: var(--vdtf-transition); }
a:hover { opacity: .85; }
ul  { list-style: none; }

/* ── Container ───────────────────────────────────────────────────────────── */
.vdtf-container {
    max-width: var(--vdtf-container);
    margin:    0 auto;
    padding:   0 48px;
}
@media ( max-width: 900px ) { .vdtf-container { padding: 0 28px; } }
@media ( max-width: 600px ) { .vdtf-container { padding: 0 16px; } }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.vdtf-btn-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background:      var(--vdtf-primary);
    color:           #fff;
    padding:         12px 24px;
    border-radius:   var(--vdtf-radius);
    font-weight:     700;
    font-size:       15px;
    border:          none;
    cursor:          pointer;
    transition:      var(--vdtf-transition);
    text-decoration: none;
    letter-spacing:  -.2px;
}
.vdtf-btn-primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 24px rgba(255,107,53,.4);
    opacity:    1;
    color:      #fff;
}
.vdtf-btn-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background:      transparent;
    color:           var(--text);
    padding:         11px 24px;
    border-radius:   var(--vdtf-radius);
    font-weight:     700;
    font-size:       15px;
    border:          2px solid var(--border-strong);
    cursor:          pointer;
    transition:      var(--vdtf-transition);
    text-decoration: none;
}
.vdtf-btn-outline:hover {
    border-color: var(--vdtf-primary);
    color:        var(--vdtf-primary);
    opacity:      1;
}
.vdtf-btn-lg { padding: 15px 32px; font-size: 16px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.vdtf-header { position: sticky; top: 0; z-index: 100; }

.vdtf-topbar {
    background: var(--topbar-bg);
    color:      #fff;
    font-size:  13px;
    padding:    8px 0;
}
.vdtf-topbar-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             8px;
}
.vdtf-topbar-badge { font-weight: 600; opacity: .9; }
.vdtf-topbar-contact { display: flex; gap: 20px; }
.vdtf-topbar-contact a { color: rgba(255,255,255,.85); font-size: 12px; }
.vdtf-topbar-contact a:hover { color: #fff; opacity: 1; }

.vdtf-nav-wrap {
    background:  var(--nav-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow:  0 2px 16px rgba(0,0,0,.1);
}
.vdtf-nav-inner {
    display:     flex;
    align-items: center;
    height:      68px;
    gap:         32px;
}

.vdtf-logo {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-weight: 800;
    font-size:   20px;
    color:       var(--text);
    text-decoration: none;
    flex-shrink: 0;
}
.vdtf-logo:hover { opacity: 1; color: var(--vdtf-primary); }
.vdtf-logo-bolt  { font-size: 22px; }
.vdtf-logo-text  { letter-spacing: -.4px; }

.vdtf-primary-nav { flex: 1; }
.vdtf-nav-menu {
    display:    flex;
    align-items:center;
    gap:        4px;
}
.vdtf-nav-menu li a {
    color:         var(--text-muted);
    font-size:     14px;
    font-weight:   500;
    padding:       6px 12px;
    border-radius: 8px;
    transition:    var(--vdtf-transition);
}
.vdtf-nav-menu li a:hover,
.vdtf-nav-menu li.current-menu-item > a {
    color:      var(--text);
    background: var(--surface-2);
    opacity:    1;
}

.vdtf-nav-actions {
    display:    flex;
    align-items:center;
    gap:        12px;
    flex-shrink:0;
}
.vdtf-cart-btn {
    color:       var(--text);
    font-size:   14px;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         4px;
}
.vdtf-cart-count {
    background:   var(--vdtf-primary);
    color:        #fff;
    width:        20px; height: 20px;
    border-radius:50%;
    font-size:    11px;
    font-weight:  700;
    display:      flex;
    align-items:  center;
    justify-content:center;
}
.vdtf-nav-cta {
    background:    var(--vdtf-primary);
    color:         #fff !important;
    padding:       8px 18px;
    border-radius: var(--vdtf-radius);
    font-size:     14px;
    font-weight:   700;
    opacity:       1 !important;
}
.vdtf-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,107,53,.35); }

.vdtf-hamburger {
    display:        none;
    flex-direction: column;
    justify-content:center;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        4px;
}
.vdtf-hamburger span {
    display:      block;
    width:        22px; height: 2px;
    background:   var(--text);
    border-radius:2px;
    transition:   var(--vdtf-transition);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.vdtf-hero {
    position:   relative;
    overflow:   hidden;
    padding:    80px 0 60px;
    min-height: 560px;
    display:    flex;
    align-items:center;
}
.vdtf-hero-bg {
    position:   absolute;
    inset:      0;
    background: var(--hero-grad);
    z-index:    0;
}
.vdtf-hero .vdtf-container {
    position: relative;
    z-index:  1;
    display:  grid;
    grid-template-columns: 1fr 1fr;
    gap:      60px;
    align-items: center;
}
.vdtf-hero-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    var(--badge-bg);
    border:        1px solid var(--badge-border);
    color:         var(--vdtf-primary);
    padding:       6px 14px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 20px;
}
.vdtf-hero-h1 {
    font-size:     3rem;
    font-weight:   900;
    line-height:   1.1;
    margin-bottom: 16px;
    letter-spacing:-.5px;
    color:         var(--text);
}
.vdtf-hero-accent { color: var(--vdtf-primary); }
.vdtf-hero-sub {
    font-size:     18px;
    color:         var(--text-muted);
    margin-bottom: 32px;
    max-width:     480px;
    line-height:   1.6;
}
.vdtf-hero-ctas {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    margin-bottom: 20px;
}
.vdtf-hero-file-note {
    font-size: 12px;
    color:     var(--text-muted);
    opacity:   .7;
}

/* Hero visual — gang sheet mock */
.vdtf-hero-visual { display: flex; justify-content: center; }
.vdtf-hero-sheet {
    width:        340px;
    aspect-ratio: 2/3;
    background:   var(--surface-2);
    border-radius:var(--vdtf-radius-lg);
    border:       2px solid var(--border-strong);
    padding:      20px;
    box-shadow:   var(--vdtf-shadow-lg);
    position:     relative;
    overflow:     hidden;
}
.vdtf-sheet-inner { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-template-rows: 1fr 1fr auto; }
.vdtf-sheet-design {
    border-radius: var(--vdtf-radius);
    opacity: .6;
    animation: vdtf-pulse 3s ease-in-out infinite;
}
.vdtf-sd-1 { background: var(--vdtf-primary); grid-column: 1 / -1; animation-delay: 0s; }
.vdtf-sd-2 { background: linear-gradient(135deg, var(--vdtf-primary), var(--vdtf-accent)); animation-delay: .5s; }
.vdtf-sd-3 { background: var(--surface-3); animation-delay: 1s; }
.vdtf-sd-4 { display: none; }
.vdtf-sheet-label {
    grid-column:    1 / -1;
    text-align:     center;
    font-size:      11px;
    color:          var(--text-muted);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
@keyframes vdtf-pulse {
    0%, 100% { opacity: .5; }
    50%       { opacity: .8; }
}

/* ── Trust bar ───────────────────────────────────────────────────────────── */
.vdtf-trust-bar {
    background:     var(--surface);
    border-top:     1px solid var(--border);
    border-bottom:  1px solid var(--border);
    padding:        20px 0;
}
.vdtf-trust-items {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0;
    justify-content: center;
}
.vdtf-trust-item {
    display:    flex;
    align-items:center;
    gap:        12px;
    padding:    12px 32px;
    border-right: 1px solid var(--border);
    flex:       1;
    min-width:  200px;
}
.vdtf-trust-item:last-child { border-right: none; }
.vdtf-trust-icon { font-size: 24px; flex-shrink: 0; }
.vdtf-trust-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.vdtf-trust-item span   { display: block; font-size: 12px; color: var(--text-muted); }

/* ── Section headers ─────────────────────────────────────────────────────── */
.vdtf-section-header {
    text-align:     center;
    margin-bottom:  48px;
}
.vdtf-section-header h2 {
    font-size:     2rem;
    font-weight:   800;
    color:         var(--text);
    margin-bottom: 10px;
    letter-spacing:-.3px;
}
.vdtf-section-header p {
    font-size:  16px;
    color:      var(--text-muted);
    max-width:  520px;
    margin:     0 auto;
    line-height:1.6;
}

/* ── How it works ────────────────────────────────────────────────────────── */
.vdtf-how { padding: 80px 0; background: var(--section-alt); }
.vdtf-how-steps {
    display:    flex;
    align-items:center;
    gap:        16px;
}
.vdtf-how-step {
    flex:          1;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--vdtf-radius-lg);
    padding:       32px 24px;
    text-align:    center;
    position:      relative;
}
.vdtf-how-num {
    position:    absolute;
    top:         16px; left: 20px;
    font-size:   11px;
    font-weight: 800;
    color:       var(--vdtf-primary);
    opacity:     .6;
    letter-spacing: 1px;
}
.vdtf-how-icon { font-size: 40px; margin-bottom: 16px; display: block; }
.vdtf-how-step h3 {
    font-size:     16px;
    font-weight:   700;
    margin-bottom: 10px;
    color:         var(--text);
}
.vdtf-how-step p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.vdtf-how-arrow { font-size: 28px; color: var(--border-strong); flex-shrink: 0; }

/* ── Products section ────────────────────────────────────────────────────── */
.vdtf-products-section { padding: 80px 0; }
.vdtf-product-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   24px;
}
.vdtf-product-tile {
    background:    var(--tile-bg);
    border:        1px solid var(--border);
    border-radius: var(--vdtf-radius-lg);
    padding:       32px 24px;
    position:      relative;
    overflow:      hidden;
    transition:    var(--vdtf-transition);
    display:       flex;
    flex-direction:column;
    gap:           12px;
}
.vdtf-product-tile:hover {
    border-color: var(--vdtf-primary);
    transform:    translateY(-4px);
    box-shadow:   var(--vdtf-shadow-lg);
}
.vdtf-tile-badge {
    position:      absolute;
    top:           16px; right: 16px;
    background:    var(--vdtf-primary);
    color:         #fff;
    font-size:     11px;
    font-weight:   700;
    padding:       3px 10px;
    border-radius: 20px;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.vdtf-tile-icon { font-size: 42px; }
.vdtf-product-tile h3 { font-size: 20px; font-weight: 800; color: var(--text); }
.vdtf-product-tile p  { font-size: 14px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.vdtf-tile-price {
    font-size:  14px;
    color:      var(--text-muted);
}
.vdtf-tile-price strong { color: var(--vdtf-primary); font-size: 18px; }
.vdtf-product-tile .vdtf-btn-primary { align-self: flex-start; }
.vdtf-tile-features { margin-top: 4px; }
.vdtf-tile-features li { font-size: 12px; color: var(--text-muted); padding: 3px 0; }

/* ── Fabric compatibility ─────────────────────────────────────────────────── */
.vdtf-fabrics { padding: 80px 0; background: var(--section-alt); }
.vdtf-fabric-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   16px;
}
.vdtf-fabric-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--vdtf-radius);
    padding:       20px 16px;
    text-align:    center;
    transition:    var(--vdtf-transition);
}
.vdtf-fabric-card:hover { border-color: var(--vdtf-primary); transform: translateY(-2px); }
.vdtf-fabric-icon  { font-size: 32px; margin-bottom: 8px; display: block; }
.vdtf-fabric-card strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.vdtf-fabric-card p { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* ── Press guide ─────────────────────────────────────────────────────────── */
.vdtf-press-guide { padding: 80px 0; }
.vdtf-pg-content {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         60px;
    align-items: center;
}
.vdtf-pg-text h2 {
    font-size:     2rem;
    font-weight:   800;
    margin-bottom: 16px;
    color:         var(--text);
}
.vdtf-pg-text > p { color: var(--text-muted); margin-bottom: 28px; line-height: 1.6; }
.vdtf-press-specs {
    background:    var(--surface-2);
    border:        1px solid var(--border);
    border-radius: var(--vdtf-radius);
    overflow:      hidden;
}
.vdtf-spec-row {
    display:       flex;
    justify-content:space-between;
    padding:       12px 20px;
    border-bottom: 1px solid var(--border);
    font-size:     14px;
}
.vdtf-spec-row:last-child { border-bottom: none; }
.vdtf-spec-label { color: var(--text-muted); }
.vdtf-spec-val   { font-weight: 700; color: var(--text); }
.vdtf-pg-steps { display: flex; flex-direction: column; gap: 16px; }
.vdtf-pg-step {
    display:    flex;
    align-items:center;
    gap:        16px;
    background: var(--surface);
    border:     1px solid var(--border);
    border-radius: var(--vdtf-radius);
    padding:    16px 20px;
}
.vdtf-pg-step span {
    width:          36px; height: 36px;
    border-radius:  50%;
    background:     var(--vdtf-primary);
    color:          #fff;
    font-weight:    800;
    font-size:      16px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
}
.vdtf-pg-step p { font-size: 14px; color: var(--text-muted); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.vdtf-faq { padding: 80px 0; background: var(--section-alt); }
.vdtf-faq-list {
    max-width:  760px;
    margin:     0 auto 32px;
}
.vdtf-faq-item {
    border:        1px solid var(--border);
    border-radius: var(--vdtf-radius);
    margin-bottom: 10px;
    background:    var(--surface);
    overflow:      hidden;
}
.vdtf-faq-q {
    width:           100%;
    text-align:      left;
    background:      none;
    border:          none;
    padding:         20px 24px;
    font-size:       15px;
    font-weight:     600;
    color:           var(--text);
    cursor:          pointer;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             16px;
    transition:      var(--vdtf-transition);
}
.vdtf-faq-q:hover { color: var(--vdtf-primary); }
.vdtf-faq-arrow { font-size: 18px; transition: transform .25s; flex-shrink: 0; }
.vdtf-faq-q[aria-expanded="true"] .vdtf-faq-arrow { transform: rotate(180deg); }
.vdtf-faq-a { padding: 0 24px 20px; }
.vdtf-faq-a p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.vdtf-faq-more { text-align: center; }
.vdtf-faq-more a { font-size: 14px; font-weight: 600; color: var(--vdtf-primary); }

/* ── CTA Banner ──────────────────────────────────────────────────────────── */
.vdtf-cta-banner {
    background:  var(--vdtf-accent);
    padding:     64px 0;
    text-align:  center;
}
.vdtf-cta-banner h2 { font-size: 2.2rem; font-weight: 900; color: #fff; margin-bottom: 12px; }
.vdtf-cta-banner p  { font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 28px; }
/* For clean/warm themes, accent may be light — override text */
body.vdtf-clean .vdtf-cta-banner h2,
body.vdtf-warm  .vdtf-cta-banner h2 { color: var(--text); }
body.vdtf-clean .vdtf-cta-banner p,
body.vdtf-warm  .vdtf-cta-banner p  { color: var(--text-muted); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.vdtf-footer {
    background:   var(--surface);
    border-top:   1px solid var(--border);
    padding:      60px 0 32px;
}
.vdtf-footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   40px;
    margin-bottom:         40px;
}
.vdtf-footer-logo {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   18px;
    font-weight: 800;
    color:       var(--text);
    margin-bottom:16px;
}
.vdtf-footer-tagline { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.vdtf-footer-loc     { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.vdtf-footer-badges  { display: flex; flex-wrap: wrap; gap: 8px; }
.vdtf-footer-badges span {
    font-size:     11px;
    font-weight:   600;
    padding:       4px 10px;
    border-radius: 20px;
    background:    var(--surface-2);
    color:         var(--text-muted);
    border:        1px solid var(--border);
}
.vdtf-footer-col h4 {
    font-size:     13px;
    font-weight:   800;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:         var(--text-muted);
    margin-bottom: 16px;
}
.vdtf-footer-col ul  { display: flex; flex-direction: column; gap: 8px; }
.vdtf-footer-col a   { font-size: 14px; color: var(--text-muted); }
.vdtf-footer-col a:hover { color: var(--vdtf-primary); opacity: 1; }
.vdtf-footer-col li  { font-size: 14px; color: var(--text-muted); }
.vdtf-footer-bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     24px;
    border-top:      1px solid var(--border);
    font-size:       13px;
    color:           var(--text-muted);
}
.vdtf-footer-credit a { color: var(--vdtf-primary); }

/* ── Inner pages ─────────────────────────────────────────────────────────── */
.vdtf-page-main { padding: 60px 0; }
.vdtf-page-header {
    margin-bottom:  40px;
    padding-bottom: 24px;
    border-bottom:  1px solid var(--border);
}
.vdtf-page-title {
    font-size:   2.2rem;
    font-weight: 900;
    color:       var(--text);
}
.vdtf-page-content { max-width: 780px; }
.vdtf-page-content p { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; }
.vdtf-page-content h2,
.vdtf-page-content h3 { color: var(--text); margin: 32px 0 12px; font-weight: 700; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.vdtf-404 { text-align: center; padding: 80px 0; }
.vdtf-404-code { font-size: 8rem; font-weight: 900; color: var(--vdtf-primary); line-height: 1; margin-bottom: 16px; opacity: .3; }
.vdtf-404 h1   { font-size: 2rem; margin-bottom: 12px; }
.vdtf-404 p    { color: var(--text-muted); margin-bottom: 28px; }

/* ── WooCommerce overrides ───────────────────────────────────────────────── */
.vdtf-wc-main { padding-bottom: 60px; }
.vdtf-wc-content-wrap { padding: 0 48px; }
@media ( max-width: 900px ) { .vdtf-wc-content-wrap { padding: 0 28px; } }
@media ( max-width: 600px ) { .vdtf-wc-content-wrap { padding: 0 16px; } }


.vdtf-shop-hero {
    background: var(--hero-grad);
    padding:    48px 0;
    text-align: center;
    margin-bottom: 40px;
}
.vdtf-shop-hero h1 { font-size: 2.2rem; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.vdtf-shop-hero p  { color: var(--text-muted); font-size: 15px; }

.vdtf-product-breadcrumb,
.vdtf-checkout-header {
    padding:    20px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
}
.vdtf-checkout-header h1 { font-size: 1.8rem; font-weight: 800; color: var(--text); }

.vdtf-wc-wrap { padding-bottom: 60px; }

/* WC product cards */
.woocommerce ul.products li.product {
    background:    var(--tile-bg) !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--vdtf-radius-lg) !important;
    overflow:      hidden;
    transition:    var(--vdtf-transition);
    padding:       0 0 20px !important;
}
.woocommerce ul.products li.product:hover {
    border-color: var(--vdtf-primary) !important;
    transform:    translateY(-3px);
    box-shadow:   var(--vdtf-shadow-lg);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       var(--text) !important;
    padding:     12px 16px 4px !important;
}
.woocommerce ul.products li.product .price {
    color:       var(--vdtf-primary) !important;
    font-weight: 700 !important;
    font-size:   15px !important;
    padding:     0 16px !important;
}
.woocommerce ul.products li.product .button {
    background:    var(--vdtf-primary) !important;
    color:         #fff !important;
    border-radius: 8px !important;
    margin:        12px 16px 0 !important;
    font-weight:   700 !important;
    border:        none !important;
}

/* WC single product */
.woocommerce div.product .product_title {
    font-size:   2rem !important;
    font-weight: 900 !important;
    color:       var(--text) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color:     var(--vdtf-primary) !important;
    font-size: 1.5em !important;
    font-weight: 800 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--text-muted) !important;
}

/* WC buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .checkout-button,
.woocommerce-page .checkout-button {
    background:    var(--vdtf-primary) !important;
    color:         #fff !important;
    border-radius: var(--vdtf-radius) !important;
    font-weight:   700 !important;
    border:        none !important;
    transition:    var(--vdtf-transition) !important;
    font-size:     15px !important;
    padding:       12px 24px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: #e05a25 !important;
    transform:  translateY(-1px);
}

/* WC variation select */
.woocommerce div.product form.cart .variations select {
    background:    var(--surface) !important;
    border:        1.5px solid var(--border-strong) !important;
    color:         var(--text) !important;
    border-radius: var(--vdtf-radius) !important;
    padding:       10px 14px !important;
}

/* WC product tabs + related products — match container padding */
.woocommerce .woocommerce-tabs,
.woocommerce section.related,
.woocommerce section.upsells,
.woocommerce ul.products {
    padding-left:  48px;
    padding-right: 48px;
}
@media ( max-width: 900px ) {
    .woocommerce .woocommerce-tabs,
    .woocommerce section.related,
    .woocommerce section.upsells,
    .woocommerce ul.products { padding-left: 28px; padding-right: 28px; }
}
@media ( max-width: 600px ) {
    .woocommerce .woocommerce-tabs,
    .woocommerce section.related,
    .woocommerce section.upsells,
    .woocommerce ul.products { padding-left: 16px; padding-right: 16px; }
}

/* WC notices */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--vdtf-primary) !important;
    background:       var(--surface) !important;
    color:            var(--text) !important;
}
.woocommerce-error { background: var(--surface) !important; }

/* ── Standalone order form ───────────────────────────────────────────────── */
.vdtf-order-wrap { max-width: 720px; margin: 0 auto; }
.vdtf-of-section {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--vdtf-radius-lg);
    padding:       28px;
    margin-bottom: 20px;
}
.vdtf-of-section h3 {
    font-size:     16px;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 20px;
    padding-bottom:12px;
    border-bottom: 1px solid var(--border);
}
.vdtf-of-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vdtf-of-col2 { grid-column: 1 / -1; }
.vdtf-of-field { display: flex; flex-direction: column; gap: 6px; }
.vdtf-of-field label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.vdtf-of-field input,
.vdtf-of-field select,
.vdtf-of-field textarea {
    background:    var(--bg);
    border:        1.5px solid var(--border-strong);
    border-radius: var(--vdtf-radius);
    padding:       10px 14px;
    font-size:     14px;
    color:         var(--text);
    transition:    var(--vdtf-transition);
    font-family:   var(--vdtf-font);
}
.vdtf-of-field input:focus,
.vdtf-of-field select:focus {
    outline:      none;
    border-color: var(--vdtf-primary);
    box-shadow:   0 0 0 3px rgba(255,107,53,.15);
}
.vdtf-of-total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         16px 20px;
    background:      var(--surface-2);
    border-radius:   var(--vdtf-radius);
    margin-top:      8px;
}
.vdtf-of-total .label { font-size: 14px; color: var(--text-muted); }
.vdtf-of-total .amount{ font-size: 22px; font-weight: 800; color: var(--vdtf-primary); }
.vdtf-of-submit {
    width:       100%;
    padding:     16px;
    font-size:   16px;
    font-weight: 700;
    background:  var(--vdtf-primary);
    color:       #fff;
    border:      none;
    border-radius:var(--vdtf-radius);
    cursor:      pointer;
    margin-top:  8px;
    transition:  var(--vdtf-transition);
}
.vdtf-of-submit:hover { background: #e05a25; transform: translateY(-1px); }
.vdtf-of-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Upload drop zone (shared with plugin) */
.vdtf-drop-zone {
    border:      2px dashed var(--border-strong);
    border-radius:var(--vdtf-radius);
    padding:     32px 20px;
    text-align:  center;
    background:  var(--surface-2);
    cursor:      pointer;
    transition:  var(--vdtf-transition);
    position:    relative;
}
.vdtf-drop-zone.vdtf-dragover { border-color: var(--vdtf-primary); background: var(--badge-bg); }
.vdtf-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.vdtf-drop-icon { font-size: 36px; display: block; margin-bottom: 10px; }
.vdtf-drop-text { display: block; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.vdtf-drop-hint { display: block; font-size: 12px; color: var(--text-muted); }
.vdtf-upload-progress { margin-top: 12px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.vdtf-upload-bar { height: 100%; background: var(--vdtf-primary); border-radius: 2px; width: 0; transition: width .3s; }
.vdtf-upload-ok  { color: #22c55e; font-size: 13px; font-weight: 600; display: block; margin-top: 8px; }
.vdtf-upload-err { color: #ef4444; font-size: 13px; display: block; margin-top: 8px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .vdtf-hero .vdtf-container { grid-template-columns: 1fr; }
    .vdtf-hero-visual           { display: none; }
    .vdtf-hero-h1               { font-size: 2.2rem; }
    .vdtf-pg-content            { grid-template-columns: 1fr; }
    .vdtf-footer-grid           { grid-template-columns: 1fr 1fr; }
    .vdtf-how-arrow             { display: none; }
    .vdtf-how-steps             { flex-direction: column; }
    .vdtf-hamburger             { display: flex; }
    .vdtf-primary-nav { display: none; }
    .vdtf-primary-nav.open {
        display:    block;
        position:   absolute;
        top:        100%;
        left:       0; right: 0;
        background: var(--nav-bg);
        border-top: 1px solid var(--border);
        padding:    16px;
        backdrop-filter: blur(12px);
    }
    .vdtf-primary-nav.open .vdtf-nav-menu { flex-direction: column; gap: 4px; }
    .vdtf-nav-wrap { position: relative; }
}
@media ( max-width: 600px ) {
    .vdtf-hero-h1           { font-size: 1.8rem; }
    .vdtf-hero              { padding: 48px 0 40px; }
    .vdtf-trust-items       { flex-direction: column; }
    .vdtf-trust-item        { border-right: none; border-bottom: 1px solid var(--border); }
    .vdtf-footer-grid       { grid-template-columns: 1fr; }
    .vdtf-footer-bottom     { flex-direction: column; gap: 8px; text-align: center; }
    .vdtf-of-grid           { grid-template-columns: 1fr; }
    .vdtf-section-header h2 { font-size: 1.6rem; }
}