:root{--color-primary:#A30E22;--color-primary-hover:#8A0C1D;--color-accent:#F6C20E;--color-border:#EDC64A;--color-bg:#F7F7F7;--color-text:#1A1A1A;--color-text-muted:#666;--color-error:#DC2626;--color-mild:#E7F9EC;--color-mild-border:#86EFAC;--color-medium:#FFF7D6;--color-medium-border:#FDE047;--color-hot:#FFE6E6;--color-hot-border:#FCA5A5;--color-very-hot:#FFE4E1;--color-very-hot-border:#FB923C;--color-extreme:#FEE2E2;--color-extreme-border:#F87171;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 6px rgba(0,0,0,.07);--shadow-lg:0 10px 15px rgba(0,0,0,.1);--font-heading:'Poppins',sans-serif;--font-body:'Inter',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}
.language-switcher{background:#fff;padding:var(--spacing-sm) 0;text-align:center;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}
.lang-link{color:var(--color-text-muted);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);transition:all .2s}
.lang-link:hover,.lang-link.active{color:var(--color-primary);background:#f9fafb}
.header{background:#a9071c;color:#fff;padding:var(--spacing-2xl) 0;text-align:center}.header .container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-lg)}
.header-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--spacing-xs)}
.header-title{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;margin-bottom:0;line-height:1.2}
.header-subtitle{font-size:1.125rem;opacity:.9;margin-top:var(--spacing-xs)}
.how-to-use{padding:var(--spacing-2xl) 0}
.how-to-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg)}
.how-to-card{background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-md);box-shadow:var(--shadow-md);text-align:center;transition:transform .2s}
.how-to-card:hover{transform:translateY(-4px)}
.how-to-icon{font-size:3rem;margin-bottom:var(--spacing-md)}
.how-to-card h3{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-primary)}
.how-to-card p{color:var(--color-text-muted);font-size:.95rem}
.calculator-section{padding:var(--spacing-xl) 0}
.calculator-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);align-items:start}
.card{background:#fff;border-radius:var(--radius-lg);border:2px solid var(--color-border);box-shadow:var(--shadow-md);padding:var(--spacing-xl)}
.card-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;color:var(--color-primary);margin-bottom:var(--spacing-lg)}
.form-group{margin-bottom:var(--spacing-lg)}
.form-group label{display:block;font-weight:500;margin-bottom:var(--spacing-sm)}
.tooltip-trigger{display:inline-block;margin-left:var(--spacing-xs);cursor:help;font-size:.875rem}
.units-toggle{display:flex;border:2px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.unit-btn{flex:1;padding:var(--spacing-md);background:#fff;border:none;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}
.unit-btn:hover{background:#f9fafb}
.unit-btn.active{background:var(--color-primary);color:#fff}

/* Hungarian: Grams-only info */



.input-wrapper{position:relative;display:flex;align-items:center}
.form-input{width:100%;padding:var(--spacing-md);padding-right:60px;border:2px solid #e5e7eb;border-radius:var(--radius-sm);font-size:1rem;transition:border-color .2s}
.form-input:focus{outline:none;border-color:var(--color-primary)}
.form-input.error{border-color:var(--color-error)}
.input-suffix{position:absolute;right:var(--spacing-md);color:var(--color-text-muted);font-weight:500;pointer-events:none}
.form-error{color:var(--color-error);font-size:.875rem;margin-top:var(--spacing-xs);min-height:20px}
.field-help{font-size:0.875rem;color:var(--color-text-muted,#6b7280);margin-top:6px;margin-bottom:8px;line-height:1.35;opacity:0.85}
.pepper-rows{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}
/* T-102: Improved pepper row layout */
.pepper-row {
    display: grid;
    grid-template-columns: 1fr 140px 44px;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

/* Pepper select styling */
.pepper-row .pepper-select-wrapper {
    min-width: 240px;
}

.pepper-row .pepper-select {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quantity input with unit suffix */
.pepper-row .input-wrapper {
    position: relative;
    width: 100%;
}

.pepper-row .pepper-quantity {
    width: 100%;
    padding-right: 32px;
}

.pepper-row .pepper-quantity-unit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-muted, #6b7280);
    font-weight: 500;
}

/* Delete button */
.pepper-row .delete-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive: Mobile layout */
@media (max-width: 520px) {
    .pepper-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .pepper-row .pepper-select-wrapper {
        grid-column: 1;
        min-width: 100%;
    }
    
    .pepper-row .input-wrapper {
        grid-column: 1;
        display: grid;
        grid-template-columns: 1fr 44px;
        gap: 8px;
    }
    
    .pepper-row .delete-btn {
        grid-column: 2;
        grid-row: 2;
    }
}
.pepper-select{width:100%;padding:var(--spacing-md);border:2px solid #e5e7eb;border-radius:var(--radius-sm);font-size:1rem;background:#fff;cursor:pointer}
.pepper-select:focus{outline:none;border-color:var(--color-primary)}
.pepper-select option:disabled{opacity:.5}
.delete-btn{width:44px;height:44px;border:2px solid #e5e7eb;border-radius:var(--radius-sm);background:#fff;color:var(--color-error);font-size:1.25rem;cursor:pointer;transition:all .2s}
.delete-btn:hover{background:var(--color-error);color:#fff;border-color:var(--color-error)}
.btn-primary,.btn-secondary,.btn-outline{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-sm);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:44px}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:#fff;border-color:var(--color-border);color:var(--color-text)}
.btn-secondary:hover{background:#f9fafb}
.btn-outline{background:transparent;border-color:var(--color-text);color:var(--color-text)}
.btn-outline:hover{background:var(--color-text);color:#fff}
.btn-full{width:100%}
.results-card{position:sticky;top:var(--spacing-lg)}
.results-empty{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg)}
.empty-icon{font-size:4rem;margin-bottom:var(--spacing-md)}
.empty-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;margin-bottom:var(--spacing-sm)}
.empty-text{color:var(--color-text-muted)}
.results-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}
.result-header{display:flex;align-items:center;gap:var(--spacing-md)}
.result-emoji{font-size:4rem}
.result-info h2{font-family:var(--font-heading);font-size:2rem;font-weight:700;margin-bottom:var(--spacing-xs);color:var(--color-primary)}
.result-info p{color:var(--color-text-muted)}
.heat-meter{margin:var(--spacing-lg) 0}
.heat-meter-bar{height:32px;border-radius:var(--radius-md);background:linear-gradient(90deg,#10B981 0%,#10B981 18%,#22C55E 20%,#F59E0B 22%,#F59E0B 38%,#FB923C 40%,#EF4444 42%,#EF4444 58%,#F87171 60%,#DC2626 62%,#DC2626 78%,#EF4444 80%,#991B1B 82%,#991B1B 100%);position:relative;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}
.heat-meter-indicator{position:absolute;top:50%;transform:translateY(-50%);width:4px;height:40px;background:var(--color-text);box-shadow:0 0 8px rgba(0,0,0,.3);transition:left .3s}

/* T-201: Heat meter segment dividers */


.heat-meter-labels{display:flex;justify-content:space-between;margin-top:var(--spacing-sm);font-size:.75rem;color:var(--color-text-muted)}
.shu-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}
.shu-tile{padding:var(--spacing-lg);border-radius:var(--radius-md);text-align:center;border:2px solid}
.shu-tile-min{background:var(--color-mild);border-color:var(--color-mild-border)}
.shu-tile-avg{background:var(--color-medium);border-color:var(--color-medium-border)}
.shu-tile-max{background:var(--color-hot);border-color:var(--color-hot-border)}
.shu-label{font-size:.875rem;color:var(--color-text-muted);margin-bottom:var(--spacing-xs)}
.shu-value{font-family:var(--font-heading);font-size:1.5rem;font-weight:700}
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;align-items:center;justify-content:center;animation:fadeIn 0.2s ease-out}
.modal.show{display:flex}
.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.modal-content{position:relative;background:#fff;border-radius:var(--radius-lg);max-width:540px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);animation:slideUp 0.3s ease-out}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid #E5E7EB}
.modal-title-group{flex:1}
.modal-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0 0 var(--spacing-xs) 0}
.modal-subtitle{font-size:0.9375rem;color:var(--color-text-muted);margin:0;line-height:1.5}
.modal-close{background:none;border:none;cursor:pointer;color:var(--color-text-muted);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;padding:0;flex-shrink:0}
.modal-close:hover{background:#F3F4F6;color:var(--color-text)}
.modal-close:focus{outline:2px solid var(--color-primary);outline-offset:2px}
.modal-body{padding:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xl)}
.share-section{display:flex;flex-direction:column;gap:var(--spacing-md)}
.share-section-label{font-size:0.9375rem;font-weight:500;color:var(--color-text);margin:0}
.share-social-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}
.share-social-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-lg);border:2px solid #E5E7EB;border-radius:var(--radius-md);background:#fff;cursor:pointer;transition:all .2s;min-height:90px}
.share-social-btn:hover{border-color:var(--color-border);background:#F9FAFB;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.share-social-btn:focus{outline:2px solid var(--color-primary);outline-offset:2px}
.share-social-btn:active{transform:translateY(0)}
.share-social-btn svg{width:28px;height:28px}
.share-facebook{color:#1877F2}
.share-facebook:hover{border-color:#1877F2;background:#EFF6FF}
.share-twitter{color:#000000}
.share-twitter:hover{border-color:#000000;background:#F9FAFB}
.share-pinterest{color:#E60023}
.share-pinterest:hover{border-color:#E60023;background:#FEF2F2}
.btn-label{font-size:0.875rem;font-weight:500;color:var(--color-text)}
.copy-link-control{display:flex;gap:var(--spacing-sm);align-items:stretch;background:#F9FAFB;border:2px solid #E5E7EB;border-radius:var(--radius-md);padding:var(--spacing-sm);transition:border-color .2s}
.copy-link-control:focus-within{border-color:var(--color-primary);background:#fff}
.share-link-input{flex:1;border:none;background:transparent;padding:var(--spacing-sm) var(--spacing-md);font-size:0.9375rem;color:var(--color-text);font-family:var(--font-body)}
.share-link-input:focus{outline:none}
.btn-copy-link{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-text);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;font-size:0.875rem;font-weight:500;white-space:nowrap}
.btn-copy-link:hover{background:var(--color-primary)}
.btn-copy-link:focus{outline:2px solid var(--color-primary);outline-offset:2px}
.btn-copy-link.copied{background:#059669}
.btn-download-image{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;font-size:1rem;font-weight:600;min-height:52px}
.btn-download-image:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(163,14,34,.3)}
.btn-download-image:focus{outline:2px solid var(--color-primary);outline-offset:2px}
.btn-download-image:active{transform:translateY(0)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:480px){.share-social-row{grid-template-columns:1fr;gap:var(--spacing-sm)}.share-social-btn{flex-direction:row;min-height:56px;justify-content:flex-start;padding:var(--spacing-md)}.btn-label{font-size:1rem}.modal-content{width:95%}.modal-header,.modal-body{padding:var(--spacing-lg)}}

.share-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}
.share-social-btn{padding:var(--spacing-md);border:2px solid #e5e7eb;border-radius:var(--radius-sm);background:#fff;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);font-size:.875rem}
.share-social-btn:hover{border-color:var(--color-primary);background:#f9fafb}
.share-social-btn span:first-child{font-size:2rem}
.share-link-group{margin-bottom:var(--spacing-lg)}
.share-link-wrapper{display:flex;gap:var(--spacing-sm)}
.share-link-wrapper .form-input{flex:1}
.btn-copy{padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-weight:500;transition:all .2s;white-space:nowrap}
.btn-copy:hover{background:var(--color-bg)}
.toast{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translateX(-50%) translateY(100px);background:var(--color-text);color:#fff;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:2000;opacity:0;transition:all .3s}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* Export Canvas - Hidden container for PNG generation */
.export-canvas{position:fixed;left:-9999px;top:0;width:1200px;background:#FFFFFF;font-family:var(--font-body)}
.export-content{padding:64px;background:#FFFFFF}

/* Export Header */
.export-header{text-align:center;margin-bottom:48px}
.export-title{font-family:var(--font-heading);font-size:3rem;font-weight:700;color:var(--color-primary);margin:0 0 16px 0;letter-spacing:-0.5px}
.export-divider{width:200px;height:4px;background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-border) 100%);margin:0 auto 16px;border-radius:2px}
.export-watermark{color:var(--color-text-muted);font-size:1.125rem;margin:0;font-weight:500}

/* Export Result */
.export-result{background:linear-gradient(135deg,#F9FAFB 0%,#FFFFFF 100%);border:3px solid var(--color-border);border-radius:24px;padding:48px;margin-bottom:40px;box-shadow:0 10px 30px rgba(0,0,0,0.08)}

.export-result-header{display:flex;align-items:center;gap:24px;margin-bottom:40px}
.export-emoji{font-size:5rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1))}
.export-result-text{flex:1}
.export-category{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;color:var(--color-text);margin:0 0 8px 0}
.export-description{font-size:1.25rem;color:var(--color-text-muted);margin:0}

/* Gradient Heat Meter */
.export-meter-container{margin-bottom:40px}
.export-meter{position:relative;height:40px;background:#E5E7EB;border-radius:20px;overflow:hidden;margin-bottom:12px}
.export-meter-gradient{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#86EFAC 0%,#FDE047 15%,#FDBA74 35%,#FCA5A5 60%,#F87171 85%,#7F1D1D 100%)}
.export-meter-knob{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:#FFFFFF;border:4px solid var(--color-primary);border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:left 0.3s ease}
.export-knob-marker{position:absolute;top:50%;left:50%;width:12px;height:12px;background:var(--color-primary);border-radius:50%;transform:translate(-50%,-50%)}
.export-meter-labels{display:flex;justify-content:space-between;align-items:center;font-size:0.9375rem;color:var(--color-text-muted);font-weight:500}
.meter-label-center{color:var(--color-text);font-weight:600}

/* SHU Tiles */
.export-shu-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.export-tile{text-align:center;padding:28px 20px;border-radius:16px;border:2px solid;box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.export-tile-min{background:#ECFDF5;border-color:#86EFAC}
.export-tile-avg{background:#FFF7D6;border-color:#FDE047}
.export-tile-max{background:#FFE6E6;border-color:#FCA5A5}
.tile-label{font-size:0.875rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.tile-value{font-family:var(--font-heading);font-size:2.25rem;font-weight:700;color:var(--color-text);margin-bottom:4px;line-height:1}
.tile-unit{font-size:0.875rem;color:var(--color-text-muted);font-weight:500}

/* Recipe Section */
.export-recipe{background:#F9FAFB;border-radius:16px;padding:32px;margin-bottom:32px}
.export-recipe-title{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;color:var(--color-text);margin:0 0 24px 0}
.export-recipe-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.export-recipe-item{background:#FFFFFF;border:2px solid #E5E7EB;border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.export-recipe-name{font-size:1.125rem;font-weight:600;color:var(--color-text)}
.export-recipe-amount{font-size:1rem;color:var(--color-text-muted);font-weight:500}

/* Footer */
.export-footer{text-align:center;padding-top:32px;border-top:2px solid #E5E7EB}
.export-footer-text{font-size:1.125rem;color:var(--color-text-muted);margin:0}
.export-footer-text strong{color:var(--color-primary);font-weight:700}

@media(max-width:768px){.header-title{font-size:1.75rem}.calculator-grid{grid-template-columns:1fr}.results-card{position:static}.pepper-row{grid-template-columns:1fr}.shu-tiles{grid-template-columns:1fr}}
@media(max-width:480px){.how-to-grid,.share-options{grid-template-columns:1fr}}

/* Calculation Info Section */
.calculation-info {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg);
}

.info-card {
    max-width: 900px;
    margin: 0 auto;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.info-intro {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: var(--spacing-xl);
}

.calculation-panel {
    background: #F9FAFB;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.panel-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.formula-box {
    background: #fff;
    border: 2px solid #E5E7EB;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    overflow-x: auto;
}

.formula-box code {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 500;
    white-space: nowrap;
}

.formula-explanation {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-top: var(--spacing-md);
}

.info-section {
    margin-bottom: var(--spacing-xl);
}

.info-subtitle {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.info-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.info-section p strong {
    color: var(--color-primary);
    font-weight: 600;
}

.example-box {
    background: #FFF7D6;
    border: 2px solid var(--color-medium-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
}

.example-box code {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 1.0625rem;
    color: var(--color-text);
    font-weight: 600;
}

.section-divider {
    border: none;
    border-top: 2px solid var(--color-border);
    margin: var(--spacing-2xl) 0;
}

.info-list {
    list-style: none;
    margin: var(--spacing-md) 0;
    padding: 0;
}

.info-list li {
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg);
    position: relative;
    line-height: 1.7;
}

.info-list li::before {
    content: "🌶️";
    position: absolute;
    left: 0;
    top: var(--spacing-sm);
}

.info-footnote {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid #E5E7EB;
}

.info-footnote a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s;
}

.info-footnote a:hover {
    color: var(--color-primary-hover);
}

/* Responsive adjustments for calculation info */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.5rem;
    }
    
    .panel-title {
        font-size: 1.25rem;
    }
    
    .info-subtitle {
        font-size: 1.125rem;
    }
    
    .formula-box code {
        font-size: 0.875rem;
    }
    
    .calculation-panel {
        padding: var(--spacing-lg);
    }
}

/* Heat Scale Table Section */
.heat-scale-section {
    padding: var(--spacing-2xl) 0;
    background: #fff;
}

.heat-scale-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.table-card {
    max-width: 1000px;
    margin: 0 auto;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.heat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.heat-table thead {
    background: #F3F4F6;
    border-bottom: 3px solid var(--color-border);
}

.heat-table th {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text);
    font-size: 1rem;
    white-space: nowrap;
}

.heat-table tbody tr {
    border-bottom: 1px solid #E5E7EB;
    transition: background-color 0.2s;
}

.heat-table tbody tr:hover {
    background: #F9FAFB;
}

.heat-table tbody tr:last-child {
    border-bottom: none;
}

.heat-table td {
    padding: var(--spacing-lg) var(--spacing-md);
    color: var(--color-text);
    vertical-align: middle;
}

.pepper-name {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Heat Badge Styles */
.heat-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.3px;
    border: 2px solid;
}

/* Mild - Green */
.heat-badge.mild {
    background: #ECFDF5;
    color: #047857;
    border-color: #86EFAC;
}

/* Medium - Yellow */
.heat-badge.medium {
    background: #FEFCE8;
    color: #CA8A04;
    border-color: #FDE047;
}

/* Hot - Orange */
.heat-badge.hot {
    background: #FFF7ED;
    color: #EA580C;
    border-color: #FDBA74;
}

/* Very Hot - Red tint */
.heat-badge.very-hot {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FCA5A5;
}

/* Extremely Hot - Pink/Red */
.heat-badge.extreme {
    background: #FFF1F2;
    color: #BE123C;
    border-color: #FDA4AF;
}

/* Super Hot - Strong Red/Purple */
.heat-badge.super-hot {
    background: linear-gradient(135deg, #7F1D1D 0%, #991B1B 100%);
    color: #FFFFFF;
    border-color: #7F1D1D;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(127, 29, 29, 0.3);
}

.table-note {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: #F9FAFB;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.table-note p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.table-note strong {
    color: var(--color-text);
}

/* Responsive table adjustments */
@media (max-width: 768px) {
    .heat-table {
        font-size: 0.875rem;
    }
    
    .heat-table th,
    .heat-table td {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    .heat-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
    
    .section-subtitle {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .heat-table th:nth-child(2),
    .heat-table th:nth-child(3),
    .heat-table td:nth-child(2),
    .heat-table td:nth-child(3) {
        font-size: 0.8125rem;
    }
}

/* ============================================
   PRODUCTS SECTION (HU-ONLY)
   ============================================ */

.products-section {
    padding: var(--spacing-2xl) 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.products-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(163,14,34,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.products-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
}

.products-header .section-subtitle {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    margin-top: var(--spacing-sm);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    position: relative;
}

/* Product Card */
/* Product Cards - Modern Borderless Design */
.product-card {
    background: #fff;
    border: none; /* Removed border for clean look */
    border-radius: 16px; /* Modern rounded corners */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); /* Soft elevation shadow */
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12); /* Enhanced shadow on hover */
}

/* Product Image Container - Generous padding for white packshots */
.product-image-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%); /* Very subtle gradient */
    overflow: hidden;
}

.product-image {
    position: absolute;
    top: 5%; /* Generous padding around image */
    left: 5%;
    width: 90%; /* Centered with padding */
    height: 90%;
    object-fit: contain; /* Changed from cover to contain for packshots */
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* Image placeholder (if no image loaded) */
.product-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
}

.product-image-placeholder svg {
    width: 80px;
    height: 80px;
    color: var(--color-primary);
    opacity: 0.3;
}

/* Product Content */
.product-content {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.3;
}

.product-description {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 var(--spacing-lg) 0;
    flex: 1;
}

/* Product CTA Button */
.product-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s;
    align-self: flex-start;
}

.product-cta:hover {
    background: var(--color-primary-hover);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(163,14,34,0.3);
}

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

/* Products Footer */
.products-footer {
    text-align: center;
    padding-top: var(--spacing-xl);
    border-top: 2px solid #E5E7EB;
    position: relative;
}

.products-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(163,14,34,0.2);
}

.products-cta:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(163,14,34,0.3);
}

/* Responsive Design */
@media (max-width: 968px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (max-width: 640px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .product-card {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .products-header .section-subtitle {
        font-size: 1rem;
    }
}

/* ============================================
   BLOG SECTION (HU-ONLY)
   ============================================ */

.blog-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg);
    position: relative;
}

.blog-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.blog-header .section-subtitle {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    margin-top: var(--spacing-sm);
}

/* Blog Grid - 3 cards in single column for wide layout */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Blog Card - Wide horizontal layout */
/* Blog Cards - Wide Format with 16:9 Images */
.blog-card {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: grid;
    grid-template-columns: 300px 1fr;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(163,14,34,0.15);
    border-color: var(--color-primary);
}

/* Blog Image Container - Enforced 16:9 aspect ratio */
.blog-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Modern CSS enforces 16:9 */
    background: linear-gradient(135deg, #F9FAFB 0%, #E5E7EB 100%);
    overflow: hidden;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .blog-image-container {
        padding-top: 56.25%; /* 16:9 = 9/16 = 56.25% */
        height: 0;
    }
}

.blog-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-image {
    transform: scale(1.05);
}

/* Image placeholder (if no image loaded) */
.blog-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    color: var(--color-primary);
    opacity: 0.5;
}

.blog-image-placeholder svg {
    width: 60px;
    height: 60px;
}

.blog-image-placeholder span {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Blog Content - No height constraints, flexible */
.blog-content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0; /* Prevent grid overflow issues */
}

/* Blog Meta */
.blog-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.blog-category {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, #FFF7D6 0%, #FEF3C7 100%);
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.blog-date svg {
    width: 14px;
    height: 14px;
}

/* Blog Title - Line clamp but no fixed height */
.blog-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 lines on desktop */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* NO fixed height - let content flow naturally */
}

/* Blog Excerpt - Line clamp but no fixed height */
.blog-excerpt {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 var(--spacing-lg) 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Max 3 lines on desktop */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* NO fixed height - let content flow naturally */
}

/* Blog CTA Button */
.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: white;
    color: var(--color-primary);
    text-decoration: none;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s;
    align-self: flex-start;
}

.blog-cta-btn:hover {
    background: var(--color-primary);
    color: white;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(163,14,34,0.3);
}

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

/* Blog Footer */
.blog-footer {
    text-align: center;
    padding-top: var(--spacing-xl);
    border-top: 2px solid #E5E7EB;
}

.blog-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(163,14,34,0.2);
}

.blog-cta:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(163,14,34,0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-card {
        grid-template-columns: 1fr;
    }
    
    .blog-image-container {
        aspect-ratio: 16 / 9; /* Enforced 16:9 on mobile */
        width: 100%;
    }
    
    /* Fallback for older browsers */
    @supports not (aspect-ratio: 16 / 9) {
        .blog-image-container {
            padding-top: 56.25%; /* 16:9 ratio fallback */
            height: 0;
        }
    }
    
    .blog-title {
        font-size: 1.25rem;
    }
    
    .blog-excerpt {
        -webkit-line-clamp: 2; /* Reduce to 2 lines on mobile */
    }
}

@media (max-width: 640px) {
    .blog-grid {
        gap: var(--spacing-lg);
    }
    
    .blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .blog-header .section-subtitle {
        font-size: 1rem;
    }
}

/* About Section */
.about-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg);
}

.about-card {
    max-width: 1100px;
    margin: 0 auto;
}

.about-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.about-image {
    position: relative;
}

.image-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #F9FAFB 0%, #E5E7EB 100%);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--color-border);
}

.placeholder-icon {
    font-size: 6rem;
    margin-bottom: var(--spacing-md);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.placeholder-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
}

/* V-1303: About image container - responsive photo block */
.about-media {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #f4f4f4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* About photo fit */
.about-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 25%;
}

/* V-1303: Language gating for alt-localized images */
body[data-lang="hu"] .about-photo.lang-en {
    display: none !important;
}

body[data-lang="en"] .about-photo.lang-hu {
    display: none !important;
}

/* Fallback: Show EN image if no language set */
html:not([data-lang]) .about-photo.lang-hu {
    display: none;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* V-1003: About language blocks - static HTML approach */
.about-copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.about-lang {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Language toggling - CSS-only visibility control */
[data-lang="hu"] .lang-en {
    display: none;
}

[data-lang="en"] .lang-hu {
    display: none;
}

/* V-1102: Bulletproof CSS gating for About blocks (hard guarantee) */
body[data-lang="hu"] #about-copy-en {
    display: none !important;
}

body[data-lang="en"] #about-copy-hu {
    display: none !important;
}

/* Safety defaults: hide blocks until language is known */
#about-copy-en.is-hidden {
    display: none;
}

#about-copy-hu.is-hidden {
    display: none;
}

/* Fallback: If no data-lang set, show English by default */
html:not([data-lang]) .lang-hu {
    display: none;
}

.about-text {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 14px 0;
}

.about-text:last-of-type {
    margin-bottom: 0;
}

.about-text strong {
    color: var(--color-primary);
    font-weight: 600;
}

.about-fun-fact {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--spacing-md);
    background: #FFF7D6;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    margin: 10px 0 0 0;
    opacity: 0.85;
}

.about-cta {
    align-self: flex-start;
    margin-top: var(--spacing-md);
    display: inline-flex;
    align-items: center;
}

.about-cta svg {
    transition: transform 0.2s ease;
}

.about-cta:hover svg {
    transform: translate(2px, -2px);
}

/* Footer */
.footer {
    background: #a9071c;
    color: #F9FAFB;
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.footer-emblem {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #7F1D1D 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(163, 14, 34, 0.4);
}

.emblem-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.footer-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.footer-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.social-label {
    font-size: 1.125rem;
    font-weight: 500;
    color: #D1D5DB;
    margin: 0;
}

.social-icons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.social-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(246, 194, 14, 0.6);color: var(--color-primary);
}

.social-icon:active {
    transform: translateY(-1px);
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
    font-size: 0.9375rem;
    color: #9CA3AF;
    margin: 0 0 var(--spacing-sm) 0;
}

.footer-tagline {
    font-size: 1rem;
    color: #D1D5DB;
    margin: 0;
    font-weight: 500;
}

/* Responsive About & Footer */
@media (max-width: 968px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .about-image {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: var(--spacing-xl) 0;
    }
    
    .about-text {
        font-size: 1rem;
    }
    
    .footer {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }
    
    .footer-emblem {
        width: 64px;
        height: 64px;
    }
    
    .emblem-icon {
        font-size: 2rem;
    }
    
    .footer-title {
        font-size: 1.5rem;
    }
    
    .social-icon {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .about-cta {
        width: 100%;
        text-align: center;
    }
    
    .social-icons {
        gap: var(--spacing-sm);
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
    }
    
    .social-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   LANGUAGE GATING SYSTEM
   ============================================ */

/* 
 * Multi-layer language gating for HU-only sections
 * Uses multiple selectors for maximum compatibility
 */

/* Hide HU-only sections in English */
html[data-lang="en"] .lang-gated[data-lang-gate="hu-only"],
html[data-lang="en"] #hu-products,
html[data-lang="en"] #hu-blogs,
html[data-lang="en"] .products-section[data-lang-gate="hu-only"],
html[data-lang="en"] .blog-section[data-lang-gate="hu-only"],
body.lang-en .lang-gated[data-lang-gate="hu-only"],
body.lang-en #hu-products,
body.lang-en #hu-blogs,
body.lang-en .products-section[data-lang-gate="hu-only"],
body.lang-en .blog-section[data-lang-gate="hu-only"],
body[data-lang="en"] .lang-gated[data-lang-gate="hu-only"],
body[data-lang="en"] #hu-products,
body[data-lang="en"] #hu-blogs {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Show HU-only sections in Hungarian */
html[data-lang="hu"] .lang-gated[data-lang-gate="hu-only"],
html[data-lang="hu"] #hu-products,
html[data-lang="hu"] #hu-blogs,
body.lang-hu .lang-gated[data-lang-gate="hu-only"],
body.lang-hu #hu-products,
body.lang-hu #hu-blogs,
body[data-lang="hu"] .lang-gated[data-lang-gate="hu-only"],
body[data-lang="hu"] #hu-products,
body[data-lang="hu"] #hu-blogs {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}

/* Hide EN-only sections in Hungarian (future use) */
html[data-lang="hu"] .lang-gated[data-lang-gate="en-only"],
body.lang-hu .lang-gated[data-lang-gate="en-only"],
body[data-lang="hu"] .lang-gated[data-lang-gate="en-only"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Show EN-only sections in English (future use) */
html[data-lang="en"] .lang-gated[data-lang-gate="en-only"],
body.lang-en .lang-gated[data-lang-gate="en-only"],
body[data-lang="en"] .lang-gated[data-lang-gate="en-only"] {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}

/* Commerce-specific gating (deprecated - use lang-gated instead) */
html[data-lang="en"] .commerce-gated,
body.lang-en .commerce-gated,
body[data-lang="en"] .commerce-gated {
    display: none !important;
}

/* Tartalom korlátozás */
html[data-lang="en"] .content-gated,
body.lang-en .content-gated {
    display: none !important;
}

/* Jövőbeli: Amikor EN kereskedelem engedélyezett */
html[data-lang="en"][data-commerce-enabled="true"] .commerce-gated,
body.lang-en.commerce-enabled .commerce-gated {
    display: block !important;
}

/* Jövőbeli: Amikor EN blog engedélyezett */
html[data-lang="en"][data-blog-enabled="true"] .content-gated,
body.lang-en.blog-enabled .content-gated {
    display: block !important;
}

/* Nyelvi korlátozási üzenet stílusa */
.lang-gate-message {
    background: #F9FAFB;
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.lang-gate-message p {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-muted);
}

.lang-gate-message p:last-child {
    margin-bottom: 0;
}

.lang-gate-message strong {
    color: var(--color-text);
}

.lang-gate-message a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

.lang-gate-message a:hover {
    color: var(--color-primary-hover);
}

/* Termékek szekció */
.products-section {
    padding: var(--spacing-2xl) 0;
    background: #fff;
}

.products-grid {
    margin-top: var(--spacing-xl);
}

/* Blog szekció */
.blog-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg);
}

.blog-grid {
    margin-top: var(--spacing-xl);
}

/* T-101: Segmented Unit Control */
.unit-control {
    margin-top: 8px;
}

.segmented {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.segmented__btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    background: white;
    color: #a41e23;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 90px;
}

.segmented__btn:first-child {
    border-right: 1px solid #d1d5db;
}

.segmented__btn[aria-pressed="true"] {
    background: #a41e23;
    color: white;
}

.segmented__btn[aria-pressed="false"]:hover {
    background: #f9fafb;
}

.segmented__btn:focus {
    outline: 2px solid #a41e23;
    outline-offset: -2px;
    z-index: 1;
}

.unit-helper-text {
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.4;
}

/* Hide unit control on HU */
[data-lang="hu"] .unit-control,
.lang-hu .unit-control {
    display: none !important;
}


/* ===================================
   Logo Styling
   =================================== */

/* Logo link styling - Header (no background since header matches logo) */
.header .logo-link {
    text-decoration: none;
    display: block;
    transition: transform 0.2s ease;
}

.header .logo-link:hover {
    transform: scale(1.05);
}

/* Footer logo link */
.footer .logo-link {
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease;
}

.footer .logo-link:hover {
    transform: scale(1.05);
}

/* Header Logo - Double size */
.header-logo {
    height: 140px;
    width: auto;
    display: block;
}

/* Footer Logo - Rounded, Double size */
.footer-logo {
    height: 160px;
    width: 160px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .header-logo {
        height: 110px;
        margin-right: 10px;
    }
    
    .footer-logo {
        height: 120px;
        width: 120px;
    }
}

@media (max-width: 480px) {
    .header-logo {
        height: 90px;
        margin-right: 8px;
    }
    
    .footer-logo {
        height: 100px;
        width: 100px;
    }
}

/* =================================
   Share & Embed Section
   ================================= */

.share-embed-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg);
}

.share-embed-card {
    max-width: 900px;
    margin: 0 auto;
}

.share-embed-card .section-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

/* Tabs Navigation */
.share-embed-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: var(--spacing-xl);
}

.share-embed-tab {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -2px;
}

.share-embed-tab:hover {
    color: var(--color-text);
    background: #F9FAFB;
}

.share-embed-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.share-embed-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Panels */
.share-embed-panel {
    display: none;
}

.share-embed-panel.active {
    display: block;
    animation: fadeInPanel 0.3s ease-in;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-panel-content,
.embed-panel-content {
    padding: var(--spacing-lg) 0;
}

.panel-subtitle {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.panel-description {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
}

/* Share Actions */
.share-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-share:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(163, 14, 34, 0.3);
}

.btn-share:active {
    transform: translateY(0);
}

.btn-share:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-share.copied {
    background: #10B981;
    border-color: #10B981;
}

.btn-share svg {
    flex-shrink: 0;
}

.share-link-fallback {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Embed Code Block */
.embed-code-container {
    position: relative;
    margin-bottom: var(--spacing-lg);
}

.embed-code-block {
    background: #1F2937;
    border: 2px solid #374151;
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: 0 0 var(--spacing-md) 0;
    overflow-x: auto;
}

.embed-code-block code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #E5E7EB;
    display: block;
    white-space: pre;
}

.btn-copy-code {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-code:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(163, 14, 34, 0.3);
}

.btn-copy-code:active {
    transform: translateY(0);
}

.btn-copy-code:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-copy-code.copied {
    background: #10B981;
}

.btn-copy-code svg {
    flex-shrink: 0;
}

/* Customize Embed */
.embed-customize {
    margin-top: var(--spacing-xl);
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-md);
    padding: 0;
}

.embed-customize-toggle {
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    list-style: none;
    user-select: none;
}

.embed-customize-toggle::-webkit-details-marker {
    display: none;
}

.embed-customize-toggle:hover {
    background: #F9FAFB;
}

.embed-customize-content {
    padding: var(--spacing-lg);
    border-top: 1px solid #E5E7EB;
    display: grid;
    gap: var(--spacing-lg);
}

.embed-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.embed-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1F2937;
    color: #fff;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .share-embed-tabs {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }
    
    .share-embed-tab {
        border-bottom: 1px solid #E5E7EB;
        border-left: 3px solid transparent;
        bottom: 0;
    }
    
    .share-embed-tab.active {
        border-bottom-color: #E5E7EB;
        border-left-color: var(--color-primary);
    }
    
    .share-actions {
        flex-direction: column;
    }
    
    .btn-share {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .share-embed-card .section-title {
        font-size: 1.5rem;
    }
    
    .panel-subtitle {
        font-size: 1.125rem;
    }
    
    .embed-code-block {
        padding: var(--spacing-md);
    }
    
    .embed-code-block code {
        font-size: 0.75rem;
    }
}

/* =================================
   Updated Share & Embed Section
   T-201, T-202, T-203, T-204
   ================================= */

/* T-202: Improved Tab Bar - Equal width, full indicator */
.share-embed-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: var(--spacing-xl);
}

.share-embed-tab {
    flex: 1; /* T-202: Equal width tabs (50/50) */
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -2px;
    text-align: center; /* T-202: Center-aligned labels */
}

.share-embed-tab:hover {
    color: var(--color-text);
    background: #F9FAFB;
}

.share-embed-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary); /* T-202: Full-width indicator */
}

.share-embed-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* T-201: Share Grid Layout (Desktop: 2-column, Mobile: stacked) */
.share-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 768px) {
    .share-grid {
        grid-template-columns: 1fr 280px; /* Left: flexible, Right: QR card */
        gap: var(--spacing-2xl);
    }
}

.share-main {
    min-width: 0; /* Prevent overflow */
}

/* T-201: Shareable Link Field */
.share-link-field-group {
    margin-bottom: var(--spacing-xl);
}

.share-link-label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.share-link-helper {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.share-link-field {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s ease;
    max-width: 860px; /* T-201: Consistent with embed code block */
}

.share-link-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(163, 14, 34, 0.1);
}

.share-link-input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    min-width: 0; /* Allow text truncation */
}

.share-link-input:focus {
    outline: none;
}

.btn-copy-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-copy-link:hover {
    background: var(--color-primary-hover);
}

.btn-copy-link:active {
    transform: scale(0.98);
}

.btn-copy-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-copy-link.copied {
    background: #10B981;
}

.btn-copy-link svg {
    flex-shrink: 0;
}

/* T-201: Secondary Actions (Email button) */
.share-secondary-actions {
    margin-top: var(--spacing-lg);
}

.btn-share-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: #fff;
    color: var(--color-text);
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-share-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #FFF5F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(163, 14, 34, 0.15);
}

.btn-share-secondary:active {
    transform: translateY(0);
}

.btn-share-secondary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-share-secondary svg {
    flex-shrink: 0;
}

/* T-203: QR Code Card */
.share-qr-card {
    background: linear-gradient(135deg, #FFF5F7 0%, #FFF 100%);
    border: 2px solid #FFE4E8;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.qr-card-content {
    text-align: center;
    width: 100%;
}

.qr-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.qr-card-title svg {
    flex-shrink: 0;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: #fff;
    border-radius: var(--radius-md);
    border: 2px solid #E5E7EB;
}

.qr-code-container canvas,
.qr-code-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

.qr-card-helper {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
}

/* Remove old Share Actions styles (no longer needed) */
.share-actions {
    display: none;
}

.btn-share {
    display: none;
}

/* Mobile Responsive Updates */
@media (max-width: 768px) {
    .share-embed-tabs {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }
    
    .share-embed-tab {
        border-bottom: 1px solid #E5E7EB;
        border-left: 3px solid transparent;
        bottom: 0;
        text-align: left;
    }
    
    .share-embed-tab.active {
        border-bottom-color: #E5E7EB;
        border-left-color: var(--color-primary);
    }
    
    .share-grid {
        grid-template-columns: 1fr; /* T-203: Stack on mobile */
    }
    
    .share-qr-card {
        order: 2; /* QR card below on mobile */
    }
    
    .share-link-field {
        max-width: 100%;
    }
    
    .btn-copy-link {
        padding: var(--spacing-md);
    }
    
    .btn-copy-link .btn-text {
        display: none; /* Show icon only on small screens */
    }
}

@media (max-width: 480px) {
    .share-link-input {
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .btn-copy-link {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .btn-share-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* T-105: Heat Meter Tooltip */
.heat-meter-indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.heat-meter-indicator:hover,
.heat-meter-indicator:focus {
    height: 44px;
    outline: none;
}

.heat-meter-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: #1F2937;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.heat-meter-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1F2937;
}

.heat-meter-indicator:hover + .heat-meter-tooltip,
.heat-meter-indicator:focus + .heat-meter-tooltip,
.heat-meter-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}

.tooltip-content strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
    font-weight: 600;
}

.tooltip-content #tooltipSHU {
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

.tooltip-range {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}

/* Mobile: make tooltip easier to trigger */
@media (max-width: 768px) {
    .heat-meter-indicator {
        cursor: default;
    }
    
    .heat-meter-tooltip.show {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px);
    }
}

/* ============================================================================
   T-701: SCOPED HIGH-SPECIFICITY MEDIA RULES (Server Theme Override)
   ============================================================================
   These rules override WordPress/theme CSS by using container IDs for higher
   specificity. Ensures images fit properly in cards regardless of server CSS.
   ========================================================================== */

/* Product Cards - Fixed Aspect Ratio & No Overflow */
#productsGrid .product-card {
    box-sizing: border-box;
    border: 1px solid transparent; /* T-702: Reserve border space */
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    will-change: transform;
}

#productsGrid .product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(163, 14, 34, 0.15); /* T-702: Only color changes */
}

#productsGrid .product-image {
    width: 100% !important; /* Override theme */
    height: 100% !important; /* Override theme */
    aspect-ratio: 4 / 3; /* Product images slightly taller */
    overflow: hidden;
    border-radius: 14px;
    background: #f6f6f6;
    position: relative;
    display: block; /* Removes baseline gaps */
}

#productsGrid .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important; /* Override theme max-width */
}

#productsGrid .product-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center;
}

/* Blog Cards - Fixed 16:9 Aspect Ratio & No Overflow */
#blogGrid .blog-card {
    box-sizing: border-box;
    border: 1px solid #E5E7EB; /* T-702: Reserve border space */
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    will-change: transform;
}

