/**
 * ALIBARBAR — COMPLETE UI + MOBILE FIX (ALL-IN-ONE) v2
 * 基于真实 DOM 结构重写（2026-08-30 14:27 提取）
 * 
 * 问题 A：Pack Hero 画廊右下角图片裁切
 * 问题 B：购买控件位置错误（浮动在画廊左下）
 * 问题 C：价格对比度低（$99.95 颜色/字号）
 * 问题 D：Builder 卡片不等高，+/- 未对齐
 * 问题 E：宽屏移动端 768-1023px 首页窄居中
 */

/* ================================================================
   问题 A：Pack Hero 画廊右下角图片裁切修复
   真实 DOM：.ab-pack-hero__gallery > .ab-pack-hero__gallery-item--sub-3 > img
   ================================================================ */

/* 右下角第 4 张小图（sub-3）object-fit: contain */
.ab-pack-hero__gallery-item--sub-3 img {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
}

/* 桌面端画廊网格 2×2 */
@media (min-width: 1024px) {
    .ab-pack-hero__gallery {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    .ab-pack-hero__gallery-item--main {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
}

/* 移动端画廊网格 2×2 */
@media (max-width: 767px) {
    .ab-pack-hero__gallery {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .ab-pack-hero__gallery-item--main {
        grid-column: 1 / 3;
    }
}

/* ================================================================
   问题 B：购买控件位置修复 + 问题 C：价格对比度
   真实 DOM：.ab-pack-hero__inner > .ab-pack-hero__visual + .ab-pack-hero__info
   .ab-pack-hero__info > .summary.entry-summary > p.price + form.cart
   ================================================================ */

/* 桌面端 Hero 左右布局 */
@media (min-width: 1024px) {
    .ab-pack-hero__inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 40px !important;
    }
    
    .ab-pack-hero__visual {
        flex: 1 1 55% !important;
        max-width: 55% !important;
    }
    
    .ab-pack-hero__info {
        flex: 1 1 45% !important;
        max-width: 45% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-top: 20px !important;
    }
}

/* 移动端 Hero 上下布局 */
@media (max-width: 767px) {
    .ab-pack-hero__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .ab-pack-hero__visual,
    .ab-pack-hero__info {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 价格对比度修复 - 真实 DOM: p.price > span.woocommerce-Price-amount */
.ab-pack-hero__info p.price,
.ab-pack-hero__info .summary p.price,
.single-product .summary p.price {
    color: #F5F1E8 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
}

.ab-pack-hero__info p.price .woocommerce-Price-amount,
.ab-pack-hero__info .summary p.price .woocommerce-Price-amount {
    color: #F5F1E8 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    .ab-pack-hero__info p.price,
    .ab-pack-hero__info p.price .woocommerce-Price-amount {
        font-size: 24px !important;
    }
}

/* 购买按钮样式 */
.summary form.cart .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
    background-color: #D4AF37 !important;
    color: #0B0B0A !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.summary form.cart .single_add_to_cart_button:hover,
form.cart .single_add_to_cart_button:hover {
    background-color: #C5A028 !important;
}

/* ================================================================
   问题 D：Builder 卡片等高 + 控件对齐
   真实 DOM：a.ab-pack-flavour > .ab-pack-flavour__image + .ab-pack-flavour__body
           > .ab-pack-flavour__stepper > .ab-pack-flavour__minus + .ab-pack-flavour__qty + .ab-pack-flavour__plus
   ================================================================ */

/* Builder 网格卡片等高 */
.ab-pack-builder__grid {
    display: grid !important;
    gap: 16px !important;
}

@media (min-width: 1024px) {
    .ab-pack-builder__grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ab-pack-builder__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    .ab-pack-builder__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* 卡片链接样式重置 */
a.ab-pack-flavour {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    background: rgba(245, 241, 232, 0.08) !important;
    border: 1px solid rgba(245, 241, 232, 0.15) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

a.ab-pack-flavour:hover {
    border-color: #D4AF37 !important;
}

/* 卡片图片 */
.ab-pack-flavour__image {
    width: 100% !important;
    aspect-ratio: 1 !important;
    overflow: hidden !important;
}

.ab-pack-flavour__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 卡片主体（名称 + 控件） */
.ab-pack-flavour__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 12px !important;
}

/* 口味名称 */
.ab-pack-flavour__body h3,
.ab-pack-flavour__body .flavour-name {
    min-height: 48px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 4px !important;
    color: #F5F1E8 !important;
    margin: 0 !important;
}

/* 控件行：等高 + 对齐 */
.ab-pack-flavour__stepper {
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-height: 36px !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    border-top: 1px solid rgba(245, 241, 232, 0.15) !important;
}

/* 减号按钮 */
button.ab-pack-flavour__minus {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #D4AF37 !important;
    border-radius: 6px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: transparent !important;
    color: #F5F1E8 !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

button.ab-pack-flavour__minus:not([disabled]) {
    opacity: 1 !important;
    background: rgba(212, 175, 55, 0.15) !important;
}

/* 数量显示 */
.ab-pack-flavour__qty {
    min-width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #D4AF37 !important;
    color: #0B0B0A !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

/* 加号按钮 */
button.ab-pack-flavour__plus {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #D4AF37 !important;
    border-radius: 6px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: rgba(212, 175, 55, 0.15) !important;
    color: #F5F1E8 !important;
    transition: all 0.2s ease !important;
}

button.ab-pack-flavour__plus:hover {
    background: rgba(212, 175, 55, 0.3) !important;
}

/* ================================================================
   问题 E：宽屏移动端 768-1023px 首页断点修复
   真实 DOM：首页使用 .ast-container / .ab-container
   ================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    body.home .ast-container,
    body.home .ab-container,
    body.home .ab-container-wide {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    body.home .ab-hero,
    body.home .home-hero {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        width: 100% !important;
    }
    
    body.home .ab-hero__content,
    body.home .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    
    body.home .ab-story,
    body.home .home-story {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }
    
    body.home .ab-flavours__grid,
    body.home .home-flavours .flavour-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    body.home .ab-packs__grid,
    body.home .home-packs .pack-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    body.home .ab-why,
    body.home .home-why {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
}

/* 820-850px 特殊 padding */
@media (min-width: 820px) and (max-width: 850px) {
    body.home .ast-container,
    body.home .ab-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* 900-950px 特殊 padding */
@media (min-width: 900px) and (max-width: 950px) {
    body.home .ast-container,
    body.home .ab-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* 移动端通用 */
@media (max-width: 767px) {
    body.home .ast-container,
    body.home .ab-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
/* ================================================================
   MOBILE FULL-WIDTH FIX (Phase 4E-1 follow-up / MOBILE_PACK_EMERGENCY_FIX)
   Problem: 390px viewport shows a narrow centered column with dead space.
   Fix: force full-width + proper mobile gutters on homepage containers.
   Scope: mobile only (<=544px). Desktop/tablet layouts untouched.
   ================================================================ */

@media (max-width: 544px) {
    /* Homepage full-width containers */
    body.home .ast-container,
    body.home .ab-container,
    body.home .ab-container-wide,
    body.home #primary,
    body.home .site-main,
    body.home .site-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    /* Hero inner full width */
    body.home .ab-home-hero__inner,
    body.home .ab-home-ingot__inner,
    body.home .ab-home-why__inner,
    body.home .ab-home-faq__inner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    /* Force sections to stack full width */
    body.home .ab-home section,
    body.home .ab-home > section,
    body.home .ab-hero,
    body.home .ab-story {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Neutralize any leftover max-width on inner grids */
    body.home .ab-flavours__grid,
    body.home .ab-ingot-grid,
    body.home .ab-why-grid {
        max-width: 100% !important;
    }
}
/* ================================================================
   Phase 4E-2: ALIBARBAR Flavours Landing Page Styles
   Responsive: Desktop 4-col / Tablet 3-col / Mobile 2-col
   ================================================================ */

/* --- Hero Section --- */
.ab-flavours-hero {
    background: linear-gradient(135deg, #0B0B0A 0%, #1A1A19 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 48px 40px;
    margin-bottom: 48px;
    text-align: center;
}

.ab-flavours-hero h2 {
    font-size: 36px;
    font-weight: 800;
    color: #F5F1E8;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.ab-flavours-hero .ab-hero-subtitle {
    font-size: 18px;
    color: rgba(245, 241, 232, 0.75);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.ab-flavours-hero .ab-hero-cta {
    display: inline-block;
    background: #D4AF37;
    color: #0B0B0A;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.ab-flavours-hero .ab-hero-cta:hover {
    background: #C5A028;
    color: #0B0B0A;
}

@media (max-width: 767px) {
    .ab-flavours-hero {
        padding: 32px 20px;
        margin-bottom: 32px;
    }
    .ab-flavours-hero h2 {
        font-size: 28px;
    }
    .ab-flavours-hero .ab-hero-subtitle {
        font-size: 16px;
    }
}

/* --- Flavour Grid (4/3/2 cols) --- */
.ab-flavour-grid {
    display: grid;
    gap: 20px;
    margin: 32px 0;
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
    .ab-flavour-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* Tablet: 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .ab-flavour-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Mobile: 2 columns */
@media (max-width: 767px) {
    .ab-flavour-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* --- Flavour Card --- */
.ab-flavour-card {
    background: rgba(245, 241, 232, 0.06);
    border: 1px solid rgba(245, 241, 232, 0.12);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ab-flavour-card:hover {
    border-color: #D4AF37;
    transform: translateY(-2px);
}

.ab-flavour-card__image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(245, 241, 232, 0.04);
}

.ab-flavour-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ab-flavour-card:hover .ab-flavour-card__image img {
    transform: scale(1.05);
}

.ab-flavour-card__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
}

.ab-flavour-card__name {
    font-size: 14px;
    font-weight: 600;
    color: #F5F1E8;
    margin: 0 0 8px 0;
    line-height: 1.3;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-flavour-card__link {
    display: inline-block;
    font-size: 13px;
    color: #D4AF37;
    text-decoration: none;
    font-weight: 500;
    margin-top: auto;
    padding: 6px 0;
    border-top: 1px solid rgba(245, 241, 232, 0.1);
    transition: color 0.2s ease;
}

.ab-flavour-card__link:hover {
    color: #F5F1E8;
}

/* --- Content Sections --- */
.ab-section {
    margin: 48px 0;
    padding: 0 20px;
}

.ab-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: #F5F1E8;
    margin: 0 0 24px 0;
    line-height: 1.3;
}

.ab-section p {
    font-size: 16px;
    color: rgba(245, 241, 232, 0.8);
    line-height: 1.6;
    margin: 0 0 16px 0;
}

@media (max-width: 767px) {
    .ab-section {
        margin: 32px 0;
        padding: 0 12px;
    }
    .ab-section h2 {
        font-size: 24px;
    }
}

/* --- Pack Links Grid --- */
.ab-pack-links {
    display: grid;
    gap: 16px;
    margin: 24px 0;
}

@media (min-width: 768px) {
    .ab-pack-links {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .ab-pack-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ab-pack-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 24px 16px;
    text-decoration: none;
    color: #F5F1E8;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ab-pack-link:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #D4AF37;
    color: #F5F1E8;
}

.ab-pack-link__qty {
    font-size: 32px;
    font-weight: 800;
    color: #D4AF37;
    line-height: 1;
    margin-bottom: 8px;
}

.ab-pack-link__label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* --- FAQ Section (details/summary) --- */
.ab-faq-list {
    margin: 32px 0;
}

.ab-faq-item {
    background: rgba(245, 241, 232, 0.04);
    border: 1px solid rgba(245, 241, 232, 0.1);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.ab-faq-item summary {
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #F5F1E8;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}

.ab-faq-item summary::-webkit-details-marker {
    display: none;
}

.ab-faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    color: #D4AF37;
    margin-left: 12px;
    transition: transform 0.2s ease;
}

.ab-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.ab-faq-item summary:hover {
    background: rgba(245, 241, 232, 0.06);
}

.ab-faq-item .ab-faq-answer {
    padding: 0 24px 20px 24px;
    font-size: 15px;
    color: rgba(245, 241, 232, 0.8);
    line-height: 1.6;
}

.ab-faq-item .ab-faq-answer p {
    margin: 0 0 12px 0;
}

.ab-faq-item .ab-faq-answer a {
    color: #D4AF37;
    text-decoration: none;
}

.ab-faq-item .ab-faq-answer a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .ab-faq-item summary {
        padding: 14px 16px;
        font-size: 15px;
    }
    .ab-faq-item .ab-faq-answer {
        padding: 0 16px 16px 16px;
        font-size: 14px;
    }
}

/* --- Internal Link Hub --- */
.ab-link-hub {
    background: rgba(245, 241, 232, 0.04);
    border: 1px solid rgba(245, 241, 232, 0.1);
    border-radius: 12px;
    padding: 32px;
    margin: 48px 0;
}

.ab-link-hub h3 {
    font-size: 20px;
    font-weight: 700;
    color: #F5F1E8;
    margin: 0 0 20px 0;
}

.ab-link-hub ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.ab-link-hub li {
    margin: 0;
}

.ab-link-hub a {
    color: #D4AF37;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.ab-link-hub a:hover {
    color: #F5F1E8;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .ab-link-hub {
        padding: 24px 20px;
        margin: 32px 0;
    }
}

/* === MOBILE FIX: .ab-home-trust horizontal overflow (390px) === */
@media (max-width: 767px) {
    .ab-home-trust {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .ab-home-trust__item {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    .ab-home-trust__sep {
        display: none !important;
    }
}
/* MOBILE FIX: .ab-home-trust flex-wrap + body overflow */
@media (max-width: 767px) {
    /* Force trust strip to wrap */
    body .ab-home-trust {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    body .ab-home-trust__sep {
        display: none !important;
    }
    body .ab-home-trust__item {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    
    /* Prevent page-level horizontal scroll (allow inner track scroll) */
    html, body {
        overflow-x: hidden !important;
    }
    
    /* Flavour track: allow internal scroll but prevent overflow */
    .ab-home-flavours__track {
        max-width: 100vw !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
}

/* ============================================
   ABOUT US PAGE (Phase 4E-3) — page ID 846
   ============================================ */
.ab-about-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    padding: 80px 0 72px;
}
.ab-container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.ab-about-hero__eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #38bdf8;
    font-weight: 700;
    margin-bottom: 16px;
}
.ab-about-hero__title {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 20px;
    color: #fff;
}
.ab-about-hero__lead {
    font-size: 18px;
    line-height: 1.7;
    color: #cbd5e1;
    max-width: 720px;
    margin: 0 0 32px;
}
.ab-about-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.ab-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all .2s ease;
}
.ab-btn--primary {
    background: #38bdf8;
    color: #0f172a;
}
.ab-btn--primary:hover { background: #0ea5e9; color: #fff; }
.ab-btn--outline {
    background: transparent;
    color: #e2e8f0;
    border: 2px solid #475569;
}
.ab-btn--outline:hover { border-color: #38bdf8; color: #38bdf8; }

.ab-section { padding: 72px 0; }
.ab-section--alt { background: #f8fafc; }
.ab-section__title {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 20px;
}
.ab-section__content {
    font-size: 16px;
    line-height: 1.8;
    color: #334155;
    max-width: 860px;
}
.ab-section__content p { margin: 0 0 16px; }
.ab-section__cta { margin-top: 20px; }

.ab-pack-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.ab-pack-list li {
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
}
.ab-pack-link {
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
    margin-right: 10px;
}
.ab-pack-link:hover { text-decoration: underline; }

.ab-browse-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 12px;
}
.ab-browse-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.ab-browse-card__number {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.ab-browse-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}
.ab-browse-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .ab-browse-cards { grid-template-columns: 1fr; }
    .ab-about-hero__title { font-size: 34px; }
    .ab-section__title { font-size: 26px; }
}
@media (max-width: 480px) {
    .ab-about-hero { padding: 56px 0 48px; }
    .ab-about-hero__title { font-size: 28px; }
    .ab-about-hero__lead { font-size: 16px; }
    .ab-section { padding: 48px 0; }
    .ab-btn { width: 100%; text-align: center; }
    .ab-container-wide { padding: 0 16px; }
}

/* Phase 4E-4 Shipping Page */
.ab-shipping-hero { background:#0B0B0A; color:#F5F1E8; padding:60px 20px; text-align:center; }
.ab-shipping-hero .eyebrow { color:#C9A45C; font-size:14px; letter-spacing:2px; margin-bottom:12px; }
.ab-shipping-hero .lead { color:#C9A45C; font-size:18px; max-width:600px; margin:0 auto; }
@media(max-width:820px){ .ab-shipping-hero h1{font-size:28px;} }