/**
 * ApexPets — Custom WooCommerce Product Page Styles
 *
 * @package ApexPets-Child
 * @version 1.0.0
 *
 * Design Tokens from Phase 2 (design-system-expert)
 * Brand: ApexPets | Primary: #1D9E75 | Warm White: #FFFBF8
 * Headings: Playfair Display | Body: Inter
 *
 * Hook Mapping:
 * ┌─────────────────────────────────────────────────────────┐
 * │  .apexpets-product-page (wrapper)                        │
 * │  ├── .apexpets-announcement-bar                         │
 * │  ├── .apexpets-breadcrumb                               │
 * │  ├── .apexpets-product-main (grid)                       │
 * │  │   ├── [gallery — WooCommerce default]                 │
 * │  │   └── .summary.entry-summary                          │
 * │  │       ├── .apexpets-product-category                  │
 * │  │       ├── .product_title                              │
 * │  │       ├── .apexpets-price-wrap                        │
 * │  │       ├── .apexpets-divider                           │
 * │  │       ├── .apexpets-size-selector                     │
 * │  │       ├── .apexpets-upload-section                    │
 * │  │       ├── .quantity                                   │
 * │  │       ├── button.single_add_to_cart_button            │
 * │  │       ├── .apexpets-trust-badges                      │
 * │  │       └── .apexpets-product-meta                      │
 * │  ├── .woocommerce-tabs                                   │
 * │  ├── .apexpets-how-it-works                              │
 * │  └── .related.products                                   │
 * └─────────────────────────────────────────────────────────┘
 */

/* ============================================================
   CSS Variables (Design Tokens)
   ============================================================ */
:root {
    --ap-brand-900: #0A5C45;
    --ap-brand-800: #0F7A5C;
    --ap-brand-700: #148C68;
    --ap-brand-600: #1D9E75;
    --ap-brand-500: #2DB88A;
    --ap-brand-400: #52C9A2;
    --ap-brand-300: #7FDABD;
    --ap-brand-200: #B2E9D6;
    --ap-brand-100: #DFF5EC;
    --ap-brand-50:  #F0FBF6;

    --ap-warm-600: #D4956A;
    --ap-warm-500: #E8A87C;
    --ap-warm-400: #F0B890;
    --ap-warm-200: #FDF1E7;
    --ap-warm-100: #FEF6EE;
    --ap-warm-50:  #FFFBF8;

    --ap-neutral-900: #1A1A1A;
    --ap-neutral-800: #2D2D2D;
    --ap-neutral-700: #404040;
    --ap-neutral-600: #555555;
    --ap-neutral-500: #6B6B6B;
    --ap-neutral-400: #6B6B6B;
    --ap-neutral-300: #B0B0B0;
    --ap-neutral-200: #D4D4D4;
    --ap-neutral-100: #E8E8E8;
    --ap-neutral-50:  #F5F5F5;

    --ap-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ap-font-body:    'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    --ap-text-h1: 1.875rem;
    --ap-text-h2: 1.5rem;
    --ap-text-h3: 1.25rem;
    --ap-text-h4: 1.0625rem;
    --ap-text-body: 0.9375rem;
    --ap-text-body-sm: 0.875rem;
    --ap-text-caption: 0.8125rem;
    --ap-text-overline: 0.75rem;
    --ap-text-price: 1.75rem;

    --ap-space-1: 4px;  --ap-space-2: 8px;  --ap-space-3: 12px;
    --ap-space-4: 16px; --ap-space-5: 20px; --ap-space-6: 24px;
    --ap-space-8: 32px; --ap-space-10: 40px;--ap-space-12: 48px;
    --ap-space-16: 64px;--ap-space-20: 80px;

    --ap-radius-sm: 6px;  --ap-radius-md: 12px; --ap-radius-lg: 16px;
    --ap-radius-xl: 20px; --ap-radius-full: 999px;

    --ap-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --ap-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --ap-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);

    --ap-duration-fast: 150ms;
    --ap-duration-normal: 200ms;
    --ap-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================================
   Container Utility
   ============================================================ */
.apexpets-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ap-space-6);
}

/* ============================================================
   1. Announcement Bar
   ============================================================ */
.apexpets-announcement-bar {
    background: var(--ap-brand-900);
    color: #FFF;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-caption);
    font-weight: 500;
    text-align: center;
    padding: var(--ap-space-2) var(--ap-space-4);
    letter-spacing: 0.02em;
    line-height: 1.6;
}
.apexpets-announcement-bar .sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.3);
    vertical-align: middle;
    margin: 0 var(--ap-space-4);
}
.apexpets-announcement-bar .highlight {
    color: var(--ap-warm-400);
    font-weight: 600;
}