#blogGrid .blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary); /* T-702: Only color changes */
}

#blogGrid .blog-image {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9; /* Blog thumbnails */
    overflow: hidden;
    border-radius: 14px;
    background: #f6f6f6;
    position: relative;
    display: block;
}

#blogGrid .blog-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
}

/* T-702: Smooth hover zoom (no layout shift) */
#blogGrid .blog-card:hover .blog-image img {
    transform: scale(1.02); /* Subtle zoom inside fixed wrapper */
    transition: transform 180ms ease;
}

#blogGrid .blog-image img {
    transition: transform 180ms ease;
}

#blogGrid .blog-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center;
}

/* T-702: Prevent any layout-shifting hover effects */
#productsGrid .product-card img,
#blogGrid .blog-card img {
    /* Transform only - no size changes */
    backface-visibility: hidden; /* GPU acceleration */
    -webkit-font-smoothing: antialiased;
}


/* ============================================================================
   T-703: BLOG CARD LAYOUT STRUCTURE (Vertical Cards in Grid)
   ============================================================================
   Ensures blog cards display as vertical cards (image top, content below)
   in a 3-column grid, matching the overall design pattern.
   ========================================================================== */

#blogGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: var(--spacing-lg);
}

@media (max-width: 960px) {
    #blogGrid {
        grid-template-columns: 1fr;
    }
}

