/* ============================================
   HealthPlus Theme - Master Custom Stylesheet
   This file overrides Luma defaults with our design
   ============================================ */

:root {
    --hp-primary: #0D6B3F;
    --hp-primary-light: #14A05E;
    --hp-primary-dark: #084D2D;
    --hp-secondary: #1B5E8C;
    --hp-accent: #E67E22;
    --hp-accent-hover: #D35400;
    --hp-white: #FFFFFF;
    --hp-off-white: #F8FAFB;
    --hp-gray-lightest: #F1F4F6;
    --hp-gray-light: #E0E6EB;
    --hp-gray: #95A5B6;
    --hp-gray-dark: #5A6C7D;
    --hp-gray-darkest: #2C3E50;
    --hp-black: #1A252F;
    --hp-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --hp-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --hp-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --hp-radius: 8px;
    --hp-radius-lg: 12px;
}

/* Prevent horizontal scroll from 100vw elements */
html, body {
    overflow-x: hidden !important;
    max-width: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--hp-off-white);
}

/* ========== HEADER ========== */
.page-header {
    background: #fff !important;
    box-shadow: var(--hp-shadow-sm) !important;
    border: none !important;
    position: relative;
    z-index: 90;
}
.panel.header {
    display: none !important; /* Hide top panel - we have custom topbar */
}
.header.content {
    max-width: 1320px !important;
    margin: 0 auto;
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    gap: 20px;
}
.nav-toggle {
    display: none !important;
}
.logo {
    order: 1;
    flex-shrink: 0;
    margin: 0 !important;
    max-width: none !important;
    float: none !important;
}
.logo img {
    max-height: 44px;
    width: auto;
}

/* Search - center */
.block-search {
    order: 2;
    flex: 1 !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    position: static !important;
}
.block-search .label { display: none !important; }
.block-search .control { border: none !important; }
.block-search .nested { display: none !important; }
.block-search #search {
    border-radius: 25px !important;
    border: 2px solid var(--hp-gray-light) !important;
    background: var(--hp-gray-lightest) !important;
    height: 44px !important;
    padding: 0 48px 0 20px !important;
    font-size: 14px !important;
    width: 100% !important;
    position: static !important;
    box-sizing: border-box;
}
.block-search #search:focus {
    border-color: var(--hp-primary) !important;
    box-shadow: 0 0 0 3px rgba(13,107,63,0.1) !important;
    background: #fff !important;
}
.block-search .action.search {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%);
    background: var(--hp-primary) !important;
    border: none !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}
.block-search .action.search:before {
    color: #fff !important;
    font-size: 16px !important;
}
.block-search .action.search span { display: none; }
.block-search .action.search:hover {
    background: var(--hp-primary-light) !important;
}

/* Header links - hide (in custom icons) */
.header.content .header.links,
.header.content .compare {
    display: none !important;
}

/* Minicart */
.minicart-wrapper {
    order: 4 !important;
    margin: 0 !important;
    float: none !important;
}
.minicart-wrapper .action.showcart:before {
    color: var(--hp-gray-darkest);
    font-size: 26px;
}
.minicart-wrapper .action.showcart:hover:before {
    color: var(--hp-primary);
}
.minicart-wrapper .counter.qty {
    background: var(--hp-accent) !important;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* Hide default Magento nav */
.sections.nav-sections {
    display: none !important;
}

/* ========== POPULAR DRUGS GRID (homepage) ========== */
.hp-popular-drugs {
    background: #F8FAFB;
    padding: 60px 0;
}
.hp-popular-drugs-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}
.hp-popular-drugs-head {
    text-align: center;
    margin-bottom: 36px;
}
.hp-popular-drugs-head h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--hp-gray-darkest);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.hp-popular-drugs-head p {
    color: var(--hp-gray-dark);
    font-size: 15px;
    margin: 0;
}

/* 2-Column layout: grid + sidebar */
.hp-pd-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: flex-start;
}
.hp-popular-drugs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

/* ---- Sidebar ---- */
.hp-pd-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hp-pd-sidebar-box {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--hp-gray-lightest);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Newsletter box */
.hp-pd-nl {
    background: linear-gradient(135deg, #084D2D, #0D6B3F);
    border: none;
    padding: 24px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hp-pd-nl::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.hp-pd-nl > * { position: relative; z-index: 1; }
.hp-pd-nl-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.hp-pd-nl h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #fff;
}
.hp-pd-nl p {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 0 0 16px;
}
.hp-pd-nl-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hp-pd-nl-form input {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    background: rgba(255,255,255,0.95);
    color: #1A252F;
}
.hp-pd-nl-form input::placeholder { color: #95A5B6; }
.hp-pd-nl-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    background: #E67E22;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}
.hp-pd-nl-form button:hover { background: #D35400; }
.hp-pd-nl-form button svg { transition: transform 0.2s; }
.hp-pd-nl-form button:hover svg { transform: translateX(4px); }

/* Payment Methods box */
.hp-pd-pay {
    padding: 0;
    overflow: hidden;
}
.hp-pd-pay-head {
    background: linear-gradient(135deg, #1A252F, #2C3E50);
    padding: 16px 20px;
    text-align: center;
    position: relative;
}
.hp-pd-pay-head::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #2C3E50, #2C3E50);
    rotate: 45deg;
}
.hp-pd-pay h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.3px;
}
.hp-pd-pay h3 svg {
    vertical-align: middle;
    margin-right: 6px;
    opacity: 0.7;
}
.hp-pd-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 14px 10px 10px;
}
.hp-pd-pay-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: 10px;
    transition: all 0.25s ease;
    cursor: default;
}
.hp-pd-pay-item:hover {
    background: rgba(13,107,63,0.06);
}
.hp-pd-pay-item:hover .hp-pd-pay-icon {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.hp-pd-pay-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: all 0.25s ease;
    position: relative;
}
.hp-pd-pay-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px dashed transparent;
    transition: border-color 0.25s;
}
.hp-pd-pay-item:hover .hp-pd-pay-icon::after {
    border-color: rgba(0,0,0,0.1);
}
.hp-pd-pay-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--hp-gray-dark);
    text-align: center;
    line-height: 1.2;
    transition: color 0.2s;
}
.hp-pd-pay-item:hover .hp-pd-pay-name {
    color: var(--hp-gray-darkest);
    font-weight: 700;
}
.hp-pd-pay-foot {
    background: #F8FAFB;
    border-top: 1px solid var(--hp-gray-lightest);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--hp-gray);
    font-weight: 500;
}
.hp-pd-pay-foot svg { flex-shrink: 0; color: var(--hp-primary); }
.hp-drug-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1.5px solid var(--hp-gray-lightest);
    border-radius: 14px;
    padding: 22px 14px 18px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    color: inherit;
}
.hp-drug-card:hover {
    border-color: var(--drug-color, var(--hp-primary));
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
.hp-drug-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}
.hp-drug-cat {
    font-size: 10px;
    font-weight: 700;
    color: var(--drug-color, var(--hp-primary));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.hp-drug-dosage {
    font-size: 12px;
    color: var(--hp-primary);
    font-weight: 600;
    margin-bottom: 12px;
}
.hp-drug-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hp-gray-lightest);
    width: 100%;
}
.hp-drug-price-label {
    font-size: 11px;
    color: var(--hp-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.hp-drug-price-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--hp-gray-darkest);
}
.hp-drug-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--hp-primary);
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
}
.hp-drug-cta svg { transition: transform 0.2s; }
.hp-drug-card:hover .hp-drug-cta svg { transform: translateX(3px); }

@media (max-width: 1024px) {
    .hp-pd-layout { grid-template-columns: 1fr 260px; gap: 16px; }
}
@media (max-width: 768px) {
    .hp-pd-layout { grid-template-columns: 1fr; }
    .hp-pd-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}
@media (max-width: 640px) {
    .hp-popular-drugs { padding: 40px 0; }
    .hp-popular-drugs-head h2 { font-size: 24px; }
    .hp-popular-drugs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hp-drug-card { padding: 18px 10px 14px; }
    .hp-drug-name { font-size: 15px; }
    .hp-pd-sidebar { grid-template-columns: 1fr; }
}

/* ========== HOMEPAGE ========== */
.cms-index-index .page-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.cms-index-index .page-title-wrapper {
    display: none !important;
}
.cms-index-index .column.main {
    padding: 0 !important;
}

