/*
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;
}

.hanact-archive-intro {
	max-width: 760px;
	margin: 0 0 32px;
	color: var(--apple-text-secondary, #6e6e73);
	font-size: 17px;
	line-height: 1.6;
}

.hanact-archive-intro p {
	margin: 0;
}

.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;
}

.masthead-amazon-btn,
.hanact-amazon-btn,
.hanact-card-amazon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FF9900;
    color: #111111 !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 980px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.masthead-amazon-btn {
    font-size: 17px;
    padding: 13px 24px;
    margin-top: 28px;
}

.masthead-amazon-btn:hover,
.hanact-amazon-btn:hover,
.hanact-card-amazon:hover {
    background: #E88B00;
    color: #111111;
}

.masthead-amazon-btn:hover,
.hanact-amazon-btn:hover {
    transform: translateY(-1px);
}

/* ===== 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;
}

/* Shop reuses the homepage product component; remove Astra's archive shell
   padding so the shared 1200px section controls its own spacing and width. */
body.woocommerce-shop .site-content > .ast-container {
	max-width: none;
	padding: 0;
}

body.woocommerce-shop .ast-woocommerce-container {
	padding: 0;
}

body.woocommerce-shop #primary {
	width: 100%;
	margin: 0;
}

.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-detail {
    color: inherit !important;
    text-decoration: none !important;
}

.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-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.hanact-card-amazon {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    padding: 9px 13px;
}

.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;
    text-decoration: none;
}

.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;
    }
}

/* ---- 详情页 WhatsApp / Amazon 按钮 ---- */
.hanact-product-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 16px 0 8px;
}
.hanact-quote-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	color: #fff !important;
	font-weight: 600;
	font-size: 17px;
	padding: 14px 28px;
	border-radius: 980px;
	text-decoration: none !important;
	margin: 0;
	transition: background 0.2s ease;
}
.hanact-quote-btn:hover {
	background: #1EBE5B;
	color: #fff;
}

.hanact-amazon-btn {
	font-size: 17px;
	padding: 14px 28px;
}

@media (max-width: 544px) {
	.hanact-product-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.hanact-product-actions a {
		width: 100%;
	}
}

/* ---- Single Product Highlights & Trust Card ---- */
.hanact-product-highlights {
	margin: 24px 0 20px;
	padding: 20px 22px;
	background: var(--apple-bg-light-gray);
	border-radius: var(--apple-radius-md);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hanact-highlight-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.45;
}

.hanact-highlight-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--apple-blue);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}

.hanact-highlight-item strong {
	display: block;
	color: var(--apple-text-primary);
	font-weight: 600;
	margin-bottom: 2px;
}

.hanact-highlight-item span {
	color: var(--apple-text-secondary);
}

/* deploy-marker-1ae2b09b */

/* ---- Branded 404 / retired-content page ---- */
.hanact-error-main {
	background: var(--apple-bg-light-gray);
}

.hanact-error-card {
	box-sizing: border-box;
	max-width: 920px;
	min-height: 620px;
	margin: 0 auto;
	padding: 112px 40px 120px;
	text-align: center;
}

.hanact-error-code {
	margin: 0 0 12px;
	color: var(--apple-blue);
	font-size: clamp(72px, 11vw, 132px);
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 0.9;
}

.hanact-error-eyebrow {
	margin: 28px 0 12px;
	color: var(--apple-text-secondary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.hanact-error-card h1 {
	margin: 0;
	font-size: clamp(36px, 5vw, 64px);
	letter-spacing: -0.04em;
	line-height: 1.06;
}

.hanact-error-copy {
	max-width: 660px;
	margin: 24px auto 0;
	color: var(--apple-text-secondary);
	font-size: 19px;
	line-height: 1.55;
}

.hanact-error-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 38px;
}

.hanact-error-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 26px;
	border: 1px solid var(--apple-blue);
	border-radius: 980px;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none !important;
}

.hanact-error-secondary {
	background: transparent;
	color: var(--apple-blue) !important;
}

.hanact-error-secondary:hover {
	background: rgba(0, 102, 204, 0.07);
}

@media (max-width: 544px) {
	.hanact-error-card {
		min-height: 540px;
		padding: 80px 24px 88px;
	}
	.hanact-error-copy {
		font-size: 17px;
	}
	.hanact-error-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.hanact-error-actions a {
		width: 100%;
	}
}