#blogGrid .blog-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    /* Override any grid-template-columns from old horizontal layout */
    grid-template-columns: none !important;
}

#blogGrid .blog-image {
    width: 100%;
    /* First child, stays in flow */
    position: relative !important; /* Not absolute */
    order: 0; /* Ensure it's first */
}

#blogGrid .blog-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    order: 1; /* After image */
}

/* ============================================================================
   T-704: ABOUT IMAGE POLISH (Remove Gaps & Clean Alignment)
   ============================================================================
   Removes baseline whitespace and ensures proper alignment.
   ========================================================================== */

.about-photo {
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    overflow: hidden;
    display: block;
    margin: 0 auto; /* Center if narrower than container */
}

.about-photo img {
    display: block !important; /* Removes baseline gap */
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/* Optional: Fixed aspect ratio for about photo */
.about-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-media .about-photo {
    aspect-ratio: 4 / 5; /* Portrait orientation */
}


/* ============================================================================
   T-801: TERMÉKFOTÓK CONTAIN + PADDING (Teljes packshot látszik)
   ============================================================================
   Packshot jellegű termékképeknél az alsó rész ne vágódjon.
   ========================================================================== */

#productsGrid .product-image {
    background: #fff !important;
    padding: 14px !important;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

#productsGrid .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* NEM cover - teljes kép látszik */
    object-position: center bottom !important; /* Alja preferáltan */
    display: block !important;
}

