/* ============================================================
   HUANANZHI Blog Styles
   ============================================================ */

/* --- Variables --- */
:root {
    --hz-orange: #EC641E;
    --hz-orange-hover: #d4580f;
    --hz-dark: #1a1a2e;
    --hz-text: #333;
    --hz-text-light: #666;
    --hz-bg-light: #f7f7f8;
    --hz-border: #e5e5e5;
    --hz-radius: 12px;
    --hz-radius-sm: 8px;
    --hz-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --hz-font: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --hz-content-width: 1280px;
}

/* ============================================================
   HERO BANNER
   ============================================================ */
.hz-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 0 48px;
    margin-bottom: 40px;
}
.hz-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}
.hz-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--hz-content-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}
.hz-hero__breadcrumbs {
    margin-bottom: 16px;
    font-size: 13px;
}
.hz-hero__crumb {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.hz-hero__crumb:hover { color: #fff; }
.hz-hero__crumb-sep {
    color: rgba(255,255,255,0.4);
    margin: 0 6px;
}
.hz-hero__tag {
    display: inline-block;
    background: var(--hz-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.hz-hero__title {
    color: #fff;
    font-family: var(--hz-font);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 20px;
    max-width: 850px;
}
.hz-hero__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    flex-wrap: wrap;
}
.hz-hero__author {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hz-hero__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
}
.hz-hero__date,
.hz-hero__reading {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hz-hero__date svg,
.hz-hero__reading svg {
    opacity: 0.7;
}

/* ============================================================
   BLOG LAYOUT (content + sidebar)
   ============================================================ */
.hz-blog {
    max-width: var(--hz-content-width);
    margin: 0 auto;
    padding: 0 24px 60px;
}
.hz-blog__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

/* ============================================================
   ARTICLE CONTENT
   ============================================================ */
.hz-blog__content {
    min-width: 0;
    font-family: var(--hz-font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--hz-text);
}
.hz-blog__content h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 48px 0 16px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--hz-orange);
    color: var(--hz-dark);
}
.hz-blog__content h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 36px 0 12px;
    color: var(--hz-dark);
}
.hz-blog__content h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--hz-dark);
}
.hz-blog__content p {
    margin: 0 0 16px;
}
.hz-blog__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    margin: 16px 0;
}
.hz-blog__content a {
    color: var(--hz-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hz-blog__content a:hover {
    color: var(--hz-orange-hover);
}
.hz-blog__content ul,
.hz-blog__content ol {
    padding-left: 24px;
    margin: 0 0 16px;
}
.hz-blog__content li {
    margin-bottom: 6px;
}

/* --- Styled Tables --- */
.hz-blog__content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--hz-radius);
    overflow: visible;
    margin: 24px 0;
    box-shadow: var(--hz-shadow);
    font-size: 14px;
}
.hz-blog__content table thead th {
    background: var(--hz-orange);
    color: #fff;
    font-weight: 700;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.hz-blog__content table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--hz-border);
    background: #fff;
}
.hz-blog__content table tbody tr:last-child td {
    border-bottom: none;
}
.hz-blog__content table tbody tr:nth-child(even) td {
    background: var(--hz-bg-light);
}
.hz-blog__content table tbody tr:hover td {
    background: #fff5ee;
}

/* ============================================================
   CALLOUT BLOCKS (hz-callout)
   .hz-callout--tip  .hz-callout--warning  .hz-callout--info  .hz-callout--important
   ============================================================ */