/* ============================================================
   2. Breadcrumb
   ============================================================ */
.apexpets-breadcrumb {
    padding: var(--ap-space-4) 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-caption);
    color: var(--ap-neutral-400);
}
.apexpets-breadcrumb a {
    color: var(--ap-neutral-500);
    transition: color var(--ap-duration-fast) var(--ap-ease-standard);
}
.apexpets-breadcrumb a:hover {
    color: var(--ap-brand-600);
}
.apexpets-breadcrumb .sep {
    margin: 0 var(--ap-space-2);
}
.apexpets-breadcrumb .current {
    color: var(--ap-neutral-700);
    font-weight: 500;
}

/* ============================================================
   3. Product Page Layout
   ============================================================ */
.apexpets-product-page .woocommerce-notices-wrapper {
    margin-bottom: var(--ap-space-6);
}

/* Override WooCommerce default single-product layout to match our grid */
.apexpets-product-page .single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ap-space-12);
    align-items: start;
}

/* Gallery column */
.apexpets-product-page .single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Summary column — sticky on desktop */
.apexpets-product-page .single-product div.product .summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: sticky;
    top: 88px;
}

/* ============================================================
   4. Category Label
   ============================================================ */
.apexpets-product-category {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-overline);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ap-brand-600);
    margin-bottom: var(--ap-space-2);
}

/* ============================================================
   5. Product Title — Override Astra default
   ============================================================ */
.apexpets-product-page .product_title {
    font-family: var(--ap-font-heading) !important;
    font-size: var(--ap-text-h1) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--ap-neutral-900) !important;
    margin-bottom: var(--ap-space-3) !important;
}

/* ============================================================
   6. Price Display
   ============================================================ */
.apexpets-price-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--ap-space-3);
    margin-bottom: var(--ap-space-6);
    font-family: var(--ap-font-body);
}
.apexpets-price-current {
    font-size: var(--ap-text-price);
    font-weight: 700;
    color: var(--ap-neutral-900);
}
/* Hide WooCommerce's default price HTML within our custom display */
.apexpets-price-current .amount {
    font-size: inherit !important;
}
.apexpets-price-original {
    font-size: var(--ap-text-h4);
    color: var(--ap-neutral-400);
    text-decoration: line-through;
}
.apexpets-price-badge {
    font-size: var(--ap-text-caption);
    font-weight: 600;
    color: #FFF;
    background: var(--ap-warm-600);
    padding: 2px 10px;
    border-radius: var(--ap-radius-full);
}

/* ============================================================
   7. Divider
   ============================================================ */
.apexpets-divider {
    border: none;
    border-top: 1px solid var(--ap-neutral-100);
    margin: var(--ap-space-6) 0;
}

/* ============================================================
   8. Size Selector — Pill Buttons
   ============================================================ */
.apexpets-size-selector {
    margin-bottom: var(--ap-space-6);
}
.apexpets-option-label {
    display: block;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body-sm);
    font-weight: 600;
    color: var(--ap-neutral-700);
    margin-bottom: var(--ap-space-3);
}
.apexpets-option-label span {
    font-weight: 400;
    color: var(--ap-neutral-400);
    margin-left: var(--ap-space-1);
}
.apexpets-required {
    color: #c00;
}

.apexpets-size-options {
    display: flex;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
}

.apexpets-size-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
    padding: 10px 20px;
    border-radius: var(--ap-radius-full);
    border: 1.5px solid var(--ap-neutral-200);
    background: #FFF;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body-sm);
    font-weight: 500;
    color: var(--ap-neutral-700);
    transition: all var(--ap-duration-fast) var(--ap-ease-standard);
    cursor: pointer;
    line-height: 1;
}
.apexpets-size-btn:hover {
    border-color: var(--ap-brand-400);
    color: var(--ap-brand-700);
}
.apexpets-size-btn.active {
    border-color: var(--ap-brand-600);
    background: var(--ap-brand-50);
    color: var(--ap-brand-800);
    font-weight: 600;
}
.apexpets-size-btn .check-icon {
    display: none;
    width: 14px;
    height: 14px;
}
.apexpets-size-btn.active .check-icon {
    display: inline-block;
}

/* Hide WooCommerce default variation dropdowns */
.apexpets-product-page table.variations {
    display: none !important;
}

