/*
Theme Name: Hanactech Astra Child
Theme URI: https://hanactech.com/
Description: Astra child theme — Apple-style design synced with hanact.com (masthead, 3D compressor showcase, live product grid, dark contact footer, site-wide typography and colors).
Author: HANAC
Author URI: https://hanactech.com/
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hanactech-astra-child
*/

/* Core variables — Apple design tokens */
:root {
    --apple-bg-white: #FFFFFF;
    --apple-bg-dark: #1D1D1F;
    --apple-bg-light-gray: #F5F5F7;
    --apple-bg-elevated: #FBFBFD;
    --apple-text-primary: #1D1D1F;
    --apple-text-secondary: #6E6E73;
    --apple-text-tertiary: #86868B;
    --apple-text-light: #F5F5F7;
    --apple-blue: #0066CC;
    --apple-blue-hover: #0050B5;
    --apple-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --apple-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --apple-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --apple-radius-sm: 12px;
    --apple-radius-md: 16px;
    --apple-radius-lg: 20px;
    --apple-content-max: 1200px;
    --apple-content-narrow: 980px;
    --apple-section-vertical: 96px;
    --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    /* Greens kept for the 3D showcase part labels */
    --ne-primary: #10B981;
    --ne-glow-color: rgba(16, 185, 129, 0.4);
}

/* ============================================================
   Site-wide Astra overrides — Apple look on every page
   ============================================================ */
body,
button,
input,
select,
textarea {
    font-family: var(--apple-font);
}

body {
    color: var(--apple-text-primary);
    background: var(--apple-bg-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--apple-font);
    color: var(--apple-text-primary);
    letter-spacing: -0.01em;
}

.ast-container a:not(.button):not(.ast-button):not(.hanact-card),
.entry-content a:not(.button) {
    color: var(--apple-blue);
}

/* Buttons — Apple blue pills */
.ast-button,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.wc-block-components-button {
    background: var(--apple-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    transition: background 0.25s ease;
}

.ast-button:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
    background: var(--apple-blue-hover);
    color: #FFFFFF;
}

/* Astra header (non-home pages) — clean white bar */
.site-header,
.ast-primary-header-bar,
.ast-above-header-bar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.main-header-menu a,
.site-title a,
.ast-site-identity .site-title a {
    color: var(--apple-text-primary);
}

.main-header-menu a:hover,
.main-header-menu .current-menu-item > a {
    color: var(--apple-blue);
}

/* WooCommerce shop / category grids — Apple product tiles */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--apple-bg-light-gray);
    border-radius: var(--apple-radius-lg);
    overflow: hidden;
    padding-bottom: 18px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--apple-shadow-md);
}

.woocommerce ul.products li.product a img {
    border-radius: 0;
    margin-bottom: 14px;
    background: var(--apple-bg-white);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ast-woo-shop-product-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--apple-text-primary);
    padding: 0 18px;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating {
    padding: 0 18px;
    color: var(--apple-text-secondary);
}

/* Astra footer (non-home pages) — dark, like the homepage contact footer */
.site-footer,
.ast-footer-overlay {
    background: var(--apple-bg-dark);
    color: var(--apple-text-light);
}

.site-footer a {
    color: #2997FF;
}

.site-footer .widget-title,
.site-footer h2 {
    color: #FFFFFF;
}

/* ============================================================
   Top nav — shared by front-page.php and page-about.php
   ============================================================ */
.hanact-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.hanact-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--apple-content-max);
    height: 52px;
    margin: 0 auto;
    padding: 0 22px;
}

.hanact-nav-brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--apple-text-primary);
    text-decoration: none;
}