/* Blog képek továbbra is cover maradnak */
#blogGrid .blog-image img {
    object-fit: cover !important; /* Blog marad cover */
}

/* ============================================================================
   T-802: "MEGNÉZEM" CTA GOMB STÍLUS (Theme-proof)
   ============================================================================
   Termék CTA újra gomb, nem link.
   ========================================================================== */

#productsGrid a.product-cta-btn,
#productsGrid .gc-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #9b0f1f !important; /* Brand piros */
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    border: 1px solid #9b0f1f;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

#productsGrid a.product-cta-btn:hover,
#productsGrid .gc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    background: #8A0C1D !important;
}

#productsGrid a.product-cta-btn:visited,
#productsGrid .gc-btn:visited {
    color: #fff !important;
}

/* ============================================================================
   T-803: TERMÉKNÉV KÖZÉPRE IGAZÍTÁS
   ============================================================================
   Termék név vizuálisan középen.
   ========================================================================== */

#productsGrid .product-content {
    text-align: center;
    padding: var(--spacing-lg);
}

#productsGrid .product-title {
    margin: 10px 0 6px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-primary);
    /* 2 soros clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#productsGrid .product-description {
    text-align: center;
    max-width: 32ch;
    margin: 0 auto 16px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* ============================================================================
   T-804: BLOG LISTÁS LAYOUT + EXCERPT
   ============================================================================
   Blog visszatér függőleges listás elrendezésre rövid leírással.
   ========================================================================== */

#blogGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    grid-template-columns: none !important; /* Override T-703 grid */
}

#blogGrid .blog-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 18px;
    padding: 18px;
    align-items: flex-start;
}

#blogGrid .blog-image {
    width: 260px;
    flex: 0 0 260px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 16px;
    position: relative !important;
}

#blogGrid .blog-content {
    flex: 1;
    text-align: left; /* List layout = balra igazítás */
}

#blogGrid .blog-excerpt {
    color: #555;
    margin: 8px 0 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    /* 2 soros clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobilon stack */
@media (max-width: 900px) {
    #blogGrid .blog-card {
        flex-direction: column !important;
    }
    
    #blogGrid .blog-image {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* ============================================================================
   T-805: HOVER FLICKER VÉGLEGES FIX (Transform-only)
   ============================================================================
   Hover ne okozzon reflow/ugrást.
   ========================================================================== */

#productsGrid .product-card,
#blogGrid .blog-card {
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

#productsGrid .product-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(163, 14, 34, 0.15) !important;
    /* Semmi padding/margin/border-width változás */
}

#blogGrid .blog-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--color-primary) !important;
}

/* Kép zoom csak transform scale (wrapper fix marad) */
#productsGrid .product-card:hover .product-image img {
    transform: scale(1.03);
    transition: transform 180ms ease;
}