/* ============================================================
   9. Photo Upload Zone
   ============================================================ */
.apexpets-upload-section {
    margin-bottom: var(--ap-space-6);
}

.apexpets-upload-zone {
    border: 2px dashed var(--ap-neutral-300);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-8) var(--ap-space-6);
    text-align: center;
    cursor: pointer;
    transition: all var(--ap-duration-normal) var(--ap-ease-standard);
    position: relative;
    background: #FFF;
}
.apexpets-upload-zone:hover,
.apexpets-upload-zone.dragover {
    border-color: var(--ap-brand-500);
    background: var(--ap-brand-50);
}
.apexpets-upload-zone .apexpets-upload-icon {
    margin: 0 auto var(--ap-space-3);
    color: var(--ap-neutral-300);
    transition: color var(--ap-duration-fast) var(--ap-ease-standard);
}
.apexpets-upload-zone:hover .apexpets-upload-icon,
.apexpets-upload-zone.dragover .apexpets-upload-icon {
    color: var(--ap-brand-500);
}
.apexpets-upload-text {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body-sm);
    color: var(--ap-neutral-500);
    margin: 0 0 var(--ap-space-1);
}
.apexpets-upload-text strong {
    color: var(--ap-brand-600);
}
.apexpets-upload-hint {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-caption);
    color: var(--ap-neutral-400);
    margin: 0;
}

/* Upload Preview Thumbnails */
.apexpets-upload-previews {
    display: flex;
    gap: var(--ap-space-2);
    margin-top: var(--ap-space-3);
    flex-wrap: wrap;
}
.apexpets-upload-previews .preview-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--ap-radius-sm);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--ap-neutral-200);
    display: inline-block;
}
.apexpets-upload-previews .preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.apexpets-upload-previews .preview-thumb .remove-btn {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ap-duration-fast);
    border: none;
    padding: 0;
}
.apexpets-upload-previews .preview-thumb .remove-btn:hover {
    background: rgba(0,0,0,0.7);
}
.apexpets-upload-previews .preview-thumb .remove-btn svg {
    width: 10px; height: 10px; color: #FFF;
}

/* ============================================================
   10. Quantity Selector — Override WooCommerce Default
   ============================================================ */
.apexpets-product-page .quantity {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--ap-neutral-200);
    border-radius: var(--ap-radius-full);
    overflow: hidden;
    margin-bottom: var(--ap-space-5);
}
.apexpets-product-page .quantity .qty {
    width: 48px;
    text-align: center;
    border: none !important;
    outline: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    font-weight: 600;
    color: var(--ap-neutral-900);
    background: transparent;
    -moz-appearance: textfield;
    padding: 0;
    line-height: 40px;
    height: 40px;
}
.apexpets-product-page .quantity .qty::-webkit-inner-spin-button,
.apexpets-product-page .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* ============================================================
   11. Add to Cart Button — Override WooCommerce Default
   ============================================================ */
.apexpets-product-page button.single_add_to_cart_button {
    width: 100%;
    height: 52px;
    border-radius: var(--ap-radius-full) !important;
    background: var(--ap-brand-600) !important;
    color: #FFF !important;
    font-family: var(--ap-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    transition: all var(--ap-duration-normal) var(--ap-ease-standard);
    border: none !important;
    margin-bottom: var(--ap-space-4);
    text-shadow: none !important;
    box-shadow: none !important;
}
.apexpets-product-page button.single_add_to_cart_button:hover {
    background: var(--ap-brand-700) !important;
    box-shadow: 0 4px 12px rgba(29,158,117,0.3) !important;
}
.apexpets-product-page button.single_add_to_cart_button:active {
    transform: scale(0.98);
}
.apexpets-product-page button.single_add_to_cart_button.added {
    background: var(--ap-brand-800) !important;
}

/* ============================================================
   12. Trust Badges
   ============================================================ */
.apexpets-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-space-6);
    padding-top: var(--ap-space-5);
    border-top: 1px solid var(--ap-neutral-100);
    margin-bottom: var(--ap-space-6);
}
.apexpets-trust-item {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-caption);
    color: var(--ap-neutral-500);
    white-space: nowrap;
}
.apexpets-trust-item svg {
    flex-shrink: 0;
    color: var(--ap-brand-500);
}

/* ============================================================
   13. SKU / Category Meta
   ============================================================ */