/* ========== FAQ SECTION ========== */
.hp-cat-faq {
    max-width: 1320px;
    margin: 30px auto;
    padding: 32px 28px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #F1F4F6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.hp-faq-header { text-align: center; margin-bottom: 24px; }
.hp-faq-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2C3E50;
    margin: 0 0 6px;
}
.hp-faq-header p {
    color: #5A6C7D;
    font-size: 14px;
    margin: 0;
}
.hp-faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.hp-faq-item {
    background: #F8FAFB;
    border: 1px solid #F1F4F6;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}
.hp-faq-item[open] {
    border-color: #0D6B3F;
    background: #fff;
    box-shadow: 0 2px 8px rgba(13,107,63,0.08);
}
.hp-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    color: #2C3E50;
    font-size: 15px;
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary::marker { display: none; content: ''; }
.hp-faq-icon {
    width: 24px;
    height: 24px;
    background: #0D6B3F;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.hp-faq-icon::before,
.hp-faq-icon::after {
    content: '';
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hp-faq-icon::before { width: 10px; height: 2px; }
.hp-faq-icon::after { width: 2px; height: 10px; transition: transform 0.2s; }
.hp-faq-item[open] .hp-faq-icon::after { opacity: 0; }
.hp-faq-a {
    padding: 0 20px 18px;
    color: #5A6C7D;
    font-size: 14px;
    line-height: 1.7;
}

/* ========== DESCRIPTION SECTION ========== */
.hp-cat-description {
    max-width: 1320px;
    margin: 30px auto;
    padding: 32px 28px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #F1F4F6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* First line of the description promoted to a page-level heading */
.hp-cat-description .hp-cat-h1 {
    font-size: 28px;
    font-weight: 800;
    color: #2C3E50;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid #0D6B3F;
    line-height: 1.25;
    letter-spacing: -0.3px;
}
@media (max-width: 640px) {
    .hp-cat-description .hp-cat-h1 { font-size: 22px; }
}
.hp-cat-desc-content {
    color: #5A6C7D;
    font-size: 15px;
    line-height: 1.8;
}
.hp-cat-desc-content p { margin-bottom: 14px; }
.hp-cat-desc-content h3, .hp-cat-desc-content h4 {
    color: #2C3E50;
    margin: 20px 0 10px;
    font-weight: 600;
}
.hp-cat-desc-content ul, .hp-cat-desc-content ol {
    padding-left: 20px;
    margin-bottom: 14px;
}
.hp-cat-desc-content li {
    margin-bottom: 6px;
    line-height: 1.7;
}
.hp-cat-desc-content strong {
    color: #2C3E50;
}

/* ========== TESTIMONIALS ========== */
.hp-cat-testimonials {
    margin: 30px 20px;
    padding: 32px 28px;
    background: linear-gradient(135deg, #F8FAFB 0%, #EEF5F0 100%);
    border-radius: 14px;
    border: 1px solid #E8F0EB;
}
.hp-test-header { text-align: center; margin-bottom: 28px; }
.hp-test-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #2C3E50;
    margin: 0 0 6px;
}
.hp-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.hp-test-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ========== TRUST STRIP - full width bar ========== */
.hp-cat-trust-strip {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: #F8FAFB;
    border-top: 1px solid #E0E6EB;
    border-bottom: 1px solid #E0E6EB;
    padding: 24px 0 !important;
    margin-top: 40px !important;
}
.hp-cat-trust-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex !important;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}
.hp-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #2C3E50;
}

/* ========== FIX MEGA MENU OVERLAY ========== */
/* Mega dropdown should be above hero but not push content */
.hp-mega-dropdown {
    z-index: 999 !important;
}
.hp-cat-hero {
    z-index: 1;
}

/* ========== CATEGORY HERO BANNER ========== */
.hp-cat-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    background: linear-gradient(135deg, #084D2D 0%, #0D6B3F 50%, #1B5E8C 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.hp-cat-hero * { box-sizing: border-box; }
.hp-cat-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 30%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 15% 80%, rgba(255,255,255,0.04) 0%, transparent 40%);
    pointer-events: none;
}
.hp-cat-hero-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.hp-cat-hero-text { flex: 1; }
.hp-cat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}
.hp-cat-breadcrumb a {
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none;
}
.hp-cat-breadcrumb a:hover { color: #fff !important; }
.hp-cat-breadcrumb span { color: rgba(255,255,255,0.9); }
.hp-cat-breadcrumb svg { opacity: 0.4; }
.hp-cat-hero h1 {
    color: #fff !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.5px;
}
.hp-cat-desc {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 600px;
}
.hp-cat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}
.hp-cat-count,
.hp-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 500;
    background: rgba(255,255,255,0.1);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
}
.hp-cat-hero-visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-cat-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: catPulse 3s ease-in-out infinite;
}
@keyframes catPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (max-width: 768px) {
    .hp-cat-hero-inner { flex-direction: column; padding: 32px 20px; text-align: center; }
    .hp-cat-hero h1 { font-size: 28px !important; }
    .hp-cat-meta { justify-content: center; }
    .hp-cat-breadcrumb { justify-content: center; }
    .hp-cat-desc { margin: 0 auto 18px; }
    .hp-cat-hero-visual { margin-top: 20px; }
}

/* ========== HIDE TOOLBAR (sort-by, pagination, modes) on category pages ========== */
.catalog-category-view .toolbar.toolbar-products,
.catalog-category-view .toolbar-products,
.catalog-category-view .toolbar-sorter,
.catalog-category-view .toolbar-amount,
.catalog-category-view .modes {
    display: none !important;
}

/* ========== CATEGORY PAGE LAYOUT ========== */
/* Remove Magento's default layered filter block (Shop By) */
.catalog-category-view .block.filter,
.catalog-category-view #layered-filter-block {
    display: none !important;
}

/* column.main - full width container */
.catalog-category-view .column.main,
.catalogsearch-result-index .column.main {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* columns wrapper should be full width */
.catalog-category-view .columns,
.catalogsearch-result-index .columns {
    display: block !important;
    max-width: 100% !important;
}

/* Hide sidebar on search page (we build our own via JS) */
.catalogsearch-result-index .sidebar { display: none !important; }

/* Search results - use same product card styling as category page */
.catalogsearch-result-index .products.wrapper { }
.catalogsearch-result-index .products.wrapper .product-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    list-style: none;
    padding: 0 !important;
}

/* Hide Magento's "Search results for:" text (we show it in hero) */
.catalogsearch-result-index .search.results > .message.notice { margin-bottom: 16px; }
.catalogsearch-result-index .page-title-wrapper { display: none !important; }

/* Category page wrapper after JS rebuild - NO overflow:hidden so hero can go full width */
#hp-cat-layout-wrapper {
    max-width: 100%;
    width: 100%;
}

/* 2-column layout inside wrapper */
.hp-cat-layout {
    display: grid !important;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: flex-start;
    max-width: 1320px;
    margin: 24px auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.hp-cat-sidebar {
    position: sticky;
    top: 20px;
}
.hp-sidebar-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #F1F4F6;
    overflow: hidden;
    margin-bottom: 16px;
}
.hp-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #2C3E50;
    background: #F8FAFB;
    border-bottom: 1px solid #F1F4F6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hp-sidebar-title svg { color: #0D6B3F; }
.hp-sidebar-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}
.hp-sidebar-list li { margin: 0 !important; padding: 0 !important; }
.hp-sidebar-list li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px !important;
    color: #5A6C7D !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}
.hp-sidebar-list li a:hover {
    background: #F8FAFB;
    color: #0D6B3F !important;
    border-left-color: #0D6B3F;
}
.hp-sidebar-list li.active a {
    color: #0D6B3F !important;
    font-weight: 600 !important;
    background: rgba(13,107,63,0.05);
    border-left-color: #0D6B3F;
}
.hp-sidebar-list .arrow { color: #C5CED6; font-size: 18px; }
.hp-sidebar-list .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #0D6B3F;
}

/* Contact Info Banner in Sidebar */
.hp-sidebar-contact {
    background: linear-gradient(135deg, #084D2D, #0D6B3F);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.hp-sidebar-contact::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.hp-sidebar-contact .contact-icon {
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
}
.hp-sidebar-contact h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
}
.hp-sidebar-contact p {
    margin: 0 0 14px;
    font-size: 12px;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}
.hp-sidebar-contact .contact-phone {
    display: block;
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none !important;
    margin-bottom: 12px;
    padding: 6px 0;
    position: relative;
    z-index: 1;
    letter-spacing: 0.3px;
}
.hp-sidebar-contact .contact-btn {
    display: inline-block;
    background: #E67E22;
    color: #fff !important;
    text-decoration: none !important;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    position: relative;
    z-index: 1;
}
.hp-sidebar-contact .contact-btn:hover { background: #D35400; }

/* Top Products List in Sidebar */
.hp-sidebar-products {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px !important;
}
.hp-sidebar-products li {
    margin: 0 !important;
    padding: 0 !important;
}
.hp-sidebar-products li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 10px !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: background 0.15s;
}
.hp-sidebar-products li a:hover {
    background: #F8FAFB;
}
.hp-sidebar-products .prod-thumb {
    width: 60px;
    height: 60px;
    background: #F8FAFB;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.hp-sidebar-products .prod-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.hp-sidebar-products .prod-info {
    flex: 1;
    min-width: 0;
}
.hp-sidebar-products .prod-name {
    font-size: 13px;
    font-weight: 500;
    color: #2C3E50;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-sidebar-products .prod-price {
    font-size: 14px;
    font-weight: 700;
    color: #0D6B3F;
}

/* Main area */
.hp-cat-main {
    min-width: 0;
}

@media (max-width: 768px) {
    .hp-cat-layout { grid-template-columns: 1fr; }
    .hp-cat-sidebar { position: static; }
}

/* ========== CATEGORY PAGE ========== */
.catalog-category-view .page-title-wrapper {
    display: none !important;
}
.catalog-category-view .category-description {
    display: none !important;
}
/* Hide default breadcrumbs - hero banner has its own */
.catalog-category-view .breadcrumbs {
    display: none !important;
}
.catalog-category-view .page-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.catalog-category-view .column.main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px !important;
    display: flex;
    flex-direction: column;
}
/* Force hero banner to TOP of content */
.catalog-category-view .hp-cat-hero {
    order: -10 !important;
    margin-bottom: 24px;
}
/* Toolbar */
.catalog-category-view .toolbar-products {
    background: #fff;
    border-radius: var(--hp-radius);
    padding: 14px 20px;
    margin-bottom: 24px;
    box-shadow: var(--hp-shadow-sm);
    border: 1px solid var(--hp-gray-lightest);
}
.toolbar .sorter-label { font-weight: 600; }
/* Sidebar styling for 2-column layout */
.catalog-category-view .sidebar-main {
    padding-right: 20px;
}
/* Hide default Magento sidebar blocks (filters etc) but keep our custom sidebar */
.catalog-category-view .sidebar-main .filter-options,
.catalog-category-view .sidebar-main .block.filter {
    display: none !important;
}
/* Trust strip at bottom */
.catalog-category-view .hp-cat-trust-strip {
    order: 999 !important;
}