#blogGrid .blog-card:hover .blog-image img {
    transform: scale(1.03);
    transition: transform 180ms ease;
}


/* ============================================================================
   T-901: PREMIUM CONTINUOUS GRADIENT HEAT METER (No Brackets)
   ============================================================================
   Single smooth gradient with premium gloss finish.
   ========================================================================== */

.heat-meter-bar {
    position: relative;
    height: 32px;
    border-radius: 999px !important; /* Pill shape */
    overflow: hidden !important;
    /* Premium continuous gradient */
    background: linear-gradient(90deg,
        #16a34a 0%,
        #84cc16 18%,
        #facc15 35%,
        #fb923c 55%,
        #ef4444 75%,
        #7f1d1d 100%
    ) !important;
    /* Premium depth with inner shadows */
    box-shadow: 
        inset 0 2px 6px rgba(0,0,0,.18),
        inset 0 -2px 6px rgba(255,255,255,.25),
        0 2px 8px rgba(0,0,0,.08) !important;
}

/* Premium gloss overlay */
.heat-meter-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(255,255,255,.35) 0%, 
        rgba(255,255,255,0) 55%
    );
    pointer-events: none;
    border-radius: 999px;
}

/* Remove any segment dividers that might exist */
.heat-meter-bar::before,
.heat-meter-dividers,
.heat-meter-divider {
    display: none !important;
}

/* ============================================================================
   T-902: READABLE HEAT INDICATOR MARKER (Visible Everywhere)
   ============================================================================
   Thin marker with white outline for visibility on all gradient colors.
   ========================================================================== */

.heat-meter-indicator,
#heatIndicator {
    position: absolute;
    top: 0;
    width: 3px !important;
    height: 100% !important;
    background: rgba(0,0,0,.85) !important;
    /* White outline for visibility */
    box-shadow: 
        0 0 0 2px rgba(255,255,255,.65),
        0 2px 10px rgba(0,0,0,.25) !important;
    border-radius: 2px;
    z-index: 10;
    transition: left .3s ease;
    transform: none !important; /* Remove any transform */
}

/* ============================================================================
   T-903: ABOUT SECTION - STRETCH IMAGE TO MATCH CONTENT HEIGHT
   ============================================================================
   Photo fills vertical space, aligned to design guides.
   ========================================================================== */

.about-card,
.about-section .card {
    overflow: visible; /* Allow content to breathe */
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: stretch; /* Key: stretch both columns */
    gap: 28px;
}

.about-media {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.about-photo {
    height: 100% !important;
    min-height: 420px;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    display: block;
    /* Remove any aspect-ratio constraint */
    aspect-ratio: unset !important;
}

.about-photo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 50% 20% !important; /* Faces nicely framed */
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .about-photo {
        min-height: 360px;
        aspect-ratio: 4 / 3; /* Mobile gets aspect ratio */
    }
}

/* ============================================================================
   T-905: REGRESSION PREVENTION (No Flicker, No Reflow)
   ============================================================================
   Ensures previous fixes remain intact.
   ========================================================================== */

/* Confirm: No layout-shifting hovers */
.product-card,
.blog-card {
    /* Already fixed in T-805, but reinforce */
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

/* Confirm: Heat meter has no segments */
.heat-meter-bar > * {
    /* If any child elements exist besides ::after, hide them */
}

.heat-meter-bar > div:not(.heat-meter-indicator):not(#heatIndicator) {
    display: none !important;
}


/* ============================================================================
   T-1001: PRODUCT LINK STYLING (Clickable Image + Title)
   ============================================================================
   Image and title are now wrapped in links for better UX.
   ========================================================================== */

#productsGrid a.product-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

#productsGrid a.product-link--image {
    display: block;
    width: 100%;
    height: 100%;
}

#productsGrid a.product-link--title {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

#productsGrid a.product-link--title:hover {
    color: var(--color-primary-hover) !important;
    text-decoration: none !important;
}

/* ============================================================================
   T-1002: CENTER "MEGNÉZEM" TEXT + PREVENT LINK OVERRIDES
   ============================================================================
   Button text perfectly centered, never blue/underlined.
   ========================================================================== */

#productsGrid a.gc-btn.product-cta,
#productsGrid a.product-cta-btn,
#productsGrid .gc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    width: 100%;
    min-height: 48px;
    text-decoration: none !important;
    padding: 12px 20px;
}

#productsGrid a.gc-btn.product-cta:visited,
#productsGrid a.product-cta-btn:visited,
#productsGrid .gc-btn:visited {
    color: #fff !important;
    text-decoration: none !important;
}

#productsGrid a.gc-btn.product-cta:hover,
#productsGrid a.product-cta-btn:hover,
#productsGrid .gc-btn:hover {
    text-decoration: none !important;
    color: #fff !important;
}

/* ============================================================================
   T-1006: FOOTER REDESIGN - WARM PARCHMENT NEUTRAL BACKGROUND
   ============================================================================
   Replacing harsh red with on-brand warm neutral.
   ========================================================================== */

.footer,
#siteFooter {
    background: #F2E7D8 !important; /* Warm parchment */
    color: #3B2A2A !important;
    border-top: 3px solid #9B0F1F;
}

.footer-content,
.footer p,
.footer span,
.footer .social-label {
    color: #3B2A2A !important;
}

/* Social icons with brand red */
.footer .social-icon,
.social-link {
    background: #9B0F1F !important;
    color: #fff !important;
    border: 2px solid #9B0F1F;
    transition: all 180ms ease;
}

.footer .social-icon:hover,
.social-link:hover {
    background: #8A0C1D !important;
    border-color: #8A0C1D;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 15, 31, 0.3);
}

/* Bottom line improved contrast */
.footer-bottom,
.footer-copyright {
    border-top: 1px solid rgba(155, 15, 31, 0.15);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-lg);
    color: #3B2A2A !important;
}

/* Ensure emojis are readable */
.footer em,
.footer strong {
    color: #9B0F1F;
    font-weight: 700;
}


/* ============================================================================
   T-1101: BLOG CARD "FIT BETWEEN RED LINES" ALIGNMENT
   ============================================================================
   Content column matches image height with space-between distribution.
   ========================================================================== */

#blogGrid .blog-card {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 24px;
    align-items: stretch !important; /* Critical: stretch both columns */
    padding: 18px;
}

#blogGrid .blog-image {
    height: 170px !important; /* Fixed height for vertical alignment */
    overflow: hidden;
    border-radius: 16px;
    flex: 0 0 320px; /* Override any flex settings */
}