.apexpets-product-meta {
    margin-top: var(--ap-space-6);
    padding-top: var(--ap-space-5);
    border-top: 1px solid var(--ap-neutral-100);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-caption);
    color: var(--ap-neutral-400);
    display: flex;
    gap: var(--ap-space-6);
}
.apexpets-product-meta span {
    color: var(--ap-neutral-600);
}

/* ============================================================
   14. Sale Badge
   ============================================================ */
.apexpets-sale-badge {
    display: inline-block;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-caption);
    font-weight: 600;
    color: #FFF;
    background: var(--ap-warm-600);
    padding: 2px 10px;
    border-radius: var(--ap-radius-full);
}

/* ============================================================
   15. How It Works Section
   ============================================================ */
.apexpets-how-it-works {
    background: var(--ap-warm-50);
    padding: var(--ap-space-16) 0;
}
.apexpets-section-title {
    font-family: var(--ap-font-heading);
    font-size: var(--ap-text-h2);
    text-align: center;
    color: var(--ap-neutral-900);
    margin-bottom: var(--ap-space-12);
}
.apexpets-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ap-space-8);
    max-width: 900px;
    margin: 0 auto;
}
.apexpets-step-card {
    text-align: center;
    padding: var(--ap-space-6);
    position: relative;
}
.apexpets-step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 48px;
    right: -16px;
    width: 32px;
    height: 2px;
    background: var(--ap-brand-200);
}
.apexpets-step-number {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--ap-brand-600);
    color: #FFF;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-h3);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--ap-space-4);
}
.apexpets-step-icon {
    margin: 0 auto var(--ap-space-3);
    width: 40px; height: 40px;
    color: var(--ap-brand-500);
}
.apexpets-step-card h4 {
    font-family: var(--ap-font-heading);
    font-size: var(--ap-text-h4);
    margin-bottom: var(--ap-space-2);
    color: var(--ap-neutral-900);
}
.apexpets-step-card p {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body-sm);
    color: var(--ap-neutral-500);
    line-height: 1.6;
}

/* ============================================================
   16. Related Products
   ============================================================ */
.apexpets-product-page .related.products {
    padding: var(--ap-space-16) 0;
}
.apexpets-product-page .related.products h2 {
    font-family: var(--ap-font-heading);
    font-size: var(--ap-text-h2);
    color: var(--ap-neutral-900);
    margin-bottom: var(--ap-space-8);
}
.apexpets-product-page .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ap-space-6);
}
.apexpets-product-page .related.products ul.products li.product {
    background: #FFF;
    border-radius: var(--ap-radius-md);
    border: 1px solid var(--ap-neutral-100);
    overflow: hidden;
    transition: box-shadow var(--ap-duration-normal) var(--ap-ease-standard),
                transform var(--ap-duration-normal) var(--ap-ease-standard);
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.apexpets-product-page .related.products ul.products li.product:hover {
    box-shadow: var(--ap-shadow-md);
    transform: translateY(-2px);
}
.apexpets-product-page .related.products ul.products li.product a img {
    aspect-ratio: 1;
    object-fit: cover;
}
.apexpets-product-page .related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body-sm);
    font-weight: 600;
    color: var(--ap-neutral-800);
    padding: var(--ap-space-4) var(--ap-space-5) var(--ap-space-1);
}
.apexpets-product-page .related.products ul.products li.product .price {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    font-weight: 700;
    color: var(--ap-neutral-900);
    padding: 0 var(--ap-space-5) var(--ap-space-5);
}

/* ============================================================
   17. WooCommerce Tabs — Style Override
   ============================================================ */
.apexpets-product-page .woocommerce-tabs {
    padding: var(--ap-space-16) 0;
    border-top: 1px solid var(--ap-neutral-100);
    grid-column: 1 / -1; /* Span full width in grid */
}
.apexpets-product-page .woocommerce-tabs ul.tabs {
    display: flex;
    gap: var(--ap-space-8);
    border-bottom: 2px solid var(--ap-neutral-100);
    margin-bottom: var(--ap-space-8);
    padding: 0;
}
.apexpets-product-page .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.apexpets-product-page .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: var(--ap-space-4) 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    font-weight: 500;
    color: var(--ap-neutral-400);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--ap-duration-fast) var(--ap-ease-standard);
}
.apexpets-product-page .woocommerce-tabs ul.tabs li a:hover {
    color: var(--ap-neutral-700);
}
.apexpets-product-page .woocommerce-tabs ul.tabs li.active a {
    color: var(--ap-brand-600);
    border-bottom-color: var(--ap-brand-600);
    font-weight: 600;
}
.apexpets-product-page .woocommerce-Tabs-panel {
    font-family: var(--ap-font-body);
    color: var(--ap-neutral-600);
    line-height: 1.7;
}
.apexpets-product-page .woocommerce-Tabs-panel h2 {
    font-family: var(--ap-font-heading);
    font-size: var(--ap-text-h3);
    color: var(--ap-neutral-900);
    margin-bottom: var(--ap-space-4);
}