/* ========== PRODUCT GRID — HealthPlus card design ========== */
.products-grid .product-items,
.hp-cat-grid .product-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* HealthPlus Product Card */
.hp-prod-card { margin: 0 !important; padding: 0 !important; }
.hp-prod-card-info {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--hp-gray-lightest);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.hp-prod-card-info:hover {
    border-color: var(--hp-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(13,107,63,0.12);
}

/* BRAND / GENERIC pill at top-left */
.hp-prod-card-type {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.hp-prod-card-type.hp-type-brand   { background: var(--hp-primary); }
.hp-prod-card-type.hp-type-generic { background: #E67E22; }

/* Image area (light gray block) */
.hp-prod-card-photo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #F8FAFB;
    padding: 24px 16px;
    height: 220px;
    text-decoration: none !important;
}
.hp-prod-card-photo img,
.hp-prod-card-photo .product-image-photo {
    max-width: 80% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto !important;
    transition: transform 0.3s ease;
}
.hp-prod-card-info:hover .hp-prod-card-photo img { transform: scale(1.05); }

/* Card body */
.hp-prod-card-body {
    padding: 18px 18px 18px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
}

/* Category pill */
.hp-prod-card-cat {
    display: inline-flex;
    align-self: flex-start;
    background: var(--hp-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* Product name */
.hp-prod-card-name {
    margin: 0 0 6px !important;
    min-height: auto !important;
}
.hp-prod-card-name a {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--hp-gray-darkest) !important;
    text-decoration: none !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-prod-card-name a:hover { color: var(--hp-primary) !important; }

/* Subtitle */
.hp-prod-card-sub {
    font-size: 13px;
    color: var(--hp-gray);
    line-height: 1.5;
    margin: 0 0 14px;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price wrap */
.hp-prod-card-price-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.hp-prod-card-price-from {
    font-size: 13px;
    color: var(--hp-gray-dark);
    font-weight: 600;
}
.hp-prod-card-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--hp-primary);
    line-height: 1;
}
.hp-prod-card-price-note {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--hp-gray);
    margin-top: -2px;
    font-style: italic;
}

/* CTA button */
.hp-prod-card-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--hp-primary);
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 4px 10px rgba(13,107,63,0.2);
    border: 2px solid var(--hp-primary);
}
.hp-prod-card-btn:hover {
    background: #0F7B48;
    border-color: #0F7B48;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(13,107,63,0.3);
    color: #fff !important;
}
.hp-prod-card-btn svg { transition: transform 0.2s; }
.hp-prod-card-btn:hover svg { transform: translateX(3px); }

/* Hide legacy Magento card chrome we don't use anymore */
.hp-cat-grid .product-item-inner,
.hp-cat-grid .product-item-actions,
.hp-cat-grid .price-box,
.hp-cat-grid .product-reviews-summary,
.hp-cat-grid .actions-secondary,
.hp-cat-grid .swatch-attribute-options { display: none !important; }

/* Hide the legacy product-item rules below from applying to our new layout */
.hp-cat-grid .product-items .product-item { width: auto !important; padding: 0 !important; margin: 0 !important; }
.hp-cat-grid .products-grid .product-item-info { padding: 0 !important; box-shadow: none !important; border: none !important; }

/* Legacy Magento product-item overrides — apply only to non-HealthPlus card grids
   (related products, upsells, search results) so they don't conflict with our cards. */
.products-grid:not(.hp-cat-grid) .product-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--hp-radius-lg) !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    box-shadow: var(--hp-shadow-sm);
    transition: all 0.3s ease;
}
.products-grid .product-item:hover {
    box-shadow: var(--hp-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--hp-primary);
}
.products-grid .product-item-info {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Product Image */
.products-grid .product-item-photo {
    display: block !important;
    overflow: hidden;
    background: var(--hp-gray-lightest);
}
.products-grid .product-image-container {
    width: 100% !important;
}
.products-grid .product-image-photo {
    transition: transform 0.4s ease;
}
.products-grid .product-item:hover .product-image-photo {
    transform: scale(1.06);
}

/* Product Details */
.products-grid .product-item-details {
    padding: 16px 20px 20px !important;
}
.products-grid .product-item-name {
    margin-bottom: 6px !important;
    min-height: auto !important;
}
.products-grid .product-item-name a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--hp-gray-darkest) !important;
    text-decoration: none !important;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.products-grid .product-item-name a:hover {
    color: var(--hp-primary) !important;
}

/* Price */
.products-grid .price-box {
    margin: 8px 0 14px !important;
}
.products-grid .price-box .price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--hp-primary) !important;
}

/* Add to Cart Button - ALWAYS visible (not hover-only) */
.products-grid .product-item-inner {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    clip: auto !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
    max-height: none !important;
    transform: none !important;
}
.products-grid .product-item-actions {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.products-grid .action.tocart.primary,
.products-grid .action.tocart {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    background: var(--hp-primary) !important;
    border: 2px solid var(--hp-primary) !important;
    color: #fff !important;
    border-radius: var(--hp-radius) !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.products-grid .action.tocart.primary span,
.products-grid .action.tocart span {
    color: #fff !important;
}
.products-grid .action.tocart:hover {
    background: var(--hp-primary-light) !important;
    border-color: var(--hp-primary-light) !important;
}

/* Wishlist/Compare secondary actions */
.products-grid .actions-secondary {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}
.products-grid .actions-secondary a {
    color: var(--hp-gray) !important;
}
.products-grid .actions-secondary a:hover {
    color: var(--hp-primary) !important;
}

/* ========== PRODUCT DETAIL PAGE ========== */
.catalog-product-view > .page-title-wrapper,
.catalog-product-view .page-main > .page-title-wrapper { display: none !important; }
.catalog-product-view .breadcrumbs { display: none !important; }
.catalog-product-view .page-main { padding-top: 0 !important; margin-top: 0 !important; }
.catalog-product-view .columns { display: block !important; }
.catalog-product-view .column.main {
    display: grid !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 24px;
    max-width: 1320px;
    margin: 0 auto !important;
    padding: 0 20px 30px !important;
    width: auto !important;
    float: none !important;
}
/* Full-width rows inside the grid */
.catalog-product-view .column.main > .hp-product-hero,
.catalog-product-view .column.main > .hp-prod-section,
.catalog-product-view .column.main > .hp-prod-need-help,
.catalog-product-view .column.main > .block.related,
.catalog-product-view .column.main > .block.upsell {
    grid-column: 1 / -1;
}
/* Break hero out to full viewport width */
.catalog-product-view .column.main > .hp-product-hero {
    width: calc(100vw) !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50% - 20px) !important;
    margin-right: calc(-50vw + 50% - 20px) !important;
}
/* Wrap product form (hero is already sibling) inside a centered container */
.catalog-product-view .product-info-main,
.catalog-product-view .product.media,
.catalog-product-view .hp-prod-section,
.catalog-product-view .hp-prod-need-help,
.catalog-product-view .block.related,
.catalog-product-view .block.upsell {
    box-sizing: border-box;
}

/* Hide "Be the first to review" empty state — no review yet */
.catalog-product-view .product-reviews-summary.empty { display: none !important; }
/* Hide default text-only wishlist/compare links (we render our own icon versions) */
.catalog-product-view .product-social-links { display: none !important; }
/* Make product-info-main a flex column so we can reorder children */
.catalog-product-view .product-info-main {
    display: flex !important;
    flex-direction: column !important;
}
.catalog-product-view .product-info-main > .page-title-wrapper { order: 1; }
.catalog-product-view .product-info-main > .product.attribute.overview { order: 2; }
.catalog-product-view .product-info-main > .product-info-price { order: 3; }
.catalog-product-view .product-info-main > .product-info-stock-sku { order: 4; }
.catalog-product-view .product-info-main > .product.attribute.sku { order: 5; }
.catalog-product-view .product-info-main > .product-add-form { order: 6; }
.catalog-product-view .product-info-main > .product-social-links { order: 7; }

/* Short description below title */
.catalog-product-view .product.attribute.overview {
    margin: 0 0 10px !important;
    padding: 0 !important;
}
.catalog-product-view .product.attribute.overview .value {
    font-size: 14px;
    color: var(--hp-gray-dark);
    line-height: 1.5;
    font-style: italic;
}
.catalog-product-view .product.attribute.overview .value p {
    margin: 0;
}

/* ---------- Hero banner ---------- */
.hp-product-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-bottom: 30px !important;
    background: linear-gradient(135deg, #084D2D 0%, #0D6B3F 50%, #1B5E8C 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}
.hp-product-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 30%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 15% 80%, rgba(255,255,255,0.04) 0%, transparent 40%);
    pointer-events: none;
}
.hp-product-hero-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 40px;
    position: relative;
    z-index: 1;
}
.hp-product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    flex-wrap: wrap;
}
.hp-product-breadcrumb a { color: rgba(255,255,255,0.7) !important; text-decoration: none; }
.hp-product-breadcrumb a:hover { color: #fff !important; }
.hp-product-breadcrumb span { color: #fff; font-weight: 500; }
.hp-product-breadcrumb svg { opacity: 0.4; }
.hp-product-hero h1 {
    color: #fff !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.5px;
}
.hp-product-hero-desc {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
    max-width: 720px;
}
.hp-product-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hp-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    font-weight: 500;
    background: rgba(255,255,255,0.1);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
}

/* ---------- Product form (image | info) as grid children ---------- */
.catalog-product-view .product-info-main,
.catalog-product-view .product.media {
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    padding: 28px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    min-width: 0;
}
.catalog-product-view .column.main > .product.media { grid-column: 1; }
.catalog-product-view .column.main > .product-info-main { grid-column: 2; }

/* Title */
.catalog-product-view .product-info-main .page-title-wrapper {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}
.catalog-product-view .product-info-main .page-title {
    margin: 0 !important;
    padding: 0 !important;
}
.catalog-product-view .product-info-main .page-title span {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--hp-gray-darkest) !important;
    line-height: 1.25;
}