.hz-callout {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--hz-radius-sm);
    margin: 24px 0;
    font-size: 15px;
    line-height: 1.6;
    border-left: 4px solid;
}
.hz-callout__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
}
.hz-callout--tip {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #15803d;
}
.hz-callout--tip .hz-callout__icon { background: #dcfce7; }
.hz-callout--warning {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}
.hz-callout--warning .hz-callout__icon { background: #fef3c7; }
.hz-callout--info {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}
.hz-callout--info .hz-callout__icon { background: #dbeafe; }
.hz-callout--important {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}
.hz-callout--important .hz-callout__icon { background: #fee2e2; }

/* ============================================================
   PROS / CONS BLOCK
   ============================================================ */
.hz-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}
.hz-pros-cons__col {
    border-radius: var(--hz-radius-sm);
    padding: 20px;
    font-size: 14px;
}
.hz-pros-cons__col--pros {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.hz-pros-cons__col--cons {
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.hz-pros-cons__heading {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hz-pros-cons__col--pros .hz-pros-cons__heading { color: #16a34a; }
.hz-pros-cons__col--cons .hz-pros-cons__heading { color: #dc2626; }
.hz-pros-cons__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hz-pros-cons__list li {
    padding: 4px 0 4px 22px;
    position: relative;
    line-height: 1.5;
}
.hz-pros-cons__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.hz-pros-cons__col--pros .hz-pros-cons__list li::before {
    background: #22c55e;
    box-shadow: inset 0 0 0 3px #f0fdf4;
}
.hz-pros-cons__col--cons .hz-pros-cons__list li::before {
    background: #ef4444;
    box-shadow: inset 0 0 0 3px #fef2f2;
}

/* ============================================================
   SPEC TABLE (hz-spec-table)
   ============================================================ */
.hz-spec-table {
    margin: 24px 0;
    border-radius: var(--hz-radius);
    overflow: visible;
    box-shadow: var(--hz-shadow);
}
.hz-spec-table__header {
    background: var(--hz-dark);
    color: #fff;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hz-spec-table__header svg { color: var(--hz-orange); }
.hz-spec-table table {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ============================================================
   PRODUCT CARD (inline in article)
   ============================================================ */
.hz-product-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--hz-bg-light);
    border-radius: var(--hz-radius);
    border: 1px solid var(--hz-border);
    margin: 24px 0;
    align-items: center;
    transition: box-shadow 0.2s;
}
.hz-product-card:hover {
    box-shadow: var(--hz-shadow);
}
.hz-product-card__img {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border-radius: var(--hz-radius-sm);
    overflow: visible;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hz-product-card__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}
.hz-product-card__body {
    flex: 1;
    min-width: 0;
}
.hz-product-card__name {
    font-weight: 700;
    font-size: 16px;
    color: var(--hz-dark);
    margin-bottom: 6px;
}
.hz-product-card__price {
    font-size: 22px;
    font-weight: 800;
    color: var(--hz-orange);
    margin-bottom: 10px;
}
.hz-product-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hz-orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: var(--hz-radius-sm);
    text-decoration: none;
    transition: background 0.2s;
}
.hz-product-card__btn:hover {
    background: var(--hz-orange-hover);
    color: #fff;
}

/* ============================================================
   BUILDS BLOCK (2-3 cards in a row)
   ============================================================ */
.hz-builds {
    margin: 24px 0;
}
.hz-builds__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--hz-dark);
    margin-bottom: 16px;
}
.hz-builds__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.hz-builds__card {
    background: #fff;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    padding: 20px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.hz-builds__card:hover {
    box-shadow: var(--hz-shadow);
    transform: translateY(-2px);
}
.hz-builds__card-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hz-orange);
    margin-bottom: 8px;
}
.hz-builds__card-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--hz-dark);
    margin-bottom: 12px;
}
.hz-builds__card-specs {
    font-size: 13px;
    color: var(--hz-text-light);
    margin-bottom: 16px;
    line-height: 1.5;
}
.hz-builds__card-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--hz-orange);
    margin-bottom: 12px;
}
.hz-builds__card-btn {
    display: inline-block;
    background: var(--hz-orange);
    color: #fff;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: var(--hz-radius-sm);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}
.hz-builds__card-btn:hover {
    background: var(--hz-orange-hover);
    color: #fff;
}

/* ============================================================
   CTA BANNER (inside article)
   ============================================================ */
.hz-cta-banner {
    background: linear-gradient(135deg, var(--hz-dark) 0%, #16213e 100%);
    border-radius: var(--hz-radius);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 32px 0;
    color: #fff;
}
.hz-cta-banner__text {
    flex: 1;
}
.hz-cta-banner__title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
}
.hz-cta-banner__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}
.hz-cta-banner__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hz-orange);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 32px;
    border-radius: var(--hz-radius-sm);
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}
.hz-cta-banner__btn:hover {
    background: var(--hz-orange-hover);
    color: #fff;
}