#blogGrid .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

#blogGrid .blog-content {
    height: 170px !important; /* MUST match blog-image height */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Top group + bottom CTA */
    padding: 2px 0;
}

/* Remove margin spill inside vertical box */
#blogGrid .blog-meta,
#blogGrid .blog-category,
#blogGrid .blog-title,
#blogGrid .blog-excerpt,
#blogGrid .blog-cta,
#blogGrid .blog-cta-btn {
    margin: 0 !important;
}

#blogGrid .blog-title {
    margin-top: 8px !important;
    line-height: 1.15 !important;
}

#blogGrid .blog-cta,
#blogGrid .blog-cta-btn {
    align-self: flex-start; /* Keeps button aligned neatly */
    margin-top: 0 !important;
}

#blogGrid .blog-excerpt {
    margin-top: 10px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* Mobile stacking */
@media (max-width: 900px) {
    #blogGrid .blog-card {
        grid-template-columns: 1fr !important;
    }
    
    #blogGrid .blog-image {
        height: 200px !important;
    }
    
    #blogGrid .blog-content {
        height: auto !important;
        gap: 12px;
    }
}

/* ============================================================================
   T-1102: "ELOLVASOM" BUTTON CONSISTENT ALIGNMENT
   ============================================================================
   Button sits at consistent baseline, no drifting.
   ========================================================================== */

#blogGrid a.blog-cta,
#blogGrid a.blog-cta-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    text-decoration: none !important;
}

#blogGrid a.blog-cta:visited,
#blogGrid a.blog-cta-btn:visited {
    color: inherit !important;
    text-decoration: none !important;
}

#blogGrid a.blog-cta:hover,
#blogGrid a.blog-cta-btn:hover {
    text-decoration: none !important;
}

/* ============================================================================
   T-1103 & T-1201 & T-1202: FOOTER DARK NEUTRAL BACKGROUND
   ============================================================================
   Replacing harsh red OR warm parchment with dark neutral #3a3a2f.
   Works for both EN and HU pages (global selector).
   ========================================================================== */

.footer,
#siteFooter {
    background: #3a3a2f !important; /* Dark neutral - T-1201 */
    color: #f5f3ea !important; /* Warm off-white - T-1202 */
    border-top: 3px solid #f2c94c; /* Accent gold border */
}

.footer-content,
.footer p,
.footer span,
.footer .social-label,
.footer .copyright,
.footer .footer-tagline {
    color: #f5f3ea !important;
}

/* Footer links - readable on dark */
.footer a {
    color: #f5f3ea !important;
    text-decoration: none !important;
}

.footer a:hover {
    color: #f2c94c !important; /* Warm gold accent */
    text-decoration: none !important;
}

.footer a:visited {
    color: #f5f3ea !important;
}

/* Social icons with gold background */
.footer .social-icon,
.footer .social-icons a,
.social-link {
    background: #f2c94c !important; /* Gold circles */
    color: #2a2a22 !important; /* Dark icons */
    border: 2px solid #f2c94c;
    transition: all 180ms ease;
}

.footer .social-icon:hover,
.footer .social-icons a:hover,
.social-link:hover {
    background: #e7b84b !important; /* Darker gold */
    border-color: #e7b84b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 201, 76, 0.3);
}

/* Small print readability */
.footer .copyright,
.footer .footer-tagline {
    opacity: 0.92;
}

/* Keyboard focus visibility - T-1202 */
.footer a:focus-visible {
    outline: 2px solid #f2c94c;
    outline-offset: 3px;
    border-radius: 10px;
}

/* Bottom line divider */
.footer-bottom,
.footer-copyright {
    border-top: 1px solid rgba(242, 201, 76, 0.2);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-lg);
}


/* ============================================================================
   T-1301: FOOTER SPACING - Logo to Social Label
   ============================================================================
   Add vertical breathing room between logo and "Kövess minket..." text.
   ========================================================================== */

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Key spacing between logo and social section */
}

.footer-emblem,
.footer-logo {
    margin-bottom: 16px;
}

.social-label {
    margin-top: 6px;
}

.footer-social {
    margin-top: 8px;
}


/* ============================================================================
   T-1401: MORE SPACE ABOVE FOOTER LOGO
   ============================================================================
   Add breathing room at top of footer.
   ========================================================================== */

.footer {
    padding-top: calc(var(--spacing-2xl) + 14px) !important;
}

.footer-emblem,
.footer-logo {
    margin-top: 14px;
}

/* ============================================================================
   T-1402: ABOUT CTA - NO UNDERLINE + BUTTON STYLE
   ============================================================================
   About CTA looks like proper button, not link.
   ========================================================================== */

#about a.gc-btn,
#about .about-cta,
.about-section a.gc-btn,
.about-section .about-cta {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#about a.gc-btn:hover,
#about .about-cta:hover,
.about-section a.gc-btn:hover,
.about-section .about-cta:hover {
    text-decoration: none !important;
}

#about a.gc-btn:visited,
#about .about-cta:visited,
.about-section a.gc-btn:visited,
.about-section .about-cta:visited {
    text-decoration: none !important;
}

/* Remove icon spacing if icon removed */
#about a.gc-btn svg,
#about .about-cta svg {
    display: none; /* T-1402: Remove icon */
}

/* ============================================================================
   T-1403: ELEGANT HOVER FOR FOOTER SOCIAL ICONS
   ============================================================================
   Refined interaction on dark background.
   ========================================================================== */

.footer .social-icon,
.footer .social-icons a,
.social-link {
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

.footer .social-icon:hover,
.footer .social-icons a:hover,
.social-link:hover {
    background: #ffd56a !important; /* Elegant lighter gold */
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 18px rgba(0,0,0,.25) !important;
    filter: saturate(1.05);
}

.footer .social-icon:focus-visible,
.footer .social-icons a:focus-visible,
.social-link:focus-visible {
    outline: 2px solid #ffd56a !important;
    outline-offset: 3px;
}


/* ============================================================================
   MOBILE OPTIMIZATION - T-1501 TO T-1513
   ============================================================================
   Complete mobile-first responsive design improvements.
   ========================================================================== */

/* ============================================================================
   T-1501: MOBILE SPACING + TYPOGRAPHY SCALE
   ============================================================================ */

@media (max-width: 768px) {
  /* Container padding reduction */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Section spacing reduction (30%) */
  section {
    padding-top: calc(var(--spacing-2xl) * 0.7) !important;
    padding-bottom: calc(var(--spacing-2xl) * 0.7) !important;
  }
  
  .hero,
  .header {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
  }
  
  /* Typography scale reduction */
  h1 {
    font-size: 2rem !important; /* was 2.5-3rem */
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.5rem !important; /* was 1.75-2rem */
    line-height: 1.2 !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }
  
  /* Card padding reduction */
  .card {
    padding: var(--spacing-lg) !important;
  }
  
  /* Ensure touch targets */
  button,
  input,
  select,
  .btn,
  .gc-btn,
  a.gc-btn {
    min-height: 44px !important;
  }
}

/* ============================================================================
   T-1502: MOBILE HERO OPTIMIZATION
   ============================================================================ */

@media (max-width: 768px) {
  .header {
    min-height: auto !important;
  }
  
  .header-logo,
  .logo {
    max-width: 80px !important; /* was 120px */
    height: auto;
  }
  
  .header-title {
    font-size: 1.75rem !important;
    margin-bottom: var(--spacing-md) !important;
  }
  
  .header-subtitle {
    font-size: 1rem !important;
  }
  
  /* Hero scroll CTA (if added) */
  .hero-scroll-cta {
    width: 100%;
    margin-top: var(--spacing-lg);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
}

/* ============================================================================
   T-1503: FORMULA ACCORDION (MOBILE-ONLY)
   ============================================================================ */

@media (max-width: 768px) {
  .how-calculate-section {
    border-radius: 12px;
    overflow: hidden;
  }
  
  .accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    text-align: left;
  }
  
  .accordion-trigger h3 {
    margin: 0;
    font-size: 1.1rem;
  }
  
  .chevron {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }
  
  .accordion-trigger[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
  }
  
  .accordion-content[aria-hidden="false"] {
    max-height: 800px;
    padding: 16px;
  }
  
  .formula-scroll {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 12px;
  }
  
  .formula-scroll code {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
  }
}

@media (min-width: 769px) {
  .accordion-trigger {
    display: none !important;
  }
  
  .accordion-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ============================================================================
   T-1504: SHU TABLE MOBILE CARD VIEW
   ============================================================================ */

@media (max-width: 768px) {
  .shu-table {
    display: none !important;
  }
  
  .shu-cards {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }
  
  .shu-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e5e5;
  }
  
  .shu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .pepper-name {
    font-weight: 700;
    font-size: 1rem;
    color: #2a2a22;
  }
  
  .category-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f0f0f0;
    color: #666;
  }
  
  .shu-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .shu-range {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .shu-range:last-child {
    border-bottom: none;
  }
  
  .shu-range .label {
    color: #666;
    font-size: 0.875rem;
  }
  
  .shu-range .value {
    font-weight: 600;
    color: #2a2a22;
  }
}

@media (min-width: 769px) {
  .shu-cards {
    display: none !important;
  }
  
  .shu-table {
    display: table !important;
  }
}

/* ============================================================================
   T-1505: MOBILE INPUT ROW ERGONOMICS
   ============================================================================ */

@media (max-width: 768px) {
  .pepper-row,
  .ingredient-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #fafafa;
    border-radius: 12px;
    margin-bottom: 12px;
    position: relative;
  }
  
  /* Pepper select - full width */
  .pepper-row select,
  .ingredient-row select {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 12px !important;
  }
  
  /* Amount input + unit + trash */
  .pepper-row-controls,
  .input-group {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 12px !important;
    align-items: center;
  }
  
  .pepper-row input,
  .ingredient-row input {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px !important;
  }
  
  .input-suffix,
  .unit-label {
    font-weight: 600;
    color: #666;
    min-width: 24px;
  }
  
  .pepper-row button.remove,
  .remove-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 8px;
    margin-left: 12px;
    flex-shrink: 0;
  }
  
  /* Base ingredient input */
  #baseMass,
  #baseIngredient {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