/* SKU pill above title */
.catalog-product-view .product.attribute.sku {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: #F8FAFB;
    color: var(--hp-gray-dark);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.catalog-product-view .product.attribute.sku strong.type { font-weight: 600; color: var(--hp-gray-darkest); margin-right: 4px; }
.catalog-product-view .product.attribute.sku .value { font-weight: 500; }

/* Price card - hidden, we use hp-selected-price instead */
.catalog-product-view .product-info-price {
    display: none !important;
}
.catalog-product-view .product-info-price .price-box { margin: 0 !important; padding: 0 !important; }
.catalog-product-view .product-info-price .price {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--hp-primary) !important;
    line-height: 1;
}
/* In Stock pill */
.catalog-product-view .product-info-stock-sku {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center;
}
.catalog-product-view .stock.available {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(39,174,96,0.12);
    color: #1F8049 !important;
    font-size: 13px;
    font-weight: 700 !important;
    padding: 6px 12px;
    border-radius: 20px;
}
.catalog-product-view .stock.available::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #27AE60;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(39,174,96,0.2);
}
.catalog-product-view .stock.unavailable {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(224,36,54,0.12);
    color: #B7112A !important;
    font-size: 13px;
    font-weight: 700 !important;
    padding: 6px 12px;
    border-radius: 20px;
}

/* Hide native qty input — Quantity Pack buttons control it */
.catalog-product-view .box-tocart .field.qty { display: none !important; }

/* Add to Cart + Buy Now buttons */
.catalog-product-view .box-tocart { margin-top: 16px; }
.catalog-product-view .box-tocart .fieldset {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.catalog-product-view .box-tocart .actions {
    display: block !important;
    width: 100%;
}
.catalog-product-view .box-tocart .action.tocart,
.catalog-product-view .action.primary.tocart {
    width: 100% !important;
    background: var(--hp-primary) !important;
    border: 2px solid var(--hp-primary) !important;
    color: #fff !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(13,107,63,0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}
.catalog-product-view .box-tocart .action.tocart:hover {
    background: #0F7B48 !important;
    border-color: #0F7B48 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(13,107,63,0.35);
}
.catalog-product-view .box-tocart .action.tocart[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.catalog-product-view .box-tocart .action.tocart span { color: #fff !important; }
/* Instant purchase container (we don't use it) */
.catalog-product-view #instant-purchase { display: none !important; }

/* Buy Now button */
.hp-prod-buy-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 16px 24px;
    background: #E67E22;
    color: #fff;
    border: 2px solid #E67E22;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(230,126,34,0.25);
}
.hp-prod-buy-now:hover {
    background: #D35400;
    border-color: #D35400;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(230,126,34,0.35);
}
.hp-prod-buy-now svg { stroke-width: 2.5; }

/* Trust strip below Add to Cart */
.hp-prod-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--hp-gray-lightest);
}
.hp-prod-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
    background: #F8FAFB;
    font-size: 11px;
    color: var(--hp-gray-dark);
    font-weight: 600;
}
.hp-prod-trust-item svg { color: var(--hp-primary); }

/* ---------- Generic section card style ---------- */
.hp-prod-section {
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-top: 24px;
}
.hp-prod-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--hp-primary);
    display: inline-block;
}

/* About */
.hp-prod-about-body {
    color: var(--hp-gray-dark);
    font-size: 15px;
    line-height: 1.75;
}
.hp-prod-about-body p { margin: 0 0 12px; }
.hp-prod-about-body ul, .hp-prod-about-body ol { padding-left: 22px; margin-bottom: 12px; }
.hp-prod-about-body li { margin-bottom: 6px; }

/* Dosage & Strength Information table */
.hp-dosage-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--hp-gray-lightest);
    margin-top: 4px;
}
.hp-dosage-table {
    width: 100%;
    border-collapse: collapse;
}
.hp-dosage-table thead th {
    background: var(--hp-gray-darkest);
    color: #fff;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.3px;
}
.hp-dosage-table thead th:first-child { width: 40%; }
.hp-dosage-table tbody tr { transition: background 0.15s; }
.hp-dosage-table tbody tr:hover { background: #F8FAFB; }
.hp-dosage-table tbody td {
    padding: 13px 24px;
    font-size: 14px;
    border-bottom: 1px solid var(--hp-gray-lightest);
}
.hp-dosage-table tbody tr:last-child td { border-bottom: none; }
.hp-dosage-prop {
    color: var(--hp-gray-darkest);
    font-weight: 600;
    background: rgba(219, 234, 254, 0.25);
}
.hp-dosage-val {
    color: var(--hp-gray-dark);
    background: rgba(219, 234, 254, 0.12);
}

/* Shipping table */
.hp-prod-shipping-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0;
}
.hp-prod-shipping-table thead th {
    background: var(--hp-primary);
    color: #fff;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.hp-prod-shipping-table thead th:first-child { border-top-left-radius: 8px; }
.hp-prod-shipping-table thead th:last-child { border-top-right-radius: 8px; }
.hp-prod-shipping-table tbody td {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--hp-gray-dark);
    border-bottom: 1px solid var(--hp-gray-lightest);
}
.hp-prod-shipping-table tbody tr:hover td { background: #F8FAFB; }
.hp-prod-shipping-note {
    color: var(--hp-gray);
    font-size: 13px;
    margin: 16px 0 0;
    font-style: italic;
}

/* FAQ - Left border accent style */
.hp-prod-faq .hp-prod-faq-list { max-width: 100%; }
.hp-faq-card {
    border-left: 4px solid var(--hp-secondary);
    padding: 16px 20px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 0 8px 8px 0;
    transition: all 0.2s ease;
}
.hp-faq-card:hover {
    background: #F8FAFB;
    border-left-color: var(--hp-primary);
}
.hp-faq-card-q {
    font-size: 15px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    margin-bottom: 6px;
    line-height: 1.4;
}
.hp-faq-card-a {
    font-size: 13px;
    color: var(--hp-gray-dark);
    line-height: 1.7;
}

/* Force page.bottom container full width — overrides Magento's content constraint */
.page-bottom {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Global Need Help bar (shown above footer on every page) */
/* ---- Need Help Strip (above footer, every page) ---- */
.hp-help-strip {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(135deg, #084D2D 0%, #0D6B3F 50%, #1B5E8C 100%);
    color: #fff;
    padding: 0;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}
.hp-help-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.hp-help-strip-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}

/* Left side: info */
.hp-help-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.hp-help-icon-wrap {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hp-help-info h3 {
    margin: 0 0 3px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.hp-help-info p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

/* Right side: action buttons */
.hp-help-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hp-help-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none !important;
    color: #fff !important;
    transition: all 0.2s ease;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    white-space: nowrap;
}
.hp-help-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}
.hp-help-btn svg { flex-shrink: 0; }
.hp-help-btn span { display: flex; flex-direction: column; line-height: 1.3; }
.hp-help-btn small {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.6;
}
.hp-help-btn span:not(small) {
    font-size: 14px;
    font-weight: 700;
}

/* WhatsApp green accent */
.hp-help-wa {
    background: rgba(37, 211, 102, 0.15);
    border-color: rgba(37, 211, 102, 0.3);
}
.hp-help-wa:hover {
    background: rgba(37, 211, 102, 0.25);
    border-color: #25D366;
}
.hp-help-wa svg { color: #25D366; }

/* Email accent */
.hp-help-email svg { opacity: 0.8; }

/* Phone accent */
.hp-help-phone svg { opacity: 0.8; }

@media (max-width: 1024px) {
    .hp-help-strip-inner { flex-direction: column; text-align: center; }
    .hp-help-info { flex-direction: column; }
    .hp-help-actions { justify-content: center; }
}
@media (max-width: 640px) {
    .hp-help-strip-inner { padding: 28px 20px; }
    .hp-help-actions { flex-direction: column; width: 100%; }
    .hp-help-btn { justify-content: center; width: 100%; }
}

/* Selected Pack Price Display */
.hp-selected-price {
    background: linear-gradient(135deg, #F8FAFB, #EEF5F0);
    border: 1px solid #E8F0EB;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 16px 0;
}
.hp-selected-price-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--hp-gray);
    margin-bottom: 6px;
}
.hp-selected-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hp-selected-price-val {
    font-size: 36px;
    font-weight: 800;
    color: var(--hp-primary);
    line-height: 1;
}
.hp-selected-price-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(39,174,96,0.12);
    color: #1F8049;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 16px;
}
.hp-selected-price-stock::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #27AE60;
    border-radius: 50%;
}
.hp-selected-price-detail {
    font-size: 13px;
    color: var(--hp-gray-dark);
    margin-top: 4px;
    font-weight: 500;
}

/* Quantity Pack selector (inside product-info-main) */
.hp-quantity-pack {
    margin: 18px 0 20px;
}
.hp-qty-pack-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hp-gray-dark);
    margin: 0 0 12px;
}
.hp-qty-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.hp-qty-pack-card {
    position: relative;
    background: #F8FAFB;
    border: 2px solid var(--hp-gray-lightest);
    border-radius: 10px;
    padding: 16px 8px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    min-height: 88px;
}
.hp-qty-pack-card:hover {
    border-color: var(--hp-primary);
    background: #fff;
}
.hp-qty-pack-card.selected {
    border-color: var(--hp-primary);
    background: rgba(13,107,63,0.06);
    box-shadow: 0 0 0 2px rgba(13,107,63,0.15);
}
.hp-qty-pack-qty {
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-gray-darkest);
    margin-bottom: 4px;
}
.hp-qty-pack-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--hp-primary);
    line-height: 1.2;
}
.hp-qty-pack-unit {
    font-size: 11px;
    color: var(--hp-gray);
    margin-top: 2px;
    font-weight: 500;
}
.hp-qty-pack-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #E67E22;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.hp-qty-pack-badge.best {
    background: var(--hp-primary);
}
@media (max-width: 480px) {
    .hp-qty-pack-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Other Variants grid */
.hp-variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.hp-variant-card {
    background: #fff;
    border: 2px solid var(--hp-gray-lightest);
    border-radius: 12px;
    padding: 12px 10px 14px;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.18s ease;
    color: var(--hp-gray-darkest);
    display: flex;
    flex-direction: column;
}
.hp-variant-card:hover {
    border-color: var(--hp-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13,107,63,0.12);
}
.hp-variant-img {
    width: 100%;
    height: 100px;
    background: #F8FAFB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
}
.hp-variant-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.hp-variant-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-gray-darkest);
    margin-bottom: 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.hp-variant-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--hp-primary);
    margin-top: auto;
}