.hanact-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.hanact-nav-links a {
    font-size: 14px;
    font-weight: 400;
    color: var(--apple-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hanact-nav-links a:hover {
    color: var(--apple-text-primary);
}

.hanact-nav-links a.is-current {
    color: var(--apple-text-primary);
    font-weight: 600;
}

/* ============================================================
   Homepage (front-page.php) — identical to hanact.com
   ============================================================ */
body.hanact-standalone-home,
body.hanact-standalone-page {
    margin: 0;
}

.custom-homepage,
.hanact-about-page {
    font-family: var(--apple-font);
    color: var(--apple-text-primary);
    background: var(--apple-bg-white);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.custom-homepage section,
.hanact-about-page section {
    margin-top: 0;
    margin-bottom: 0;
}

/* ===== Masthead ===== */
.masthead-section {
    text-align: center;
    padding: 88px 22px 8px;
    background: var(--apple-bg-white);
}

.masthead-eyebrow {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--apple-text-primary);
    margin: 0 0 12px;
}

.masthead-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--apple-text-primary);
    margin: 0 0 12px;
}

.masthead-subtitle {
    font-size: clamp(19px, 2.4vw, 28px);
    font-weight: 400;
    line-height: 1.3;
    color: var(--apple-text-secondary);
    max-width: 720px;
    margin: 0 auto;
}

/* ===== Features ===== */
.features-section {
    padding: var(--apple-section-vertical) 22px;
    background: var(--apple-bg-light-gray);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--apple-content-max);
    margin: 0 auto;
}

.feature-card {
    background: var(--apple-bg-white);
    padding: 44px 36px;
    border-radius: var(--apple-radius-lg);
    box-shadow: var(--apple-shadow-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--apple-shadow-md);
}

.feature-card h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--apple-text-primary);
    margin: 0 0 10px;
}

.feature-card p {
    font-size: 17px;
    line-height: 1.5;
    color: var(--apple-text-secondary);
    margin: 0;
}

/* ===== Products ===== */
.products-section {
    padding: var(--apple-section-vertical) 22px 120px;
    background: var(--apple-bg-white);
    max-width: var(--apple-content-max);
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-title {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--apple-text-primary);
    margin: 0 0 12px;
}

.section-subtitle {
    font-size: 19px;
    color: var(--apple-text-secondary);
    max-width: 620px;
    margin: 0 auto;
}

/* Category filter — segmented pill control */
.hanact-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background: var(--apple-bg-light-gray);
    border-radius: 50px;
    padding: 6px;
    width: fit-content;
    margin: 0 auto 56px;
}

.hanact-filter-btn {
    appearance: none;
    border: none;
    background: transparent;
    font-family: var(--apple-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--apple-text-primary);
    padding: 9px 22px;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.hanact-filter-btn:hover {
    color: var(--apple-blue);
    background: transparent;
}

.hanact-filter-btn.is-active {
    background: var(--apple-bg-white);
    color: var(--apple-text-primary);
    box-shadow: var(--apple-shadow-sm);
    font-weight: 600;
}

.hanact-filter-count {
    color: var(--apple-text-tertiary);
    font-weight: 400;
    margin-left: 2px;
    font-size: 13px;
}

/* Product grid */
.hanact-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hanact-card {
    display: flex;
    flex-direction: column;
    background: var(--apple-bg-light-gray);
    border-radius: var(--apple-radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hanact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--apple-shadow-md);
}

.hanact-card.is-hidden {
    display: none;
}

.hanact-card-media {
    background: var(--apple-bg-white);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.hanact-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.hanact-card:hover .hanact-card-media img {
    transform: scale(1.04);
}

.hanact-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px 24px 24px;
}

.hanact-card-cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--apple-text-tertiary);
    margin-bottom: 8px;
}

.hanact-card-name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--apple-text-primary);
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hanact-card-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hanact-card-quote {
    font-size: 14px;
    color: var(--apple-text-secondary);
}

.hanact-card-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--apple-blue);
    white-space: nowrap;
}

.hanact-card-link::after {
    content: ' \203A';
}

.hanact-card:hover .hanact-card-link {
    color: var(--apple-blue-hover);
    text-decoration: underline;
}