/* ============================================================
   QUOTE BLOCK
   ============================================================ */
.hz-quote {
    margin: 24px 0;
    padding: 24px 28px;
    background: var(--hz-bg-light);
    border-left: 4px solid var(--hz-orange);
    border-radius: 0 var(--hz-radius-sm) var(--hz-radius-sm) 0;
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hz-text);
}
.hz-quote__author {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: var(--hz-orange);
    margin-top: 12px;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.hz-faq {
    margin: 24px 0;
}
.hz-faq__item {
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
}
.hz-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--hz-dark);
    transition: background 0.2s;
    user-select: none;
}
.hz-faq__question:hover { background: var(--hz-bg-light); }
.hz-faq__chevron {
    transition: transform 0.3s;
    flex-shrink: 0;
    color: var(--hz-text-light);
}
.hz-faq__item.active .hz-faq__chevron {
    transform: rotate(180deg);
}
.hz-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hz-text-light);
    background: var(--hz-bg-light);
}
.hz-faq__item.active .hz-faq__answer {
    max-height: 600px;
    padding: 16px 20px;
}

/* ============================================================
   RATING BLOCK
   ============================================================ */
.hz-rating {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--hz-bg-light);
    border-radius: var(--hz-radius-sm);
    margin: 16px 0;
}
.hz-rating__stars {
    display: flex;
    gap: 2px;
}
.hz-rating__star {
    color: #fbbf24;
}
.hz-rating__star--empty {
    color: #d4d4d8;
}
.hz-rating__value {
    font-size: 24px;
    font-weight: 800;
    color: var(--hz-dark);
}
.hz-rating__max {
    font-size: 14px;
    color: var(--hz-text-light);
    font-weight: 400;
}

/* ============================================================
   GALLERY / VIDEO
   ============================================================ */
.hz-gallery {
    margin: 24px 0;
}
.hz-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}
.hz-gallery__item {
    border-radius: var(--hz-radius-sm);
    overflow: visible;
    cursor: pointer;
    aspect-ratio: 4/3;
}
.hz-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s;
}
.hz-gallery__item:hover img {
    transform: scale(1.05);
}
.hz-video {
    margin: 24px 0;
    border-radius: var(--hz-radius);
    overflow: visible;
    box-shadow: var(--hz-shadow);
    aspect-ratio: 16/9;
}
.hz-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================
   AUTHOR BOX
   ============================================================ */
.hz-author-box {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: var(--hz-bg-light);
    border-radius: var(--hz-radius);
    margin: 48px 0 24px;
    align-items: center;
}
.hz-author-box__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hz-author-box__label {
    font-size: 12px;
    color: var(--hz-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.hz-author-box__name {
    font-weight: 700;
    font-size: 16px;
    color: var(--hz-dark);
}
.hz-author-box__bio {
    font-size: 13px;
    color: var(--hz-text-light);
    margin-top: 4px;
    line-height: 1.4;
}

/* ============================================================
   SHARE BUTTONS
   ============================================================ */
.hz-share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    padding: 16px 0;
    border-top: 1px solid var(--hz-border);
}
.hz-share__label {
    font-weight: 600;
    font-size: 14px;
    color: var(--hz-text);
}
.hz-share__buttons {
    display: flex;
    gap: 8px;
}
.hz-share__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hz-border);
    background: #fff;
    color: var(--hz-text-light);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.hz-share__btn:hover {
    border-color: var(--hz-orange);
    color: var(--hz-orange);
    background: #fff5ee;
}
.hz-share__btn--tg:hover { color: #0088cc; border-color: #0088cc; background: #e6f4fa; }
.hz-share__btn--vk:hover { color: #4a76a8; border-color: #4a76a8; background: #eaf1f8; }

/* ============================================================
   RELATED POSTS
   ============================================================ */
.hz-related {
    margin: 48px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--hz-border);
}
.hz-related__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--hz-dark);
    margin-bottom: 20px;
}
.hz-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.hz-related__card {
    border-radius: var(--hz-radius);
    overflow: visible;
    border: 1px solid var(--hz-border);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.hz-related__card:hover {
    box-shadow: var(--hz-shadow);
    transform: translateY(-3px);
}
.hz-related__img {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: var(--hz-bg-light);
}
.hz-related__card-body {
    padding: 14px 16px;
}
.hz-related__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hz-orange);
    margin-bottom: 6px;
}
.hz-related__card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hz-dark);
    line-height: 1.3;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hz-related__date {
    font-size: 12px;
    color: var(--hz-text-light);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.hz-sidebar {
    position: relative;
}
.hz-sidebar__inner {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hz-sidebar__block {
    background: #fff;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    padding: 20px;
}

/* --- TOC --- */
.hz-toc__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--hz-dark);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--hz-orange);
}
.hz-toc__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.hz-toc__link {
    display: block;
    padding: 6px 0 6px 12px;
    font-size: 13px;
    color: var(--hz-text-light);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    line-height: 1.3;
}
.hz-toc__link:hover {
    color: var(--hz-orange);
}
.hz-toc__link.active {
    color: var(--hz-orange);
    border-left-color: var(--hz-orange);
    font-weight: 600;
}
.hz-toc__link--h3 {
    padding-left: 24px;
    font-size: 12px;
}