/* Related products */
.catalog-product-view .block.related,
.catalog-product-view .block.upsell,
.catalog-product-view .block.crosssell {
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    padding: 28px 32px !important;
    margin-top: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
.catalog-product-view .block.related .block-title strong,
.catalog-product-view .block.upsell .block-title strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--hp-primary);
}

/* Gallery: constrain inside product.media card */
.catalog-product-view .product.media .gallery-placeholder,
.catalog-product-view .product.media .fotorama {
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.catalog-product-view .product.media .gallery-placeholder__image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Hide fallback placeholder image once fotorama gallery has rendered
   (fotorama toggles .fotorama__stage element; if present, hide the fallback img) */
.catalog-product-view .gallery-placeholder.fotorama__wrap .gallery-placeholder__image,
.catalog-product-view .gallery-placeholder.fotorama__active .gallery-placeholder__image,
.catalog-product-view [data-gallery-role="gallery-placeholder"]:not(._block-content-loading) .gallery-placeholder__image {
    display: none !important;
}
/* Hide thumbnail nav strip — products have only 1 image, nav adds visual clutter */
.catalog-product-view .fotorama__nav-wrap,
.catalog-product-view .fotorama__nav,
.catalog-product-view .fotorama__thumb-border {
    display: none !important;
}
/* Constrain the fotorama stage height so the image doesn't stretch too tall */
.catalog-product-view .fotorama__stage {
    max-height: 520px;
}
.catalog-product-view .fotorama__img {
    object-fit: contain;
    max-height: 100% !important;
}

/* Responsive: stack media + info on narrow screens */
@media (max-width: 900px) {
    .catalog-product-view .column.main {
        grid-template-columns: 1fr !important;
    }
    .catalog-product-view .column.main > .product.media,
    .catalog-product-view .column.main > .product-info-main {
        grid-column: 1 !important;
    }
    .hp-product-hero h1 { font-size: 26px !important; }
    .hp-product-hero-inner { padding: 24px 20px; }
    .hp-prod-section { padding: 20px; }
    .hp-dosage-table thead th { font-size: 13px; padding: 12px 16px; }
    .hp-dosage-table tbody td { padding: 11px 16px; font-size: 13px; }
    .hp-dosage-table thead th:first-child { width: 45%; }
    .hp-prod-shipping-table thead { display: none; }
    .hp-prod-shipping-table tbody td { display: block; padding: 6px 0; border-bottom: none; }
    .hp-prod-shipping-table tbody tr {
        display: block; padding: 14px; margin-bottom: 10px;
        background: #F8FAFB; border-radius: 8px;
    }
    .hp-prod-need-help-inner { justify-content: center; text-align: center; }
    .hp-prod-trust-strip { grid-template-columns: repeat(2, 1fr); }
}
/* Legacy product-view rules removed — superseded by the NEW product detail
   page block above (line ~916). Keeping only the few that are still useful: */

/* ========== SIDEBAR / FILTERS ========== */
.sidebar .filter-options {
    background: #fff;
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow-sm);
    overflow: hidden;
}
.sidebar .filter-options-title {
    font-weight: 600;
    padding: 14px 20px;
    border-bottom: 1px solid var(--hp-gray-lightest);
}

/* ========== FORMS ========== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-radius: 6px !important;
    transition: all 0.2s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--hp-primary) !important;
    box-shadow: 0 0 0 3px rgba(13,107,63,0.1) !important;
}

/* ========== BUTTONS ========== */
button.primary, .action.primary,
button.action.primary, a.action.primary {
    background: var(--hp-accent) !important;
    border-color: var(--hp-accent) !important;
    color: #fff !important;
    border-radius: var(--hp-radius) !important;
    text-transform: none !important;
    font-weight: 600 !important;
}
button.primary:hover, .action.primary:hover {
    background: var(--hp-accent-hover) !important;
    border-color: var(--hp-accent-hover) !important;
}

/* ========== HIDE ALL UNWANTED ELEMENTS ========== */
/* Compare Products block */
[data-role="compare-products-sidebar"],
.block-compare,
div.block.block-compare {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}
/* Wishlist block */
[data-bind="scope: 'wishlist'"],
.block-wishlist,
div.block.block-wishlist {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}
/* Price filter block */
div.block.filter {
    display: none !important;
}
/* Entire sidebar-additional section (contains compare + wishlist) */
div.sidebar.sidebar-additional {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Compare link in header */
ul.compare.wrapper {
    display: none !important;
}

/* ========== HIDE DEFAULT FOOTER LINKS ========== */
/* "Search Terms, Privacy, Orders and Returns, Contact Us, Advanced Search" */
ul.footer.links {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Default newsletter in footer (we have custom one) */
.page-footer .block.newsletter,
.footer .block.newsletter {
    display: none !important;
}
/* Hide Magento default copyright (we have our own in .healthplus-footer) */
.page-footer > .footer.content > .copyright,
small.copyright {
    display: none !important;
}
/* Ensure our footer copyright is visible */
.healthplus-footer .footer-bottom .copyright {
    display: block !important;
}

/* ========== PRODUCT IMAGE CENTERED IN CARD ========== */
/* Let Magento's inline CSS size the image container (aspect-ratio 320x320).
   We just center it within the card and cap its max-size. */
.products-grid .product-item-photo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    background: var(--hp-gray-lightest);
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}
.products-grid .product-item-photo .product-image-container {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
}
.products-grid .product-item-photo .product-image-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
.products-grid .product-item-photo .product-image-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* ========== HIDE BOTTOM TOOLBAR ========== */
.products.wrapper ~ .toolbar.toolbar-products {
    display: none !important;
}

/* ========== BREADCRUMBS ========== */
.breadcrumbs {
    max-width: 1320px;
    margin: 0 auto !important;
    padding: 12px 20px;
}
.breadcrumbs a { color: var(--hp-gray-dark); }
.breadcrumbs a:hover { color: var(--hp-primary); }

/* ========== MESSAGES ========== */
.message {
    border-radius: var(--hp-radius) !important;
}

/* ========== CUSTOMER ACCOUNT ========== */
.account .page-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 30px 20px;
}
.account .account-nav {
    background: #fff;
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow-sm);
    overflow: hidden;
}
.account .account-nav .item a:hover {
    background: var(--hp-gray-lightest);
    color: var(--hp-primary);
}
.account .account-nav .item.current strong {
    color: var(--hp-primary);
    background: rgba(13,107,63,0.05);
    font-weight: 600;
}

/* ========== HIDE DEFAULT MAGENTO FOOTER LINKS ========== */
/* These show "Search Terms, Privacy, Contact Us, Advanced Search" - not needed */
.footer.content .footer.links,
.footer.content .bugs,
.footer.content .footer ul,
.footer.content > ul,
.footer.content > .block.newsletter {
    display: none !important;
}
/* Copyright bar at very bottom - hide Magento default */
.copyright {
    display: none !important;
}

/* ========== FOOTER ========== */
.page-footer {
    background: var(--hp-gray-darkest) !important;
    color: var(--hp-gray-light);
    margin-top: 0 !important;
}
.page-footer .footer.content .healthplus-footer {
    display: block !important;
}

/* ========== ORDER SUCCESS / THANK YOU PAGE ========== */
.checkout-onepage-success .page-main {
    max-width: 900px;
    margin: 0 auto !important;
    padding: 40px 20px 60px !important;
}
.checkout-onepage-success .columns,
.checkout-onepage-success .column.main {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.hp-success-page {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.hp-success-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    border: 1px solid var(--hp-gray-lightest);
    padding: 50px 40px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hp-success-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, #084D2D, #0D6B3F, #14A05E);
}

.hp-success-icon {
    width: 86px; height: 86px;
    margin: 0 0 20px;
    background: linear-gradient(135deg, #14A05E, #0D6B3F);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(13,107,63,0.3);
    animation: hpSuccessPop 0.5s ease-out;
    flex-shrink: 0;
}
@keyframes hpSuccessPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.hp-success-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--hp-gray-darkest);
    margin: 0 0 6px;
    letter-spacing: -0.5px;
    width: 100%;
}
.hp-success-subtitle {
    font-size: 15px;
    color: var(--hp-gray-dark);
    margin: 0 0 24px;
    line-height: 1.6;
    width: 100%;
}

/* Order box + email note in a row */
.hp-success-order-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    margin-bottom: 24px;
}
.hp-success-order-box {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #F8FAFB, #EEF5F0);
    border: 1.5px solid #E8F0EB;
    border-radius: 12px;
    padding: 16px 28px;
    text-align: center;
}
.hp-success-order-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--hp-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.hp-success-order-id {
    font-size: 24px;
    font-weight: 800;
    color: var(--hp-primary);
    letter-spacing: 0.5px;
}
.hp-success-order-id a { color: var(--hp-primary); text-decoration: none; }
.hp-success-order-id a:hover { color: #0F7B48; }

.hp-success-email-note {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--hp-gray-dark);
    background: #FFF8E6;
    border: 1px solid #FCE2A6;
    padding: 14px 18px;
    border-radius: 12px;
    text-align: left;
    line-height: 1.5;
}
.hp-success-email-note svg { color: #B7791F; flex-shrink: 0; width: 20px; height: 20px; }

/* Step indicators */
.hp-success-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 30px 0;
    text-align: left;
    position: relative;
}
.hp-success-steps::before {
    content: '';
    position: absolute;
    top: 14px; left: 12.5%; right: 12.5%;
    height: 2px;
    background: var(--hp-gray-lightest);
    z-index: 0;
}
.hp-success-step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.hp-success-step .dot {
    display: block;
    width: 28px; height: 28px;
    background: #fff;
    border: 2px solid var(--hp-gray-light);
    border-radius: 50%;
    margin: 0 auto 8px;
    transition: all 0.3s;
}
.hp-success-step strong {
    display: block;
    font-size: 13px;
    color: var(--hp-gray);
    margin-bottom: 2px;
}
.hp-success-step small {
    display: block;
    font-size: 11px;
    color: var(--hp-gray);
}
.hp-success-step.is-done .dot {
    background: var(--hp-primary);
    border-color: var(--hp-primary);
    position: relative;
}
.hp-success-step.is-done .dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}
.hp-success-step.is-done strong { color: var(--hp-gray-darkest); }
.hp-success-step.is-current .dot {
    background: #fff;
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 4px rgba(13,107,63,0.15);
    animation: hpStepPulse 1.6s ease-in-out infinite;
}
.hp-success-step.is-current strong { color: var(--hp-primary); font-weight: 700; }
@keyframes hpStepPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(13,107,63,0.15); }
    50% { box-shadow: 0 0 0 8px rgba(13,107,63,0.05); }
}