/* ===== Contact Footer ===== */
.contact-footer {
    background: var(--apple-bg-dark);
    color: var(--apple-text-light);
    padding: 110px 22px 64px;
    text-align: center;
}

.contact-footer-inner {
    max-width: var(--apple-content-narrow);
    margin: 0 auto;
}

.contact-title {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 14px;
}

.contact-subtitle {
    font-size: 19px;
    line-height: 1.5;
    color: #A1A1A6;
    max-width: 560px;
    margin: 0 auto 40px;
}

.contact-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 72px;
}

.contact-btn {
    display: inline-block;
    background: #2997FF;
    color: #FFFFFF !important;
    font-size: 17px;
    font-weight: 500;
    padding: 13px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.contact-btn:hover {
    background: #57ADFF;
    transform: translateY(-1px);
}

.contact-link {
    font-size: 17px;
    color: #2997FF !important;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-copy {
    font-size: 13px;
    color: #6E6E73;
    border-top: 1px solid #424245;
    padding-top: 22px;
    margin: 0;
}

/* ===== 3D Compressor Showcase Section ===== */
.showcase-3d-section {
    background: var(--apple-bg-white);
    color: var(--apple-text-primary);
    padding: 40px 22px 20px;
    overflow: hidden;
}

.showcase-3d-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.showcase-3d-stage {
    position: relative;
}

.showcase-3d-canvas {
    position: relative;
    width: 100%;
    height: 640px;
    cursor: grab;
    touch-action: pan-y;
}

/* Part labels shown in exploded view */
.part-label {
    position: absolute;
    transform: translate(-50%, -230%);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #7E8CA0;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.25);
    padding: 3px 10px;
    border-radius: 50px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.part-label::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 14px;
    background: rgba(148, 163, 184, 0.3);
}

/* Parts we actually sell: green, with a glowing dot */
.part-label--stock {
    color: #D9FBE8;
    border-color: rgba(16, 185, 129, 0.65);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.18);
}

.part-label--stock::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ne-primary);
    box-shadow: 0 0 6px var(--ne-glow-color);
}

.part-label--stock::after {
    background: rgba(16, 185, 129, 0.5);
}

.part-label--below {
    transform: translate(-50%, 150%);
}

.part-label--below::after {
    top: auto;
    bottom: 100%;
}

.showcase-3d-canvas.is-grabbing {
    cursor: grabbing;
}

.showcase-3d-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================================
   /about — company profile + factory photo wall
   ============================================================ */
.about-section {
    padding: var(--apple-section-vertical) 22px;
    background: var(--apple-bg-white);
}

.about-inner {
    max-width: var(--apple-content-max);
    margin: 0 auto;
}

/* Prose blocks run narrower than the grids — long lines are hard to read */
.about-narrow {
    max-width: 720px;
    margin: 0 auto;
}

.about-intro {
    padding: 56px 22px var(--apple-section-vertical);
    background: var(--apple-bg-white);
}

.about-intro p {
    font-size: 19px;
    line-height: 1.6;
    color: var(--apple-text-secondary);
    margin: 0 0 22px;
}

.about-intro p:last-child {
    margin-bottom: 0;
}

.about-intro .about-lead {
    font-size: 24px;
    line-height: 1.45;
    color: var(--apple-text-primary);
}

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

/* Numbers strip */
.about-stats {
    padding: 56px 22px;
    background: var(--apple-bg-dark);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: var(--apple-content-narrow);
    margin: 0 auto;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-num {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--apple-text-light);
}

.stat-label {
    font-size: 15px;
    color: var(--apple-text-tertiary);
}

/* Product range */
.about-range {
    padding: var(--apple-section-vertical) 22px;
    background: var(--apple-bg-light-gray);
}