/* ============================================================================
   T-1506: RESULT PANEL MOBILE LAYOUT
   ============================================================================ */

@media (max-width: 768px) {
  .heat-results,
  .results-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  .heat-card:nth-child(3),
  .result-card:nth-child(3) {
    grid-column: 1 / -1 !important; /* Max card full width */
  }
  
  .heat-card,
  .result-card {
    padding: 12px !important;
  }
  
  .heat-card h4,
  .result-card h4 {
    font-size: 0.875rem !important;
  }
  
  .heat-card .value,
  .result-card .value {
    font-size: 1.5rem !important;
  }
  
  /* Heat meter adjustments */
  .heat-meter-labels,
  .heat-bar-labels {
    font-size: 0.75rem !important;
  }
  
  .heat-meter-bar {
    height: 28px !important;
  }
  
  /* Share button full width */
  .share-cta,
  #shareRecipe {
    width: 100% !important;
    margin-top: var(--spacing-md) !important;
  }
}

/* ============================================================================
   T-1510: STICKY "JUMP TO RESULTS" CTA
   ============================================================================ */

@media (max-width: 768px) {
/* T-001 & T-002: Removed .jump-to-results-cta { */
  
/* T-001 & T-002: Removed .jump-to-results-cta:active { */
  
/* T-001 & T-002: Removed .jump-to-results-cta.visible { */
}

/* ============================================================================
   T-1511: FLOATING "BACK TO TOP" BUTTON
   ============================================================================ */

@media (max-width: 768px) {
  .back-to-top-btn {
    position: fixed;
    bottom: 86px; /* Above jump CTA */
    right: 16px;
    z-index: 99;
    
    display: none; /* Shown via JS */
    width: 52px;
    height: 52px;
    
    align-items: center;
    justify-content: center;
    
    background: #fff;
    color: var(--color-primary, #9b0f1f);
    border: 2px solid var(--color-primary, #9b0f1f);
    border-radius: 50%;
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .back-to-top-btn:active {
    transform: scale(0.92);
  }
  
  .back-to-top-btn.visible {
    display: flex;
  }
  
  .back-to-top-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================================
   T-1512: SECTION STEPPER/ANCHORS
   ============================================================================ */

@media (max-width: 768px) {
/* T-001 & T-002: Removed .section-stepper { */
  
/* T-001 & T-002: Removed .stepper-list { */
  
/* T-001 & T-002: Removed .stepper-btn { */
  
/* T-001 & T-002: Removed .stepper-btn.active { */
  
/* T-001 & T-002: Removed .stepper-btn:active { */
}

@media (min-width: 769px) {
/* T-001 & T-002: Removed .section-stepper { */
  
/* T-001 & T-002: Removed .jump-to-results-cta, */
}


/* ============================================================================
   T-003: MOBILE FIT & NO HORIZONTAL SCROLL SAFETY
   ============================================================================ */

@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    * {
        box-sizing: border-box;
    }
    
    /* Ensure buttons are properly sized and centered */
    .btn, .gc-btn, button, 
    input[type="submit"], 
    input[type="button"] {
        max-width: 100%;
        text-align: center;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Ensure form controls fit */
    .pepper-row,
    .ingredient-row {
        max-width: 100%;
        overflow: visible;
    }
    
    .pepper-select,
    .pepper-quantity,
    input, select {
        max-width: 100%;
    }
    
    /* Prevent text overflow */
    .heat-meter-labels span,
    .category-label,
    .tooltip-content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Container safety */
    .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================================
   T-003: BUTTON ALIGNMENT FIX (All Viewports)
   ============================================================================ */

/* Ensure all CTA buttons have centered text */
.btn-primary,
.gc-btn,
.about-cta,
.product-cta,
.blog-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Remove any icon misalignment */
.btn svg,
.gc-btn svg {
    margin: 0 4px;
    flex-shrink: 0;
}


/* ============================================================================
   v1.0.34: MOBILE PARITY & POLISH IMPROVEMENTS
   ============================================================================ */

@media (max-width: 768px) {
    /* Ensure consistent header spacing */
    .hero-section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    
    .header-logo {
        max-width: 80px;
        height: auto;
    }
    
    /* Unit toggle visibility */
    .unit-toggle,
    .ingredient-unit-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* Ensure pepper rows stack properly */
    .pepper-row,
    .ingredient-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        background: #fff;
        border-radius: var(--radius-md);
        margin-bottom: 12px;
    }
    
    .pepper-controls,
    .ingredient-controls {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
    }
    
    .pepper-quantity,
    .ingredient-amount {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* Delete button proper sizing */
    .delete-btn,
    .remove-ingredient-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Results cards responsive grid */
    .heat-results,
    .results-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .heat-card:last-child,
    .result-card:last-child {
        grid-column: 1 / -1;
    }
    
    /* Premium gradient meter full visibility */
    .heat-meter-bar {
        height: 32px;
        min-height: 32px;
    }
    
    .heat-meter-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        margin-top: 8px;
    }
    
    .heat-meter-labels span {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Table responsive */
    .heat-table-container,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }
    
    .heat-table,
    table {
        min-width: 600px;
    }
}

/* ============================================================================
   v1.0.34: BUTTON POLISH (ALL VIEWPORTS)
   ============================================================================ */

/* Ensure all CTA buttons have perfect centering */
.btn-primary,
.gc-btn,
.about-cta,
.product-cta,
.blog-cta,
.add-pepper-btn,
.add-ingredient-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px;
    padding: 12px 24px;
    text-decoration: none !important;
}

/* Remove any lingering underlines or icons from CTAs */
.about-cta svg,
.product-cta svg,
.blog-cta svg {
    display: none;
}

/* Footer consistency */
.footer {
    background: #3a3a2f !important;
    color: #f5f3ea !important;
}

.footer-emblem {
    margin-top: 20px;
    margin-bottom: 16px;
}

.social-label {
    margin-top: 8px;
    margin-bottom: 12px;
}

.social-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2c94c;
    color: #2a2a22;
    transition: all 0.2s ease;
}

.social-icon:hover {
    background: #ffd56a;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Ensure minimum tap target for all interactive elements */
button,
a.btn,
a.gc-btn,
input[type="button"],
input[type="submit"],
.delete-btn,
.social-icon {
    min-height: 44px;
    min-width: 44px;
}


/* ============================================================================
   FOOTER LINK ROWS
   ============================================================================ */

/* Footer accent color (gold from social icons) */
:root {
    --footer-accent: #ffd56a;
}

.footer-links-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    font-size: 0.95em;
    line-height: 1.6;
}

.footer-links-row a {
    display: inline-block;
    position: relative;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.footer-links-row a:hover,
.footer-links-row a:focus-visible {
    color: var(--footer-accent);
    text-decoration: underline;
    outline: none;
}

.footer-links-row a:focus-visible {
    outline: 2px solid var(--footer-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.footer-links-row a:not(:last-child)::after {
    content: "-";
    position: absolute;
    right: -0.15rem;
    color: currentColor;
    opacity: 0.5;
    pointer-events: none;
}

/* Additional spacing for product links row */
.footer-links-products {
    margin-top: 1.5rem;
}

/* Additional spacing for legal links row */
.footer-links-legal {
    margin-bottom: 0.5rem;
}

/* Improve tap targets on mobile */
@media (max-width: 768px) {
    .footer-links-row a {
        padding: 0.375rem 0.625rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}


/* ============================================================================
   FOOTER VISUAL HIERARCHY POLISH
   ============================================================================ */

/* Subtle hierarchy for footer-bottom elements */
.footer-tagline {
    opacity: 0.9;
    font-size: 0.95rem;
    margin: 1.25rem 0;
}

.footer .copyright {
    opacity: 0.7;
    font-size: 0.85rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* Ensure link rows have slightly reduced opacity when not hovered */
.footer-links-row {
    opacity: 0.85;
}

.footer-links-row:hover {
    opacity: 1;
}