/* Action buttons */
.hp-success-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 28px 0 24px;
    flex-wrap: wrap;
}
.hp-success-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.hp-success-btn.primary {
    background: var(--hp-primary);
    color: #fff !important;
    border-color: var(--hp-primary);
    box-shadow: 0 4px 12px rgba(13,107,63,0.25);
}
.hp-success-btn.primary:hover {
    background: #0F7B48;
    border-color: #0F7B48;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(13,107,63,0.35);
}
.hp-success-btn.ghost {
    background: #fff;
    color: var(--hp-primary) !important;
    border-color: var(--hp-primary);
}
.hp-success-btn.ghost:hover {
    background: rgba(13,107,63,0.05);
}

/* Trust badges row */
.hp-success-trust {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--hp-gray-lightest);
}
.hp-success-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hp-gray-darkest);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .hp-success-page { max-width: 100%; }
    .hp-success-card { padding: 36px 20px 28px; }
    .hp-success-title { font-size: 22px; }
    .hp-success-icon { width: 70px; height: 70px; }
    .hp-success-icon svg { width: 40px; height: 40px; }
    .hp-success-order-row { flex-direction: column; }
    .hp-success-steps { grid-template-columns: 1fr 1fr; gap: 16px; }
    .hp-success-steps::before { display: none; }
    .hp-success-actions { flex-direction: column; }
    .hp-success-btn { width: 100%; justify-content: center; }
}

/* ========== CHECKOUT (one-page) ========== */
.checkout-index-index .page-main {
    max-width: 1320px;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    position: relative;
}
.checkout-index-index .page-title-wrapper {
    margin-bottom: 16px !important;
}
.checkout-index-index .page-title-wrapper .page-title,
.checkout-index-index .page-title-wrapper .page-title span {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--hp-gray-darkest) !important;
}
.checkout-index-index .columns {
    display: block !important;
    max-width: 100% !important;
}
.checkout-index-index .column.main {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}
.checkout-index-index .opc-estimated-wrapper { display: none !important; }

/*
 * KnockoutJS renders inside #checkout.checkout-container:
 *   1. .authentication-wrapper  (Sign In)
 *   2. .opc-progress-bar        (steps)
 *   3. .opc-estimated-wrapper   (hidden)
 *   4. .message                 (alerts)
 *   5. .opc-wrapper             (form — left)
 *   6. .opc-sidebar             (summary — right)
 * All are direct children of #checkout.
 */
.checkout-index-index #checkout.checkout-container {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important;
    gap: 0 24px !important;
    align-items: start !important;
}

/* Full-width items: sign in, progress, messages, loader */
.checkout-index-index #checkout > .authentication-wrapper,
.checkout-index-index #checkout > .opc-progress-bar,
.checkout-index-index #checkout > .opc-estimated-wrapper,
.checkout-index-index #checkout > .message,
.checkout-index-index #checkout > #checkout-loader {
    grid-column: 1 / -1 !important;
}

/* Sign In — positioned top-right of page-main, NOT inside grid flow */
.checkout-index-index .authentication-wrapper {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-end;
    margin: 0 0 12px !important;
    padding: 0 !important;
}
.checkout-index-index .authentication-wrapper .action-auth-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    background: var(--hp-primary);
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(13,107,63,0.2);
}
.checkout-index-index .authentication-wrapper .action-auth-toggle:hover {
    background: #0F7B48;
    box-shadow: 0 4px 12px rgba(13,107,63,0.3);
}

/* Form — left column */
.checkout-index-index .opc-wrapper {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Summary — right column, same row as form */
.checkout-index-index .opc-sidebar {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin: 0 !important;
    position: sticky;
    top: 20px;
    box-sizing: border-box;
}

/* Form sections as cards */
.checkout-index-index .opc-wrapper .checkout-shipping-address,
.checkout-index-index .opc-wrapper .checkout-shipping-method,
.checkout-index-index .opc-wrapper .checkout-payment-method {
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

/* Kill all float/clearfix */
.checkout-index-index .opc-wrapper::after,
.checkout-index-index .opc-sidebar::after,
.checkout-index-index .page-main::after,
.checkout-index-index #checkout::after {
    content: none !important;
    display: none !important;
}

/* ---- Progress bar (steps) ---- */
.checkout-index-index .opc-progress-bar {
    counter-reset: i;
    padding: 0 0 24px;
    margin: 0 0 28px;
    display: flex;
    justify-content: center;
    gap: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    grid-column: 1 / -1;
}
.checkout-index-index .opc-progress-bar-item {
    flex: 1;
    max-width: 280px;
    text-align: center;
    position: relative;
    color: var(--hp-gray);
    padding-top: 48px;
    font-size: 13px;
    font-weight: 600;
}
.checkout-index-index .opc-progress-bar-item::before {
    counter-increment: i;
    content: counter(i);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: var(--hp-off-white);
    border: 2px solid var(--hp-gray-light);
    color: var(--hp-gray);
    border-radius: 50%;
    font-weight: 800;
    font-size: 14px;
    transition: all 0.3s;
}
.checkout-index-index .opc-progress-bar-item::after {
    content: '';
    position: absolute;
    top: 19px;
    right: -50%;
    width: 100%;
    height: 3px;
    background: var(--hp-gray-lightest);
    z-index: -1;
    border-radius: 2px;
}
.checkout-index-index .opc-progress-bar-item:last-child::after { display: none; }
.checkout-index-index .opc-progress-bar-item._active {
    color: var(--hp-primary);
}
.checkout-index-index .opc-progress-bar-item._active::before {
    background: var(--hp-primary);
    border-color: var(--hp-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(13,107,63,0.3);
}
.checkout-index-index .opc-progress-bar-item._complete::before {
    background: var(--hp-primary);
    border-color: var(--hp-primary);
    color: #fff;
    content: '\\2713';
    font-size: 16px;
}
.checkout-index-index .opc-progress-bar-item._complete ~ .opc-progress-bar-item::after {
    background: var(--hp-primary);
}
.checkout-index-index .opc-progress-bar-item span {
    color: inherit;
    display: block;
}

/* ---- Step titles ---- */
.checkout-index-index .opc-wrapper .step-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--hp-gray-darkest);
    border-bottom: none;
    padding: 0 0 16px;
    margin: 0 0 20px;
    display: block;
    position: relative;
}
.checkout-index-index .opc-wrapper .step-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--hp-primary);
    border-radius: 2px;
}

/* Form fields */
.checkout-index-index .opc-wrapper .field > .label,
.checkout-index-index .opc-wrapper .fieldset > .field > .label,
.checkout-index-index .fieldset > .field > .label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-gray-darkest);
    margin-bottom: 4px;
}
.checkout-index-index .opc-wrapper .field.required > .label::after,
.checkout-index-index .fieldset > .field.required > .label::after,
.checkout-index-index .fieldset > .fields > .field.required > .label::after {
    color: #E02436;
}
/* All form inputs */
.checkout-index-index input[type="text"],
.checkout-index-index input[type="email"],
.checkout-index-index input[type="password"],
.checkout-index-index input[type="tel"],
.checkout-index-index input[type="number"],
.checkout-index-index textarea {
    border: 1.5px solid var(--hp-gray-light) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: auto !important;
    line-height: 1.4 !important;
}

/* Select / Dropdown — native + Magento custom */
.checkout-index-index select {
    border: 1.5px solid var(--hp-gray-light) !important;
    border-radius: 10px !important;
    padding: 12px 40px 12px 14px !important;
    font-size: 14px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6C7D' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    background-size: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: auto !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    color: var(--hp-gray-darkest) !important;
}
.checkout-index-index select option {
    padding: 10px !important;
    font-size: 14px;
}

/* Focus state */
.checkout-index-index input:focus,
.checkout-index-index select:focus,
.checkout-index-index textarea:focus {
    border-color: var(--hp-primary) !important;
    box-shadow: 0 0 0 3px rgba(13,107,63,0.1) !important;
    outline: none !important;
}

/* Magento's .field wrapper — ensure proper spacing */
.checkout-index-index .field {
    margin-bottom: 16px !important;
}
.checkout-index-index .field .control {
    width: 100% !important;
}
.checkout-index-index .field .control select,
.checkout-index-index .field .control input {
    width: 100% !important;
}

/* Fix Magento's country/region dropdowns that use div wrappers */
.checkout-index-index .field [name="country_id"],
.checkout-index-index .field [name="region_id"],
.checkout-index-index .field [name="shippingAddress.country_id"],
.checkout-index-index .field [name="shippingAddress.region_id"] {
    width: 100% !important;
}