/* ============================================================
   18. Checkout — Trust Bar & Payment Icons
   ============================================================ */
.apexpets-checkout-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-space-6);
    justify-content: center;
    padding: var(--ap-space-5) var(--ap-space-6);
    background: var(--ap-brand-50);
    border-radius: var(--ap-radius-md);
    margin-bottom: var(--ap-space-6);
}
.apexpets-payment-icons {
    display: flex;
    gap: var(--ap-space-3);
    justify-content: center;
    margin-bottom: var(--ap-space-8);
}
.apexpets-pay-icon {
    font-family: var(--ap-font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--ap-neutral-500);
    background: var(--ap-neutral-50);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--ap-neutral-100);
}
.apexpets-estimated-delivery {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body-sm);
    color: var(--ap-neutral-500);
    padding: var(--ap-space-3) var(--ap-space-4);
    background: var(--ap-warm-50);
    border-radius: var(--ap-radius-sm);
    margin-bottom: var(--ap-space-4);
}

/* ============================================================
   19. Cart Photo Display
   ============================================================ */
.apexpets-product-page dl.variation dt {
    font-family: var(--ap-font-body);
    font-weight: 600;
    color: var(--ap-neutral-700);
}
.apexpets-product-page dl.variation dd {
    margin-bottom: var(--ap-space-2);
}

/* ============================================================
   20. WooCommerce Gallery Override
   ============================================================ */
.apexpets-product-page .woocommerce-product-gallery {
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
}
.apexpets-product-page .woocommerce-product-gallery__image {
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
}
.apexpets-product-page .flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ap-space-2);
    margin-top: var(--ap-space-3);
}
.apexpets-product-page .flex-control-thumbs li {
    width: 100% !important;
    margin: 0 !important;
}
.apexpets-product-page .flex-control-thumbs img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--ap-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--ap-duration-fast) var(--ap-ease-standard);
    opacity: 0.8;
}
.apexpets-product-page .flex-control-thumbs img:hover {
    border-color: var(--ap-brand-300);
}
.apexpets-product-page .flex-control-thumbs img.flex-active {
    border-color: var(--ap-brand-600);
    opacity: 1;
}

/* ============================================================
   21. Star Rating Override
   ============================================================ */
.apexpets-product-page .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    margin-bottom: var(--ap-space-5);
}
.apexpets-product-page .star-rating {
    color: var(--ap-warm-500);
}
.apexpets-product-page .woocommerce-review-link {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-caption);
    color: var(--ap-neutral-400);
}

/* ============================================================
   Responsive — Mobile First
   ============================================================ */
@media (max-width: 767px) {
    /* Stack product layout */
    .apexpets-product-page .single-product div.product {
        grid-template-columns: 1fr;
        gap: var(--ap-space-6);
    }
    .apexpets-product-page .single-product div.product .summary {
        position: static;
    }

    /* Size buttons */
    .apexpets-size-options {
        gap: var(--ap-space-2);
    }

    /* Trust badges */
    .apexpets-trust-badges {
        gap: var(--ap-space-4);
    }

    /* How It Works */
    .apexpets-steps-grid {
        grid-template-columns: 1fr;
        gap: var(--ap-space-6);
    }
    .apexpets-step-card:not(:last-child)::after {
        display: none;
    }

    /* Related products */
    .apexpets-product-page .related.products ul.products {
        grid-template-columns: 1fr;
    }

    /* Tabs */
    .apexpets-product-page .woocommerce-tabs ul.tabs {
        gap: var(--ap-space-4);
        overflow-x: auto;
    }
    .apexpets-product-page .woocommerce-tabs ul.tabs li a {
        white-space: nowrap;
        font-size: var(--ap-text-body-sm);
    }

    /* Announcement bar — stack items */
    .apexpets-announcement-bar .sep {
        display: none;
    }
    .apexpets-announcement-bar {
        line-height: 1.8;
    }

    /* Checkout trust bar */
    .apexpets-checkout-trust-bar {
        gap: var(--ap-space-3);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .apexpets-product-page .single-product div.product {
        gap: var(--ap-space-8);
    }
}