/* --- Sidebar CTA --- */
.hz-sidebar-cta {
    background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
    border-color: var(--hz-orange);
    text-align: center;
}
.hz-sidebar-cta__icon {
    margin-bottom: 8px;
}
.hz-sidebar-cta__text {
    font-weight: 600;
    font-size: 15px;
    color: var(--hz-dark);
    margin-bottom: 12px;
}
.hz-sidebar-cta__btn {
    display: inline-block;
    background: var(--hz-orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: var(--hz-radius-sm);
    text-decoration: none;
    transition: background 0.2s;
}
.hz-sidebar-cta__btn:hover {
    background: var(--hz-orange-hover);
    color: #fff;
}

/* --- Sidebar Products --- */
.hz-sidebar-products__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--hz-dark);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--hz-orange);
}
.hz-sidebar-product {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hz-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    align-items: center;
}
.hz-sidebar-product:last-child { border-bottom: none; }
.hz-sidebar-product:hover { background: var(--hz-bg-light); }
.hz-sidebar-product__img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--hz-bg-light);
}
.hz-sidebar-product__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.hz-sidebar-product__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--hz-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.hz-sidebar-product__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--hz-orange);
    margin-top: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .hz-blog__layout {
        grid-template-columns: 1fr;
    }
    .hz-sidebar__inner {
        position: static;
    }
    .hz-toc { display: none; }
}
@media (max-width: 768px) {
    .hz-hero {
        min-height: 320px;
        padding-bottom: 32px;
    }
    .hz-hero__title {
        font-size: 26px;
    }
    .hz-hero__meta {
        gap: 12px;
        font-size: 12px;
    }
    .hz-blog__content h2 { font-size: 22px; }
    .hz-blog__content h3 { font-size: 18px; }
    .hz-pros-cons {
        grid-template-columns: 1fr;
    }
    .hz-related__grid {
        grid-template-columns: 1fr;
    }
    .hz-cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
    .hz-product-card {
        flex-direction: column;
        text-align: center;
    }
    .hz-product-card__img {
        width: 100%;
        height: 180px;
    }
    .hz-builds__grid {
        grid-template-columns: 1fr;
    }
    .hz-author-box {
        flex-direction: column;
        text-align: center;
    }
}


/* Table corner radius fix */
.hz-blog__content table thead th:first-child { border-radius: var(--hz-radius) 0 0 0; }
.hz-blog__content table thead th:last-child { border-radius: 0 var(--hz-radius) 0 0; }
.hz-blog__content table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--hz-radius); }
.hz-blog__content table tbody tr:last-child td:last-child { border-radius: 0 0 var(--hz-radius) 0; }

/* Copy button fix */
.hz-share__btn--copy {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    line-height: 1;
}
.hz-share__btn--copy svg {
    width: 18px;
    height: 18px;
    stroke: #666;
    fill: none;
    stroke-width: 2;
}
.hz-share__btn--copy:hover svg {
    stroke: #EC641E;
}