/* Magento's custom-styled select wrapper (.select-group etc.) */
.checkout-index-index .abs-field-select,
.checkout-index-index .select {
    border: 1.5px solid var(--hp-gray-light) !important;
    border-radius: 10px !important;
    padding: 12px 40px 12px 14px !important;
    font-size: 14px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6C7D' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    background-size: 12px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Two-column field rows (name, city/zip) */
.checkout-index-index .fieldset > .field.field-name-firstname,
.checkout-index-index .fieldset > .field.field-name-lastname {
    display: inline-block;
    width: 48% !important;
    vertical-align: top;
}
.checkout-index-index .fieldset > .field.field-name-firstname {
    margin-right: 3% !important;
}

/* Radio/checkbox cards for shipping & payment methods */
.checkout-index-index .table-checkout-shipping-method {
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.checkout-index-index .table-checkout-shipping-method tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}
.checkout-index-index .table-checkout-shipping-method tbody tr:hover {
    background: #F8FAFB;
}
.checkout-index-index .table-checkout-shipping-method tbody tr.row-error td { border: none; }
.checkout-index-index .table-checkout-shipping-method td {
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--hp-gray-lightest);
    font-size: 14px;
    color: var(--hp-gray-darkest);
}
.checkout-index-index .payment-methods {
    background: transparent;
    padding: 0;
}
.checkout-index-index .payment-method {
    background: #fff;
    border: 1.5px solid var(--hp-gray-lightest);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.checkout-index-index .payment-method._active {
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 2px rgba(13,107,63,0.1);
}
.checkout-index-index .payment-method-title {
    padding: 14px 18px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.checkout-index-index .payment-method-title input[type="radio"] {
    margin: 0;
    accent-color: var(--hp-primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.checkout-index-index .payment-method-title label {
    font-weight: 600;
    color: var(--hp-gray-darkest);
    font-size: 15px;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.checkout-index-index .payment-method-content {
    display: none;
    padding: 0 18px 18px;
}
.checkout-index-index .payment-method._active .payment-method-content {
    display: block;
}
.hp-payment-instructions {
    background: #EEF5F0;
    border-left: 4px solid var(--hp-primary);
    padding: 14px 18px;
    border-radius: 6px;
    margin: 4px 0 18px;
    color: var(--hp-gray-darkest);
    font-size: 14px;
    line-height: 1.6;
}
.hp-payment-instructions p { margin: 0; }
.checkout-index-index .payment-method-content .actions-toolbar { text-align: right; }

/* ---- Continue / Place Order buttons ---- */
.checkout-index-index .action.primary.continue,
.checkout-index-index .action.primary.checkout {
    background: var(--hp-primary) !important;
    border: 2px solid var(--hp-primary) !important;
    color: #fff !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(13,107,63,0.25);
    text-transform: none !important;
    transition: all 0.2s;
    width: 100%;
}
.checkout-index-index .action.primary.continue:hover,
.checkout-index-index .action.primary.checkout:hover {
    background: #0F7B48 !important;
    border-color: #0F7B48 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13,107,63,0.3);
}

/* ---- Order Summary sidebar ---- */
.checkout-index-index .opc-block-shipping-information {
    background: #F8FAFB;
    border-radius: 10px;
    padding: 16px !important;
    margin-top: 16px;
    border: 1px solid var(--hp-gray-lightest);
}
.checkout-index-index .opc-block-summary {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.checkout-index-index .opc-block-summary > .title {
    font-size: 20px;
    font-weight: 800;
    color: var(--hp-gray-darkest);
    padding: 0 0 14px;
    margin: 0 0 16px;
    display: block;
    width: 100%;
    position: relative;
    border-bottom: none;
}
.checkout-index-index .opc-block-summary > .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--hp-primary);
    border-radius: 2px;
}

/* Items in cart toggle */
.checkout-index-index .opc-block-summary .items-in-cart {
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.checkout-index-index .opc-block-summary .items-in-cart > .title {
    background: #F8FAFB;
    padding: 12px 16px !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    cursor: pointer;
    border-bottom: 1px solid var(--hp-gray-lightest);
}
.checkout-index-index .opc-block-summary .minicart-items-wrapper {
    max-height: 280px;
    overflow-y: auto;
    padding: 0 !important;
}
.checkout-index-index .opc-block-summary .minicart-items .product-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--hp-gray-lightest);
}
.checkout-index-index .opc-block-summary .minicart-items .product-item:last-child {
    border-bottom: none;
}
.checkout-index-index .opc-block-summary .minicart-items .product-image-container {
    width: 56px !important;
    height: 56px !important;
}
.checkout-index-index .opc-block-summary .minicart-items .product-image-container img {
    border-radius: 8px;
    border: 1px solid var(--hp-gray-lightest);
}
.checkout-index-index .opc-block-summary .minicart-items .product-item-name {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--hp-gray-darkest);
}
.checkout-index-index .opc-block-summary .minicart-items .price {
    color: var(--hp-primary) !important;
    font-weight: 700;
}

/* Totals table */
.checkout-index-index .opc-block-summary .table-totals {
    font-size: 14px;
    border-top: 1px solid var(--hp-gray-lightest);
    padding-top: 12px;
}
.checkout-index-index .opc-block-summary .table-totals tbody tr th,
.checkout-index-index .opc-block-summary .table-totals tbody tr td {
    padding: 8px 0;
    color: var(--hp-gray-dark);
}
.checkout-index-index .opc-block-summary .table-totals .grand.totals .amount,
.checkout-index-index .opc-block-summary .table-totals .grand.totals .mark {
    font-size: 22px !important;
    font-weight: 800;
    color: var(--hp-primary) !important;
    padding-top: 14px;
    border-top: 2px solid var(--hp-gray-lightest);
}

/* ---- Sidebar: Security trust badges ---- */
.checkout-index-index .opc-sidebar .hp-checkout-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--hp-gray-lightest);
}
.checkout-index-index .opc-sidebar .hp-checkout-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--hp-gray-dark);
}
.checkout-index-index .opc-sidebar .hp-checkout-trust-item svg {
    flex-shrink: 0;
    color: var(--hp-primary);
}

/* Sign In button - top right of checkout */
.checkout-index-index .authentication-wrapper {
    text-align: right;
    margin-bottom: 16px !important;
}
.checkout-index-index .authentication-wrapper .action-auth-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hp-primary) !important;
    text-decoration: none !important;
    background: rgba(13,107,63,0.08);
    padding: 8px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--hp-primary);
    transition: all 0.2s;
}
.checkout-index-index .authentication-wrapper .action-auth-toggle:hover {
    background: var(--hp-primary);
    color: #fff !important;
}
@media (max-width: 900px) {
    .checkout-index-index #checkout.checkout-container {
        grid-template-columns: 1fr !important;
    }
    .checkout-index-index #checkout > * {
        grid-column: 1 !important;
    }
    .checkout-index-index .opc-sidebar {
        position: static !important;
    }
}

/* ========== SHOPPING CART PAGE ========== */
.checkout-cart-index .columns {
    display: block !important;
    max-width: 100% !important;
}
.checkout-cart-index .column.main {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.checkout-cart-index .page-main {
    max-width: 1320px;
    margin: 0 auto !important;
    padding: 30px 20px !important;
}
.checkout-cart-index .page-title-wrapper {
    margin-bottom: 24px !important;
}
.checkout-cart-index .page-title-wrapper .page-title,
.checkout-cart-index .page-title-wrapper .page-title span {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--hp-gray-darkest) !important;
}

/* Cart grid layout — force both children into a side-by-side grid */
.checkout-cart-index .cart-container {
    display: grid !important;
    grid-template-columns: 1.6fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
}
/* Magento sometimes nests inside column.main without .cart-container */
.checkout-cart-index .column.main > .form-cart,
.checkout-cart-index .column.main > #shopping-cart-table,
.checkout-cart-index .cart-container > .form-cart,
.checkout-cart-index .form-cart {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
    float: none !important;
    margin: 0 !important;
    overflow: hidden;
    grid-column: 1;
    grid-row: 1;
}
.checkout-cart-index .column.main > .cart-summary,
.checkout-cart-index .cart-container > .cart-summary,
.checkout-cart-index .cart-summary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;
    background: #fff;
    border: 1px solid var(--hp-gray-lightest);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
    float: none !important;
    margin: 0 !important;
    position: sticky;
    top: 20px;
    align-self: start;
    grid-column: 2;
    grid-row: 1;
}
/* Extra selectors: kill any Luma float/width overrides */
.checkout-cart-index #maincontent .form-cart,
.checkout-cart-index #maincontent .cart-summary {
    float: none !important;
}

/* Table styling */
.checkout-cart-index .cart.table-wrapper {
    overflow-x: auto;
}
.checkout-cart-index .cart.table-wrapper table {
    border-collapse: collapse;
    width: 100%;
}
.checkout-cart-index .cart.table-wrapper thead th {
    background: var(--hp-gray-darkest);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 14px 16px !important;
    border: none;
}
.checkout-cart-index .cart.table-wrapper tbody td {
    padding: 16px !important;
    border-bottom: 1px solid var(--hp-gray-lightest);
    vertical-align: middle;
}
.checkout-cart-index .cart.table-wrapper tbody tr:hover td {
    background: #F8FAFB;
}
.checkout-cart-index .cart.table-wrapper .product-item-photo {
    width: 80px !important;
    padding-right: 12px;
}
.checkout-cart-index .cart.table-wrapper .product-item-photo img {
    border-radius: 8px;
    border: 1px solid var(--hp-gray-lightest);
}
.checkout-cart-index .cart.table-wrapper .item-info .product-item-name a {
    color: var(--hp-gray-darkest) !important;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
}
.checkout-cart-index .cart.table-wrapper .item-info .product-item-name a:hover {
    color: var(--hp-primary) !important;
}
.checkout-cart-index .cart.table-wrapper .price,
.checkout-cart-index .cart.table-wrapper .subtotal .price {
    color: var(--hp-primary) !important;
    font-weight: 800;
    font-size: 16px;
}

/* Qty input */
.checkout-cart-index input.qty {
    border: 2px solid var(--hp-gray-light) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    width: 60px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}
.checkout-cart-index input.qty:focus {
    border-color: var(--hp-primary) !important;
    outline: none;
}

/* Cart actions */
.checkout-cart-index .cart.actions {
    padding: 16px !important;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--hp-gray-lightest);
}
.checkout-cart-index .cart.actions a.action.continue,
.checkout-cart-index .cart.actions button.action.update {
    color: var(--hp-primary) !important;
    border: 2px solid var(--hp-primary) !important;
    background: #fff !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s;
    cursor: pointer;
}
.checkout-cart-index .cart.actions a.action.continue:hover,
.checkout-cart-index .cart.actions button.action.update:hover {
    background: var(--hp-primary) !important;
    color: #fff !important;
}