.range-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.range-card {
    background: var(--apple-bg-white);
    padding: 32px 28px;
    border-radius: var(--apple-radius-md);
    box-shadow: var(--apple-shadow-sm);
}

.range-card h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.range-card p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--apple-text-secondary);
    margin: 0;
}

/* Four "why us" cards read better 2×2 than in the homepage's 3-up grid */
.features-grid--pairs {
    grid-template-columns: repeat(2, 1fr);
    max-width: var(--apple-content-narrow);
}

/* Closing markets band */
.about-markets {
    padding: var(--apple-section-vertical) 22px;
    background: var(--apple-bg-white);
    text-align: center;
}

.about-markets p {
    font-size: 19px;
    line-height: 1.6;
    color: var(--apple-text-secondary);
    margin: 0;
}

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

/* Photo wall: one full-width banner, then a uniform grid. Fixed aspect ratios
   on every image so the rows stay level whatever each source photo's shape is,
   and so the grid reserves its space before the images decode (no reflow). */
.factory-hero,
.factory-tile {
    margin: 0;
}

.factory-hero {
    margin-bottom: 26px;
}

.factory-hero img,
.factory-tile img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--apple-radius-md);
    background: var(--apple-bg-light-gray);
    box-shadow: var(--apple-shadow-sm);
}

.factory-hero img {
    aspect-ratio: 5 / 2;
}

.factory-tile img {
    aspect-ratio: 3 / 2;
}

.factory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 18px;
    margin: 0 0 52px;
}

.factory-hero figcaption,
.factory-tile figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--apple-text-tertiary);
}

/* Certification strip */
.cert-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cert-bar-label {
    font-size: 14px;
    color: var(--apple-text-tertiary);
    margin-right: 4px;
}

.cert-item {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--apple-text-primary);
    padding: 7px 16px;
    border-radius: 980px;
    background: var(--apple-bg-light-gray);
}

/* Standard clip pattern: read out by screen readers and indexed, but takes up
   no space and is never seen. (/about used to rely on this for its only
   heading; it now has a visible h1, so this is a general-purpose utility.) */
.hanact-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ===== Responsive ===== */
@media (max-width: 1068px) {
    .hanact-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .features-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
    .factory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .range-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .showcase-3d-canvas {
        height: 440px;
    }
}

@media (max-width: 734px) {
    :root {
        --apple-section-vertical: 64px;
    }
    .masthead-section {
        padding-top: 56px;
    }
    .hanact-products-grid {
        grid-template-columns: 1fr;
    }
    .hanact-filter {
        border-radius: var(--apple-radius-md);
    }
    .contact-actions {
        flex-direction: column;
        gap: 18px;
    }
    .factory-grid {
        grid-template-columns: 1fr;
    }
    /* A 5:2 banner is an unreadable sliver on a phone */
    .factory-hero img {
        aspect-ratio: 3 / 2;
    }
    .range-grid,
    .features-grid--pairs {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Three big numbers side by side get too cramped to read */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .hanact-nav-inner {
        gap: 12px;
    }
    .hanact-nav-links {
        gap: 20px;
    }
}

/* ---- 页脚联系区（Footer Builder HTML-1）：挂件横跨整行居中 ---- */
.site-above-footer-wrap .site-footer-above-section-1 {
	grid-column: 1 / -1;
	justify-content: center;
	text-align: center;
}
.site-above-footer-wrap .ast-footer-html-1 {
	color: #1D1D1F;
}

/* ---- 详情页 WhatsApp 询盘按钮 ---- */
.hanact-quote-btn {
	display: inline-block;
	background: #25D366;
	color: #fff !important;
	font-weight: 600;
	font-size: 17px;
	padding: 14px 28px;
	border-radius: 980px;
	text-decoration: none !important;
	margin: 16px 0 8px;
	transition: background 0.2s ease;
}
.hanact-quote-btn:hover {
	background: #1EBE5B;
	color: #fff;
}

/* deploy-marker-1ae2b09b */