/* DTF Printer Guide - Main Stylesheet (extracted from head_code.php for caching) */
@font-face{font-family:'DTF Printer Guide';src:url('/fonts/dtf_300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:optional;size-adjust:100%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'DTF Printer Guide';src:url('/fonts/dtf_400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;size-adjust:100%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'DTF Printer Guide';src:url('/fonts/dtf_500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:optional;size-adjust:100%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#1a1a1a;--text-secondary:#6c757d;--text-tertiary:#adb5bd;--border:#dee2e6;--accent:#06c;--accent-hover:#0052a3;--success:#28a745;--warning:#9f0712;--danger:#dc3545;--shadow:#0000001a}
[data-theme="dark"]{--bg-primary:#1a1a1a;--bg-secondary:#242424;--bg-tertiary:#2d2d2d;--text-primary:#e9ecef;--text-secondary:#adb5bd;--text-tertiary:#6c757d;--border:#404040;--accent:#4d9fff;--accent-hover:#6ba9ff;--shadow:#0000004d}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:300;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:background .3s ease,color .3s ease;font-synthesis:none;text-rendering:optimizeSpeed}
body.fonts-loaded{font-family:'DTF Printer Guide',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.header-top{background:var(--bg-secondary);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-content{max-width:1400px;margin:0 auto;padding:.6rem 2rem;display:flex;align-items:center;justify-content:space-between}
.site-logo{font-size:1.25rem;font-weight:500;color:var(--text-primary);text-decoration:none}
.header-nav{display:flex;gap:2rem;align-items:center}
.header-link{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:color .2s ease}
.header-link:hover{color:var(--accent)}
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;flex-direction:column;gap:.375rem;width:2.5rem;height:2.5rem;justify-content:center;align-items:center}
.hamburger{width:1.5rem;height:2px;background:var(--text-primary);transition:all .3s ease;border-radius:2px}
.mobile-menu-toggle.active .hamburger:nth-child(1){transform:rotate(45deg) translateY(8px)}
.mobile-menu-toggle.active .hamburger:nth-child(2){opacity:0}
.mobile-menu-toggle.active .hamburger:nth-child(3){transform:rotate(-45deg) translateY(-8px)}
.theme-toggle-header{background:var(--bg-tertiary);border:none;padding:.5rem;border-radius:.35rem;cursor:pointer;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.theme-toggle-header:hover{background:var(--bg-primary)}
.theme-toggle-header .sun-icon{display:none}
.theme-toggle-header .moon-icon{display:block}
[data-theme="dark"] .theme-toggle-header .sun-icon{display:block}
[data-theme="dark"] .theme-toggle-header .moon-icon{display:none}
.container{display:grid;grid-template-columns:280px 1fr;max-width:1400px;margin:0 auto;padding:0 2rem;min-height:calc(100vh - 60px)}
.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border);padding:2rem 1.5rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{font-size:1.25rem;font-weight:500;margin-bottom:2rem;color:var(--text-primary)}
.nav-section{margin-bottom:2rem}
.nav-title{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:.75rem}
.nav-link{display:block;padding:.5rem .75rem;color:var(--text-secondary);text-decoration:none;border-radius:.35rem;font-size:.9rem;transition:all .2s ease;margin-bottom:.25rem}
.nav-link:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.nav-link.active{background:var(--accent);color:#fff}
.theme-toggle{margin-top:auto;padding-top:2rem;border-top:1px solid var(--border)}
.toggle-btn{width:100%;padding:.75rem;background:var(--bg-tertiary);border:none;border-radius:.35rem;color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}
.toggle-btn:hover{background:var(--bg-primary)}
button{font-family:inherit}
.main-content{padding:2rem 0 0 2rem;margin-bottom:4rem}
.breadcrumb{font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}
.breadcrumb a{color:var(--accent);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb-current{color:var(--text-primary)}
.action-buttons{display:flex;gap:.75rem}
.action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);border-radius:.35rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}
.action-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.action-btn svg{width:18px;height:18px}
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:3rem;height:3rem;background:var(--accent);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease;box-shadow:0 4px 12px var(--shadow);z-index:99}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--accent-hover);transform:translateY(-2px)}
.back-to-top .arrow-icon{width:20px;height:20px;position:relative;z-index:2}
.progress-ring{position:absolute;top:0;left:0;transform:rotate(-90deg)}
.progress-ring-circle{stroke:rgba(255,255,255,0.3);stroke-dasharray:132;stroke-dashoffset:132;transition:stroke-dashoffset .2s ease}
.header{margin-bottom:2rem}
.category-badge{display:inline-block;padding:.25rem .75rem;background:var(--bg-tertiary);color:var(--text-secondary);font-size:.75rem;font-weight:400;border-radius:.35rem;margin-bottom:1rem}
h1{font-size:2.5rem;font-weight:500;margin-bottom:.5rem;color:var(--text-primary)}
.subtitle{font-size:1rem;color:var(--text-secondary);margin-bottom:1.5rem}
.badges{display:flex;gap:.5rem;flex-wrap:wrap}
.overview-description{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:1.5rem;margin:2rem 0;border-left:3px solid var(--accent)}
.overview-description h2{font-size:1.4rem;line-height:1.5rem;margin-bottom:.6rem;font-weight:500;color:var(--text-primary)}
.overview-description h3{font-size:1.3rem;line-height:1.4rem;margin-bottom:.6rem;font-weight:500;color:var(--text-primary)}
.overview-description p{font-size:1rem;line-height:1.7;color:var(--text-primary);margin-bottom:1rem}
.overview-description p:last-child{margin-bottom:0}
.quick-overview{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:2rem;margin:2rem 0}
.quick-overview h2{font-size:1.25rem;font-weight:500;margin-bottom:1.5rem;color:var(--text-primary)}
.quick-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.quick-overview-item strong{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:.5rem}
.quick-overview-item{font-size:.9rem;color:var(--text-primary)}
.quick-overview-item a{color:var(--accent);text-decoration:none}
.quick-overview-item a:hover{text-decoration:underline}
.external-link-icon{display:inline-block;margin-left:.25rem}
.pricing-box{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border:2px solid #2ecc71;border-radius:.35rem;padding:2rem;margin:2rem 0}
.pricing-box h2{font-size:1.25rem;font-weight:500;margin-bottom:.6rem;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}
.pricing-items{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.pricing-item{display:flex;align-items:baseline;gap:.5rem}
.pricing-amount{font-size:2rem;font-weight:500;color:#2ecc71;margin:0}
.pricing-label{font-size:.9rem;color:var(--text-secondary);margin:0}
.pricing-note{font-size:.85rem;color:var(--text-secondary);font-style:italic}
.badge{padding:.375rem .75rem;border-radius:.35rem;font-size:.875rem;font-weight:500}
.badge-success{background:#28a7451a;color:var(--success)}
.badge-warning{background:#ffe2e2;color:var(--warning)}
.badge-info{background:#0066cc1a;color:var(--accent)}
.badge-pop{background:#ecfdf5;color:#004f3b}
.summary-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:1.5rem;margin:2rem 0}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.summary-item{font-size:.875rem}
.summary-item strong{display:block;color:var(--text-secondary);margin-bottom:.25rem}
.section{margin:3rem 0}
.section-title{font-size:1.5rem;font-weight:500;margin-bottom:1rem;color:var(--text-primary)}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.spec-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:1rem}
.spec-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:.5rem}
.spec-value{font-size:1rem;color:var(--text-primary);font-weight:500}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.pros,.cons{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:1.5rem}
.pros{border-left:3px solid var(--success)}
.cons{border-left:3px solid var(--danger)}
.list-title{font-weight:500;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.pros .list-title{color:var(--success)}
.cons .list-title{color:var(--danger)}
.list-item{padding:.5rem 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.list-item:last-child{border-bottom:none;padding-bottom:0}
.ideal-for{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;font-size:.875rem;color:var(--text-primary);text-decoration:none;transition:all .2s ease}
a.tag:hover{border-color:var(--accent);color:var(--accent)}
.cta-button{display:inline-block;padding:.875rem 1.75rem;background:var(--accent);color:#fff;text-decoration:none;border-radius:.35rem;font-weight:400;transition:all .2s ease;margin-top:1rem}
.cta-button:hover{background:var(--accent-hover);transform:translateY(-1px)}
.compare-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);text-decoration:none;border-radius:.35rem;font-size:.9rem;line-height:1;font-weight:400;transition:all .2s ease;margin-left:1rem}
.compare-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.compare-btn svg{width:16px;height:16px}
.vote-count{display:inline-block;margin-left:.25rem;color:var(--text-tertiary);font-size:.8rem}
.faq-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;margin-bottom:1rem;overflow:hidden}
.faq-question{padding:1rem 1.5rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;user-select:none;width:100%;background:none;border:none;text-align:left;font-size:inherit;color:inherit;font-family:inherit;line-height:inherit}
.faq-question:hover{background:var(--bg-tertiary)}
.faq-answer{padding:0 1.5rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-item.active .faq-answer{padding:1rem 1.5rem;max-height:500px}
.faq-icon{transition:transform .3s ease}
.faq-item.active .faq-icon{transform:rotate(180deg)}
.faq-helpful{display:flex;align-items:center;gap:.75rem;padding-top:1rem;margin-top:1rem;border-top:1px solid var(--border)}
.faq-helpful-text{font-size:.85rem;color:var(--text-secondary)}
.faq-helpful-btns{display:flex;gap:.5rem}
.faq-btn{background:var(--bg-primary);border:1px solid var(--border);padding:.375rem .75rem;border-radius:.35rem;font-size:.85rem;font-weight:300;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.375rem;color:var(--text-secondary)}
.faq-btn:hover{border-color:var(--accent);color:var(--accent)}
.faq-btn.active{background:var(--accent);color:white;border-color:var(--accent)}
.faq-btn svg{width:14px;height:14px;fill:currentColor}
.rating-summary{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:1.5rem;margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between}
.rating-summary-left{display:flex;align-items:center;gap:1.5rem}
.rating-summary-right{text-align:right}
.rating-score{font-size:3rem;font-weight:500;color:var(--accent);line-height:1}
.star-rating{color:#fbbf24;font-size:1.5rem;margin:0}
.review-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:1.5rem;margin-bottom:1.5rem}
.review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.reviewer-name{font-weight:400;color:var(--text-primary)}
.review-date{color:var(--text-secondary);font-size:.85rem}
.review-text{color:var(--text-secondary);line-height:1.7}
.review-form{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:2rem;margin-top:2rem}
.review-form div{font-size:1.25rem;font-weight:500;margin-bottom:1.5rem;color:var(--text-primary)}
.form-group{margin-bottom:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.form-label{display:block;font-weight:400;margin-bottom:.5rem;color:var(--text-primary);font-size:.9rem}
.form-input,.form-textarea{width:100%;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:.35rem;color:var(--text-primary);font-size:.9rem;font-family:inherit;font-weight:300;transition:border-color .2s ease}
.form-input:focus,.form-textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-textarea{resize:vertical;min-height:120px}
.star-input{display:flex;gap:.5rem;font-size:2rem;cursor:pointer}
.star-input span{color:var(--text-tertiary);transition:color .2s ease}
.star-input span:hover,.star-input span.active,.star-input span.star-hover{color:#fbbf24}
.submit-btn{background:var(--accent);color:white;border:none;padding:.875rem 2rem;border-radius:.35rem;font-size:.9rem;font-weight:400;cursor:pointer;transition:all .2s ease}
.submit-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.related-grid.grid-single{grid-template-columns:1fr}
.related-grid.grid-double{grid-template-columns:repeat(2,1fr)}
.related-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:.35rem;padding:1.5rem;text-decoration:none;color:var(--text-primary);transition:all .2s ease}
.related-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:var(--accent)}
.related-title{font-size:1rem;font-weight:500;margin-bottom:.5rem;color:var(--accent)}
.related-card p{font-size:.85rem;color:var(--text-secondary);margin:0}
.footer{background:var(--bg-secondary);border-top:1px solid var(--border)}
.footer-content{max-width:1400px;margin:0 auto;padding:3rem 2rem 2rem;display:grid;grid-template-columns:3fr 1fr 1fr 1fr;gap:2rem}
.footer-heading{font-size:1.2rem;font-weight:500;margin-bottom:1rem;color:var(--text-primary)}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.5rem}
.footer a{color:var(--text-secondary);text-decoration:none;font-size:.85rem;transition:color .2s ease}
.footer a:hover{color:var(--accent)}
.footer-description{color:var(--text-secondary);font-size:.85rem;line-height:1.6}
.footer-bottom{border-top:1px solid var(--border);padding:1.5rem 2rem;text-align:center;color:var(--text-secondary);font-size:.85rem}
.quick-overview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.quick-overview-header h2{margin:0}
.form-row .form-group{margin-bottom:0}
.review-count{color:var(--text-secondary);margin:0}
.review-stars{font-size:1rem}
/* Toast notifications */
.toast{position:fixed;top:5rem;right:2rem;background:var(--bg-secondary);border:1px solid var(--border);border-left:4px solid var(--accent);padding:1rem 1.5rem;border-radius:.5rem;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:1000;display:flex;align-items:center;gap:1rem;min-width:300px;max-width:500px;animation:slideInRight .3s ease;opacity:0;pointer-events:none;transition:opacity .3s ease}
.toast.show{opacity:1;pointer-events:auto}
.toast.error{border-left-color:#ef4444}
.toast.success{border-left-color:#10b981}
.toast.warning{border-left-color:#f59e0b}
.toast-icon{font-size:1.5rem;flex-shrink:0}
.toast-content{flex:1}
.toast-message{font-size:.9rem;color:var(--text-primary);margin:0}
.toast-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.25rem;padding:.25rem;line-height:1;transition:color .2s ease}
.toast-close:hover{color:var(--text-primary)}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
/* Extra components */
.warranty-box{margin:1rem 0;padding:.75rem;background:rgba(255,193,7,0.1);border-left:3px solid #ffc107;border-radius:.25rem}
.warranty-label{color:#ffc107;font-size:.9rem;font-weight:500}
.warranty-text{color:var(--text-secondary);font-size:.85rem}
.community-insights-box{border-color:#0066cc;background:linear-gradient(135deg,rgba(0,102,204,0.05) 0%,rgba(0,102,204,0.02) 100%)}
.community-insights-title{color:#0066cc}
.community-insights-content{color:var(--text-primary);line-height:1.6;margin:0}
/* Accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.faq-btn:focus-visible,.action-btn:focus-visible,.submit-btn:focus-visible,.cta-button:focus-visible,.nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.star-input span:focus-visible{outline:2px solid #fbbf24;outline-offset:2px;border-radius:2px}
/* 768px breakpoint */
@media (max-width:768px){
.container{grid-template-columns:1fr;padding:0 1rem}
.sidebar{position:sticky;top:3.5rem;height:auto;border-right:none;border-bottom:1px solid var(--border);order:1;padding:1rem;overflow-x:auto;overflow-y:hidden;z-index:97;background:var(--bg-secondary)}
.sidebar::-webkit-scrollbar{height:4px}
.sidebar::-webkit-scrollbar-track{background:var(--bg-tertiary)}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.sidebar nav{display:flex;gap:0}
.nav-section{margin-bottom:0;display:flex;gap:.5rem;white-space:nowrap}
.nav-title{display:none}
.nav-link{margin-bottom:0;white-space:nowrap;font-size:.85rem;padding:.625rem 1rem;min-height:44px;display:flex;align-items:center}
.main-content{padding:2rem 0;order:2}
.header-content{padding:.6rem 1rem}
.mobile-menu-toggle{display:flex}
.header-nav{position:fixed;top:3.5rem;left:0;right:0;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-direction:column;padding:1rem;gap:.5rem;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease;z-index:98}
.header-nav.active{transform:translateY(0);opacity:1;visibility:visible}
.header-link{padding:.75rem 1rem;border-radius:.35rem;display:block}
.header-link:hover{background:var(--bg-tertiary)}
.pros-cons{grid-template-columns:1fr}
h1{font-size:1.75rem;line-height:2rem}
.quick-overview-header{flex-direction:column;align-items:flex-start;gap:1rem}
.compare-btn{margin-left:0}
.action-buttons{flex-wrap:wrap}
.form-row{grid-template-columns:1fr}
.related-grid{grid-template-columns:1fr}
.footer-content{grid-template-columns:1fr}
.back-to-top{bottom:1rem;right:1rem;width:3rem;height:3rem}
.back-to-top .arrow-icon{width:16px;height:16px}
.breadcrumb{display:none}
.toast{top:4rem;right:1rem;left:1rem;min-width:auto}
}
/* 480px breakpoint */
@media (max-width:480px){
.header-content{padding:.5rem .75rem}
.site-logo{font-size:1.1rem}
h1{font-size:1.5rem;line-height:1.75rem}
.section-title{font-size:1.25rem}
.quick-overview{padding:1.25rem}
.quick-overview-grid{grid-template-columns:1fr;gap:1rem}
.spec-grid{grid-template-columns:1fr}
.pricing-box{padding:1.25rem}
.pricing-amount{font-size:1.5rem}
.pricing-items{gap:1rem}
.badges{gap:.375rem}
.badge{font-size:.75rem;padding:.25rem .5rem}
.faq-question{padding:.75rem 1rem;font-size:.9rem}
.faq-item.active .faq-answer{padding:.75rem 1rem}
.review-form{padding:1.25rem}
.form-row{gap:1rem}
.star-input{font-size:1.75rem}
.related-card{padding:1rem}
.action-btn{padding:.375rem .75rem;font-size:.8rem}
.section{margin:2rem 0}
.sidebar{padding:.75rem}
.nav-link{padding:.5rem .75rem;font-size:.8rem;min-height:40px}
.rating-summary{flex-direction:column;gap:1rem;text-align:center}
.rating-summary-left{flex-direction:column;gap:.5rem}
.rating-summary-right{text-align:center}
.footer-bottom{padding:1rem;font-size:.8rem}
}