/* Summary */
.checkout-cart-index .cart-summary > .summary.title {
    font-size: 20px;
    font-weight: 800;
    color: var(--hp-gray-darkest);
    border-bottom: 3px solid var(--hp-primary);
    padding-bottom: 12px;
    margin-bottom: 18px;
}
.checkout-cart-index .cart-summary .totals th,
.checkout-cart-index .cart-summary .totals td {
    padding: 10px 0 !important;
    font-size: 14px;
}
.checkout-cart-index .cart-summary .grand.totals strong,
.checkout-cart-index .cart-summary .grand.totals .price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--hp-primary) !important;
}
.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout {
    background: var(--hp-primary) !important;
    border: 2px solid var(--hp-primary) !important;
    color: #fff !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    width: 100%;
    box-shadow: 0 4px 14px rgba(13,107,63,0.25);
    transition: all 0.2s;
}
.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout:hover {
    background: #0F7B48 !important;
    border-color: #0F7B48 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13,107,63,0.3);
}

/* Empty cart */
.checkout-cart-index .cart-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--hp-gray-lightest);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.checkout-cart-index .cart-empty p {
    font-size: 16px;
    color: var(--hp-gray-dark);
    margin-bottom: 20px;
}
.checkout-cart-index .cart-empty .action.continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hp-primary) !important;
    color: #fff !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s;
}
.checkout-cart-index .cart-empty .action.continue:hover {
    background: #0F7B48 !important;
}

/* Remove item button */
.checkout-cart-index .action.action-delete {
    color: #DC2626 !important;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.checkout-cart-index .action.action-delete:hover {
    opacity: 1;
}

/* Hide sidebar on cart page */
.checkout-cart-index .sidebar { display: none !important; }

@media (max-width: 900px) {
    .checkout-cart-index .cart-container {
        grid-template-columns: 1fr !important;
    }
    .checkout-cart-index .cart-container > .cart-summary,
    .checkout-cart-index .cart-summary {
        position: static;
        grid-column: 1;
        grid-row: auto;
    }
    .checkout-cart-index .form-cart {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ========== PAGINATION ========== */
.pages .items .item.current strong {
    background: var(--hp-primary) !important;
    color: #fff !important;
    border-radius: var(--hp-radius);
}
.pages .items .item a:hover {
    background: var(--hp-primary);
    color: #fff;
    border-radius: var(--hp-radius);
}

/* ========== TABLES ========== */
.table-wrapper table thead th {
    background: var(--hp-gray-lightest);
    font-weight: 600;
}
.table-wrapper table tbody tr:hover td {
    background: var(--hp-off-white);
}

/* ========== LINKS ========== */
a { color: var(--hp-secondary); }
a:hover { color: var(--hp-primary); }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .header.content {
        flex-wrap: wrap;
    }
    .logo { order: 1; }
    .block-search {
        order: 3 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    .products-grid .product-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .products-grid .product-item-details {
        padding: 12px 14px 14px !important;
    }
    .products-grid .price-box .price {
        font-size: 18px !important;
    }
}
@media (max-width: 480px) {
    .products-grid .product-items {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   SHOP ALL PAGE
   ============================================================ */

/* Empty state */
.hp-sa-empty {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
    padding: 0 20px;
}
.hp-sa-empty h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    margin-bottom: 12px;
}
.hp-sa-empty p {
    color: var(--hp-gray-dark);
    font-size: 16px;
}

/* ---- Hero ---- */
.hp-sa-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(135deg, #084D2D 0%, #0D6B3F 40%, #1B5E8C 100%);
    padding: 56px 20px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hp-sa-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 60%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
    pointer-events: none;
}
.hp-sa-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.hp-sa-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 20px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.2);
}
.hp-sa-hero h1 {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}
.hp-sa-hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.82);
    margin: 0 0 32px;
    line-height: 1.6;
}
.hp-sa-hero-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
.hp-sa-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.hp-sa-hero-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.hp-sa-hero-stat-lbl {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ---- Category Tabs (sticky) ---- */
.hp-sa-tabs {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #fff;
    border-bottom: 1px solid var(--hp-gray-lightest);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.hp-sa-tabs-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hp-sa-tabs-inner::-webkit-scrollbar { display: none; }

.hp-sa-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-gray-dark);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.hp-sa-tab:hover {
    color: var(--hp-gray-darkest);
    background: var(--hp-off-white);
}
.hp-sa-tab.active {
    color: var(--tab-color, var(--hp-primary));
    border-bottom-color: var(--tab-color, var(--hp-primary));
}
.hp-sa-tab-icon {
    font-size: 16px;
    line-height: 1;
}
.hp-sa-tab-count {
    background: var(--hp-gray-lightest);
    color: var(--hp-gray-dark);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}
.hp-sa-tab.active .hp-sa-tab-count {
    background: var(--tab-color, var(--hp-primary));
    color: #fff;
}

/* ---- Body ---- */
.hp-sa-body {
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

/* ---- Category Section ---- */
.hp-sa-section {
    margin-bottom: 48px;
    scroll-margin-top: 80px;
}
.hp-sa-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--hp-gray-lightest);
    position: relative;
}
.hp-sa-section-head::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--cat-color, var(--hp-primary));
    border-radius: 1px;
}
.hp-sa-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hp-sa-section-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cat-color, var(--hp-primary)) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.hp-sa-section-title h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    margin: 0;
    line-height: 1.2;
}
.hp-sa-section-desc {
    font-size: 13px;
    color: var(--hp-gray);
    display: block;
    margin-top: 2px;
}
.hp-sa-section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cat-color, var(--hp-primary));
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1.5px solid color-mix(in srgb, var(--cat-color, var(--hp-primary)) 25%, transparent);
}
.hp-sa-section-link:hover {
    background: color-mix(in srgb, var(--cat-color, var(--hp-primary)) 8%, transparent);
    border-color: var(--cat-color, var(--hp-primary));
}
.hp-sa-section-link svg {
    transition: transform 0.2s;
}
.hp-sa-section-link:hover svg {
    transform: translateX(3px);
}

/* ---- Product Grid ---- */
.hp-sa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* ---- Product Card ---- */
.hp-sa-card {
    background: #fff;
    border: 1.5px solid var(--hp-gray-lightest);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
    position: relative;
}
.hp-sa-card:hover {
    border-color: var(--cat-color, var(--hp-primary));
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* Card image area */
.hp-sa-card-img {
    position: relative;
    background: var(--hp-off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    min-height: 180px;
}
.hp-sa-card-img img {
    max-width: 75%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.hp-sa-card:hover .hp-sa-card-img img {
    transform: scale(1.06);
}

/* Brand/Generic type badge */
.hp-sa-card-type {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.hp-sa-type-brand   { background: var(--hp-primary); }
.hp-sa-type-generic { background: var(--hp-accent); }

/* Card body */
.hp-sa-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.hp-sa-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.hp-sa-card-form {
    font-size: 11px;
    font-weight: 600;
    color: var(--hp-gray-dark);
    background: var(--hp-gray-lightest);
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.hp-sa-card-dosage {
    font-size: 11px;
    color: var(--hp-gray);
    font-weight: 500;
}
.hp-sa-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-gray-darkest);
    line-height: 1.3;
    margin-bottom: 6px;
}
.hp-sa-card:hover .hp-sa-card-name {
    color: var(--cat-color, var(--hp-primary));
}
.hp-sa-card-desc {
    font-size: 12px;
    color: var(--hp-gray);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
}

/* Price */
.hp-sa-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 14px;
}
.hp-sa-card-price-label {
    font-size: 12px;
    color: var(--hp-gray-dark);
    font-weight: 600;
}
.hp-sa-card-price-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--cat-color, var(--hp-primary));
    line-height: 1;
}

/* CTA */
.hp-sa-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--cat-color, var(--hp-primary));
    color: #fff;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    text-align: center;
}
.hp-sa-card:hover .hp-sa-card-cta {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cat-color, var(--hp-primary)) 35%, transparent);
}
.hp-sa-card-cta svg {
    transition: transform 0.2s;
}
.hp-sa-card:hover .hp-sa-card-cta svg {
    transform: translateX(3px);
}

/* ---- Trust Strip ---- */
.hp-sa-trust {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(135deg, #084D2D, #0D6B3F);
    padding: 40px 20px;
}
.hp-sa-trust-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.hp-sa-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}
.hp-sa-trust-item svg {
    flex-shrink: 0;
    stroke: rgba(255,255,255,0.8);
}
.hp-sa-trust-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.hp-sa-trust-item span {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hp-sa-hero h1 { font-size: 32px; }
    .hp-sa-hero-stats { gap: 24px; }
    .hp-sa-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    .hp-sa-hero { padding: 40px 16px 36px; }
    .hp-sa-hero h1 { font-size: 28px; }
    .hp-sa-hero-sub { font-size: 14px; }
    .hp-sa-hero-stats { gap: 16px; }
    .hp-sa-hero-stat-num { font-size: 22px; }

    .hp-sa-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .hp-sa-section-link { align-self: flex-start; }

    .hp-sa-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .hp-sa-card-img { min-height: 140px; padding: 16px 12px; }
    .hp-sa-card-img img { max-height: 110px; }
    .hp-sa-card-body { padding: 12px 14px 14px; }
    .hp-sa-card-name { font-size: 15px; }
    .hp-sa-card-price-val { font-size: 20px; }
    .hp-sa-card-cta { font-size: 12px; padding: 9px 12px; }
    .hp-sa-card-desc { display: none; }

    .hp-sa-trust-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .hp-sa-hero h1 { font-size: 24px; }
    .hp-sa-hero-stats { gap: 12px; }
    .hp-sa-hero-stat-num { font-size: 20px; }

    .hp-sa-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hp-sa-card-img { min-height: 120px; }
    .hp-sa-card-body { padding: 10px 12px 12px; }
    .hp-sa-card-name { font-size: 14px; }
    .hp-sa-card-price-val { font-size: 18px; }
    .hp-sa-card-top { margin-bottom: 6px; }
    .hp-sa-card-form { font-size: 10px; padding: 2px 8px; }

    .hp-sa-trust-inner { grid-template-columns: 1fr; }
}