/*
Theme Name: HOLIEST
Theme URI: https://holiest.ee
Author: HOLIEST
Author URI: https://holiest.ee
Description: Custom WordPress + WooCommerce teema HOLIEST elustiili auditi jaoks.
Version: 0.3.7

Text Domain: holiest
*/

/* Reset & base */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background-color: #f5f1ea;
    color: #232326;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

/* Design tokens */

:root {
    --holiest-bg: #f5f1ea;
    --holiest-bg-dark: #15161a;
    --holiest-text: #232326;
    --holiest-muted: #7a7b80;
    --holiest-card-bg: #ffffff;
    --holiest-border-subtle: rgba(0, 0, 0, 0.06);

    /* --- UUS LUKSUSLIK VASK (Loojalt) --- */
    --holiest-bronze-from: #E4A27E; /* Heledam vask */
    --holiest-bronze-to: #7B4A33; /* Tumedam pronks */
    /* Bronze satin gradient (button reference) */
    --holiest-bronze-satin-1: #8B5B43;
    --holiest-bronze-satin-2: #A26A4C;
    --holiest-bronze-satin-3: #E4A27E;
    --holiest-bronze-satin-4: #A26A4C;
    --holiest-bronze-satin-5: #7B4A33;

    --holiest-radius-soft: 20px;
    --holiest-radius-pill: 50px; /* Ümaram */
    
    /* --- UUS GLOW EFEKT (Värviline vari) --- */
    --holiest-shadow-soft: 0 10px 25px rgba(181, 123, 95, 0.4);
    --holiest-shadow-hover: 0 15px 35px rgba(181, 123, 95, 0.5);
}

/* Global layout */

.holiest-site {
    background-color: var(--holiest-bg);
    color: var(--holiest-text);
    min-height: 100vh;
}

.site-main {
    display: block;
}

.holiest-section {
    padding: 5rem 0;
}

.holiest-container {
    width: min(1200px, 100% - 3rem);
    margin-inline: auto;
}

/* Text helpers */

.holiest-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    color: var(--holiest-muted);
    margin-bottom: 1.25rem;
}

.holiest-section-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(2rem, 3vw, 2.4rem);
    margin: 0 0 1rem;
}

.holiest-section-lead {
    max-width: 36rem;
    font-size: 0.98rem;
    color: var(--holiest-muted);
    margin: 0 0 2.4rem;
}

/* Buttons */

.holiest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.8rem;
    border-radius: var(--holiest-radius-pill);
    border: 1px solid transparent;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.holiest-btn:focus,
.holiest-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(176,122,74,0.26), 0 14px 34px rgba(0,0,0,0.12);
}

.holiest-btn--primary {
    /* Bronze satin – center highlight like reference */
    background-image:
        linear-gradient(180deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.06) 35%,
            rgba(0,0,0,0.14) 100%
        ),
        linear-gradient(90deg,
            var(--holiest-bronze-satin-1) 0%,
            var(--holiest-bronze-satin-2) 18%,
            var(--holiest-bronze-satin-3) 50%,
            var(--holiest-bronze-satin-4) 78%,
            var(--holiest-bronze-satin-5) 100%
        );
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        0 14px 34px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -14px 26px rgba(0,0,0,0.18);
}

.holiest-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -16px 28px rgba(0,0,0,0.20);
}


.holiest-btn--ghost {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--holiest-text);
}

.holiest-btn--ghost:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.7);
}

.holiest-btn--full {
    width: 100%;
}

/* Header */

.holiest-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    background: linear-gradient(to bottom,
        rgba(245, 241, 234, 0.96),
        rgba(245, 241, 234, 0.88),
        transparent
    );
    backdrop-filter: blur(10px);
}

.holiest-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.holiest-header-logo-text {
    font-family: "Playfair Display", "Times New Roman", serif;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-size: 1.05rem;
}

.holiest-header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.holiest-header-menu {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0.7rem;
    display: inline-flex;
    gap: 1.6rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.holiest-header-menu a {
    font-size: 0.9rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
}

.holiest-header-menu a:hover {
    background-color: rgba(245, 241, 234, 0.8);
}

.holiest-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.holiest-header-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: none;
    background-color: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.holiest-header-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #fff;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
}

/* Footer */

.holiest-footer {
    margin-top: 4rem;
    background-color: #15161a;
    color: #f6f4ef;
    padding: 3.5rem 0 2rem;
}

.holiest-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: flex-start;
}

.holiest-footer-brand {
    max-width: 220px;
}

.holiest-footer-logo-text {
    font-family: "Playfair Display", "Times New Roman", serif;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 1rem;
}

.holiest-footer-tagline {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: rgba(246, 244, 239, 0.9);
}

.holiest-footer-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    font-size: 0.9rem;
}

.holiest-footer-heading {
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.holiest-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.holiest-footer-list li + li {
    margin-top: 0.45rem;
}

.holiest-footer a:hover {
    text-decoration: underline;
}

.holiest-footer-bottom {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.2rem;
    font-size: 0.85rem;
}

.holiest-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Hero */

.holiest-hero {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    min-height: 80vh;
    background-size: cover;
    background-position: center center;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    color: var(--holiest-text);
}

.holiest-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 20% 0%,
        rgba(255, 255, 255, 0.92),
        rgba(245, 241, 234, 0.96)
    );
    backdrop-filter: blur(4px);
}

.holiest-hero-inner {
    position: relative;
    max-width: 860px;
}

.holiest-hero-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(2.8rem, 4vw, 3.9rem);
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

.holiest-hero-subtitle {
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--holiest-muted);
    margin-bottom: 2.4rem;
}

.holiest-hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Dark strip */

.holiest-strip {
    background-color: #15161a;
    color: #f9f6f0;
    padding: 1.3rem 0;
    margin-bottom: 3rem;
}

.holiest-strip .holiest-container {
    text-align: center;
}

.holiest-strip-text {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Grids & cards */

.holiest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

.holiest-card {
    background-color: var(--holiest-card-bg);
    border-radius: var(--holiest-radius-soft);
    padding: 1.9rem 1.7rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.holiest-card--problem:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.12);
}

.holiest-card-icon {
    margin-bottom: 1.35rem;
}

.holiest-card-icon span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
    opacity: 0.92;
}

.holiest-card-title {
    font-size: 1.2rem;
    margin: 0 0 0.6rem;
    font-family: "Playfair Display", "Times New Roman", serif;
}

.holiest-card-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--holiest-muted);
    line-height: 1.6;
}

/* Solution section */

.holiest-solution-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.holiest-solution-copy p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--holiest-muted);
    margin-bottom: 1rem;
    max-width: 32rem;
}

/* Pricing */

.holiest-grid--pricing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
}

.holiest-pricing-card {
    background-color: var(--holiest-card-bg);
    border-radius: 26px;
    padding: 2.1rem 1.9rem 2.2rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    position: relative;
    display: flex;
    flex-direction: column;
}

.holiest-pricing-card--featured {
    transform: translateY(-12px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.15);
}

.holiest-pricing-badge {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.8rem;
    border-radius: var(--holiest-radius-pill);
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.holiest-pricing-header {
    margin-bottom: 1.4rem;
}

.holiest-pricing-name {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    font-family: "Playfair Display", "Times New Roman", serif;
}

.holiest-pricing-amount {
    font-size: 1.7rem;
    font-weight: 600;
}

.holiest-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    font-size: 0.9rem;
    color: var(--holiest-muted);
}

.holiest-pricing-features li + li {
    margin-top: 0.35rem;
}

.holiest-pricing-cta {
    margin-top: auto;
}

/* FAQ */

.holiest-faq {
    max-width: 800px;
    margin: 0 auto;
}

.holiest-faq-item + .holiest-faq-item {
    border-top: 1px solid var(--holiest-border-subtle);
}

.holiest-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0;
    cursor: pointer;
    font-size: 0.95rem;
}

.holiest-faq-toggle {
    font-size: 1.2rem;
    margin-left: 1rem;
}

.holiest-faq-answer {
    max-height: 0;
    overflow: hidden;
    font-size: 0.9rem;
    color: var(--holiest-muted);
    transition: max-height 0.25s ease;
}

.holiest-faq-item.is-open .holiest-faq-answer {
    max-height: 400px;
    padding-bottom: 0.7rem;
}

/* Checkout basic shell (detailid hiljem) */

.holiest-checkout-page {
    background-color: var(--holiest-bg);
}

.holiest-checkout-shell {
    max-width: 1100px;
    margin: 3rem auto 4rem;
    background-color: #f9f6f0;
    border-radius: 32px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.16);
    padding: 3rem 3rem 2.4rem;
}

/* Peidame WooCommerce vaikimisi Place order nupu visuaalselt */
.woocommerce #place_order {
    position: absolute !important;
    left: -9999px !important;
}

/* Responsive */

@media (max-width: 1024px) {
    .holiest-solution-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .holiest-grid,
    .holiest-grid--pricing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .holiest-header-menu {
        display: none;
    }

    .holiest-section {
        padding: 3.5rem 0;
    }

    .holiest-grid,
    .holiest-grid--pricing {
        grid-template-columns: minmax(0, 1fr);
    }

    .holiest-footer-inner {
        flex-direction: column;
    }

    .holiest-footer-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .holiest-hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
        border-radius: 0 0 28px 28px;
    }

    .holiest-hero-inner {
        max-width: 100%;
    }
}

/* Cart drawer */

.holiest-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
}

.holiest-cart-drawer.is-open {
    display: block;
}

.holiest-cart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.holiest-cart-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.holiest-cart-inner {
    width: 100%;
    height: 100%;
    padding: 1.8rem 1.6rem;
    background: #f7f3ec;
    border-radius: 28px 0 0 28px;
    box-shadow: -22px 0 70px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.holiest-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.4rem;
}

.holiest-cart-title {
    font-size: 1.1rem;
    margin: 0;
    font-family: "Playfair Display", "Times New Roman", serif;
}

.holiest-cart-close {
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.holiest-cart-items {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.holiest-cart-subtotal {
    margin-top: 1.4rem;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.holiest-cart-footer {
    margin-top: 1.4rem;
}

.holiest-cart-footer-note {
    font-size: 0.8rem;
    margin-top: 0.4rem;
    color: rgba(0, 0, 0, 0.7);
}

.holiest-cart-empty {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: var(--holiest-muted);
}

/* Booking modal & form fields */

.holiest-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
}

.holiest-modal.is-open {
    display: block;
}

.holiest-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.holiest-modal-dialog {
    position: relative;
    max-width: 560px;
    margin: 4rem auto;
    background: #f9f6f0;
    border-radius: 28px;
    padding: 2rem 2rem 2.6rem;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.holiest-modal-dialog::-webkit-scrollbar { width: 0; height: 0; }

.holiest-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    cursor: pointer;
}

.holiest-modal-intro {
    font-size: 0.95rem;
    color: var(--holiest-muted);
    margin-top: 0.25rem;
    margin-bottom: 1.2rem;
}

.holiest-modal-steps {
    margin-top: 0.8rem;
}

.holiest-modal-step {
    display: none;
}

.holiest-modal-step.is-active {
    display: block;
}

.holiest-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fbf7f0;
    font-size: 0.95rem;
}

.holiest-input:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.4);
    background-color: #fff;
}

.holiest-modal-calendar label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
}

.holiest-time-grid {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.holiest-time-slot {
    flex: 1;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}

.holiest-time-slot.is-active {
    border-color: transparent;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
    color: #fff;
}

.holiest-field-group {
    margin-bottom: 0.85rem;
}

.holiest-field-group label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.3rem;
}

.holiest-modal-summary {
    border-radius: 18px;
    background-color: #fdf5e8;
    padding: 1rem 1rem 1.1rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
}

.holiest-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
}

.holiest-summary-row--total {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0.3rem;
    padding-top: 0.45rem;
    font-weight: 600;
}

.holiest-modal-note {
    font-size: 0.85rem;
    color: var(--holiest-muted);
    margin-bottom: 1rem;
}

.holiest-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.holiest-modal-footer .holiest-btn {
    flex: 1;
}

/* Mobiilis modali & sahtli kohandused */

@media (max-width: 640px) {
    .holiest-modal-dialog {
        margin: 3rem 1rem;
        padding: 1.6rem 1.3rem 1.9rem;
        border-radius: 22px;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
}

    .holiest-cart-inner {
        border-radius: 0;
    }
}

/* Checkout detailsem layout */

.holiest-checkout-logo {
    text-align: center;
    font-family: "Playfair Display", "Times New Roman", serif;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.holiest-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2.5rem;
}

.holiest-checkout-col--form {

}

.holiest-checkout-col--summary {

}

.holiest-checkout-section-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.1rem;
    margin: 0 0 0.8rem;
}

.holiest-checkout-note {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.7);
    margin: 0 0 0.6rem;
}

.holiest-checkout-note--small {
    margin-top: 0.4rem;
}

.holiest-checkout-summary-card {
    background-color: #fdf5e8;
    border-radius: 26px;
    padding: 1.9rem 1.7rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.holiest-checkout-benefits {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.holiest-checkout-benefits-label {
    margin: 0 0 0.25rem;
}

.holiest-checkout-benefits ul {
    margin: 0 0 0.5rem 1.1rem;
    padding: 0;
}

.holiest-checkout-benefits li {
    margin-bottom: 0.15rem;
}

.holiest-checkout-place-order-wrap {
    margin-top: 1rem;
}

/* WooCommerce vormi elemendid checkoutis */

.woocommerce form .form-row label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.3rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fbf7f0;
    font-size: 0.95rem;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.4);
    background-color: #fff;
}

/* Checkout grid mobiilis */

@media (max-width: 900px) {
    .holiest-checkout-shell {
        padding: 2.2rem 1.5rem 1.8rem;
        border-radius: 26px;
    }

    .holiest-checkout-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

/* Platinum product layout */

.holiest-product-hero {
    padding-top: 4rem;
    padding-bottom: 3.5rem;
}

.holiest-product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.holiest-product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 1rem;
}

.holiest-product-gallery-item {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
}

.holiest-product-gallery-item--large {
    grid-column: 1 / -1;
}

.holiest-product-summary {
    max-width: 460px;
}

.holiest-product-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(2rem, 2.6vw, 2.4rem);
    margin: 0 0 0.8rem;
}

.holiest-product-price {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.holiest-product-short {
    font-size: 0.98rem;
    color: var(--holiest-muted);
    margin-bottom: 1.6rem;
}

.holiest-product-cta {
    margin-bottom: 1.2rem;
}

/* Vormindame üksiktoote nupu HOLIEST stiilis */

.single-product .single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.8rem !important;
    border-radius: var(--holiest-radius-pill) !important;
    border: none !important;
    background-image:
        linear-gradient(180deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.06) 35%,
            rgba(0,0,0,0.14) 100%
        ),
        linear-gradient(90deg,
            var(--holiest-bronze-satin-1) 0%,
            var(--holiest-bronze-satin-2) 18%,
            var(--holiest-bronze-satin-3) 50%,
            var(--holiest-bronze-satin-4) 78%,
            var(--holiest-bronze-satin-5) 100%
        ) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
        0 14px 34px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -14px 26px rgba(0,0,0,0.18) !important;
    position: relative;
    overflow: hidden;
    outline: none !important;
color: #fff !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--holiest-shadow-soft);
}

.single-product .single_add_to_cart_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
}

/* Trust badges */

.holiest-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.2rem;
    font-size: 0.85rem;
    color: var(--holiest-muted);
}

.holiest-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.holiest-product-badge-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
}

/* Tabs */

.holiest-product-tabs {
    padding-top: 0;
}

.holiest-tabs-nav {
    display: inline-flex;
    gap: 1.4rem;
    border-bottom: 1px solid var(--holiest-border-subtle);
    margin-bottom: 1.4rem;
}

.holiest-tab {
    padding: 0.6rem 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--holiest-muted);
    position: relative;
}

.holiest-tab.is-active {
    color: var(--holiest-text);
    font-weight: 500;
}

.holiest-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
}

.holiest-tabs-panels {
    font-size: 0.95rem;
    color: var(--holiest-muted);
}

.holiest-tab-panel {
    display: none;
}

.holiest-tab-panel.is-active {
    display: block;
}

.holiest-tab-panel ul,
.holiest-tab-panel ol {
    padding-left: 1.3rem;
}

/* Cross-sell */

.holiest-product-crosssell-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.holiest-product-card-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.15rem;
    margin: 0 0 0.4rem;
}

.holiest-product-card-text {
    font-size: 0.9rem;
    color: var(--holiest-muted);
    margin: 0 0 1rem;
}

.holiest-product-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.holiest-product-card-price {
    font-weight: 600;
}

/* Mobiil */

@media (max-width: 960px) {
    .holiest-product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .holiest-product-crosssell-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Shop archive */

.holiest-shop {
    padding-top: 4rem;
}

/* Hero paneel */

.holiest-shop-header {
    background-color: #f9f6f0;
    border-radius: 32px;
    padding: 1.8rem 1.8rem 2rem;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
    margin-bottom: 2.7rem;
}

.holiest-shop-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.holiest-shop-hero-logo {
    font-family: "Playfair Display", "Times New Roman", serif;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-bottom: 1.4rem;
}

.holiest-shop-hero-text .holiest-section-title {
    margin-bottom: 0.6rem;
}

.holiest-shop-hero-image {
    margin: 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.holiest-shop-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Layout: filtrid + grid */

.holiest-shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
    align-items: flex-start;
}

.holiest-shop-filters {
    background-color: #f9f6f0;
    border-radius: 22px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    font-size: 0.9rem;
}

.holiest-shop-filters-title {
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
}

.holiest-filter-widget + .holiest-filter-widget {
    margin-top: 1.1rem;
}

.holiest-filter-widget-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 0.4rem;
}

.holiest-shop-main {
    position: relative;
}

/* Mobiili "Filtrid" nupp */

.holiest-shop-filters-toggle {
    display: none;
    margin-bottom: 1rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Tulemuste arv + sordivalik */

.holiest-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.3rem;
    font-size: 0.85rem;
    color: var(--holiest-muted);
}

.holiest-shop-main .woocommerce-result-count {
    margin: 0;
    font-size: 0.85rem;
    color: var(--holiest-muted);
}

.holiest-shop-main .woocommerce-ordering {
    margin: 0;
}

.holiest-shop-main .woocommerce-ordering select {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fff;
}

/* WooCommerce toodete grid */

.woocommerce ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
}

.woocommerce ul.products li.product {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 1.4rem 1.3rem 1.6rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.05rem;
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
}

.woocommerce ul.products li.product .price {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
}

/* "Lisa korvi" nupp kaardil */

.woocommerce ul.products li.product .button {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    border: none;
    background-image:
        linear-gradient(180deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.06) 35%,
            rgba(0,0,0,0.14) 100%
        ),
        linear-gradient(90deg,
            var(--holiest-bronze-satin-1) 0%,
            var(--holiest-bronze-satin-2) 18%,
            var(--holiest-bronze-satin-3) 50%,
            var(--holiest-bronze-satin-4) 78%,
            var(--holiest-bronze-satin-5) 100%
        );
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
        0 14px 34px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -14px 26px rgba(0,0,0,0.18) !important;
    position: relative;
    overflow: hidden;
color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.woocommerce ul.products li.product .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* Woo buttons: remove black focus ring + add subtle shine like primary CTA */
.woocommerce ul.products li.product .button:focus,
.woocommerce ul.products li.product .button:focus-visible,
.woocommerce ul.products li.product .button:active,
.single-product .single_add_to_cart_button:focus,
.single-product .single_add_to_cart_button:focus-visible,
.single-product .single_add_to_cart_button:active{
    outline: none !important;
}

.woocommerce ul.products li.product .button::after,
.single-product .single_add_to_cart_button::after{
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.32) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    opacity: 0;
    pointer-events: none;
}

.woocommerce ul.products li.product .button:hover::after,
.single-product .single_add_to_cart_button:hover::after{
    opacity: 0.35;
    animation: shine-sweep 1.6s ease-in-out 1;
}

/* Responsiivsus */

@media (max-width: 1024px) {
    .holiest-shop-header {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.6rem 1.5rem 1.8rem;
    }

    .holiest-shop-hero-image {
        order: -1;
        max-height: 220px;
    }

    .holiest-shop-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .holiest-shop-filters-toggle {
        display: inline-flex;
    }

    .holiest-shop-filters {
        display: none;
        position: fixed;
        top: 4rem;
        left: 1rem;
        bottom: 1rem;
        width: 260px;
        max-width: calc(100% - 2rem);
        z-index: 60;
    }

    body.holiest-filters-open .holiest-shop-filters {
        display: block;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .woocommerce ul.products {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Miks HOLIEST (Manifest) */

.holiest-manifest-hero {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 4.2rem;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.holiest-manifest-hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;

  /* vasakult loetav, paremale pilt nähtav */
  background: linear-gradient(90deg,
    rgba(245,241,234,0.96) 0%,
    rgba(245,241,234,0.88) 20%,
    rgba(245,241,234,0.62) 40%,
    rgba(245,241,234,0.22) 60%,
    rgba(245,241,234,0.00) 80%
  );

  /* “frosted” efekt vasakul, kaob paremale koos alpha’ga */
  backdrop-filter: blur(0.5px);
}

.holiest-manifest-hero-inner {
    position: relative;
    max-width: 720px;
    padding-bottom: 1rem;
}

.holiest-manifest-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(2.4rem, 3.4vw, 3rem);
    margin: 0 0 1rem;
}

.holiest-manifest-subtitle {
    font-size: 0.98rem;
    color: var(--holiest-muted);
    max-width: 36rem;
    margin: 0;
}

/* Sisuplokid */

.holiest-manifest-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.holiest-manifest-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: center;
}

.holiest-manifest-block--reverse .holiest-manifest-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.05fr);
}

.holiest-manifest-block--reverse .holiest-manifest-media {
    order: 2;
}

.holiest-manifest-block--reverse .holiest-manifest-copy {
    order: 1;
}

.holiest-manifest-figure {
    margin: 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.holiest-manifest-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.holiest-manifest-copy p {
    font-size: 0.97rem;
    color: var(--holiest-muted);
    margin-bottom: 0.9rem;
}

/* Tsitaadiriba */

.holiest-manifest-quote {
    padding: 3rem 0 3.4rem;
    background-color: #15161a;
    margin-top: 1rem;
}

.holiest-manifest-quote-inner {
    margin: 0;
    text-align: center;
}

.holiest-manifest-quote-text {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.4rem;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Responsiivsus manifestile */

@media (max-width: 960px) {
    .holiest-manifest-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.4rem;
    }

    .holiest-manifest-block--reverse .holiest-manifest-media,
    .holiest-manifest-block--reverse .holiest-manifest-copy {
        order: initial;
    }

    .holiest-manifest-hero {
        padding-top: 4rem;
        padding-bottom: 3.2rem;
        border-radius: 0 0 26px 26px;
    }
}

@media (max-width: 640px) {
    .holiest-manifest-figure {
        border-radius: 20px;
    }

    .holiest-manifest-quote-text {
        font-size: 1.15rem;
    }
}

/* Näidisraport */

.holiest-report-hero {
    padding-top: 4.5rem;
    padding-bottom: 3.8rem;
}

.holiest-report-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.holiest-report-hero-media {
    position: relative;
    max-width: 520px;
}

.holiest-report-device-pill {
    position: absolute;
    top: 0.6rem;
    right: 1.2rem;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    z-index: 2;
}

.holiest-report-hero-figure {
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.22);
}

.holiest-report-hero-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.holiest-report-hero-copy p {
    font-size: 0.98rem;
    color: var(--holiest-muted);
    margin-bottom: 0.9rem;
}

.holiest-report-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(2.1rem, 2.8vw, 2.5rem);
    margin: 0 0 1rem;
}

.holiest-report-note {
    font-size: 0.85rem;
    color: var(--holiest-muted);
    margin-top: 0.5rem;
}

/* Foorikaardid */

.holiest-report-lights {
    padding-top: 0;
    padding-bottom: 3.4rem;
}

.holiest-report-lights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

.holiest-report-light-card {
    position: relative;
    text-align: center;
    padding-top: 2.6rem;
}

.holiest-report-light-dot {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    margin: 0 auto 0.4rem;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}

.holiest-report-light-card--green .holiest-report-light-dot {
    background: radial-gradient(circle at 30% 30%, #bff7c8, #3c9f55);
}

.holiest-report-light-card--yellow .holiest-report-light-dot {
    background: radial-gradient(circle at 30% 30%, #ffe9b7, #f2b43b);
}

.holiest-report-light-card--red .holiest-report-light-dot {
    background: radial-gradient(circle at 30% 30%, #ffc2bc, #e35a5a);
}

.holiest-report-light-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.holiest-report-light-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
}

.holiest-report-light-text {
    font-size: 0.9rem;
    color: var(--holiest-muted);
    margin: 0;
}

/* Kihtide sektsioon */

.holiest-report-layers {
    padding-top: 0;
    padding-bottom: 4rem;
}

.holiest-report-layers-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
    gap: 3rem;
    align-items: center;
}

.holiest-report-layers-figure {
    margin: 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}

.holiest-report-layers-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.holiest-report-layers-list {
    padding-left: 1.1rem;
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    color: var(--holiest-muted);
}

.holiest-report-layers-list li {
    margin-bottom: 0.6rem;
}

.holiest-report-layers-list strong {
    font-weight: 600;
}

/* Responsiivsus – Näidisraport */

@media (max-width: 960px) {
    .holiest-report-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.4rem;
    }

    .holiest-report-lights-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .holiest-report-layers-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .holiest-report-hero {
        padding-top: 3.6rem;
    }

    .holiest-report-hero-figure {
        border-radius: 22px;
    }

    .holiest-report-layers-figure {
        border-radius: 22px;
    }
}

/* Kontakt */

.holiest-contact {
    padding-top: 4.2rem;
    padding-bottom: 3.5rem;
}

.holiest-contact-shell {
    background-color: #f9f6f0;
    border-radius: 32px;
    padding: 2.4rem 2.2rem;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.05fr);
    gap: 2.6rem;
    position: relative;
    overflow: hidden;
}

.holiest-contact-col--text {
    position: relative;
    z-index: 2;
}

.holiest-contact-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(2rem, 2.4vw, 2.2rem);
    margin: 0 0 1rem;
}

.holiest-contact-intro {
    font-size: 0.98rem;
    color: var(--holiest-muted);
    margin: 0 0 1.4rem;
}

.holiest-contact-list {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    font-size: 0.95rem;
}

.holiest-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.holiest-contact-list a {
    text-decoration: none;
}

.holiest-contact-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

.holiest-contact-response-note {
    font-size: 0.9rem;
    color: var(--holiest-muted);
    margin: 0.4rem 0 0;
}

/* Vormipool */

.holiest-contact-col--form {
    position: relative;
    min-height: 280px;
}

.holiest-contact-bg {
    position: absolute;
    inset: 0;
    background-image: url("../assets/img/contact-bg.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(2px);
    transform: scale(1.04);
}

.holiest-contact-form-card {
    position: relative;
    max-width: 360px;
    margin-left: auto;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 1.6rem 1.5rem 1.8rem;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.holiest-contact-form-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.2rem;
    margin: 0 0 1.1rem;
}

.holiest-contact-form .holiest-field-group label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.3rem;
}

.holiest-contact-form .holiest-field-group label span {
    color: #c33;
}

.holiest-contact-form .holiest-field-group {
    margin-bottom: 0.75rem;
}

.holiest-contact-alert {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    font-size: 0.9rem;
}

.holiest-contact-alert--success {
    background-color: #e5f7ea;
    color: #155724;
}

.holiest-contact-alert--error {
    background-color: #fde8e8;
    color: #7b1111;
}

/* Konfidentsiaalsuse riba */

.holiest-contact-privacy {
    padding-bottom: 3rem;
}

.holiest-contact-privacy-inner {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background-color: #f3ebe0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.holiest-contact-privacy-icon {
    font-size: 1rem;
}

.holiest-contact-privacy-text {
    color: var(--holiest-muted);
}

/* Responsiivsus – kontakt */

@media (max-width: 960px) {
    .holiest-contact-shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 2rem 1.7rem 2.2rem;
        border-radius: 26px;
    }

    .holiest-contact-form-card {
        margin-left: 0;
        margin-top: 1rem;
    }
}

@media (max-width: 640px) {
    .holiest-contact-privacy-inner {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Juriidika (Müügitingimused & Privaatsus) */

.holiest-legal {
    padding-top: 4.2rem;
    padding-bottom: 4rem;
}

.holiest-legal-shell {
    max-width: 760px;
    margin: 0 auto;
    background-color: #f9f6f0;
    border-radius: 26px;
    padding: 2.2rem 2rem 2.4rem;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.06);
}

.holiest-legal-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(2rem, 2.4vw, 2.2rem);
    margin: 0 0 1.4rem;
}

.holiest-legal-content h2 {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

.holiest-legal-content p {
    font-size: 0.95rem;
    color: var(--holiest-muted);
    margin-bottom: 0.6rem;
}

.holiest-legal-content ul {
    padding-left: 1.3rem;
    margin-bottom: 0.9rem;
    font-size: 0.95rem;
    color: var(--holiest-muted);
}

.holiest-legal-content li {
    margin-bottom: 0.4rem;
}

.holiest-legal-updated {
    margin-top: 1.4rem;
    font-size: 0.85rem;
    color: var(--holiest-muted);
}

/* Mobiil – juriidika */

@media (max-width: 640px) {
    .holiest-legal-shell {
        padding: 1.8rem 1.3rem 2rem;
        border-radius: 22px;
    }
}

/* --- E-pood – mockupi järgi --- */

.holiest-shop {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.holiest-shop-shell {
    background-color: #f9f6f0;
    border-radius: 32px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

/* Hero paneel */

.holiest-shop-header {
    display: grid;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
    min-height: 260px;
}

.holiest-shop-header-brand {
    background-color: #f4eee3;
    display: flex;
    align-items: flex-end;
    padding: 2.1rem 2.3rem;
}

.holiest-shop-header-logo {
    font-family: "Playfair Display", "Times New Roman", serif;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.holiest-shop-header-media {
    margin: 0;
    position: relative;
}

.holiest-shop-header-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Põhiosa: filtrid + grid */

.holiest-shop-body {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 0;
    padding: 2rem 2.2rem 2.4rem;
    align-items: flex-start;
}

/* Filtrite veerg */

.holiest-shop-sidebar {
    padding-right: 1.6rem;
}

.holiest-shop-filters {
    background-color: #f4eee3;
    border-radius: 22px;
    padding: 1.4rem 1.3rem 1.5rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
}

.holiest-shop-filters-title {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.8rem;
}

.holiest-shop-filters-placeholder {
    font-size: 0.85rem;
    color: var(--holiest-muted);
}

/* Põhisisu */

.holiest-shop-main {
    position: relative;
}

.holiest-shop-main-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.holiest-shop-title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.6rem;
    margin: 0;
}

/* Tulemuste arv + sordivalik */

.holiest-shop-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--holiest-muted);
}

.holiest-shop-main .woocommerce-result_count,
.holiest-shop-main .woocommerce-result-count {
    margin: 0;
    font-size: 0.85rem;
    color: var(--holiest-muted);
}

.holiest-shop-main .woocommerce-ordering {
    margin: 0;
}

.holiest-shop-main .woocommerce-ordering select {
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
}

/* Toodete grid – puhas 3-kolumniline kaartide layout */

.woocommerce ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.7rem;
}

.woocommerce ul.products li.product {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 1.4rem 1.3rem 1.6rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: 1.05rem;
    margin-top: 0.9rem;
    margin-bottom: 0.4rem;
}

.woocommerce ul.products li.product .price {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}

/* "Lisa korvi" nupp */

.woocommerce ul.products li.product .button {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    border: none;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.woocommerce ul.products li.product .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
}

/* Responsiivsus – E-pood */

@media (max-width: 1024px) {
    .holiest-shop-header {
        grid-template-columns: minmax(0, 1fr);
        min-height: 220px;
    }

    .holiest-shop-header-brand {
        padding: 1.6rem 1.8rem;
        align-items: center;
        justify-content: flex-start;
    }

    .holiest-shop-body {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.8rem 1.6rem 2.2rem;
    }

    .holiest-shop-sidebar {
        margin-bottom: 1.5rem;
        padding-right: 0;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .woocommerce ul.products {
        grid-template-columns: minmax(0, 1fr);
    }

    .holiest-shop-shell {
        border-radius: 24px;
    }
}

/* E-pood – kaartide suurus ja nupp paremini loetav */

/* Tee veerud automaatseks: kui on vähe tooteid, on kaardid laiemad */
.woocommerce ul.products {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Natuke jõulisem padding ja “kaart” */
.woocommerce ul.products li.product {
    padding: 1.6rem 1.5rem 1.9rem;
}

/* Tootepilt suurem ja pehmelt ümardatud */
.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 0.7rem;
}

/* Nupp veidi suurem ja nähtavam */
.woocommerce ul.products li.product .button {
    margin-top: 1.2rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.16);
}

/* Booking modal – valikud ja rohelised rõngad */

.holiest-choice-group {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.holiest-choice {
    display: flex;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    padding: 0.8rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background-color: #ffffff;
    cursor: pointer;
    gap: 0.7rem;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.holiest-choice:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.holiest-choice-indicator {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 3px #ffffff;
    margin-top: 2px;
}

.holiest-choice.is-selected {
    border-color: #1a8f4a;
    box-shadow: 0 18px 50px rgba(19, 111, 57, 0.22);
}

.holiest-choice.is-selected .holiest-choice-indicator {
    border-color: #1a8f4a;
    background: radial-gradient(circle at 30% 30%, #bff7c8, #1a8f4a);
}

.holiest-choice-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.holiest-choice-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.holiest-choice-text {
    font-size: 0.9rem;
    color: var(--holiest-muted);
}

.holiest-family-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.holiest-family-label .holiest-input {
    margin-top: 0.2rem;
    max-width: 80px;
}

.holiest-family-price {
    margin-top: 0.4rem;
    font-size: 0.9rem;
}

.holiest-family-price-label {
    font-weight: 500;
    margin-right: 0.3rem;
}

.holiest-installments {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.holiest-installment-option {
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    background-color: #fff;
    cursor: pointer;
}

.holiest-installment-option.is-selected {
    border-color: #1a8f4a;
    background-color: #e5f7ea;
}

.holiest-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    margin-top: 0.7rem;
}

.holiest-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.holiest-summary {
    background-color: #f9f6f0;
    border-radius: 18px;
    padding: 1rem 1.1rem;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}

/* Success-samm */

.holiest-modal-step[data-step-index="5"] {
    text-align: center;
}

/* --- TEENUSED LEHT (Services Page) --- */

/* Hero kohandus */
.holiest-hero--services {
    min-height: 60vh;
}

/* 1. TEENUSTE GRID & POPUP */

.holiest-services-grid-section {
    position: relative;
    /* Et modal saaks olla "fixed" relative sees, kui soovime, 
       aga teeme modali hoopis fixed viewporti suhtes */
}

.holiest-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.holiest-service-card {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 2rem 1.8rem;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.holiest-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.12);
}

.holiest-service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f4eee3;
}

.holiest-service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.holiest-service-card-title {
    font-family: "Playfair Display", serif;
    font-size: 1.15rem;
    margin: 0 0 1rem;
    color: var(--holiest-text);
}

.holiest-service-more-link {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--holiest-muted);
    font-weight: 600;
}

/* KLAASIST INFOAKEN (Modal / Overlay) */

.holiest-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(21, 22, 26, 0.6);
    backdrop-filter: blur(4px);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.holiest-service-overlays {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 680px;
    z-index: 910;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Kui klass 'is-visible' on lisatud JS poolt */
body.holiest-service-open .holiest-overlay-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.holiest-service-open .holiest-service-overlays {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.holiest-service-content {
    display: none; /* Peidetud vaikimisi */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    padding: 3rem;
    border-radius: 30px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.25);
    text-align: left;
    border: 1px solid rgba(255,255,255,0.4);
}

.holiest-service-content.is-active {
    display: block;
    animation: fadeInContent 0.4s ease;
}

@keyframes fadeInContent {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.holiest-overlay-title {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
    color: var(--holiest-text);
}

.holiest-overlay-subtitle {
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    vertical-align: middle;
    color: var(--holiest-muted);
    margin-left: 0.5rem;
}

.holiest-overlay-intro {
    font-size: 1.1rem;
    font-weight: 500;
    color: #c8925e; /* Bronze */
    margin-bottom: 1.5rem;
    font-style: italic;
}

.holiest-overlay-body {
    font-size: 0.96rem;
    color: #4a4b50;
    line-height: 1.7;
}

.holiest-overlay-body p {
    margin-bottom: 1rem;
}

.holiest-overlay-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--holiest-muted);
    transition: color 0.2s;
}

.holiest-overlay-close:hover {
    color: var(--holiest-text);
}


/* 2. VÕRDLUSTABEL */

.holiest-comparison-wrapper {
    overflow-x: auto;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(0,0,0,0.06);
    padding: 2rem;
}

.holiest-comparison-table {
    width: 100%;
    min-width: 800px; /* Force scroll on mobile */
    border-collapse: separate;
    border-spacing: 0;
}

.holiest-comparison-table th, 
.holiest-comparison-table td {
    padding: 1.2rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.holiest-th-feature, 
.holiest-td-feature {
    text-align: left;
    font-weight: 600;
    color: var(--holiest-text);
    width: 30%;
}

.holiest-th-package {
    vertical-align: top;
    padding-bottom: 1.5rem;
}

.holiest-pkg-name {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
}

.holiest-pkg-price {
    display: block;
    font-size: 0.95rem;
    color: var(--holiest-muted);
}

.holiest-pkg-badge {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: #e4b777;
    color: #fff;
    padding: 2px 8px;
    border-radius: 99px;
    margin-bottom: 0.5rem;
}

/* Featured column highlight */
.holiest-th-package--featured,
.holiest-td-featured {
    background-color: #fbf9f5;
}
.holiest-th-package--featured {
    border-radius: 20px 20px 0 0;
}
tbody tr:last-child .holiest-td-featured {
    border-radius: 0 0 20px 20px;
}

.holiest-check {
    color: #3c9f55; /* Green */
    font-weight: bold;
    font-size: 1.2rem;
}

.holiest-cross {
    color: #e35a5a; /* Red */
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
}

/* Nupud tabelis */
.holiest-btn--small {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    width: 100%;
}

/* MOBIIL & Responsive */

@media (max-width: 900px) {
    .holiest-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .holiest-services-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    
    .holiest-service-content {
        padding: 2rem 1.5rem;
        max-height: 85vh;
        overflow-y: auto;
    }
    
    .holiest-overlay-title {
        font-size: 1.4rem;
    }
    
    .holiest-comparison-wrapper {
        padding: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- VÄRSKENDUSED & FINE-TUNING --- */

/* Hover fix: Veendume, et backdrop ei segaks desktopis hiirt */
@media (min-width: 992px) {
    .holiest-overlay-backdrop {
        pointer-events: none; /* Laseb hiirel läbi gridi peale minna */
    }
    
    /* Ainult siis blokeerime, kui aken on päriselt lahti ja hiir on akna kohal */
    body.holiest-service-open .holiest-service-content {
        pointer-events: auto;
    }
}

/* Tabeli highlight - Peen joon Platinum tulbale */

/* Ülemine osa (päis) */
.holiest-col-platinum-top {
    border-top: 1px solid rgba(200, 146, 94, 0.3);   /* Õrn pronks */
    border-left: 1px solid rgba(200, 146, 94, 0.3);
    border-right: 1px solid rgba(200, 146, 94, 0.3);
    border-radius: 16px 16px 0 0;
    background-color: #fffbf7; /* Väga õrn taustavärv eristamiseks */
    position: relative;
}

/* Keskmised lahtrid */
.holiest-col-platinum {
    border-left: 1px solid rgba(200, 146, 94, 0.3);
    border-right: 1px solid rgba(200, 146, 94, 0.3);
    background-color: #fffbf7;
}

/* Alumine osa (jalus/nupud) */
.holiest-col-platinum-bottom {
    border-bottom: 1px solid rgba(200, 146, 94, 0.3);
    border-left: 1px solid rgba(200, 146, 94, 0.3);
    border-right: 1px solid rgba(200, 146, 94, 0.3);
    border-radius: 0 0 16px 16px;
    background-color: #fffbf7;
    padding-bottom: 1.5rem;
}

/* Et jooned ei kattuks koledalt tabeli enda joontega, eemaldame alumise borderi highlightitud lahtritel */
.holiest-col-platinum {
    border-bottom: 1px solid rgba(200, 146, 94, 0.1); /* Väga õrn vahejoon sisu vahel */
}

/* --- AVALEHE UUENDUSED --- */

/* 1. HERO CENTERED */
.holiest-hero--centered .holiest-hero-inner {
    margin: 0 auto;
    text-align: center;
    max-width: 800px; /* Kitsam, et tekst ei valguks laiali */
}

.holiest-hero--centered .holiest-hero-title {
    font-size: clamp(3rem, 5vw, 4.5rem); /* Veidi suurem pealkiri */
    margin-bottom: 1.5rem;
}

.holiest-hero--centered .holiest-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 600px;
}

.holiest-hero--centered .holiest-hero-actions {
    justify-content: center; /* Nupud keskele */
    margin-top: 2.5rem;
}

/* Läbipaistev nupp heledaks hero peal */
.holiest-hero-btn-light {
    color: #fff; /* Valge tekst */
    border-color: rgba(255,255,255,0.4);
}
.holiest-hero-btn-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
}

/* 2. PROBLEM GRID CENTERED */
.holiest-text-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.holiest-text-center .holiest-card-icon {
    margin-left: auto;
    margin-right: auto;
}

/* 3. PLATINUM HIGHLIGHT & SATIIN LINNUKE */

/* Platinum kaartile peenike ring */
.holiest-pricing-card--platinum {
    position: relative;
    border: 1px solid #c8925e; /* Pronksikas raam */
    box-shadow: 0 25px 80px rgba(200, 146, 94, 0.15); /* Õrn kuma */
    transform: scale(1.02); /* Veidi suurem */
    z-index: 2;
}

/* Satiin linnukese list */
.holiest-list-satin {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.holiest-list-satin li {
    display: flex;
    align-items: flex-start; /* Joonda üles, kui tekst on pikk */
    gap: 12px;
    margin-bottom: 0.8rem;
    line-height: 1.5;
    font-size: 0.95rem;
    color: var(--holiest-text); /* Tumedam tekst loetavuseks */
}

/* Ikoon ise */
.holiest-list-satin li img {
    width: 26px; /* ca 7mm */
    height: 26px;
    flex-shrink: 0; /* Et ikoon ei läheks krimpsu */
    object-fit: contain;
    margin-top: -2px; /* Väike nihe, et oleks tekstiga tasa */
}

/* Kahe nupu grupp kaardi all */
.holiest-pricing-cta-group {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Väikesed nupud tabelisse */
.holiest-btn--small {
    padding: 0.7rem 1rem;
    font-size: 0.8rem;
}

/* Responsive fix */
@media (max-width: 768px) {
    .holiest-hero--centered .holiest-hero-title {
        font-size: 2.8rem;
    }
    .holiest-pricing-card--platinum {
        transform: none;
        margin: 1rem 0;
    }
}/* --- UUS FAQ DISAIN --- */

.holiest-faq {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Vahe kaartide vahel */
}

.holiest-faq-item {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* Õrn vari */
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.holiest-faq-item.is-open {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* Tõuseb esile avatuna */
    border-color: rgba(200, 146, 94, 0.2); /* Õrn pronks raam avatuna */
}

.holiest-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.holiest-faq-q-text {
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    color: var(--holiest-text);
    padding-right: 1.5rem;
}

/* Animeeritud ikoon (+ märk mis muutub - märgiks) */
.holiest-faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.holiest-faq-icon::before,
.holiest-faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--holiest-muted);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Horisontaalne joon */
.holiest-faq-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}

/* Vertikaalne joon */
.holiest-faq-icon::after {
    top: 0;
    left: 50%;
    height: 100%;
    width: 2px;
    margin-left: -1px;
}

/* Avatud olekus ikoon */
.holiest-faq-item.is-open .holiest-faq-icon::after {
    transform: rotate(90deg); /* Pöörab kriipsuks */
}
.holiest-faq-item.is-open .holiest-faq-icon::before {
    transform: rotate(180deg);
}
.holiest-faq-item.is-open .holiest-faq-icon::before,
.holiest-faq-item.is-open .holiest-faq-icon::after {
    background-color: #c8925e; /* Pronks värv */
}

/* Vastuse sisu */
.holiest-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Väga sujuv slide */
    background-color: #fbfbf9; /* Õrn kontrast küsimusega */
}

.holiest-faq-answer p {
    margin: 0;
    padding: 0 2rem 1.8rem 2rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--holiest-muted);
}

/* Hero nupud */
.holiest-btn--outline-white {
    background: transparent;
    border: 1px solid #ffffff; /* Selge valge joon */
    color: #ffffff;
    transition: all 0.3s ease;
}

.holiest-btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.15); /* Õrn taust hõljumisel */
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- FINE TUNING & FIXES --- */

/* 1. HERO NUPP (Nähtamatu teksti fix) */
.holiest-btn--outline-white {
    color: #ffffff !important; /* Sunnime teksti valgeks */
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    font-weight: 600;
}

.holiest-btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 2. PAKETTIDE PJEDESTAAL JA HOVER */

.holiest-pricing-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    position: relative;
    background: #fff;
    /* Tavaline vari */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

/* Hover efekt kõigile kaartidele (liiguvad üles) */
.holiest-pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

/* PLATINUM eridisain (Võitja) */
.holiest-pricing-card--platinum {
    border: 2px solid #c8925e; /* Tugevam kuldne raam */
    z-index: 5; /* Tõstame teiste peale */
}

/* "Soovitatud" sildi fix - tõstame serva peale */
.holiest-pricing-card--platinum .holiest-pricing-badge {
    top: -14px; /* Tõstab sildi kaardi servast välja */
    transform: translateX(-50%); /* Tsentreerib */
    box-shadow: 0 4px 10px rgba(200, 146, 94, 0.3);
    padding: 0.35rem 1rem; /* Veidi suurem */
    font-weight: 600;
}

/* PJEDESTAALI EFEKT (Ainult arvutis) */
@media (min-width: 1024px) {
    /* Äärmised kaardid (Core ja DNA+) lükkame allapoole */
    .holiest-pricing-card:not(.holiest-pricing-card--platinum) {
        margin-top: 3rem; 
    }

    /* Platinum kaart on suurem ja kõrgemal */
    .holiest-pricing-card--platinum {
        margin-top: 0; /* Jääb üles */
        transform: scale(1.05); /* 5% suurem */
        box-shadow: 0 25px 60px rgba(200, 146, 94, 0.15); /* Kuldne kuma */
    }

    /* Platinum hover - peab arvestama scale'iga */
    .holiest-pricing-card--platinum:hover {
        transform: scale(1.05) translateY(-10px);
        box-shadow: 0 35px 80px rgba(200, 146, 94, 0.25);
    }
}

/* Mobiilis (alla 1024px) */
@media (max-width: 1023px) {
    .holiest-pricing-card--platinum {
        margin-top: 1.5rem; /* Eraldame veidi mobiilis */
        margin-bottom: 1.5rem;
        transform: scale(1);
    }
    
    /* Hover mobiilis pole vajalik, eemaldame nihke */
    .holiest-pricing-card:hover,
    .holiest-pricing-card--platinum:hover {
        transform: none;
    }
}

/* --- KLASS OMAETTE PÄIS (Final Clean) --- */

/* Menüü konteiner */
.holiest-header-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.6rem; 
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.6);
    flex-wrap: nowrap;
}

/* Lingid */
.holiest-header-menu > li > a {
    text-decoration: none;
    color: #000000;
    font-size: 0.68rem; /* Peen ja elegantne */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.holiest-header-menu > li > a:hover {
    color: #c8925e;
}

/* TÄPID (Mustad) */
.holiest-header-menu > li:not(:last-child)::after {
    content: "•";
    font-size: 1.4rem;
    line-height: 0;
    vertical-align: middle;
    margin: 0 12px;     /* Natuke õhku vahele */
    color: #000000;
    position: relative;
    top: -2px;
}

/* --- KLASS OMAETTE PÄIS (Final Clean) --- */

/* Menüü konteiner */
.holiest-header-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.6rem; 
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.6);
    flex-wrap: nowrap;
}

/* Lingid */
.holiest-header-menu > li > a {
    text-decoration: none;
    color: #000000;
    font-size: 0.68rem; /* Peen ja elegantne */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.holiest-header-menu > li > a:hover {
    color: #c8925e;
}

/* TÄPID (Mustad) */
.holiest-header-menu > li:not(:last-child)::after {
    content: "•";
    font-size: 1.4rem;
    line-height: 0;
    vertical-align: middle;
    margin: 0 12px;     /* Natuke õhku vahele */
    color: #000000;
    position: relative;
    top: -2px;
}

/* --- KLASS OMAETTE PÄIS (Final Clean) --- */

/* Menüü konteiner */
.holiest-header-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.6rem; 
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.6);
    flex-wrap: nowrap;
}

/* Lingid */
.holiest-header-menu > li > a {
    text-decoration: none;
    color: #000000;
    font-size: 0.68rem; /* Peen ja elegantne */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.holiest-header-menu > li > a:hover {
    color: #c8925e;
}

/* TÄPID (Mustad) */
.holiest-header-menu > li:not(:last-child)::after {
    content: "•";
    font-size: 1.4rem;
    line-height: 0;
    vertical-align: middle;
    margin: 0 12px;     /* Natuke õhku vahele */
    color: #000000;
    position: relative;
    top: -2px;
}

/* --- BRONEERINGU MODAL FINE-TUNING --- */

/* Pealkirjad keskele ja ilma punktita (punkt eemaldatud HTML-is) */
.holiest-modal-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Step 4: Kompaktne grid (kuupäev/aeg ühel real jne) */
.holiest-grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Punane ring veateade */
.holiest-input--error {
    border-color: #e35a5a !important;
    box-shadow: 0 0 0 3px rgba(227, 90, 90, 0.15) !important;
}

.holiest-field-error {
    color: #e35a5a;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

/* Nupud keskele footeris (kui on üksik nupp) */
.holiest-modal-footer--single {
    justify-content: center;
}
.holiest-modal-footer--single .holiest-btn {
    flex: 0 0 auto;
    min-width: 140px;
}

.holiest-modal-footer--column{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.holiest-modal-footer--column .holiest-btn{
    width: 100%;
}

/* Mobiil */
@media (max-width: 600px) {
    .holiest-grid-two {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* --- NUPU LÄIKE (SHINE) AUTOMAATNE JA AEGLANE ANIMATSIOON --- */

/* 1. Määrame nupu konteineriks */
.holiest-btn--primary {
    position: relative;
    overflow: hidden; /* Peidab läike, kui see liigub nupust välja */
}

/* 2. Loome läike triibu ja rakendame animatsiooni kohe */
.holiest-btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Alustab vasakult väljaspool nuppu */
    width: 50%; /* Triibu laius */
    height: 100%;
    
    /* Läike värv: poolläbipaistev valge gradient */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Kaldus nurk */
    transform: skewX(-25deg);
    
    /* Tõstame ta nupu tausta kohale, aga teksti alla */
    z-index: 1;

    /* --- ANIMATSIOONI SEADED --- */
    /* Nimi | Kestus | Kiiruskõver | Kordus */
    opacity: 0;
    pointer-events: none;
    animation: none;
}

.holiest-btn--primary:hover::after {
    opacity: 0.35;
    animation: shine-sweep 1.6s ease-in-out 1;
}

/* NB: Veendume, et nupu tekst on läike peal */
.holiest-btn--primary span,
.holiest-btn--primary a {
    position: relative;
    z-index: 2;
}


/* 3. Defineerime liikumise teekonna */
@keyframes shine-sweep {
    0% {
        left: -100%; /* Algpositsioon vasakul */
    }
    100% {
        left: 150%; /* Lõppositsioon paremal, nupust väljas */
    }
}

/* --- APP SHOWCASE LEHT --- */

.holiest-app-showcase {
    padding-top: 4rem;
    padding-bottom: 6rem;
    overflow: hidden;
}

.holiest-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Vasak pool: Tekst */
.holiest-feature-list {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.holiest-feature-item {
    display: flex;
    gap: 1rem;
}

.holiest-feature-item .icon {
    font-size: 1.5rem;
    background: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.holiest-feature-item .text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--holiest-muted);
}

.holiest-feature-item strong {
    display: block;
    color: var(--holiest-text);
    margin-bottom: 0.2rem;
}

.holiest-app-cta {
    margin-top: 3rem;
}

.holiest-small-note {
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.8rem;
    font-style: italic;
}

/* PAREM POOL: iPhone Mockup (CSS Only) */

.holiest-app-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Telefoni raam */
.iphone-mockup {
    width: 340px;
    height: 680px;
    background: #111; /* Must raam */
    border-radius: 50px;
    padding: 12px; /* Raami paksus */
    position: relative;
    box-shadow: 
        0 0 0 2px #333, /* Välisjoon */
        0 30px 80px rgba(0,0,0,0.25); /* Vari */
    z-index: 2;
}

/* Ekraan */
.iphone-screen {
    background: #f4f4f4;
    width: 100%;
    height: 100%;
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Notch (Kaamera sälk) */
.iphone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 30px;
    background: #111;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}

/* Äpi sisu */

.app-header {
    background: #fff;
    padding: 3rem 1.2rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.app-avatar {
    width: 40px;
    height: 40px;
    background: #c8925e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.app-header-info {
    line-height: 1.2;
}

.app-header-info .name {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #333;
}

.app-header-info .status {
    font-size: 0.75rem;
    color: #3c9f55; /* Roheline */
    font-weight: 500;
}

.app-chat-area {
    flex: 1;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

/* Chat mullid */
.chat-bubble {
    padding: 1rem;
    border-radius: 16px;
    font-size: 0.85rem;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    max-width: 90%;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes popIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Kasutaja skänn */
.user-scan {
    align-self: flex-end;
    background: #fff;
    border-bottom-right-radius: 4px;
    border: 1px solid #eee;
    animation-delay: 0.2s;
}

.scan-preview {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.scan-preview .emoji { font-size: 1.5rem; }
.scan-preview .brand { display: block; font-size: 0.65rem; color: #999; margin-bottom: 2px; }
.scan-preview .product { font-weight: 700; color: #333; }

/* AI Vastus */
.ai-response {
    align-self: flex-start;
    background: #fff;
    border-bottom-left-radius: 4px;
    border-left: 3px solid #e35a5a; /* Punane triip */
    animation-delay: 1s; /* Ilmub hiljem */
}

.ai-response p { margin: 0 0 0.5rem; color: #444; }
.ai-response p:last-child { margin: 0; }
.ai-response strong { color: #d32f2f; }

/* Soovitus */
.ai-suggestion {
    align-self: flex-start;
    background: #e5f7ea; /* Rohekas */
    color: #155724;
    border: 1px solid #c3e6cb;
    animation-delay: 2.5s; /* Ilmub kõige viimasena */
}

.suggestion-label {
    display: block;
    font-weight: 700;
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
    letter-spacing: 0.05em;
}

/* Alumine riba */
.app-bottom-bar {
    background: #fff;
    padding: 1rem;
    border-top: 1px solid #eee;
}

.scan-button {
    background: #15161a;
    color: #fff;
    text-align: center;
    padding: 0.9rem;
    border-radius: 99px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Tausta glow */
.iphone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 80%;
    background: radial-gradient(circle, rgba(200, 146, 94, 0.2) 0%, rgba(255,255,255,0) 70%);
    z-index: 1;
    pointer-events: none;
}

/* Mobiilivaade */
@media (max-width: 900px) {
    .holiest-app-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .holiest-app-visual {
        order: -1; /* Telefon on mobiilis esimene */
    }
    .iphone-mockup {
        width: 300px; /* Veidi kitsam */
        height: 600px;
    }
}

/* --- APP DEMO: DÜNAAMILINE SISU --- */

.holiest-app-showcase {
    padding-top: 4rem;
    padding-bottom: 6rem;
    overflow: hidden;
}

.holiest-app-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    align-items: center;
    justify-content: center;
}

.holiest-app-content { flex: 1; min-width: 300px; max-width: 500px; }
.holiest-app-visual { flex: 1; min-width: 340px; display: flex; justify-content: center; }

/* TELEFONI RAAM */
.iphone-mockup {
    width: 340px !important;
    height: 680px !important;
    background-color: #1a1a1a;
    border-radius: 50px;
    padding: 12px;
    box-shadow: 0 0 0 2px #333, 0 40px 100px rgba(0,0,0,0.3);
    z-index: 5;
    flex-shrink: 0;
    margin: 0 auto;
    position: relative;
}

.iphone-screen {
    background-color: #f6f6f6;
    width: 100%;
    height: 100%;
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.iphone-notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 30px; background-color: #1a1a1a;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; z-index: 20;
}

/* --- VAATED (VIEWS) --- */
.app-view {
    position: absolute;
    inset: 0;
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.app-view.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

/* VAADE 1: DASHBOARD */
.app-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
}

.dash-card {
    background: #fff;
    padding: 1rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.dash-card .lbl { font-size: 0.7rem; color: #888; text-transform: uppercase; margin-bottom: 0.3rem; }
.dash-card .val { font-size: 1.4rem; font-weight: 700; color: #333; }
.dash-card .dot { 
    position: absolute; top: 1rem; right: 1rem; 
    width: 8px; height: 8px; border-radius: 50%; 
}

.card-green .dot { background: #3c9f55; box-shadow: 0 0 5px #3c9f55; }
.card-yellow .dot { background: #f2b43b; box-shadow: 0 0 5px #f2b43b; }
.card-red .dot { background: #e35a5a; box-shadow: 0 0 5px #e35a5a; }

.app-chart-placeholder {
    margin: 0 1rem 1.5rem;
    background: #fff;
    border-radius: 16px;
    padding: 1rem;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.chart-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 80%;
    margin-bottom: 0.5rem;
}

.chart-bars .bar {
    width: 12%;
    background: #e4b777;
    border-radius: 4px 4px 0 0;
    opacity: 0.6;
}

.chart-label { font-size: 0.7rem; color: #999; text-align: center; display: block; }

.app-scan-trigger {
    margin: auto 1rem 1.5rem;
    background: #15161a;
    color: #fff;
    text-align: center;
    padding: 1rem;
    border-radius: 99px;
    font-weight: 600;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Animeeritud näpp */
.finger-tap {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 2rem;
    opacity: 0;
    pointer-events: none;
    animation: fingerTap 4s infinite; /* Tsükkel peab klappima JS-iga */
}

@keyframes fingerTap {
    0%, 80% { opacity: 0; transform: translate(20px, 20px) scale(1); }
    85% { opacity: 1; transform: translate(-50%, -20%) scale(1); } /* Ilmub */
    90% { transform: translate(-50%, -20%) scale(0.9); } /* Vajutab */
    95% { transform: translate(-50%, -20%) scale(1); }
    100% { opacity: 0; }
}

/* VAADE 2: SKÄNNIMINE */
.view-scanning {
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-camera-bg {
    /* Siia võiks panna kaamera pildi taustaks, aga teeme abstraktse */
    position: absolute; inset: 0;
    background: radial-gradient(circle, #333 0%, #111 80%);
    z-index: 1;
}

.scan-overlay {
    position: relative;
    z-index: 2;
    width: 250px;
    height: 250px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-line {
    width: 100%;
    height: 2px;
    background: #3c9f55; /* Laser roheline */
    box-shadow: 0 0 10px #3c9f55;
    position: absolute;
    top: 0;
    animation: scanMove 2s infinite linear;
}

.scan-text {
    margin-top: 280px;
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    animation: blink 1s infinite;
}

@keyframes scanMove {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes blink { 50% { opacity: 0.5; } }

/* VAADE 3: RESULTAAT (Chat) */
.view-result .app-chat-area {
    padding: 5rem 1rem 1rem; /* Ruum päise all */
}

.chat-bubble.ai-education {
    background: #fff8e1;
    border: 1px solid #ffe082;
    color: #8d6e63;
    display: flex;
    gap: 0.5rem;
}

.edu-icon { font-size: 1.2rem; }

/* Reuse styles from previous chat design */
.chat-bubble { margin-bottom: 0.8rem; }

/* =========================================
   HOLIEST PLATFORM DASHBOARDS (pixel-tuned + mobile scan)
   Scoped: only .holiest-app-layout + dashboard templates
   ========================================= */

/* Optional: hide site chrome on dashboard templates */
.page-template-page-holiest-client .holiest-header,
.page-template-page-holiest-client-php .holiest-header,
.page-template-page-holiest-client .holiest-footer,
.page-template-page-holiest-client-php .holiest-footer,
.page-template-page-holiest-staff .holiest-header,
.page-template-page-holiest-staff-php .holiest-header,
.page-template-page-holiest-admin .holiest-header,
.page-template-page-holiest-admin-php .holiest-header,
.page-template-page-holiest-admin .holiest-footer,
.page-template-page-holiest-admin-php .holiest-footer {
	display: none;
}

/* Base App Shell */
.holiest-app-layout {
	--h-bg-1: rgba(255, 255, 255, 0.92);
	--h-bg-2: rgba(245, 241, 234, 0.98);
	--h-card: #ffffff;
	--h-border: rgba(0, 0, 0, 0.06);
	--h-muted: var(--holiest-muted, #7a7b80);
	--h-text: var(--holiest-text, #232326);
	--h-bronze-1: var(--holiest-bronze-from, #D49A7D);
	--h-bronze-2: var(--holiest-bronze-to, #8F5C3E);

	display: flex;
	min-height: 100vh;
	background: radial-gradient(circle at 18% 0%, var(--h-bg-1), var(--h-bg-2));
	color: var(--h-text);
}

/* Sidebar */
.holiest-app-sidebar {
	width: 300px;
	padding: 2.2rem 1.9rem;
	border-right: 1px solid var(--h-border);
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: auto;
	flex-shrink: 0;
}

.holiest-sidebar-top {
	display: grid;
	gap: 1.4rem;
}

.holiest-brand-logo {
	font-family: "Playfair Display", "Times New Roman", serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 1.05rem;
}

.holiest-sidebar-user {
	padding-top: 0.15rem;
}

.holiest-sidebar-hello {
	font-weight: 600;
	font-size: 0.96rem;
	line-height: 1.2;
}

.holiest-sidebar-sub {
	color: var(--h-muted);
	font-size: 0.85rem;
	margin-top: 0.2rem;
}

/* Sidebar nav */
.holiest-app-nav {
	margin: 2.2rem 0 0;
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}

.holiest-app-nav a {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.72rem 0.95rem;
	border-radius: 999px;
	color: var(--h-muted);
	font-weight: 600;
	font-size: 0.92rem;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.holiest-app-nav a:hover {
	background: rgba(255, 255, 255, 0.7);
	color: var(--h-text);
	box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}

.holiest-app-nav a.is-active {
	background: linear-gradient(90deg, rgba(249, 246, 240, 0.95), rgba(255,255,255,0.75));
	box-shadow: 0 14px 34px rgba(0,0,0,0.06);
	color: #c8925e;
}

.holiest-nav-ico {
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
	opacity: 0.95;
}

.holiest-ico {
	width: 18px;
	height: 18px;
	display: block;
}

.holiest-sidebar-footer {
	margin-top: auto;
	padding-top: 1.8rem;
}

.holiest-sidebar-help {
	display: inline-block;
	color: var(--h-muted);
	font-size: 0.86rem;
}
.holiest-sidebar-help span {
	color: var(--h-text);
	font-weight: 600;
}

/* Main Content Area */
.holiest-app-main {
	flex: 1;
	padding: 2.6rem 3.2rem 3.2rem;
	min-width: 0;
}

.holiest-app-main-inner {
	max-width: 1240px;
	margin: 0 auto;
}

/* Top header (tabs + avatar) */
.holiest-app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
}

.holiest-top-tabs {
	display: flex;
	align-items: center;
	gap: 2.0rem;
	position: relative;
}

.holiest-top-tab {
	color: rgba(35, 35, 38, 0.75);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.35rem 0;
	position: relative;
}

.holiest-top-tab:hover {
	color: rgba(35, 35, 38, 0.92);
}

.holiest-top-tab.is-active {
	color: rgba(35, 35, 38, 0.95);
}

.holiest-top-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.6rem;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--h-bronze-1), var(--h-bronze-2));
	opacity: 0.95;
}

.holiest-avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0 14px 36px rgba(0,0,0,0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* Hero */
.holiest-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 2.2rem;
	align-items: start;
	margin-bottom: 1.6rem;
}

.holiest-hero-title {
	font-family: "Playfair Display", "Times New Roman", serif;
	font-size: clamp(2.2rem, 2.6vw, 2.8rem);
	line-height: 1.08;
	margin: 0;
}

.holiest-hero-lead {
	margin: 0.35rem 0 0;
	font-size: 1.02rem;
	font-weight: 600;
	color: rgba(35, 35, 38, 0.92);
}

.holiest-hero-desc {
	margin: 0.85rem 0 0;
	color: var(--h-muted);
	font-size: 0.95rem;
	max-width: 46rem;
}

.holiest-checklist {
	list-style: none;
	padding: 0;
	margin: 0.6rem 0 0;
	display: grid;
	gap: 0.5rem;
	color: rgba(35, 35, 38, 0.82);
	font-size: 0.9rem;
}

.holiest-checklist li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.holiest-check-ico {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	line-height: 1;
	background: rgba(0,0,0,0.04);
}

.holiest-checklist .is-done .holiest-check-ico {
	background: rgba(26, 143, 74, 0.12);
	color: #1a8f4a;
}

.holiest-checklist .is-wip .holiest-check-ico {
	background: rgba(200, 146, 94, 0.14);
	color: #8F5C3E;
}

/* Dashboard Cards (Base) */
.holiest-app-layout .holiest-card,
.holiest-app-layout .holiest-dash-card {
	background: var(--h-card);
	border-radius: 22px;
	padding: 1.55rem 1.6rem;
	border: 1px solid rgba(0,0,0,0.04);
	box-shadow: 0 16px 46px rgba(0,0,0,0.06);
}

.holiest-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
	margin-bottom: 1.1rem;
}

.holiest-card-title-sm {
	font-weight: 700;
	font-size: 0.98rem;
	color: rgba(35, 35, 38, 0.92);
}

.holiest-card-link {
	color: #8F5C3E;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.9;
}

.holiest-card-link:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Grids */
.holiest-dash-grid {
	display: grid;
	gap: 1.4rem;
}
.holiest-dash-grid--2col { grid-template-columns: 1fr 1fr; align-items: stretch; }
.holiest-dash-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.holiest-dash-grid--planrow { grid-template-columns: 1fr 1fr; align-items: start; margin-top: 1.4rem; }
.holiest-dash-grid--bottom { margin-top: 1.4rem; }

/* Health Card */
.holiest-health {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 1.35rem;
	align-items: center;
}
.holiest-gauge { width: 170px; height: 170px; position: relative; margin-left: 0.25rem; }
.holiest-gauge-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 34px rgba(0,0,0,0.08)); }
.holiest-gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.holiest-gauge-val { font-family: "Playfair Display", "Times New Roman", serif; font-size: 3.2rem; line-height: 1; color: rgba(35, 35, 38, 0.95); }
.holiest-health-meta .holiest-pill { margin-bottom: 0.6rem; }

.holiest-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(245, 241, 234, 0.75);
	border: 1px solid rgba(0,0,0,0.05);
	width: fit-content;
}
.holiest-pill-label { color: rgba(35, 35, 38, 0.65); font-size: 0.86rem; font-weight: 600; }
.holiest-pill-val { font-weight: 800; font-size: 0.9rem; color: #1a8f4a; }
.holiest-pill-val.is-good { color: #1a8f4a; }
.holiest-pill-val.is-neutral { color: #8F5C3E; }

.holiest-health-text { margin: 0.8rem 0 0; color: var(--h-muted); font-size: 0.94rem; line-height: 1.65; }

/* Focus List */
.holiest-focus-list { list-style: none; padding: 0; margin: 0; }
.holiest-focus-item {
	display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0.9rem; padding: 0.8rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.05);
}
.holiest-focus-item:last-child { border-bottom: none; }
.holiest-focus-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 0.35rem; box-shadow: 0 8px 18px rgba(0,0,0,0.10); }
.dot-green { background: radial-gradient(circle at 30% 30%, #bff7c8, #1a8f4a); }
.dot-yellow { background: radial-gradient(circle at 30% 30%, #ffe9b7, #f2b43b); }
.dot-red { background: radial-gradient(circle at 30% 30%, #ffc6c6, #e35a5a); }
.holiest-focus-title { font-weight: 800; font-size: 0.92rem; color: rgba(35, 35, 38, 0.92); }
.holiest-focus-desc { margin-top: 0.18rem; font-size: 0.9rem; color: var(--h-muted); line-height: 1.55; }

/* Plan */
.holiest-plan { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.holiest-plan-row { display: grid; grid-template-columns: 18px 64px minmax(0, 1fr); gap: 0.75rem; align-items: center; cursor: pointer; }
.holiest-plan-time { font-weight: 800; font-size: 0.9rem; color: rgba(35, 35, 38, 0.92); }
.holiest-plan-text { color: rgba(35, 35, 38, 0.78); font-size: 0.93rem; }
.holiest-check { width: 16px; height: 16px; accent-color: #1a8f4a; }

/* Mini Cards */
.holiest-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.holiest-mini-card { padding: 1.35rem 1.25rem; border-radius: 20px; }
.holiest-mini-title { font-weight: 800; font-size: 0.9rem; margin-bottom: 0.55rem; color: rgba(35, 35, 38, 0.9); }
.holiest-mini-muted { color: rgba(35, 35, 38, 0.45); font-weight: 700; font-size: 0.78rem; }
.holiest-mini-note { color: var(--h-muted); font-size: 0.9rem; line-height: 1.55; }
.holiest-mini-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; color: rgba(35, 35, 38, 0.8); font-size: 0.9rem; }
.holiest-mini-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.holiest-mini-arrow { font-weight: 900; font-size: 0.95rem; }
.holiest-mini-arrow.up { color: #1a8f4a; }
.holiest-mini-arrow.down { color: #e35a5a; }
.holiest-mini-arrow.flat { color: #8F5C3E; }

/* Chat, Messages, Recos */
.holiest-chat { display: grid; gap: 0.75rem; }
.holiest-bubble { padding: 0.85rem 0.95rem; border-radius: 16px; font-size: 0.92rem; line-height: 1.55; }
.holiest-bubble--user { background: rgba(35,35,38,0.85); color: #fff; justify-self: start; max-width: 92%; }
.holiest-bubble--ai { background: rgba(245,241,234,0.85); color: rgba(35,35,38,0.85); border: 1px solid rgba(0,0,0,0.05); justify-self: start; max-width: 92%; }
.holiest-chat-input { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; margin-top: 0.25rem; }
.holiest-input { width: 100%; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.9); padding: 0.7rem 0.85rem; font-size: 0.92rem; outline: none; }
.holiest-input:focus { border-color: rgba(143, 92, 62, 0.35); box-shadow: 0 0 0 4px rgba(212, 154, 125, 0.18); }
.holiest-button { border: none; border-radius: 14px; padding: 0.7rem 1rem; font-weight: 800; font-size: 0.9rem; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--h-bronze-1), var(--h-bronze-2)); box-shadow: 0 16px 40px rgba(143, 92, 62, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.holiest-button:hover { transform: translateY(-1px); box-shadow: 0 20px 52px rgba(143, 92, 62, 0.32); }
.holiest-button--pill { border-radius: 999px; width: 100%; }

.holiest-msgs { display: grid; gap: 0.9rem; }
.holiest-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.holiest-msg-avatar { width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.06); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: rgba(35,35,38,0.75); }
.holiest-msg-avatar--brand { color: #8F5C3E; }
.holiest-msg-title { font-weight: 900; font-size: 0.9rem; }
.holiest-msg-text { color: var(--h-muted); font-size: 0.92rem; margin-top: 0.15rem; line-height: 1.5; }

.holiest-recos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.holiest-reco { border: 1px solid rgba(0,0,0,0.05); border-radius: 18px; padding: 1rem; background: rgba(255,255,255,0.75); }
.holiest-reco-img { height: 70px; border-radius: 14px; background: linear-gradient(135deg, rgba(212,154,125,0.25), rgba(143,92,62,0.12)); margin-bottom: 0.8rem; }
.holiest-reco-img--dark { background: linear-gradient(135deg, rgba(35,35,38,0.18), rgba(143,92,62,0.12)); }
.holiest-reco-title { font-weight: 900; font-size: 0.95rem; }
.holiest-reco-desc { color: var(--h-muted); font-size: 0.88rem; margin: 0.25rem 0 0.9rem; line-height: 1.5; }

/* Mobile Utilities & Elements (Hidden on desktop) */
.holiest-mobile-only { display: none; }

.holiest-mobile-brand {
	font-family: "Playfair Display", "Times New Roman", serif;
	letter-spacing: 0.18em;
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
}

/* Mobile "Scan Product" Card Styling */
.holiest-scan-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: linear-gradient(135deg, var(--h-bronze-1), var(--h-bronze-2));
	color: #fff;
	padding: 1.2rem 1.4rem;
	border-radius: 20px;
	margin-bottom: 1.5rem;
	box-shadow: 0 20px 50px rgba(143, 92, 62, 0.3);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.holiest-scan-card:active { transform: scale(0.98); }

.holiest-scan-ico {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(255,255,255,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(255,255,255,0.2);
}
.holiest-scan-ico svg { width: 24px; height: 24px; stroke: #fff; }

.holiest-scan-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.holiest-scan-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.holiest-scan-sub { font-size: 0.85rem; line-height: 1.35; color: rgba(255,255,255,0.9); }
.holiest-scan-arrow { margin-left: auto; font-size: 1.6rem; font-weight: 300; opacity: 0.8; }


/* =========================================
   MOBILE RESPONSIVE RULES (Max Width 900px)
   This transforms the desktop layout to phone
   ========================================= */
@media (max-width: 900px) {
	/* Hide Sidebar */
	.holiest-app-sidebar { display: none; }

	/* Layout Stack */
	.holiest-app-layout { display: block; }
	.holiest-app-main { padding: 1.2rem 1rem 3rem; }
	.holiest-app-main-inner { max-width: 500px; }

	/* Mobile Only Elements Visible */
	.holiest-mobile-only { display: flex; }

	/* Header Adjustment */
	.holiest-app-header {
		margin-bottom: 1rem;
		padding-bottom: 0.5rem;
		justify-content: space-between;
		align-items: center;
	}
	
	/* Tabs in header */
	.holiest-top-tabs {
		gap: 1.2rem;
		/* Center Tabs if needed, or hide excess text on very small screens */
	}
	.holiest-top-tab { font-size: 0.85rem; }

	/* Hero */
	.holiest-hero {
		grid-template-columns: 1fr;
		gap: 0.8rem;
		text-align: center;
		margin-bottom: 1.2rem;
	}
	.holiest-hero-title { font-size: 2.1rem; }
	.holiest-hero-lead { font-size: 0.96rem; }
	.holiest-hero-desc { margin-left: auto; margin-right: auto; }
	.holiest-checklist { justify-content: center; display: flex; flex-wrap: wrap; gap: 0.8rem; }
	
	/* Grids to Single Column */
	.holiest-dash-grid--2col,
	.holiest-dash-grid--3col,
	.holiest-dash-grid--planrow {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	/* Health Card Stacked */
	.holiest-health {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
		gap: 1rem;
	}
	.holiest-gauge { margin: 0; width: 150px; height: 150px; }
	.holiest-gauge-val { font-size: 2.8rem; }
	.holiest-health-text { margin-left: auto; margin-right: auto; }

	/* Focus Items */
	.holiest-focus-list {
		/* Show items in a row on mobile if preferred, or keep list */
		display: grid;
		grid-template-columns: 1fr; 
	}
	.holiest-focus-item {
		background: rgba(245,241,234,0.5);
		padding: 1rem;
		border-radius: 16px;
		border: 1px solid rgba(0,0,0,0.03);
		margin-bottom: 0.5rem;
		gap: 0.6rem;
	}

	/* Plan Row Mobile */
	.holiest-plan-row {
		padding: 0.8rem;
		background: rgba(245,241,234,0.4);
		border-radius: 14px;
	}

	/* Mini Grid */
	.holiest-mini-grid { grid-template-columns: 1fr; }

	/* Recos Slider (Horizontal scroll for products) */
	.holiest-recos {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.5rem;
		margin: 0 -0.5rem; /* Optical align */
	}
	.holiest-reco {
		min-width: 85%;
		scroll-snap-align: center;
		margin: 0 0.5rem;
		box-shadow: 0 10px 30px rgba(0,0,0,0.04);
	}
}

@media (max-width: 600px) {
	.holiest-app-header {
		display: grid;
		grid-template-columns: 1fr auto; /* Logo + Avatar */
		gap: 1rem;
	}
	.holiest-mobile-brand { grid-column: 1; }
	.holiest-top-user { grid-column: 2; }
	.holiest-top-tabs { 
		grid-column: 1 / -1; 
		justify-content: space-between;
		width: 100%;
		order: 3;
		border-top: 1px solid rgba(0,0,0,0.05);
		padding-top: 0.5rem;
	}
}

/* HOLIEST ADMIN DASHBOARD (desktop + iPad) */
.holiest-admin-layout,
.holiest-admin-shell {
    --ha-bg: #f5f1ea;
    --ha-card: #ffffff;
    --ha-text: #232326;
    --ha-muted: rgba(35, 35, 38, 0.6);
    --ha-border: rgba(0, 0, 0, 0.05);
    --ha-bronze-1: #D49A7D;
    --ha-bronze-2: #8F5C3E;
    --ha-shadow: 0 10px 30px rgba(0,0,0,0.04);
    
    display: flex;
    min-height: 100vh;
    background-color: var(--ha-bg);
    color: var(--ha-text);
    font-family: "Inter", sans-serif;
    box-sizing: border-box;
}

.holiest-admin-layout *,
.holiest-admin-shell *,
.holiest-admin-layout *::before,
.holiest-admin-shell *::before,
.holiest-admin-layout *::after,
.holiest-admin-shell *::after {
    box-sizing: inherit;
}

/* Sidebar */
.holiest-admin-sidebar {
    width: 270px;
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--ha-border);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

.holiest-admin-sidebar-header {
    margin-bottom: 2.5rem;
    padding-left: 0.5rem;
}

.holiest-admin-brand,
.holiest-admin-brand-title {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ha-text);
}

.holiest-admin-sub,
.holiest-admin-brand-sub {
    font-size: 0.85rem;
    color: var(--ha-muted);
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.holiest-admin-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.holiest-admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 99px;
    color: rgba(35, 35, 38, 0.75);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.holiest-admin-nav a:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ha-text);
}

.holiest-admin-nav a.is-active {
    background: linear-gradient(90deg, rgba(212, 154, 125, 0.15), rgba(255, 255, 255, 0.8));
    color: #8F5C3E;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(143, 92, 62, 0.08);
}

.holiest-admin-nav li.is-active a {
    background: linear-gradient(90deg, rgba(212, 154, 125, 0.15), rgba(255, 255, 255, 0.8));
    color: #8F5C3E;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(143, 92, 62, 0.08);
}

.holiest-admin-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.holiest-admin-sidebar-footer {
    margin-top: auto;
    padding-top: 2rem;
    padding-left: 1rem;
}

.holiest-admin-help-link {
    font-size: 0.85rem;
    color: var(--ha-muted);
    text-decoration: none;
}
.holiest-admin-help-link span {
    font-weight: 600;
    color: var(--ha-text);
}

/* Main Area */
.holiest-admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent grid blowout */
}

/* Top Bar */
.holiest-admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 2.5rem;
    background: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.holiest-admin-context {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.holiest-context-brand {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}
.holiest-context-label {
    font-size: 0.8rem;
    color: var(--ha-muted);
}

.holiest-admin-search {
    flex: 0 0 300px;
    position: relative;
    display: flex;
    align-items: center;
}
.holiest-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--ha-muted);
    pointer-events: none;
}
.holiest-admin-search input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.6rem;
    border-radius: 99px;
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    color: var(--ha-text);
    outline: none;
    transition: background 0.2s;
}
.holiest-admin-search input:focus {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
}

.holiest-admin-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--ha-text);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Content */
.holiest-admin-content {
    padding: 2.5rem 2.5rem 4rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.holiest-admin-heading {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 500;
    margin: 0 0 2rem;
    color: var(--ha-text);
}

/* KPIs */
.holiest-admin-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}

.holiest-kpi-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--ha-shadow);
    border: 1px solid transparent;
    transition: transform 0.2s;
}
.holiest-kpi-card:hover {
    transform: translateY(-3px);
}

.holiest-kpi-card--urgent {
    background: linear-gradient(135deg, #fffcfb, #fff7f2);
    border-color: rgba(227, 90, 90, 0.15);
    box-shadow: 0 12px 30px rgba(227, 90, 90, 0.08);
}
.holiest-kpi-card--urgent .holiest-kpi-val {
    color: #c9564c;
    text-shadow: 0 4px 12px rgba(201, 86, 76, 0.15);
}

.holiest-kpi-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--ha-text);
}

.holiest-kpi-val {
    font-family: "Playfair Display", serif;
    font-size: 2.8rem;
    line-height: 1;
    font-weight: 500;
    color: #8F5C3E;
    margin-bottom: 0.5rem;
}

.holiest-kpi-sub {
    font-size: 0.8rem;
    color: var(--ha-muted);
}

/* Main Grid */
.holiest-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr);
    gap: 1.5rem;
    align-items: start;
}

.holiest-admin-card {
    background: var(--ha-card);
    border-radius: 20px;
    box-shadow: var(--ha-shadow);
    padding: 1.8rem;
    margin-bottom: 1.5rem;
}

.holiest-card-header {
    margin-bottom: 1.5rem;
}

.holiest-card-title {
    font-family: "Playfair Display", serif;
    font-size: 1.25rem;
    margin: 0;
    font-weight: 600;
}
.holiest-card-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ha-text);
    margin-top: 0.2rem;
    display: block;
}

/* Lists & Rows */
.holiest-admin-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.holiest-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.holiest-list-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.holiest-list-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.holiest-list-main {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ha-text);
}
.holiest-list-sub {
    font-size: 0.85rem;
    color: var(--ha-muted);
}

.holiest-btn-bronze {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.2rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--ha-bronze-1), var(--ha-bronze-2));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
    box-shadow: 0 4px 10px rgba(143, 92, 62, 0.2);
}
.holiest-btn-bronze:hover {
    opacity: 0.9;
}

.holiest-list-tags {
    display: flex;
    gap: 0.5rem;
}

.holiest-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 99px;
}
.holiest-tag--red {
    background: #fce8e6;
    color: #c9564c;
}
.holiest-tag--bronze {
    background: #f4eee9;
    color: #8F5C3E;
}

/* System Health */
.holiest-sys-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.holiest-sys-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
}
.holiest-sys-val.is-ok {
    color: #2e7d32;
    font-weight: 600;
}

.holiest-sys-disk {
    margin-top: 0.5rem;
}
.holiest-sys-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.holiest-progress-track {
    width: 100%;
    height: 6px;
    background: #f0f0f0;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.holiest-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--ha-bronze-1), var(--ha-bronze-2));
}
.holiest-sys-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--ha-muted);
}

/* Responsive Rules */
@media (max-width: 1023px) {
    .holiest-admin-grid {
        grid-template-columns: 1fr;
    }
    
    .holiest-admin-sidebar {
        width: 240px;
        padding: 1.5rem 1rem;
    }
    
    .holiest-admin-content {
        padding: 2rem 1.5rem;
    }
    
    .holiest-admin-kpis {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 768px) {
    .holiest-admin-layout {
        flex-direction: column;
    }
    .holiest-admin-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--ha-border);
    }
    .holiest-admin-topbar {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .holiest-admin-search {
        order: 3;
        flex: 1 0 100%;
    }
    .holiest-admin-content {
        padding: 1.5rem 1rem;
    }
}

/* HOLIEST STAFF DASHBOARD (desktop + iPad + mobile) */
.holiest-staff-layout {
	--hs-bg: #f5f1ea;
	--hs-card: #ffffff;
	--hs-text: #232326;
	--hs-muted: rgba(35,35,38,0.6);
	--hs-border: rgba(0,0,0,0.06);
	--hs-bronze-from: #D49A7D;
	--hs-bronze-to: #8F5C3E;
	--hs-radius: 22px;
	--hs-shadow: 0 10px 30px rgba(0,0,0,0.04);

	display: flex;
	min-height: 100vh;
	background-color: var(--hs-bg);
	color: var(--hs-text);
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.holiest-staff-layout *, 
.holiest-staff-layout *::before, 
.holiest-staff-layout *::after {
	box-sizing: inherit;
}

/* --- SIDEBAR (Desktop/iPad) --- */
.holiest-staff-sidebar {
	width: 260px;
	height: 100vh;
	position: sticky;
	top: 0;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-right: 1px solid var(--hs-border);
	display: flex;
	flex-direction: column;
	padding: 2.2rem 1.6rem;
	overflow-y: auto;
	z-index: 20;
}

.holiest-staff-sidebar-header {
	margin-bottom: 2.5rem;
}

.holiest-staff-brand {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hs-text);
	margin-bottom: 1.5rem;
}

.holiest-staff-hello {
	font-family: "Playfair Display", serif;
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.holiest-staff-role {
	font-size: 0.85rem;
	color: var(--hs-muted);
}

.holiest-staff-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.holiest-staff-nav a {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.75rem 1rem;
	border-radius: 99px;
	color: rgba(35, 35, 38, 0.75);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: all 0.2s ease;
}

.holiest-staff-nav a:hover {
	background: rgba(255, 255, 255, 0.6);
	color: var(--hs-text);
}

.holiest-staff-nav a.is-active {
	background: linear-gradient(90deg, rgba(212, 154, 125, 0.15), rgba(255, 255, 255, 0.8));
	color: #8F5C3E;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(143, 92, 62, 0.08);
}

.holiest-staff-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px; 
	height: 20px;
	opacity: 0.85;
}

.holiest-staff-sidebar-footer {
	margin-top: auto;
	padding-top: 2rem;
}

.holiest-staff-footer-link {
	font-size: 0.85rem;
	color: var(--hs-muted);
	text-decoration: none;
}

/* --- MAIN SHELL --- */
.holiest-staff-shell {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* --- TOP BAR --- */
.holiest-staff-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.2rem 2.5rem;
	background: rgba(255,255,255,0.3);
	border-bottom: 1px solid rgba(0,0,0,0.03);
}

.holiest-staff-top-left {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
}

.holiest-staff-brand-text {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
}

.holiest-staff-context-label {
	font-size: 0.8rem;
	color: var(--hs-muted);
}

.holiest-staff-mobile-title {
	display: none; /* Desktop hidden */
}

.holiest-staff-search {
	position: relative;
	width: 320px;
}
.holiest-staff-search svg {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hs-muted);
	pointer-events: none;
}
.holiest-staff-search input {
	width: 100%;
	padding: 0.65rem 1rem 0.65rem 2.6rem;
	border-radius: 99px;
	border: 1px solid rgba(0,0,0,0.06);
	background: rgba(255,255,255,0.6);
	font-size: 0.9rem;
	color: var(--hs-text);
	outline: none;
}
.holiest-staff-search input:focus {
	background: #fff;
	border-color: rgba(0,0,0,0.15);
}

.holiest-staff-top-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.holiest-staff-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--hs-text);
}

.holiest-staff-logout-link {
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	color: var(--hs-text);
}

/* --- MAIN CONTENT --- */
.holiest-staff-main {
	padding: 2.5rem 3rem 4rem;
	max-width: 1200px;
	width: 100%;
}

.holiest-staff-page-title {
	font-family: "Playfair Display", serif;
	font-size: 2rem;
	font-weight: 500;
	margin: 0 0 2rem;
	color: var(--hs-text);
}

/* Grid Layout */
.holiest-staff-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 1.8rem;
	align-items: start;
}

.holiest-staff-col-primary, 
.holiest-staff-col-secondary {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

/* Cards Generic */
.holiest-staff-card {
	background: var(--hs-card);
	border-radius: var(--hs-radius);
	box-shadow: var(--hs-shadow);
	padding: 1.8rem;
	position: relative;
}

.holiest-staff-card-title {
	font-family: "Playfair Display", serif;
	font-size: 1.25rem;
	margin-bottom: 1.2rem;
	font-weight: 600;
}

/* Hero Card (Next Client) */
.holiest-staff-hero-card {
	padding: 2rem;
}

.holiest-staff-next-client-row {
	font-size: 1.6rem;
	margin-bottom: 0.3rem;
	font-weight: 500;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
}
.holiest-staff-nc-time { font-weight: 700; }

.holiest-staff-nc-pkg {
	font-size: 1rem;
	color: var(--hs-muted);
	margin-bottom: 1rem;
}

.holiest-staff-nc-status {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.8rem;
	font-size: 0.95rem;
}
.holiest-staff-status-pill {
	background: #fdf1e8;
	color: #8F5C3E;
	padding: 0.2rem 0.8rem;
	border-radius: 99px;
	font-size: 0.85rem;
	font-weight: 600;
}

.holiest-staff-btn-primary {
	width: 100%;
	padding: 0.9rem;
	background: linear-gradient(135deg, var(--hs-bronze-from), var(--hs-bronze-to));
	color: #fff;
	border: none;
	border-radius: 99px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(143, 92, 62, 0.25);
	transition: transform 0.15s;
}
.holiest-staff-btn-primary:hover {
	transform: translateY(-2px);
}

/* Upcoming Mini Cards */
.holiest-staff-mini-card {
	padding: 1.2rem 1.5rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	font-size: 0.95rem;
	color: var(--hs-text);
}
.holiest-staff-mini-time { font-weight: 700; min-width: 50px; }

/* Timeline (Today) */
.holiest-staff-timeline {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.holiest-staff-timeline-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.95rem;
}
.hs-time { width: 50px; font-weight: 600; color: var(--hs-muted); }
.hs-marker {
	width: 8px; height: 8px; 
	border-radius: 50%; 
	background: #e0e0e0;
	position: relative;
}
.holiest-staff-timeline-row:first-child .hs-marker {
	background: var(--hs-bronze-to);
	box-shadow: 0 0 0 3px rgba(143, 92, 62, 0.15);
}
.hs-name { font-weight: 600; }

/* Tasks List */
.holiest-staff-task-list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.holiest-staff-task-row {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.8rem;
	background: #fbf9f6;
	border-radius: 12px;
	font-size: 0.9rem;
}
.hs-task-icon { font-size: 1.1rem; }
.hs-task-text { flex: 1; }
.hs-task-action { 
	font-size: 0.8rem; 
	color: var(--hs-bronze-to); 
	font-weight: 600; 
	cursor: pointer;
}

/* Mobile Specifics (Hidden by default) */
.holiest-staff-bottom-nav, 
.holiest-staff-mobile-welcome {
	display: none;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* iPad Landscape & smaller desktops (1024 - 1279px) */
@media (max-width: 1279px) {
	.holiest-staff-main {
		padding: 2rem 2rem 3rem;
	}
	.holiest-staff-grid {
		gap: 1.5rem;
	}
}

/* iPad Portrait (768 - 1023px) */
@media (max-width: 1023px) {
	.holiest-staff-grid {
		grid-template-columns: 1fr; /* Stack columns */
	}
	.holiest-staff-sidebar {
		width: 200px;
		padding: 1.5rem 1rem;
	}
	.holiest-staff-search { width: 240px; }
	.holiest-staff-card-title { font-size: 1.2rem; }
}

/* Mobile (Phone) (<= 767px) */
@media (max-width: 767px) {
	/* Hide Desktop Elements */
	.holiest-staff-sidebar { display: none; }
	.holiest-staff-page-title { display: none; }
	.holiest-staff-top-left .holiest-staff-context-label { display: none; }
	.holiest-staff-search { display: none; }
	.holiest-staff-logout-link { display: none; }
	.desktop-only { display: none; }

	/* Show Mobile Elements */
	.holiest-staff-bottom-nav { display: flex; }
	.holiest-staff-mobile-welcome { display: block; }
	.holiest-staff-mobile-title {
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-weight: 600;
		font-size: 1rem;
	}

	/* Adjust Layout */
	.holiest-staff-main {
		padding: 1rem 1rem 6rem; /* Extra bottom pad for nav */
	}
	
	.holiest-staff-topbar {
		padding: 0.8rem 1.2rem;
		justify-content: space-between;
		position: relative;
	}
	
	.holiest-staff-avatar {
		width: 30px; height: 30px;
		font-size: 0.8rem;
	}

	/* Mobile Cards Styling */
	.holiest-staff-card {
		padding: 1.5rem 1.2rem;
		border-radius: 18px;
	}

	/* Welcome Card */
	.holiest-staff-mobile-welcome {
		margin-bottom: 1.2rem;
		background: #fff;
	}
	.holiest-staff-welcome-title {
		font-family: "Playfair Display", serif;
		font-size: 1.8rem;
		margin-bottom: 0.5rem;
	}
	.holiest-staff-welcome-sub {
		color: var(--hs-muted);
		font-size: 0.95rem;
		margin-bottom: 1rem;
	}
	.holiest-staff-welcome-list {
		list-style: none;
		padding: 0;
		margin: 0 0 1.2rem;
		font-size: 0.9rem;
		color: var(--hs-text);
		line-height: 1.6;
	}
	.holiest-staff-welcome-link {
		color: #8F5C3E;
		font-weight: 600;
		font-size: 0.9rem;
		text-decoration: none;
	}

	/* Next Client Mobile adjustments */
	.holiest-staff-next-client-row {
		font-size: 1.3rem;
		flex-direction: column;
		gap: 0;
	}
	
	/* Tasks Mobile */
	.holiest-staff-task-row {
		background: transparent;
		border-bottom: 1px solid rgba(0,0,0,0.05);
		padding: 0.8rem 0;
		border-radius: 0;
	}
	.holiest-staff-task-row:after {
		content: "›";
		font-size: 1.4rem;
		color: var(--hs-muted);
		line-height: 1;
	}

	/* Bottom Nav */
	.holiest-staff-bottom-nav {
		position: fixed;
		bottom: 0; left: 0; right: 0;
		background: rgba(255,255,255,0.95);
		backdrop-filter: blur(10px);
		border-top: 1px solid rgba(0,0,0,0.05);
		padding: 0.6rem 1rem 1.2rem; /* Safe area padding */
		display: flex;
		justify-content: space-between;
		z-index: 100;
	}
	
	.holiest-staff-bottom-nav a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.3rem;
		text-decoration: none;
		color: #999;
		font-size: 0.7rem;
		font-weight: 500;
		min-width: 50px;
	}
	
	.holiest-staff-bottom-nav a.is-active {
		color: var(--hs-text);
	}
	.holiest-staff-bottom-nav a.is-active svg {
		stroke: #8F5C3E;
	}
}

/* HOLIEST SHOP / E-POOD (Brand Page Template) */

/* Page Wrapper & Shell */
.holiest-shop-page-wrapper {
	padding: 3rem 1.5rem 5rem;
	background-color: #f5f1ea; /* Matches global body bg */
	min-height: 100vh;
	display: flex;
	justify-content: center;
}

.holiest-shop-shell {
	width: 100%;
	max-width: 1240px;
	background-color: #f9f6f0; /* Slightly darker porcelain per mockup */
	border-radius: 32px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.06);
	overflow: hidden;
	padding: 0; /* Inner padding handled by children if needed */
}

.holiest-shop-inner {
	width: 100%;
}

/* Header (Brand + Hero) */
.holiest-shop-header--brand {
	display: grid;
	grid-template-columns: 32% 1fr; /* Approx 1/3 vs 2/3 */
	min-height: 320px;
	border-bottom: 1px solid rgba(0,0,0,0.03);
}

.holiest-shop-brand-panel {
	background-color: #fcfbf9; /* Lighter panel for logo */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.holiest-shop-brand-logo {
	font-family: "Playfair Display", serif;
	font-weight: 800;
	font-size: 2.2rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #232326;
	margin: 0;
}

.holiest-shop-hero-panel {
	position: relative;
	overflow: hidden;
	border-radius: 0 32px 0 0; /* Top-right corner matches shell */
}

.holiest-shop-hero-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Main Content Area */
.holiest-shop-main {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2rem;
	padding: 3rem;
	align-items: start;
}

/* Sidebar Filters */
.holiest-shop-filters {
	padding-right: 1rem;
}

.holiest-shop-filter-heading {
	font-size: 0.9rem;
	font-weight: 700;
	color: #232326;
	margin: 0 0 1.2rem;
	font-family: "Inter", sans-serif;
}

.holiest-shop-filter-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.holiest-filter-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem 0.5rem;
	gap: 0.5rem;
	border-radius: 12px;
	color: rgba(35,35,38,0.6);
	transition: all 0.2s ease;
	font-size: 0.8rem;
}

.holiest-filter-link:hover,
.holiest-filter-link.is-active {
	color: #232326;
}

/* Mockup shows just text/icon rows in sidebar, simplified styling: */
.holiest-filter-link {
	flex-direction: row;
	justify-content: flex-start;
	text-align: left;
	padding: 0.6rem 0.8rem;
	gap: 0.8rem;
}

.holiest-filter-icon svg {
	display: block;
	opacity: 0.7;
}

.holiest-filter-label {
	font-weight: 500;
}

/* Mobile Toggle */
.holiest-shop-filters-toggle {
	display: none; /* Hidden on desktop */
	width: 100%;
	padding: 0.8rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 12px;
	font-weight: 600;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	font-size: 0.8rem;
	cursor: pointer;
}

/* Product Grid */
.holiest-shop-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Product Card */
.holiest-product-card {
	background: #fff;
	border-radius: 24px;
	padding: 1.8rem 1.5rem;
	box-shadow: 0 15px 40px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.holiest-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.holiest-product-media {
	margin-bottom: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180px; /* Fixed height for uniformity */
}

.holiest-product-img-placeholder img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.holiest-product-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.holiest-product-title {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
	color: #232326;
	line-height: 1.2;
}

.holiest-product-price {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.8rem;
	color: #232326;
}

.holiest-product-desc {
	font-size: 0.85rem;
	color: rgba(35,35,38,0.6);
	margin: 0 0 1.5rem;
	line-height: 1.5;
	flex: 1; /* Pushes button down */
}

.holiest-product-button {
	display: block;
	text-align: center;
	padding: 0.8rem 1.2rem;
	border-radius: 99px;
	background: linear-gradient(135deg, #D49A7D, #8F5C3E);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 10px 20px rgba(143,92,62,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.holiest-product-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(143,92,62,0.35);
	color: #fff;
}

/* RESPONSIVE: iPad Landscape (1024 - 1199px) */
@media (max-width: 1199px) {
	.holiest-shop-main {
		grid-template-columns: 200px 1fr;
		padding: 2rem;
	}
	.holiest-shop-products-grid {
		gap: 1rem;
	}
}

/* RESPONSIVE: iPad Portrait (768 - 1023px) */
@media (max-width: 1023px) {
	.holiest-shop-header--brand {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.holiest-shop-brand-panel {
		padding: 3rem 1.5rem;
		justify-content: flex-start;
	}
	.holiest-shop-hero-panel {
		height: 300px;
		border-radius: 0;
	}
	
	.holiest-shop-main {
		grid-template-columns: 1fr; /* Stack filters on top */
		gap: 2rem;
	}
	
	.holiest-shop-filter-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
	
	.holiest-filter-link {
		background: #fff;
		border: 1px solid rgba(0,0,0,0.05);
		border-radius: 99px;
		padding: 0.5rem 1rem;
	}
	
	.holiest-shop-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* RESPONSIVE: Mobile (< 768px) */
@media (max-width: 767px) {
	.holiest-shop-page-wrapper {
		padding: 1rem;
	}
	.holiest-shop-shell {
		border-radius: 24px;
	}
	
	.holiest-shop-brand-panel {
		padding: 2rem 1.5rem;
	}
	.holiest-shop-hero-panel {
		height: 220px;
	}
	
	.holiest-shop-main {
		padding: 1.5rem;
	}
	
	/* Hide filters by default, use toggle */
	.holiest-shop-filters {
		display: none;
		margin-bottom: 1.5rem;
	}
	.holiest-shop-filters.is-open {
		display: block;
	}
	
	.holiest-shop-filters-toggle {
		display: block;
	}
	
	.holiest-shop-filter-list {
		flex-direction: column;
		gap: 0.5rem;
	}
	.holiest-filter-link {
		border-radius: 12px;
		justify-content: flex-start;
	}
	
	.holiest-shop-products-grid {
		grid-template-columns: 1fr; /* Single column */
		gap: 2rem;
	}
	
	.holiest-product-card {
		box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	}
}

/* HOLIEST CLIENT DASHBOARD (desktop + tablet + mobile) */
.holiest-app-layout--client {
	--h-bg: #f5f1ea;
	--h-card: #ffffff;
	--h-text: #232326;
	--h-muted: rgba(35,35,38,0.65);
	--h-border: rgba(0,0,0,0.06);
	--h-bronze-from: #D49A7D;
	--h-bronze-to: #8F5C3E;
	--h-shadow: 0 10px 30px rgba(0,0,0,0.04);
	--h-radius: 22px;

	display: flex;
	min-height: 100vh;
	background-color: var(--h-bg);
	color: var(--h-text);
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.holiest-app-layout--client *, 
.holiest-app-layout--client *::before, 
.holiest-app-layout--client *::after {
	box-sizing: inherit;
}

/* Sidebar */
.holiest-app-sidebar {
	width: 270px;
	flex-shrink: 0;
	background-color: #fcfbf9;
	border-right: 1px solid var(--h-border);
	padding: 2.2rem 1.8rem;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.holiest-sidebar-top {
	margin-bottom: 2rem;
}

.holiest-sidebar-hello {
	font-family: "Playfair Display", serif;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
}

.holiest-sidebar-sub {
	font-size: 0.85rem;
	color: var(--h-muted);
	margin-top: 0.2rem;
}

.holiest-app-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.holiest-app-nav a {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.7rem 1rem;
	border-radius: 99px;
	color: rgba(35, 35, 38, 0.75);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: all 0.2s ease;
}

.holiest-app-nav a:hover {
	background: rgba(255, 255, 255, 0.6);
	color: var(--h-text);
}

.holiest-app-nav a.is-active {
	background: linear-gradient(90deg, rgba(212, 154, 125, 0.15), rgba(255, 255, 255, 0.8));
	color: #8F5C3E;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(143, 92, 62, 0.08);
}

.holiest-nav-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	opacity: 0.85;
}

.holiest-sidebar-footer {
	margin-top: auto;
	padding-top: 2rem;
}
.holiest-sidebar-help {
	font-size: 0.85rem; color: var(--h-muted);
}
.holiest-sidebar-help span {
	font-weight: 600; color: var(--h-text);
}

/* Main Area */
.holiest-app-main {
	flex: 1;
	min-width: 0;
	padding: 2rem 2.5rem 4rem;
}

.holiest-app-main-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* Top Header */
.holiest-app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	background: rgba(255,255,255,0.4);
	padding: 0.8rem 1.5rem;
	border-radius: 99px;
}

.holiest-mobile-only { display: none; }

.holiest-top-tabs {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.holiest-top-tab {
	font-size: 0.9rem;
	color: var(--h-muted);
	font-weight: 500;
	padding: 0.4rem 0;
	position: relative;
}

.holiest-top-tab:hover {
	color: var(--h-text);
}

.holiest-top-tab.is-active {
	color: var(--h-text);
	font-weight: 600;
}

.holiest-top-tab.is-active::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 2px;
	background: #8F5C3E;
	border-radius: 2px;
}

.holiest-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Hero */
.holiest-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 2rem;
	align-items: start;
	margin-bottom: 2rem;
}

.holiest-hero-title {
	font-family: "Playfair Display", serif;
	font-size: 2.2rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	line-height: 1.1;
}

.holiest-hero-lead {
	font-size: 1.05rem;
	font-weight: 600;
	color: rgba(35,35,38,0.9);
	margin: 0 0 0.8rem;
}

.holiest-hero-desc {
	font-size: 0.95rem;
	color: var(--h-muted);
	max-width: 48ch;
	line-height: 1.6;
}

.holiest-checklist {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: rgba(35,35,38,0.8);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.holiest-checklist li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.holiest-check-ico {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	color: #8F5C3E;
}

/* Scanner Card (Mobile/Tablet Only) */
.holiest-scan-card {
	display: none; /* Hidden on desktop */
	align-items: center;
	gap: 1rem;
	background: #ffffff;
	padding: 1.2rem 1.4rem;
	border-radius: 20px;
	margin-bottom: 1.5rem;
	box-shadow: var(--h-shadow);
	text-decoration: none;
	color: var(--h-text);
}

.holiest-scan-ico {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(0,0,0,0.03);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--h-text);
}
.holiest-scan-ico svg { width: 24px; height: 24px; }

.holiest-scan-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
}
.holiest-scan-title { font-weight: 700; font-size: 1.05rem; }
.holiest-scan-sub { font-size: 0.85rem; color: var(--h-muted); line-height: 1.3; }
.holiest-scan-arrow { font-size: 1.5rem; color: var(--h-muted); }

/* Dashboard Grids */
.holiest-dash-grid {
	display: grid;
	gap: 1.5rem;
}
.holiest-dash-grid--2col { grid-template-columns: 1fr 1fr; }
.holiest-dash-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.holiest-dash-grid--planrow { grid-template-columns: 1.2fr 1fr; align-items: start; margin-top: 1.5rem; }
.holiest-dash-grid--bottom { margin-top: 1.5rem; }

/* Cards Base */
.holiest-card, .holiest-dash-card {
	background: var(--h-card);
	border-radius: var(--h-radius);
	box-shadow: var(--h-shadow);
	padding: 1.6rem 1.8rem;
}

.holiest-card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1.2rem;
}

.holiest-card-title-sm {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.1rem;
}

.holiest-card-link {
	font-size: 0.8rem;
	color: #8F5C3E;
	font-weight: 600;
	text-decoration: none;
}

/* Health Card */
.holiest-health {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1.5rem;
	align-items: center;
}
.holiest-gauge { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.holiest-gauge-svg { width: 100%; height: 100%; transform: rotate(220deg); }
.holiest-gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.holiest-gauge-val { font-family: "Playfair Display", serif; font-size: 3rem; font-weight: 600; }

.holiest-health-meta { display: flex; flex-direction: column; gap: 0.5rem; }
.holiest-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(245,241,234,0.6);
	padding: 0.3rem 0.8rem;
	border-radius: 99px;
	width: fit-content;
}
.holiest-pill-label { font-size: 0.8rem; color: var(--h-muted); font-weight: 600; }
.holiest-pill-val { font-size: 0.85rem; font-weight: 700; color: #1a8f4a; }
.holiest-health-text { font-size: 0.9rem; color: var(--h-muted); line-height: 1.5; margin: 0.5rem 0 0; }

/* Focus List */
.holiest-focus-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.holiest-focus-item { display: grid; grid-template-columns: 12px 1fr; gap: 0.8rem; align-items: start; }
.holiest-focus-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.dot-green { background: #1a8f4a; }
.dot-yellow { background: #f2b43b; }
.dot-red { background: #e35a5a; }
.holiest-focus-title { font-weight: 700; font-size: 0.95rem; color: var(--h-text); }
.holiest-focus-desc { font-size: 0.85rem; color: var(--h-muted); margin-top: 0.1rem; line-height: 1.4; }

/* Plan */
.holiest-plan { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.8rem; }
.holiest-plan-row {
	display: grid; grid-template-columns: 20px 50px 1fr; gap: 0.8rem;
	align-items: center; cursor: pointer;
	padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.03);
}
.holiest-plan-time { font-weight: 700; font-size: 0.9rem; }
.holiest-plan-text { font-size: 0.9rem; color: rgba(35,35,38,0.85); }
.holiest-check { width: 16px; height: 16px; accent-color: #8F5C3E; }
.holiest-plan-footer { text-align: right; }
.holiest-plan-note { font-size: 0.85rem; color: var(--h-muted); text-align: left; margin-bottom: 0.5rem; }

/* Mini Grid */
.holiest-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.holiest-mini-card { padding: 1.2rem; border-radius: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.holiest-mini-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.5rem; line-height: 1.3; }
.holiest-mini-muted { color: rgba(0,0,0,0.4); font-weight: 600; font-size: 0.75rem; }
.holiest-mini-note { font-size: 0.85rem; color: var(--h-muted); line-height: 1.4; }
.holiest-mini-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 0.85rem; }
.holiest-mini-list li { display: flex; justify-content: space-between; align-items: center; }
.holiest-mini-arrow { font-weight: 800; font-size: 0.9rem; }
.up { color: #1a8f4a; } .down { color: #e35a5a; } .flat { color: #8F5C3E; }

/* Chat */
.holiest-chat { display: flex; flex-direction: column; gap: 0.8rem; }
.holiest-bubble { padding: 0.8rem 1rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; max-width: 90%; }
.holiest-bubble--user { align-self: flex-start; background: #232326; color: #fff; }
.holiest-bubble--ai { align-self: flex-start; background: #f4f0e8; color: var(--h-text); border: 1px solid rgba(0,0,0,0.05); }
.holiest-chat-input { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.holiest-input { flex: 1; padding: 0.6rem 0.8rem; border-radius: 12px; border: 1px solid rgba(0,0,0,0.1); background: #fdfaf6; font-size: 0.9rem; }
.holiest-button { border: none; background: #8F5C3E; color: #fff; padding: 0 1rem; border-radius: 12px; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.holiest-ai-disclaimer { font-size: 0.75rem; color: var(--h-muted); margin-top: 0.2rem; }

/* Messages */
.holiest-msgs { display: grid; gap: 1rem; }
.holiest-msg { display: grid; grid-template-columns: 36px 1fr; gap: 0.8rem; }
.holiest-msg-avatar { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: #666; }
.holiest-msg-avatar--brand { background: #8F5C3E; color: #fff; }
.holiest-msg-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.2rem; }
.holiest-msg-text { font-size: 0.9rem; color: var(--h-muted); line-height: 1.4; background: #fbfbfb; padding: 0.6rem; border-radius: 8px; }

/* Recos */
.holiest-recos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.holiest-reco { background: #fbf9f6; border-radius: 16px; padding: 1rem; border: 1px solid rgba(0,0,0,0.03); display: flex; flex-direction: column; }
.holiest-reco-img { height: 80px; background: #eee; border-radius: 12px; margin-bottom: 0.8rem; }
.holiest-reco-img--dark { background: #ddd; }
.holiest-reco-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; }
.holiest-reco-desc { font-size: 0.8rem; color: var(--h-muted); line-height: 1.4; margin-bottom: 1rem; flex: 1; }
.holiest-button--pill { width: 100%; border-radius: 99px; padding: 0.6rem; background: linear-gradient(135deg, var(--h-bronze-from), var(--h-bronze-to)); }

/* TABLET (iPad) - Wrapper logic */
@media (max-width: 1199px) {
	.holiest-dash-grid--2col,
	.holiest-dash-grid--3col,
	.holiest-dash-grid--planrow {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
	.holiest-scan-card.holiest-handheld-only {
		display: flex; /* Show scanner on tablet */
	}
	.holiest-hero {
		grid-template-columns: 1fr;
	}
	.holiest-checklist {
		flex-direction: row; flex-wrap: wrap; gap: 1rem;
	}
}

/* MOBILE (Phone) */
@media (max-width: 768px) {
	.holiest-app-sidebar { display: none; }
	.holiest-mobile-only { display: block; }
	.holiest-mobile-brand { font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: 0.1em; font-size: 1.1rem; }
	
	.holiest-app-main { padding: 1.5rem 1.2rem; }
	
	.holiest-top-tabs { display: none; } /* Simplified mobile header */
	.holiest-app-header { background: transparent; padding: 0; margin-bottom: 1.5rem; }
	
	.holiest-hero-title { font-size: 1.8rem; }
	
	/* Force single column everywhere */
	.holiest-dash-grid--2col,
	.holiest-dash-grid--3col,
	.holiest-dash-grid--planrow,
	.holiest-mini-grid {
		grid-template-columns: 1fr;
	}
	
	.holiest-recos {
		/* Horizontal scroll for products on mobile */
		display: flex; overflow-x: auto; padding-bottom: 0.5rem; gap: 1rem;
	}
	.holiest-reco { min-width: 240px; }
	
	.holiest-health { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.holiest-pill { margin: 0 auto; }
}

/* HOLIEST SHOP / E-POOD v2 */

/* Page Wrapper & Shell */
.holiest-shop-page-wrapper {
	padding: 3rem 1.5rem 5rem;
	background-color: #f5f1ea; /* Matches global body bg */
	min-height: 100vh;
	display: flex;
	justify-content: center;
}

.holiest-shop-shell {
	width: 100%;
	max-width: 1240px;
	background-color: #f9f6f0; /* Slightly darker porcelain per mockup */
	border-radius: 32px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.06);
	overflow: hidden;
	padding: 0; /* Inner padding handled by children if needed */
}

.holiest-shop-inner {
	width: 100%;
}

/* Header (Brand + Hero) */
.holiest-shop-header--brand {
	display: grid;
	grid-template-columns: 32% 1fr; /* Approx 1/3 vs 2/3 */
	min-height: 320px;
	border-bottom: 1px solid rgba(0,0,0,0.03);
}

.holiest-shop-brand-panel {
	background-color: #fcfbf9; /* Lighter panel for logo */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.holiest-shop-brand-logo {
	font-family: "Playfair Display", serif;
	font-weight: 800;
	font-size: 2.2rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #232326;
	margin: 0;
}

.holiest-shop-hero-panel {
	position: relative;
	overflow: hidden;
	border-radius: 0 32px 0 0; /* Top-right corner matches shell */
}

.holiest-shop-hero-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Main Content Area */
.holiest-shop-main {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2rem;
	padding: 3rem;
	align-items: start;
}

/* Sidebar Filters */
.holiest-shop-filters {
	padding-right: 1rem;
}

.holiest-shop-filter-heading {
	font-size: 0.9rem;
	font-weight: 700;
	color: #232326;
	margin: 0 0 1.2rem;
	font-family: "Inter", sans-serif;
}

.holiest-shop-filter-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Mockup shows just text/icon rows in sidebar, simplified styling: */
.holiest-filter-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	padding: 0.6rem 0.8rem;
	gap: 0.8rem;
	border-radius: 99px; /* Pill shape */
	color: rgba(35,35,38,0.6);
	transition: all 0.2s ease;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
}

.holiest-filter-link:hover {
	color: #232326;
	background-color: rgba(255,255,255,0.6);
}

.holiest-filter-link.is-active {
	color: #232326;
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	font-weight: 600;
}

.holiest-filter-icon svg {
	display: block;
	opacity: 0.7;
	width: 20px;
	height: 20px;
}

.holiest-filter-label {
	line-height: 1.2;
}

/* Mobile Toggle */
.holiest-shop-filters-toggle {
	display: none; /* Hidden on desktop */
	width: 100%;
	padding: 0.8rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 12px;
	font-weight: 600;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	font-size: 0.8rem;
	cursor: pointer;
}

/* Product Grid - Force 3 columns on desktop, reset widths */
.holiest-shop-products-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Product Card */
.holiest-product-card {
	background: #fff;
	border-radius: 24px;
	padding: 1.8rem 1.5rem;
	box-shadow: 0 15px 40px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	width: auto !important; /* Override any global card width */
	max-width: none !important;
}

.holiest-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.holiest-product-media {
	margin-bottom: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180px; /* Fixed height for uniformity */
}

.holiest-product-img-placeholder img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.holiest-product-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.holiest-product-title {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
	color: #232326;
	line-height: 1.2;
}

.holiest-product-price {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.8rem;
	color: #232326;
}

.holiest-product-desc {
	font-size: 0.85rem;
	color: rgba(35,35,38,0.6);
	margin: 0 0 1.5rem;
	line-height: 1.5;
	flex: 1; /* Pushes button down */
}

.holiest-product-button {
	display: block;
	text-align: center;
	padding: 0.8rem 1.2rem;
	border-radius: 99px;
	background: linear-gradient(135deg, #D49A7D, #8F5C3E);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 10px 20px rgba(143,92,62,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none;
}

.holiest-product-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(143,92,62,0.35);
	color: #fff;
}

/* RESPONSIVE: iPad Landscape (1024 - 1199px) */
@media (max-width: 1199px) {
	.holiest-shop-main {
		grid-template-columns: 200px 1fr;
		padding: 2rem;
	}
	.holiest-shop-products-grid {
		gap: 1rem;
		/* Keep 3 columns if space allows, otherwise 2 */
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* RESPONSIVE: iPad Portrait (768 - 1023px) */
@media (max-width: 1023px) {
	.holiest-shop-header--brand {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.holiest-shop-brand-panel {
		padding: 3rem 1.5rem;
		justify-content: flex-start;
	}
	.holiest-shop-hero-panel {
		height: 300px;
		border-radius: 0;
	}
	
	.holiest-shop-main {
		grid-template-columns: 1fr; /* Stack filters on top */
		gap: 2rem;
	}
	
	.holiest-shop-filter-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
	
	.holiest-filter-link {
		background: #fff;
		border: 1px solid rgba(0,0,0,0.05);
		border-radius: 99px;
		padding: 0.5rem 1rem;
	}
	
	.holiest-shop-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* RESPONSIVE: Mobile (< 768px) */
@media (max-width: 767px) {
	.holiest-shop-page-wrapper {
		padding: 1rem;
	}
	.holiest-shop-shell {
		border-radius: 24px;
	}
	
	.holiest-shop-brand-panel {
		padding: 2rem 1.5rem;
	}
	.holiest-shop-hero-panel {
		height: 220px;
	}
	
	.holiest-shop-main {
		padding: 1.5rem;
	}
	
	/* Hide filters by default, use toggle */
	.holiest-shop-filters {
		display: none;
		margin-bottom: 1.5rem;
	}
	.holiest-shop-filters.is-open {
		display: block;
	}
	
	.holiest-shop-filters-toggle {
		display: block;
	}
	
	.holiest-shop-filter-list {
		flex-direction: column;
		gap: 0.5rem;
	}
	.holiest-filter-link {
		border-radius: 12px;
		justify-content: flex-start;
	}
	
	.holiest-shop-products-grid {
		grid-template-columns: 1fr; /* Single column */
		gap: 2rem;
	}
	
	.holiest-product-card {
		box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	}
}

/* HOLIEST SHOP / E-POOD – pixel-tuning for Philips layout */
@media (min-width: 1024px) {
	/* Hoia filter-kolonni samal kõrgusel toodetega */
	.holiest-shop-main {
		align-items: flex-start;
		padding-top: 2.6rem;
	}

	/* Filtrid kui eraldi pehme kaart */
	.holiest-shop-main .holiest-shop-filters {
		background: #f5f1ea;
		border-radius: 24px;
		padding: 1.4rem 1.2rem 1.8rem;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.holiest-shop-main .holiest-shop-filter-heading {
		font-family: "Inter", sans-serif;
		font-size: 0.8rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		margin: 0 0 1.8rem;
		color: #232326;
		align-self: flex-start;
	}

	/* Ikon üleval, tekst all – vertikaalne stack */
	.holiest-shop-main .holiest-shop-filter-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.8rem;
	}

	.holiest-shop-main .holiest-filter-link {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0.4rem 0.3rem;
		border-radius: 18px;
		background: transparent;
		box-shadow: none;
		font-size: 0.78rem;
		text-transform: none;
	}

	.holiest-shop-main .holiest-filter-link.is-active {
		background: #ffffff;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
		color: #232326;
	}

	.holiest-shop-main .holiest-filter-icon {
		margin-bottom: 0.25rem;
	}

	.holiest-shop-main .holiest-filter-icon svg {
		width: 22px;
		height: 22px;
		opacity: 0.85;
	}

	.holiest-shop-main .holiest-filter-label {
		line-height: 1.2;
	}

	/* Tootekaartide spacing mockupiga lähemale */
	.holiest-shop-products-grid {
		gap: 2.1rem;
	}

	.holiest-product-card {
		padding: 2.1rem 1.9rem 1.8rem;
	}
}

/* Suurtel ekraanidel lukusta 3 veergu kindlalt */
@media (min-width: 1280px) {
	.holiest-shop-products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- UUS: Success nupp (Step 6 jaoks) --- */
.holiest-btn--success {
    background-color: #ffffff;
    border: 1px solid #1a8f4a; /* Roheline piirjoon */
    color: #1a8f4a;
    box-shadow: 0 0 20px rgba(26, 143, 74, 0.25); /* Roheline glow */
    transition: all 0.2s ease;
}

.holiest-btn--success:hover {
    background-color: #e5f7ea; /* Väga hele roheline taust hoveril */
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(26, 143, 74, 0.4);
}

/* --- FAB (Floating Action Button) --- */
.holiest-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    /* Minimize/Maximize Transition Animation */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.holiest-fab-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(143, 92, 62, 0.4);
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
}

.holiest-fab-btn:hover {
    transform: scale(1.05);
}

/* Spinner Arrows */
.holiest-fab-spinner {
    position: absolute;
    inset: -10px;
    z-index: 1;
    animation: spinArrows 6s infinite ease-in-out;
}

.holiest-fab-arrows {
    width: 100%;
    height: 100%;
    display: block;
}

/* Label (Curved Text Simulation via simple rotation for robustness) */
/* Note: True SVG curved text needs the SVG defined in HTML, which we did. */
.holiest-fab-label {
    position: absolute;
    inset: -14px;
    z-index: 1;
    pointer-events: none;
    animation: spinText 12s linear infinite;
}

.holiest-fab-label svg {
    width: 100%;
    height: 100%;
    fill: transparent;
}

.holiest-fab-label text {
    fill: #232326;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Animations */
@keyframes spinArrows {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); } /* Pause */
}

@keyframes spinText {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Minimize Modal Animation Class */
.holiest-modal.is-minimizing .holiest-modal-dialog {
    transform: translate(45vw, 45vh) scale(0.1);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Mini Cart Modal (Center) */
.holiest-mini-modal .holiest-modal-dialog {
    max-width: 400px;
    text-align: center;
}

@media (max-width: 768px) {
    .holiest-fab {
        bottom: 20px;
        right: 20px;
        width: 70px;
        height: 70px;
    }
    .holiest-fab-btn {
        width: 50px;
        height: 50px;
    }
}

/* --- FIX 3: Single Line Upsell Buttons --- */
.holiest-modal-footer--row-three {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

/* --- FIX 5: Datepicker Improvements --- */
.holiest-datepicker {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fbf7f0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--holiest-text);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    cursor: pointer;
    position: relative;
}

/* Ensure calendar icon fits well */
.holiest-datepicker::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    padding: 5px;
    margin-right: -5px;
}

/* --- FIX 6: Vertical Installments --- */
.holiest-installments-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

.holiest-installments-vertical .holiest-installment-option {
    width: 100%;
    text-align: left;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #fff;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.holiest-installments-vertical .holiest-installment-option.is-selected {
    border-color: #1a8f4a;
    background-color: #e5f7ea;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(26, 143, 74, 0.1);
}

/* ========== HOLIEST: Steps & ROI modules (front-page) ========== */

.holiest-steps-section .holiest-steps-header {
  margin-bottom: 2.25rem;
}

.holiest-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.holiest-step-card {
  border: 1px solid var(--holiest-border-subtle);
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.holiest-step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--holiest-shadow-hover);
  border-color: rgba(181, 123, 95, 0.25);
}

.holiest-step-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.holiest-step-num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--holiest-bronze-from), var(--holiest-bronze-to));
  flex: 0 0 auto;
}

.holiest-step-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.holiest-step-text {
  margin: 0;
  color: var(--holiest-text);
}

.holiest-step-micro {
  margin-top: .75rem;
  color: var(--holiest-muted);
  font-size: .9rem;
}

.holiest-steps-cta {
  margin-top: 2rem;
}

.holiest-steps-cta-micro {
  margin: 0 0 1rem 0;
  color: var(--holiest-muted);
  font-size: .95rem;
}

.holiest-steps-actions {
  display: inline-flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ROI */
.holiest-roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.holiest-roi-card {
  border: 1px solid var(--holiest-border-subtle);
  box-shadow: none;
}

.holiest-roi-title {
  margin: 0 0 .75rem 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.holiest-roi-text {
  margin: 0 0 .85rem 0;
  color: var(--holiest-text);
}

.holiest-roi-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .25rem 0 1rem 0;
}

.holiest-roi-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--holiest-text);
}

.holiest-roi-list li {
  margin: .45rem 0;
}

.holiest-roi-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.holiest-roi-micro {
  margin-top: 1rem;
  color: var(--holiest-muted);
  font-size: .95rem;
}

/* Responsive */
@media (max-width: 960px) {
  .holiest-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .holiest-roi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .holiest-steps-grid { grid-template-columns: 1fr; }
  .holiest-step-title { font-size: 1.02rem; }
}

/* --- Holiest: Platform includes block --- */
.holiest-platform-includes-head {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.holiest-platform-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.holiest-platform-card {
	position: relative;
	overflow: hidden;
}

.holiest-platform-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .9rem;
}

.holiest-platform-card-title {
	margin: 0;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

.holiest-platform-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .35rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	line-height: 1;
	letter-spacing: .02em;
	color: rgba(255,255,255,.85);
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.06);
	white-space: nowrap;
}

.holiest-platform-list {
	margin: 0;
	padding-left: 1.05rem;
	color: var(--holiest-muted);
}

.holiest-platform-list li + li {
	margin-top: .55rem;
}

.holiest-platform-card--featured {
	border: 1px solid rgba(255,255,255,.22);
	box-shadow: 0 10px 40px rgba(0,0,0,.22);
	transform: translateY(-4px);
}

.holiest-platform-badge {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: .35rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	line-height: 1;
	letter-spacing: .02em;
	color: rgba(255,255,255,.92);
	background: rgba(0,0,0,.35);
	border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(6px);
}

@media (max-width: 980px) {
	.holiest-platform-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.holiest-platform-grid {
		grid-template-columns: 1fr;
	}
	.holiest-platform-card--featured {
		transform: none;
	}
}

/* ---------------------------------------
   HOLIEST HOME – modern steps + ROI
---------------------------------------- */

.holiest-home-section-head{
	text-align:center;
	max-width: 760px;
	margin: 0 auto 2.25rem;
}
.holiest-home-section-head .holiest-section-lead{
	margin-inline: auto;
}

/* Steps */
.holiest-home-steps{
	position: relative;
}
.holiest-home-steps-grid{
	display:grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 820px){
	.holiest-home-steps-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

.holiest-home-step-card{
	position: relative;
	padding: 1.35rem 1.25rem;
	border-radius: 22px;
	background: rgba(255,255,255,.60);
	border: 1px solid rgba(176,138,99,.22);
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
	backdrop-filter: blur(10px);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (min-width: 820px){
	.holiest-home-step-card{ padding: 1.6rem 1.55rem; }
}
.holiest-home-step-card:hover{
	transform: translateY(-3px);
	border-color: rgba(176,138,99,.38);
	box-shadow: 0 16px 44px rgba(0,0,0,.09);
}

.holiest-home-step-card::before{
	content: attr(data-step);
	position:absolute;
	top: 14px;
	right: 14px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height: 34px;
	min-width: 34px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: .85rem;
	letter-spacing: .08em;
	color: rgba(15, 27, 23, .82);
	background: rgba(176,138,99,.16);
	border: 1px solid rgba(176,138,99,.28);
}

/* Steps actions */
.holiest-home-steps-actions{
	margin-top: 1.8rem;
	display:flex;
	gap: .75rem;
	justify-content:center;
	flex-wrap: wrap;
}

/* ROI */
.holiest-home-roi-grid{
	display:grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1.25rem;
}
@media (min-width: 820px){
	.holiest-home-roi-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

.holiest-home-roi-card{
	position: relative;
	padding: 1.5rem 1.4rem;
	border-radius: 22px;
	background: rgba(255,255,255,.58);
	border: 1px solid rgba(176,138,99,.20);
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.holiest-home-roi-card::after{
	content:"";
	position:absolute;
	left: 14px;
	top: 14px;
	width: 54px;
	height: 3px;
	border-radius: 999px;
	background: rgba(176,138,99,.65);
}
.holiest-home-roi-card[data-accent="beauty"]::after{
	background: rgba(176,138,99,.45);
}

.holiest-home-list{
	margin: 1rem 0 0;
	padding-left: 1.1rem;
	color: var(--holiest-muted);
}
.holiest-home-list li{ margin: .45rem 0; }

.holiest-home-disclaimer{
	text-align:center;
	margin-top: 1.25rem;
	color: var(--holiest-muted);
	font-size: .92rem;
}

/* HERO – hard center (ainult avalehe hero centered variandile) */
.holiest-hero--centered .holiest-container{
  display: flex;
  justify-content: center;
}

.holiest-hero--centered .holiest-hero-inner--hard-center{
  width: 100%;
  max-width: 820px;
  margin-inline: auto !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.holiest-hero--centered .holiest-hero-subtitle{
  margin-inline: auto;
  max-width: 68ch;
}

.holiest-hero--centered .holiest-hero-actions{
  justify-content: center;
}

/* =========================
   HOLIEST BLOG (namespace)
   ========================= */

.holiest-blog-section { padding-top: clamp(3.5rem, 5vw, 5rem); }
.holiest-blog-hero { text-align: center; max-width: 860px; margin: 0 auto; }
.holiest-blog-title { margin-bottom: .75rem; }
.holiest-blog-lead { margin-inline: auto; }
.holiest-blog-hero-actions { display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: 1.25rem; }
.holiest-blog-micro { margin-top: 1rem; color: var(--holiest-muted); font-size: .95rem; }

.holiest-blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin: 2rem auto 2.25rem;
	max-width: 980px;
}

.holiest-blog-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .55rem .9rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.04);
	color: inherit;
	text-decoration: none;
	font-size: .95rem;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.holiest-blog-pill:hover { transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.20); }
.holiest-blog-pill.is-active { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }

.holiest-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 1.75rem;
}

@media (min-width: 720px) {
	.holiest-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.35rem; }
}

@media (min-width: 1024px) {
	.holiest-blog-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.holiest-blog-card { overflow: hidden; }
.holiest-blog-card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.holiest-blog-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.holiest-blog-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); transition: transform .25s ease; }
.holiest-blog-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: radial-gradient(1200px 400px at 20% 20%, rgba(255,255,255,.10), rgba(255,255,255,.02));
}

.holiest-blog-card-body { padding: 1.25rem 1.25rem 1.35rem; }

.holiest-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	color: var(--holiest-muted);
	font-size: .9rem;
	margin-bottom: .65rem;
}

.holiest-blog-cat { letter-spacing: .02em; }
.holiest-blog-dot { width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.28); display: inline-block; }

.holiest-blog-card-title { margin: 0 0 .55rem; font-size: 1.15rem; line-height: 1.25; }
.holiest-blog-card-excerpt { margin: 0 0 1rem; color: var(--holiest-muted); }
.holiest-blog-readmore { font-weight: 600; }

.holiest-blog-card:hover .holiest-blog-thumb-img { transform: scale(1.06); }
.holiest-blog-card:hover { transform: translateY(-2px); }
.holiest-blog-card { transition: transform .18s ease; }

/* Pagination */
.holiest-blog-pagination { margin-top: 2.25rem; display: flex; justify-content: center; }
.holiest-blog-pagination .page-numbers {
	list-style: none;
	display: flex;
	gap: .4rem;
	padding: 0;
	margin: 0;
}
.holiest-blog-pagination .page-numbers a,
.holiest-blog-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .75rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.04);
	color: inherit;
	text-decoration: none;
}
.holiest-blog-pagination .page-numbers .current {
	border-color: rgba(255,255,255,.28);
	background: rgba(255,255,255,.08);
}

/* =========================
   HOLIEST ARTICLE (namespace)
   ========================= */

.holiest-article-section { padding-top: clamp(3.5rem, 5vw, 5rem); }
.holiest-article-container { max-width: 1120px; }

.holiest-article-hero { max-width: 860px; margin: 0 auto 2.25rem; text-align: left; }
.holiest-article-hero-meta { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
.holiest-article-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem .85rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.04);
	color: inherit;
	text-decoration: none;
	font-size: .92rem;
}
.holiest-article-meta { color: var(--holiest-muted); font-size: .95rem; }
.holiest-article-title { margin: 0 0 .75rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.holiest-article-ingress { margin: 0; color: rgba(255,255,255,.88); font-size: 1.08rem; }

.holiest-article-featured { margin: 1.5rem 0 0; border-radius: 22px; overflow: hidden; }
.holiest-article-featured-img { width: 100%; height: auto; display: block; }

.holiest-article-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) {
	.holiest-article-layout { grid-template-columns: 1fr 320px; align-items: start; }
	.holiest-article-sidebar { position: sticky; top: 96px; }
}

.holiest-article-content {
	max-width: 860px;
	margin: 0 auto;
	line-height: 1.75;
}
.holiest-article-content h2 { margin-top: 2rem; margin-bottom: .75rem; }
.holiest-article-content p { margin: .9rem 0; }
.holiest-article-content ul { margin: .9rem 0 1.2rem; padding-left: 1.2rem; }
.holiest-article-content blockquote {
	margin: 1.5rem 0;
	padding: 1.25rem 1.25rem;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	color: rgba(255,255,255,.92);
}

.holiest-article-callout {
	margin: 2rem 0;
	padding: 1.25rem 1.25rem;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.03);
}
.holiest-article-callout-title { margin: .35rem 0 .35rem; }
.holiest-article-callout-text { margin: 0; color: var(--holiest-muted); }

.holiest-article-summary { margin: 2rem 0; }
.holiest-article-summary-title { margin: 0 0 .75rem; }
.holiest-article-summary-list { margin: 0; padding-left: 1.2rem; color: var(--holiest-muted); }

.holiest-article-holiest-cta { margin: 2rem 0 0; }
.holiest-article-cta-card { padding: 1.25rem 1.25rem; }
.holiest-article-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.holiest-article-cta-micro { margin-top: 1rem; color: var(--holiest-muted); font-size: .92rem; }

.holiest-article-related { margin-top: 3rem; }
.holiest-article-related-title { text-align: center; margin-bottom: 1rem; }

/* Modern cards for "Miks HOLIEST" page sections */
.holiest-manifest-cards-grid,
.holiest-manifest-results-grid{
  display: grid;
  gap: 1.1rem;
}

.holiest-manifest-cards-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.holiest-manifest-results-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.holiest-manifest-card{
  padding: 1.25rem 1.25rem 1.15rem;
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.holiest-manifest-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.holiest-manifest-card-head{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}

.holiest-manifest-card-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}

.holiest-manifest-card-icon svg{
  width: 20px;
  height: 20px;
  opacity: .9;
}

.holiest-manifest-card-title{
  margin: 0;
}

.holiest-manifest-card-text{
  margin: .35rem 0 0;
  color: var(--holiest-muted);
  line-height: 1.55;
}

.holiest-manifest-mini-note{
  color: var(--holiest-muted);
  font-size: .92rem;
}

/* Responsive */
@media (max-width: 980px){
  .holiest-manifest-cards-grid{
    grid-template-columns: 1fr;
  }
  .holiest-manifest-results-grid{
    grid-template-columns: 1fr;
  }
}

/* Platvormi demo (näidisraport) – "Enim valitud" badge ära ei lõikaks */
.holiest-platform-includes .holiest-platform-card,
.holiest-platform-includes .holiest-pricing-card--featured{
  position: relative;
  overflow: visible !important;
}

.holiest-platform-includes .holiest-pricing-badge{
  z-index: 5;
}

/* --- SERVICES OVERLAY HOVER UX FIX --- */
@media (min-width: 992px) {
  /* Backdrop ei tohi desktopis hiirt ära “varastada” */
  .holiest-overlay-backdrop {
    pointer-events: none;
  }

  /* Aktiivne popup/paneel peab olema interaktiivne */
  .holiest-service-content {
    pointer-events: auto;
  }
}

/* Sujuvam animatsioon (kui sul juba on, siis jäta ainult puuduolev osa) */
.holiest-service-content {
  will-change: transform, opacity;
  transition: opacity .22s ease, transform .22s ease;
}

.holiest-service-content:not(.is-active) {
  opacity: 0;
  transform: translateY(8px);
}

/* FIX: desktopis overlay ei tohi hoverit “varastada” (flicker killer) */
@media (min-width: 992px) {
  body.holiest-service-open .holiest-service-overlays {
    pointer-events: none !important;
  }
  body.holiest-service-open .holiest-overlay-backdrop {
    pointer-events: none !important;
  }
}

/* HOME hero: ära lase appi .holiest-hero 2-col gridil avalehe herot mõjutada */
body.home .holiest-hero.holiest-hero--centered{
  display: block;
}

//* HOME probleemikaardid: ümardus säilib, bounce jääb alles */
body.home .holiest-card--problem{
  border-radius: 26px;
  overflow: hidden; /* hoiab hoveri “kasti” nurgad ümarad */
}

body.home .holiest-card--problem:hover{
  border-radius: 26px; /* lukusta sama radius ka hoveris */
}

body.home .holiest-card--problem::before,
body.home .holiest-card--problem::after{
  border-radius: inherit;
}

/* BLOG (grid + pillid + kaardid) */
.holiest-blog-hero-inner{
  text-align:center;
  max-width: 920px;
  margin: 0 auto;
}

.holiest-blog-hero-title{
  margin: .5rem 0 0;
}

.holiest-blog-hero-subtitle{
  margin: 1rem auto 0;
  max-width: 72ch;
}

.holiest-blog-feed{ padding-top: 0; }

.holiest-blog-filter{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
  margin: 1.25rem 0 2rem;
}

.holiest-blog-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  color: var(--holiest-text);
  transition: transform .18s ease, box-shadow .18s ease;
}

.holiest-blog-pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
}

.holiest-blog-pill.is-active{
  background: rgba(0,0,0,0.04);
  font-weight: 700;
}

.holiest-blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

@media (max-width: 1024px){
  .holiest-blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .holiest-blog-grid{ grid-template-columns: 1fr; }
}

.holiest-post-card{
  border-radius: 24px;
  overflow:hidden;
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.holiest-post-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 75px rgba(0,0,0,.10);
}

.holiest-post-card-media{
  display:block;
  aspect-ratio: 16/10;
  overflow:hidden;
}

.holiest-post-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .35s ease;
  display:block;
}

.holiest-post-card:hover .holiest-post-card-media img{
  transform: scale(1.08);
}

.holiest-post-card-placeholder{
  width:100%;
  height:100%;
  background: rgba(0,0,0,.06);
}

.holiest-post-card-body{
  padding: 1.15rem 1.25rem 1.2rem;
}

.holiest-post-card-meta{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
  font-size:.85rem;
  color: var(--holiest-muted);
  margin-bottom:.55rem;
}

.holiest-post-card-title{
  margin: 0 0 .55rem;
  font-size: 1.15rem;
}

.holiest-post-card-title a{
  color: inherit;
  text-decoration:none;
}

.holiest-post-card-excerpt{
  margin: 0 0 .95rem;
  color: var(--holiest-muted);
  line-height: 1.6;
}

.holiest-post-read{
  font-weight: 700;
  text-decoration:none;
  color: var(--holiest-text);
}

.holiest-blog-pagination{ margin: 2rem auto 0; display:flex; justify-content:center; }
.holiest-blog-pagination ul{ display:flex; gap:.5rem; list-style:none; padding:0; margin:0; }
.holiest-blog-pagination a,
.holiest-blog-pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration:none;
  color: var(--holiest-text);
}
.holiest-blog-pagination .current{
  background: rgba(0,0,0,.06);
  font-weight: 700;
}

/* ===== BLOG: vana look (kaartide toon, bold link, hero wrap) ===== */

/* hero tekst 2 reale (laiem max-width + pisut väiksem tekst) */
.holiest-blog-hero-subtitle{
  max-width: 92ch;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* kaardi “pildi ala” (placeholder) veidi tumedam */
.holiest-post-card-media{
  background: rgba(0,0,0,.05);
}

/* kaardi tekstiosa teise tooniga (nagu vana) */
.holiest-post-card-body{
  background: #f9f6f0;
}

/* pealkiri ilusam (varem oli sul serif mujal teemal juba kasutuses) */
.holiest-post-card-title{
  font-family: "Playfair Display", "Times New Roman", serif;
}

/* “Loe lähemalt” kindlasti bold */
.holiest-post-read{
  font-weight: 700;
}

/* Hero subtitle – sunnib 2 reale */
.holiest-blog-hero-subtitle{
  max-width: 110ch;   /* oli 72ch */
  margin: 1rem auto 0;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Kaardi tekstiosa kreemjas toon */
.holiest-post-card-body{
  background: #f6f1e8; /* kreemjas */
  padding: 1.15rem 1.25rem 1.2rem;
}

/* Soovi korral pehme eraldus pildi ja body vahel */
.holiest-post-card-media{
  background: rgba(0,0,0,.05);
}

/* kogu kaart klikitavaks */
.holiest-post-card-linkwrap{
  display:block;
  color: inherit;
  text-decoration: none;
}

.holiest-post-card-linkwrap:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 4px;
  border-radius: 24px;
}

/* kuna media pole enam <a>, siis säilitame sama käitumise */
.holiest-post-card-linkwrap .holiest-post-card-media{
  display:block;
  aspect-ratio: 16/10;
  overflow:hidden;
}

.holiest-post-card-linkwrap .holiest-post-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .35s ease;
  display:block;
}

.holiest-post-card:hover .holiest-post-card-linkwrap .holiest-post-card-media img{
  transform: scale(1.08);
}

/* =========================
   BLOG (list + single)
   ========================= */

/* Blog page hero */
.holiest-blog-hero-inner{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.holiest-blog-title{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.06;
  margin: 0 0 .75rem;
}

.holiest-blog-lead{
  color: var(--holiest-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 60ch;
}

/* Grid (shared by blog list + related) */
.holiest-blog-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

@media (max-width: 980px){
  .holiest-blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .holiest-blog-grid{ grid-template-columns: 1fr; }
}

/* Post card (used in page-blogi.php + related posts) */
.holiest-post-card{
  background: var(--holiest-card-bg);
  border: 1px solid var(--holiest-border-subtle);
  border-radius: 22px;
  box-shadow: var(--holiest-shadow-soft);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.holiest-post-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

.holiest-post-card-linkwrap{
  display: block;
  color: inherit;
  text-decoration: none;
}

.holiest-post-card-media{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eee7de;
}

.holiest-post-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .25s ease;
}

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

.holiest-post-card-body{
  padding: 1.05rem 1.1rem 1.15rem;
}

.holiest-post-card-meta{
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--holiest-muted);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .55rem;
}

.holiest-post-card-cat{
  font-weight: 600;
}

.holiest-post-card-date{
  opacity: .9;
}

.holiest-post-card-title{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.18rem;
  line-height: 1.18;
  margin: 0 0 .55rem;
}

.holiest-post-card-excerpt{
  color: var(--holiest-muted);
  line-height: 1.6;
  margin: 0 0 .75rem;
}

.holiest-post-card-readmore{
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  font-weight: 600;
  font-size: .9rem;
}

/* Pagination */
.holiest-blog-pagination{
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 2.25rem;
}

.holiest-blog-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--holiest-border-subtle);
  background: var(--holiest-card-bg);
  color: var(--holiest-ink);
  text-decoration: none;
}

.holiest-blog-pagination .page-numbers.current{
  background: #2b2b2b;
  color: #fff;
  border-color: #2b2b2b;
}

/* =========================
   SINGLE POST "editorial sheet"
   ========================= */

body.single-post .holiest-section.holiest-article{
  padding: 3.25rem 0 4.5rem;
}

.holiest-article-wrap{
  background: var(--holiest-card-bg);
  border: 1px solid var(--holiest-border-subtle);
  border-radius: 30px;
  box-shadow: 0 26px 95px rgba(0,0,0,.06);
  padding: clamp(1.1rem, 2.3vw, 2.25rem);
}

.holiest-article-head{
  max-width: 900px;
  margin: 0 auto;
}

.holiest-article-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.holiest-article-cat{
  color: var(--holiest-muted);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

.holiest-article-date{
  color: var(--holiest-muted);
  font-size: .85rem;
}

.holiest-article-title{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  line-height: 1.06;
  margin: 0 0 .75rem;
}

.holiest-article-ingress{
  color: var(--holiest-muted);
  font-size: 1.06rem;
  line-height: 1.75;
  max-width: 70ch;
  margin: 0;
}

/* Hero / cover image */
.holiest-article-hero{
  margin: 1.35rem auto 0;
  max-width: 980px;
  border-radius: 22px;
  overflow: hidden;
  background: #eee7de;
  aspect-ratio: 16 / 10;
}

.holiest-article-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content grid */
.holiest-article-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 1.6rem;
  align-items: start;
}

@media (max-width: 980px){
  .holiest-article-grid{ grid-template-columns: 1fr; }
}

.holiest-article-body{
  max-width: 76ch;
  font-size: 1.05rem;
  line-height: 1.85;
}

.holiest-article-body p{ margin: 0 0 1.15rem; }
.holiest-article-body a{ color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.holiest-article-body a:hover{ opacity: .85; }

.holiest-article-body h2{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.18;
  margin: 2.1rem 0 .9rem;
}

.holiest-article-body ul,
.holiest-article-body ol{
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
}

.holiest-article-body li{ margin: 0 0 .45rem; }

.holiest-article-body .wp-block-separator{
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
}

/* Sidebar */
.holiest-article-side{
  position: sticky;
  top: 6.25rem;
  align-self: start;
}

@media (max-width: 980px){
  .holiest-article-side{ position: static; }
}

.holiest-article-side .holiest-card{
  border-radius: 22px;
  background: #fbf8f3;
}

.holiest-article-side h3{
  font-family: "Playfair Display", serif;
  font-weight: 600;
  margin-top: .25rem;
}

.holiest-article-share{
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .85rem;
}

.holiest-article-share span{
  color: var(--holiest-muted);
  font-size: .85rem;
}

.holiest-article-share a{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--holiest-border-subtle);
  background: var(--holiest-card-bg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Related section */
.holiest-related{
  margin-top: 3.25rem;
}

.holiest-related h2{
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
}

/* Single post share buttons (FB / IG / Messenger) */
.holiest-side-share{
  display:flex;
  gap:10px;
  margin: 0 0 14px 0;
}

.holiest-share-btn{
  width:42px;
  height:42px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}

.holiest-share-btn svg{
  width:18px;
  height:18px;
  fill:#fff;
}

.holiest-share-btn:hover{
  transform: scale(1.08);
  filter: brightness(1.02);
}

.holiest-share-btn--fb{ background:#1877F2; }
.holiest-share-btn--ms{ background: linear-gradient(135deg, #00B2FF, #006AFF); }
.holiest-share-btn--ig{ background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }

/* optional tiny feedback when copied */
.holiest-share-btn.is-copied{
  transform: scale(1.08);
  filter: brightness(1.08);
}

/* Single post title center */
.holiest-article-title{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.holiest-article-ingress{
  /* soovitan samuti, sest visuaal muutub kohe premiumimaks */
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  max-width: 820px;
}

/* kui sul topline on flex ja “tõmbab” vasakule, tsentreerime */
.holiest-article-topline{
  justify-content:center;
  gap:12px;
}

/* HOME hero video background */
body.home .holiest-hero--video {
  position: relative;
}

body.home .holiest-hero--video .holiest-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}

/* Let video show through a bit more (still readable) */
body.home .holiest-hero--video .holiest-hero-overlay {
  z-index: 1;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(255, 255, 255, 0.55),
    rgba(245, 241, 234, 0.70)
  );
  backdrop-filter: blur(1px);
}

body.home .holiest-hero--video .holiest-hero-inner {
  position: relative;
  z-index: 2;
}

/* Put header on top of hero video (menu sits over video) */
body.home .holiest-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
}

/* Give hero content room so it won't collide with header */
body.home .holiest-hero {
  padding-top: 8.5rem;
}

/* HOME: hero video + layout corrections */
body.home .holiest-hero {
	margin-bottom: 0;                 /* ühendus musta stripiga */
	border-bottom-left-radius: 0;     /* alumised ümarnurgad ära */
	border-bottom-right-radius: 0;
}

body.home .holiest-hero--video {
	background-image: none !important;
}

body.home .holiest-hero--video .holiest-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 70%;         /* “video allapoole” (fookus madalamale) */
	z-index: 0;
	pointer-events: none;             /* ei tule controls/play overlay klikke */
}

/* Header natuke allapoole (sticky top offset) */
body.home .holiest-header {
	top: 26px; /* oli 18px; ~8px alla */
}

/* Kui tahad vähem “hägusust”, vähenda blur'i (valikuline) */
/*
body.home .holiest-hero-overlay {
	backdrop-filter: blur(1px);
}
*/


/* =========================
   SERVICES HERO: vähem "piima", vähem bluri
   ========================= */
.holiest-hero--services .holiest-hero-overlay{
  /* vasakul loetav, paremale sujuvalt läbipaistvam */
  background: linear-gradient(
    90deg,
    rgba(245,241,234,0.78) 0%,
    rgba(245,241,234,0.55) 20%,
    rgba(245,241,234,0.22) 40%,
    rgba(245,241,234,0.00) 70%
  );

  /* blur väiksemaks (praegu oli 4px) */
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
}

/* HOME – Problem cards: icons */
.holiest-grid--problems .holiest-card-icon span{
  background-color: #fbf7f1;
  border: 1px solid rgba(21, 22, 26, 0.10);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  opacity: 1;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 88px 88px; /* kui tahad suuremat: 28px */
}

/* Per-card icon mapping */
.holiest-problem--aju-udu .holiest-card-icon span{
  background-image: url('assets/img/icons/problem-aju-udu.png');
}

.holiest-problem--hommikune-turse .holiest-card-icon span{
  background-image: url('assets/img/icons/problem-hommikune-turse.png');
}

.holiest-problem--krooniline-vasimus .holiest-card-icon span{
  background-image: url('assets/img/icons/problem-krooniline-vasimus.png');
}

.holiest-problem--energia-krahh .holiest-card-icon span{
  background-image: url('assets/img/icons/problem-energia-krahh.png');
}

.holiest-problem--proovin-koike .holiest-card-icon span{
  background-image: url('assets/img/icons/problem-proovin-koike.png');
}

.holiest-problem--killustatud-pilt .holiest-card-icon span{
  background-image: url('assets/img/icons/problem-killustatud-pilt.png');
}

/* FRONT-PAGE: PROBLEEMIDE ikooni "tile" suuremaks, piktogramm jääb samaks */
.holiest-grid--problems .holiest-card-icon {
  margin-bottom: 22px; /* natuke rohkem hingamist */
}

.holiest-grid--problems .holiest-card-icon span{
  width: 88px;
  height: 88px;
  border-radius: 18px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;

  /* oluline: kui sinu ikoon on background-image, siis see hoiab piktogrammi väikse */
  background-size: 88px 88px;
}

/* Kui sul mõnes kohas pannakse ikoon span-i sisse <img>-na (igaks juhuks) */
.holiest-grid--problems .holiest-card-icon span img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* ==========================
   FULL-BLEED HERO (Teenused + Miks Holiest)
   Sama loogika nagu avalehe hero-video: hero läheb headeri taha.
   ========================== */

/* vajadusel timmi 92px (kui header on kõrgem/madalam) */
:root { --holiest-header-h: 92px; }

/* WP admin bar (kui oled sisse logitud) */
body.admin-bar { --wp-adminbar-h: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --wp-adminbar-h: 46px; }
}

/* tee header overlay'ks (mitte flow-sse), et hero paistaks selle taga */
body.page-template-page-teenused .holiest-header,
body.page-template-page-miks-holiest .holiest-header {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--wp-adminbar-h, 0px);
  z-index: 9999;
}

/* kompenseeri fixed header, et ülejäänud sisu ei läheks headeri alla */
body.page-template-page-teenused,
body.page-template-page-miks-holiest {
  padding-top: calc(var(--holiest-header-h) + var(--wp-adminbar-h, 0px));
}

/* hero täislaiuses + tõsta üles headeri taha + eemalda rounded */
body.page-template-page-teenused .holiest-hero--services,
body.page-template-page-miks-holiest .holiest-manifest-hero {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  border-radius: 0;
  overflow: hidden;

  /* tõsta hero üles, et see algaks ekraani ülaservast */
  margin-top: calc(-1 * (var(--holiest-header-h) + var(--wp-adminbar-h, 0px)));
  padding-top: calc(6rem + var(--holiest-header-h) + var(--wp-adminbar-h, 0px));

  /* pildi “kärpimise” kontroll (muuda inline-is --hero-focus-y) */
  background-size: cover;
  background-position: center var(--hero-focus-y, 50%);
}

/* kui hero pilt on liiga “valgeks pestud”, tee overlay veidi läbipaistvamaks */
body.page-template-page-teenused .holiest-hero-overlay,
body.page-template-page-miks-holiest .holiest-manifest-hero-overlay {
  opacity: .78;
}

/* === Header hero peale (Teenused + Miks Holiest) === */
body.page-template-page-teenused-php .holiest-header,
body.page-template-page-miks-holiest-php .holiest-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Tõsta hero headeri alla (nagu avalehel) */
body.page-template-page-teenused-php .holiest-hero--services,
body.page-template-page-miks-holiest-php .holiest-manifest-hero {
  --holiest-header-offset: clamp(72px, 7vw, 96px);
  margin-top: calc(var(--holiest-header-offset) * -1);
  padding-top: calc(5rem + var(--holiest-header-offset)) !important;
}

/* =========================================================
   GLOBAL: Header overlay on HERO (applies site-wide)
   Goal: hero image/video goes to the very top and the header sits on top of it,
         just like on the front page (not only body.home).
   Excludes: dashboard templates where site chrome is hidden.
   ========================================================= */

/* WordPress admin bar height helper */
body.admin-bar { --wp-adminbar-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --wp-adminbar-h: 46px; } }

/* Dashboard templates where site header/footer are hidden — do NOT offset */
body.page-template-page-holiest-client,
body.page-template-page-holiest-client-php,
body.page-template-page-holiest-staff,
body.page-template-page-holiest-staff-php,
body.page-template-page-holiest-admin,
body.page-template-page-holiest-admin-php {
  padding-top: 0 !important;
}

/* Default: since header becomes fixed, reserve space for it */
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) {
  padding-top: calc(var(--holiest-header-h) + var(--wp-adminbar-h, 0px));
}

/* Make header sit over content (transparent, no blur “wash”) */
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-header {
  position: fixed !important;
  top: var(--wp-adminbar-h, 0px) !important;
  left: 0;
  right: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  z-index: 40;
}

/* Allow templates to set focus with: --hero-focus-y: 65%; */
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-hero,
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-manifest-hero {
  background-position: center var(--hero-focus-y, 50%);
}

/* HERO goes behind the header (full-bleed to the top) */
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-hero,
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-manifest-hero {
  /* Pull the hero up behind the fixed header */
  margin-top: calc(-1 * (var(--holiest-header-h) + var(--wp-adminbar-h, 0px)));
  /* Keep readable spacing for hero content */
  padding-top: calc(var(--holiest-hero-basepad, 5rem) + var(--holiest-header-h) + var(--wp-adminbar-h, 0px)) !important;
}

/* Base hero spacing (used by the calc above) */
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-hero { --holiest-hero-basepad: 5rem; }

/* Centered hero needs more breathing room (front-page.php) */
body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-hero--centered { --holiest-hero-basepad: 8.5rem; }

body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-manifest-hero { --holiest-hero-basepad: 5rem; }

/* Mobile: use smaller base padding, but keep header offset */
@media (max-width: 768px) {
  body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-hero { --holiest-hero-basepad: 4rem; }
  body:not(.page-template-page-holiest-client):not(.page-template-page-holiest-client-php):not(.page-template-page-holiest-staff):not(.page-template-page-holiest-staff-php):not(.page-template-page-holiest-admin):not(.page-template-page-holiest-admin-php) .holiest-hero--centered { --holiest-hero-basepad: 5.25rem; }
}

/* =========================================================
   PAGE-SPECIFIC: Left-side “frosted” gradient for HERO text readability
   - Makes the LEFT side more readable (stronger overlay + blur),
     fades out to the RIGHT so the image still shows.
   - Applied ONLY on:
       • page-teenused.php  (body.page-template-page-teenused*)
       • page-miks-holiest.php (body.page-template-page-miks-holiest*)
   - To add for other pages later: copy a block and swap the body class.
   ========================================================= */

/* ---------- TEENUSED (page-teenused.php) ---------- */
body.page-template-page-teenused-php,
body.page-template-page-teenused{
  /* Tune per page */
  --hero-frost-blur: 10px;              /* blur strength on the left */
  --hero-frost-hold: 52%;               /* how far the strong blur stays */
  --hero-frost-fade: 92%;               /* where the blur fully fades out */
}

/* Base gradient “milk” (works everywhere; also looks good even without blur support) */
body.page-template-page-teenused-php .holiest-hero--services .holiest-hero-overlay,
body.page-template-page-teenused .holiest-hero--services .holiest-hero-overlay{
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(245, 241, 234, 0.92) 0%,
    rgba(245, 241, 234, 0.70) 38%,
    rgba(245, 241, 234, 0.26) 75%,
    rgba(245, 241, 234, 0.08) 100%
  );
  /* safe fallback blur (uniform) */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Progressive enhancement: blur fades out to the right (mask support) */
@supports ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))){
  body.page-template-page-teenused-php .holiest-hero--services .holiest-hero-overlay,
  body.page-template-page-teenused .holiest-hero--services .holiest-hero-overlay{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.page-template-page-teenused-php .holiest-hero--services .holiest-hero-overlay::before,
  body.page-template-page-teenused .holiest-hero--services .holiest-hero-overlay::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* “frost” */
    backdrop-filter: blur(var(--hero-frost-blur));
    -webkit-backdrop-filter: blur(var(--hero-frost-blur));

    /* tiny wash so blur reads nicely */
    background: rgba(245, 241, 234, 0.12);

    /* fade blur area left -> right */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
    mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
  }
}

/* ---------- MIKS HOLIEST (page-miks-holiest.php) ---------- */
body.page-template-page-miks-holiest-php,
body.page-template-page-miks-holiest{
  --hero-frost-blur: 4px; - 
  --hero-frost-hold: 40%;
  --hero-frost-fade: 70%;
}

/* ---------- (juhised) ---------- */
/*Kui tahad, et tugev blur kestaks kaugemale paremale → tõsta --hero-frost-hold (nt 60%).

/*Kui tahad, et blur kaoks varem ära → vähenda --hero-frost-fade (nt 82%).

/*Kui tahad rohkem/vähem “frost” → muuda --hero-frost-blur (nt 6px või 12px).

/*Kui tahad rohkem/vähem “piima” → muuda gradienti rgba(..., 0.xx) väärtusi.

/* Override the manifest hero overlay to match the same “left frosted” logic */
body.page-template-page-miks-holiest-php .holiest-manifest-hero-overlay,
body.page-template-page-miks-holiest .holiest-manifest-hero-overlay{
  pointer-events: none;
  background: linear-gradient(90deg, 
    rgba(245, 241, 234, 0.94) 0%,
    rgba(245, 241, 234, 0.78) 28%,
    rgba(245, 241, 234, 0.42) 60%,
    rgba(245, 241, 234, 0.10) 100%
  );

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@supports ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))){
  body.page-template-page-miks-holiest-php .holiest-manifest-hero-overlay,
  body.page-template-page-miks-holiest .holiest-manifest-hero-overlay{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.page-template-page-miks-holiest-php .holiest-manifest-hero-overlay::before,
  body.page-template-page-miks-holiest .holiest-manifest-hero-overlay::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    backdrop-filter: blur(var(--hero-frost-blur));
    -webkit-backdrop-filter: blur(var(--hero-frost-blur));
    background: rgba(245, 241, 234, 0.10);

    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
    mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
  }
}

/* =========================================================
   BLOG CARDS: fix “white strip / border” when excerpt is short
   Applies to blog page grid AND "Loe rohkem" cards on single-post.php.
   ========================================================= */

.holiest-post-card{
  height: 100%;
}

.holiest-post-card-linkwrap{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.holiest-post-card-media{
  flex: 0 0 auto;
}

.holiest-post-card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: transparent; /* oluline: jätab kaardi “sooja” tausta alles */
}

/* =========================================================
   BUTTON: Outline ring + soft green glow (for “Vaata lähemalt”)
   Usage: add class .holiest-btn--outline-glow to any .holiest-btn
   - Keeps button interior neutral (no green fill),
     but gives a thin green ring + subtle glow.
   - Color matches booking modal selection (#1a8f4a).
   ========================================================= */

.holiest-btn--outline-glow{
  position: relative;
  overflow: visible;
  background: transparent !important;
  border-color: rgba(26, 143, 74, 0.55) !important; /* thin green ring */
  color: var(--holiest-text) !important;
  box-shadow:
    0 0 0 1px rgba(26, 143, 74, 0.18),
    0 16px 45px rgba(19, 111, 57, 0.10);
}

.holiest-btn--outline-glow::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(191, 247, 200, 0.60),
    rgba(26, 143, 74, 0.0) 60%
  );
  filter: blur(12px);
  opacity: 0.28;
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

.holiest-btn--outline-glow:hover{
  transform: translateY(-2px);
  border-color: rgba(26, 143, 74, 0.75) !important;
  background: rgba(191, 247, 200, 0.10) !important; /* soft wash, not solid fill */
  box-shadow:
    0 0 0 1px rgba(26, 143, 74, 0.24),
    0 18px 50px rgba(19, 111, 57, 0.18);
}

.holiest-btn--outline-glow:hover::after{
  opacity: 0.42;
  filter: blur(14px);
  transform: translateY(1px);
}

.holiest-btn--outline-glow:focus-visible{
  outline: none;
  border-color: rgba(26, 143, 74, 0.85) !important;
  box-shadow:
    0 0 0 3px rgba(26, 143, 74, 0.22),
    0 18px 50px rgba(19, 111, 57, 0.16);
}

/* =========================================================
   HOME PATCH: CTA buttons stacked + problem grid cards like Services
   (Paste this at the very end of style.css)
   ========================================================= */

/* 1) HOME: stack hero CTAs one under another */
body.home .holiest-hero-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 1.25rem;
}

/* 2) HOME: stack pricing card buttons (Vaata lähemalt + Broneeri) */
body.home .holiest-pricing-card .holiest-pricing-actions,
body.home .holiest-pricing-card .holiest-card-actions,
body.home .holiest-pricing-card .holiest-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Make both buttons same width in stacked layout */
body.home .holiest-hero-actions .holiest-btn,
body.home .holiest-pricing-card .holiest-pricing-actions .holiest-btn,
body.home .holiest-pricing-card .holiest-card-actions .holiest-btn,
body.home .holiest-pricing-card .holiest-actions .holiest-btn{
  min-width: 220px;
}

/* Ensure outline glow variant stays “clean” (no green fill) */
body.home .holiest-btn--outline-glow{
  background: transparent !important;
  color: var(--holiest-text) !important;
}

/* 3) HOME: problem grid cards -> same “service grid” vibe
   (border visible even before hover, soft shadow, clean card) */
body.home .holiest-problem-grid .holiest-card,
body.home .holiest-problem-grid .holiest-problem-card,
body.home .holiest-problems-grid .holiest-card,
body.home .holiest-problems-grid .holiest-problem-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(205, 188, 170, 0.55);
  box-shadow: 0 18px 55px rgba(82, 62, 48, 0.10);
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover like Services (subtle lift + slightly stronger border) */
body.home .holiest-problem-grid .holiest-card:hover,
body.home .holiest-problem-grid .holiest-problem-card:hover,
body.home .holiest-problems-grid .holiest-card:hover,
body.home .holiest-problems-grid .holiest-problem-card:hover{
  transform: translateY(-2px);
  border-color: rgba(205, 188, 170, 0.78);
  box-shadow: 0 22px 70px rgba(82, 62, 48, 0.14);
}

/* If problem cards have inner padding wrapper, keep spacing consistent */
body.home .holiest-problem-grid .holiest-card > * ,
body.home .holiest-problems-grid .holiest-card > *{
  border-radius: inherit;
}

/* =========================================================
   HOME FIX v2: (1) Pricing nupud teineteise alla
                (2) Problem-grid kaartidele “service grid” kontuur
   Paste this at the VERY END of style.css
   ========================================================= */

/* 1) HOME: stack pricing card CTA buttons (Vaata lähemalt + Broneeri) */
body.home .holiest-pricing-cta-group{
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 10px;
}

/* sama laiusega “stack” nupud */
body.home .holiest-pricing-cta-group .holiest-btn{
  min-width: 220px;
  max-width: 100%;
}

/* (safety) HOME hero CTA-d ka teineteise alla, kui kuskil override'ib */
body.home .holiest-hero-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 1.25rem;
}

body.home .holiest-hero-actions .holiest-btn{
  min-width: 220px;
  max-width: 100%;
}

/* 2) HOME: problem grid cards -> sama vibe nagu page-teenused “service grid” */
body.home .holiest-grid--problems .holiest-card--problem{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(205, 188, 170, 0.55);
  box-shadow: 0 18px 55px rgba(82, 62, 48, 0.10);
  border-radius: 26px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.home .holiest-grid--problems .holiest-card--problem:hover{
  transform: translateY(-2px);
  border-color: rgba(205, 188, 170, 0.78);
  box-shadow: 0 22px 70px rgba(82, 62, 48, 0.14);
}

/* =========================================================
   HOME: Problem grid icon/image zoom on hover (match Blog cards)
   ========================================================= */

body.home .holiest-grid--problems .holiest-card-icon span {
  transform: scale(1.02);
  transition: transform .35s ease;
  will-change: transform;
  transform-origin: center;
}

body.home .holiest-grid--problems .holiest-card--problem:hover .holiest-card-icon span {
  transform: scale(1.08);
}

/* Safety-net: kui mõnes kaardis on päris <img> ikoonina */
body.home .holiest-grid--problems .holiest-card-icon img {
  transform: scale(1.02);
  transition: transform .35s ease;
  will-change: transform;
  transform-origin: center;
}

body.home .holiest-grid--problems .holiest-card--problem:hover .holiest-card-icon img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  body.home .holiest-grid--problems .holiest-card-icon span,
  body.home .holiest-grid--problems .holiest-card-icon img {
    transition: none;
    transform: none;
  }
}

/* =========================================================
   MIKS HOLIEST: CTA clean-up + footer gap removal
   Paste this at the VERY END of style.css
   ========================================================= */

/* 1) Remove the white gap between the last black quote block and the footer */
body.page-template-page-miks-holiest-php .holiest-footer,
body.page-template-page-miks-holiest .holiest-footer{
  margin-top: 0 !important;
}

/* 2) On the dark quote block: keep green outline+glow, but make text white */
body.page-template-page-miks-holiest-php .holiest-manifest-quote .holiest-btn--outline-glow,
body.page-template-page-miks-holiest .holiest-manifest-quote .holiest-btn--outline-glow{
  color: #fff !important;
  border-color: rgba(26, 143, 74, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(26, 143, 74, 0.22),
    0 18px 60px rgba(19, 111, 57, 0.18) !important;
}

/* 3) On the hero (light): keep text black */
body.page-template-page-miks-holiest-php .holiest-manifest-hero .holiest-btn--outline-glow,
body.page-template-page-miks-holiest .holiest-manifest-hero .holiest-btn--outline-glow{
  color: var(--holiest-text) !important;
}

/* MIKS HOLIEST: services grid CTA ("Alusta siit") should be black text */
body.page-template-page-miks-holiest-php .holiest-services-cta .holiest-btn--outline-glow,
body.page-template-page-miks-holiest .holiest-services-cta .holiest-btn--outline-glow{
  color: var(--holiest-text) !important;
}

/* =========================================================
   HERO COLOR RESTORE (paste at END of style.css)
   - brings back image/video colors (less “milk” + less blur)
   - HOME: blur only in a soft center bubble behind text
   - TEENUSED + MIKS HOLIEST: milder left-frost gradient
   ========================================================= */

/* 1) Default hero overlay: LESS wash + LESS blur (brings back colors) */
.holiest-hero-overlay{
  background: radial-gradient(
    circle at 20% 0%,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(245, 241, 234, 0.72) 60%,
    rgba(245, 241, 234, 0.62) 100%
  ) !important;
  backdrop-filter: blur(0.8px) !important;
  -webkit-backdrop-filter: blur(0.8px) !important;
}

/* 2) HOME: blur only in a soft center bubble (everything else stays crisp) */
body.home .holiest-hero-overlay{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.home .holiest-hero-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* gentle “readability bubble” behind center text */
  background: radial-gradient(
    circle at 50% 36%,
    rgba(245, 241, 234, 0.62) 0%,
    rgba(245, 241, 234, 0.35) 32%,
    rgba(245, 241, 234, 0.00) 70%
  );

  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);

  /* blur only where the bubble is (mask) */
  -webkit-mask-image: radial-gradient(circle at 50% 36%, #000 0%, #000 38%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 36%, #000 0%, #000 38%, transparent 70%);
}

/* 3) TEENUSED: tone + blur DOWN (brings back image) */
body.page-template-page-teenused-php,
body.page-template-page-teenused{
  --hero-frost-blur: 3.5px;   /* was 10px */
  --hero-frost-hold: 46%;
  --hero-frost-fade: 82%;
}
body.page-template-page-teenused-php .holiest-hero--services .holiest-hero-overlay,
body.page-template-page-teenused .holiest-hero--services .holiest-hero-overlay{
  background: linear-gradient(90deg,
    rgba(245, 241, 234, 0.78) 0%,
    rgba(245, 241, 234, 0.48) 34%,
    rgba(245, 241, 234, 0.16) 68%,
    rgba(245, 241, 234, 0.00) 100%
  ) !important;

  /* light fallback blur */
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
}
@supports ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))){
  body.page-template-page-teenused-php .holiest-hero--services .holiest-hero-overlay,
  body.page-template-page-teenused .holiest-hero--services .holiest-hero-overlay{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.page-template-page-teenused-php .holiest-hero--services .holiest-hero-overlay::before,
  body.page-template-page-teenused .holiest-hero--services .holiest-hero-overlay::before{
    background: rgba(245, 241, 234, 0.06) !important;
    backdrop-filter: blur(var(--hero-frost-blur)) !important;
    -webkit-backdrop-filter: blur(var(--hero-frost-blur)) !important;

    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
    mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
  }
}

/* 4) MIKS HOLIEST: same idea (so hero colors come through) */
body.page-template-page-miks-holiest-php,
body.page-template-page-miks-holiest{
  --hero-frost-blur: 2.5px;
  --hero-frost-hold: 38%;
  --hero-frost-fade: 72%;
}
body.page-template-page-miks-holiest-php .holiest-manifest-hero-overlay,
body.page-template-page-miks-holiest .holiest-manifest-hero-overlay{
  background: linear-gradient(90deg,
    rgba(245, 241, 234, 0.80) 0%,
    rgba(245, 241, 234, 0.52) 30%,
    rgba(245, 241, 234, 0.18) 62%,
    rgba(245, 241, 234, 0.00) 100%
  ) !important;

  backdrop-filter: blur(0.8px) !important;
  -webkit-backdrop-filter: blur(0.8px) !important;
}
@supports ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))){
  body.page-template-page-miks-holiest-php .holiest-manifest-hero-overlay,
  body.page-template-page-miks-holiest .holiest-manifest-hero-overlay{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.page-template-page-miks-holiest-php .holiest-manifest-hero-overlay::before,
  body.page-template-page-miks-holiest .holiest-manifest-hero-overlay::before{
    background: rgba(245, 241, 234, 0.06) !important;
    backdrop-filter: blur(var(--hero-frost-blur)) !important;
    -webkit-backdrop-filter: blur(var(--hero-frost-blur)) !important;

    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
    mask-image: linear-gradient(90deg, #000 0%, #000 var(--hero-frost-hold), transparent var(--hero-frost-fade));
  }
}

/* BLOG cards: keep cream full-height even with short excerpt */
.holiest-post-card{ height: 100%; }
.holiest-post-card-linkwrap{ height: 100%; display:flex; flex-direction:column; }
.holiest-post-card-body{ flex: 1 1 auto; background: var(--holiest-bg) !important; }

/* MIKS HOLIEST: center CTA + equal spacing between pricing and footer */
body.page-template-page-miks-holiest-php .holiest-services-cta,
body.page-template-page-miks-holiest .holiest-services-cta{
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(36px, 6vw, 72px);
}

/* kui CTA on kogemata grid-item, siis sunni ta üle rea minema */
body.page-template-page-miks-holiest-php .holiest-services-cta,
body.page-template-page-miks-holiest .holiest-services-cta{
  grid-column: 1 / -1;
}

/* optional safety */
body.page-template-page-miks-holiest-php .holiest-services-cta .holiest-btn,
body.page-template-page-miks-holiest .holiest-services-cta .holiest-btn{
  margin: 0 !important;
}

/* HOME hero video: keep height + show more lower part on wide screens */
body.home .holiest-hero{
  min-height: clamp(640px, 88vh, 940px);
}

/* move the visible part DOWN (more “legs”) */
body.home .holiest-hero--video .holiest-hero-video{
  object-position: 50% 72%;
}

/* MIKS HOLIEST hero: keep height + focus lower */
body.page-template-page-miks-holiest-php .holiest-manifest-hero,
body.page-template-page-miks-holiest .holiest-manifest-hero{
  min-height: clamp(640px, 88vh, 940px);
}

/* push background focus down */
body.page-template-page-miks-holiest-php,
body.page-template-page-miks-holiest{
  --hero-focus-y: 72%;
}

/* =========================================================
   HERO crop direction tuning
   - HOME video: crop bottom (keep top of frame)
   - Image heroes: crop top (keep bottom of frame)
   ========================================================= */

/* 1) HOME (video): crop from bottom => anchor towards TOP */
body.home .holiest-hero--video .holiest-hero-video{
  object-position: 50% 18% !important; /* try 12%..28% */
}

/* 2) MIKS HOLIEST (image): crop from top => focus LOWER */
body.page-template-page-miks-holiest-php,
body.page-template-page-miks-holiest{
  --hero-focus-y: 74%; /* try 68%..82% */
}

/* 3) TEENUSED (image): crop from top => focus LOWER */
body.page-template-page-teenused-php,
body.page-template-page-teenused{
  --hero-focus-y: 74%; /* try 66%..80% */
}

body.page-template-page-teenused-php .holiest-hero--services,
body.page-template-page-teenused .holiest-hero--services,
body.page-template-page-miks-holiest-php .holiest-manifest-hero,
body.page-template-page-miks-holiest .holiest-manifest-hero{
  min-height: clamp(620px, 86vh, 920px);
}




/* =============================================================================
   Holiest Product Builder (v4) — Mission Control UI + Telia-style template
   Additive: safe to append
============================================================================= */

/* --- Generic buttons/tags used in Pood list --- */
.holiest-admin-shell .holiest-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.holiest-admin-shell .holiest-data-table th,
.holiest-admin-shell .holiest-data-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-align: left;
  vertical-align: middle;
}
.holiest-admin-shell .holiest-admin-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 16px;
}
.holiest-admin-shell .holiest-admin-heading-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}
.holiest-admin-shell .holiest-tag{
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(176,122,74,0.14);
  color: #7a4f2c;
  font-weight: 600;
  font-size: 12px;
}
.holiest-admin-shell .holiest-status-dot{
  width: 10px;
  height: 10px;
  display:inline-block;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
}
.holiest-admin-shell .holiest-status-dot.is-active{
  background: #22c55e;
}
.holiest-admin-shell .holiest-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  cursor:pointer;
  font-weight: 700;
}
.holiest-admin-shell .holiest-btn--primary{
  /* Bronze satin (match front-end CTA) */
  border-color: rgba(255,255,255,0.10);
  color: #fff;
  background-image:
        linear-gradient(180deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.06) 35%,
            rgba(0,0,0,0.14) 100%
        ),
        linear-gradient(90deg,
            var(--holiest-bronze-satin-1) 0%,
            var(--holiest-bronze-satin-2) 18%,
            var(--holiest-bronze-satin-3) 50%,
            var(--holiest-bronze-satin-4) 78%,
            var(--holiest-bronze-satin-5) 100%
        );
  box-shadow:
        0 14px 34px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -14px 26px rgba(0,0,0,0.18);
}

.holiest-admin-shell .holiest-btn:focus,
.holiest-admin-shell .holiest-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(176,122,74,0.26), 0 14px 34px rgba(0,0,0,0.12);
}
.holiest-admin-shell .holiest-btn--ghost{
  background: transparent;
}
.holiest-admin-shell .holiest-btn--small{
  padding: 7px 12px;
  font-size: 13px;
}

.holiest-admin-shell .holiest-input{
  width:100%;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

/* --- Builder layout --- */
.hp-builder-wrapper{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}
.hp-builder-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
.hp-head-left{
  display:flex;
  align-items:center;
  gap: 12px;
}
.hp-head-right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.hp-back-link{
  font-weight: 700;
  text-decoration:none;
  color: #111;
}
.hp-status-pill{
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
}
.hp-status-pill.is-saved{
  background: rgba(34,197,94,0.16);
  color: #166534;
}
.hp-undo-redo{
  display:flex;
  gap: 6px;
}
.hp-icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  cursor:pointer;
}
.hp-icon-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
.hp-viewport-toggles{
  display:flex;
  gap: 6px;
}
.hp-vp-btn{
  width: 40px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  cursor:pointer;
}
.hp-vp-btn.is-active{
  border-color: #b07a4a;
  box-shadow: 0 0 0 3px rgba(176,122,74,0.18);
}

.hp-builder-workspace{
  display:flex;
  min-height: 640px;
}
.hp-sidebar{
  width: 420px;
  border-right: 1px solid rgba(0,0,0,0.08);
  background: #faf8f6;
}
.hp-sidebar-inner{
  padding: 14px;
  height: 100%;
  overflow: auto;
}
.hp-preview-area{
  flex:1;
  background: #eef1f5;
  padding: 14px;
}
.hp-preview-container{
  height: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}
.hp-preview-loading{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.72);
  z-index: 3;
  font-weight: 800;
}
.hp-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  max-width: 100%;
  margin: 0 auto;
  display:block;
}

/* Panels */
.hp-panel-group{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 12px;
  margin-bottom: 12px;
}
.hp-panel-title{
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.hp-panel-head-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.hp-panel-content{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.hp-field label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  opacity: 0.9;
}
.hp-field-row{
  display:flex;
  gap: 10px;
}
.hp-field--currency{
  width: 120px;
  flex: 0 0 120px;
}
.hp-toggle-label{
  display:flex;
  gap: 8px;
  align-items:center;
  user-select:none;
}

.hp-text-btn{
  border: 0;
  background: transparent;
  color: #7a4f2c;
  cursor: pointer;
  font-weight: 900;
}
.hp-mini-btn{
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
}
.hp-muted{
  font-size: 13px;
  opacity: 0.7;
}

/* Gallery list */
.hp-gallery-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.hp-gallery-item{
  display:flex;
  gap: 10px;
  align-items:center;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 12px;
  padding: 10px;
}
.hp-gallery-item.is-drag-over{
  box-shadow: 0 0 0 3px rgba(176,122,74,0.22);
  border-color: #b07a4a;
}
.hp-gallery-thumb{
  width: 66px;
  height: 66px;
  border-radius: 12px;
  overflow:hidden;
  flex: 0 0 66px;
  background: rgba(0,0,0,0.06);
}
.hp-gallery-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.hp-gallery-meta{
  flex: 1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
}
.hp-gallery-url{
  font-size: 12px;
  opacity: 0.78;
  word-break: break-all;
}
.hp-drag-handle{
  width: 22px;
  text-align:center;
  opacity: 0.55;
  cursor: grab;
  user-select:none;
}

/* Repeaters */
.hp-repeater{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.hp-repeater-row{
  display:flex;
  gap: 8px;
  align-items:center;
}
.hp-repeater-row--two .holiest-input{
  width: 50%;
}

/* Specs groups */
.hp-specs-groups{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.hp-spec-group{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.hp-spec-group.is-drag-over{
  box-shadow: 0 0 0 3px rgba(176,122,74,0.22);
  border-color: #b07a4a;
}
.hp-spec-group-head{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-bottom: 8px;
}
.hp-spec-group-title{
  flex: 1;
}
.hp-spec-rows{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.hp-spec-row{
  display:flex;
  gap: 8px;
  align-items:center;
}
.hp-spec-label{
  width: 44%;
}
.hp-spec-val{
  width: 56%;
}
.hp-spec-actions{
  margin-top: 8px;
}

/* Focus flash (iframe click -> panel) */
.hp-flash{
  animation: hpFlash 0.7s ease-in-out 1;
}
@keyframes hpFlash{
  0%{ box-shadow: 0 0 0 0 rgba(176,122,74,0.0); }
  30%{ box-shadow: 0 0 0 4px rgba(176,122,74,0.25); }
  100%{ box-shadow: 0 0 0 0 rgba(176,122,74,0.0); }
}

/* =============================================================================
   Front-end: Telia-style product page (Holiest colors)
============================================================================= */
.holiest-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

.hp-telia-page{
  background: #ffffff;
}
.hp-telia-top{
  padding-top: 20px;
  padding-bottom: 22px;
}
.hp-telia-breadcrumbs{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 18px;
}
.hp-telia-badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(176,122,74,0.16);
  color: #7a4f2c;
  font-weight: 900;
}
.hp-telia-code{
  margin-left: auto;
  opacity: 0.65;
  font-weight: 700;
}
.hp-telia-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items:start;
}

.hp-telia-gallery{
  display:flex;
  gap: 18px;
}
.hp-telia-main{
  flex: 1;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hp-telia-main-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 520px;
}
.hp-telia-img-ph{
  color: rgba(0,0,0,0.45);
  font-weight: 800;
}
.hp-telia-thumbs{
  width: 84px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.hp-telia-thumb{
  width: 84px;
  height: 84px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  padding: 0;
}
.hp-telia-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.hp-telia-thumb.is-active{
  border-color: #b07a4a;
  box-shadow: 0 0 0 3px rgba(176,122,74,0.18);
}

.hp-telia-buybox{
  padding-top: 10px;
}
.hp-telia-title{
  font-size: 34px;
  line-height: 1.05;
  margin: 0;
}
.hp-telia-subtitle{
  margin-top: 10px;
  font-size: 15px;
  opacity: 0.75;
}
.hp-telia-box{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 16px;
  background: #fff;
}
.hp-telia-box-head{
  font-weight: 900;
  margin-bottom: 10px;
}
.hp-telia-price-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
}
.hp-telia-price-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3b0a57; /* a deep accent similar to screenshots but can be overridden by theme */
  margin-top: 6px;
}
.hp-telia-price-label{
  font-size: 12px;
  opacity: 0.7;
  font-weight: 800;
}
.hp-telia-price-val{
  font-size: 20px;
  font-weight: 1000;
}

.hp-telia-perks{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px 4px 6px;
}
.hp-telia-perk{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  opacity: 0.88;
}
.hp-telia-ico{
  width: 22px;
  text-align:center;
}

/* Quantity stepper (Shop v1) */
.hp-telia-qty{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 0 4px;
}
.hp-telia-qty-btn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  font-weight: 900;
  cursor:pointer;
}
.hp-telia-qty-input{
  width: 70px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 0 10px;
  font-weight: 900;
  text-align:center;
}
.hp-telia-cta{
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  font-size: 15px;
}
.hp-telia-cta-ico{
  margin-right: 10px;
}

.hp-telia-tabs{
  padding-top: 10px;
  padding-bottom: 50px;
}
.hp-telia-tabbar{
  display:flex;
  gap: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  margin-bottom: 18px;
}
.hp-telia-tab{
  border: 0;
  background: transparent;
  padding: 14px 6px;
  font-weight: 900;
  cursor:pointer;
  opacity: 0.55;
  position: relative;
}
.hp-telia-tab.is-active{
  opacity: 1;
}
.hp-telia-tab.is-active::after{
  content:'';
  position:absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #b07a4a;
  border-radius: 999px;
}
.hp-telia-pane{
  display:none;
}
.hp-telia-pane.is-active{
  display:block;
}
.hp-telia-richtext{
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.92;
}
.hp-telia-bullets{
  margin-top: 12px;
  padding-left: 18px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.hp-telia-links{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.hp-telia-link{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  text-decoration:none;
  color: inherit;
  font-weight: 800;
}
.hp-telia-specs{
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.hp-telia-spec-title{
  font-weight: 1000;
  margin-bottom: 10px;
}
.hp-telia-spec-table{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  overflow: hidden;
}
.hp-telia-spec-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
}
.hp-telia-spec-row:last-child{
  border-bottom: 0;
}
.hp-telia-spec-label{
  opacity: 0.75;
  font-weight: 800;
}
.hp-telia-spec-val{
  font-weight: 800;
}
.hp-telia-empty{
  opacity: 0.7;
}

.hp-telia-bottom-space{
  height: 60px;
}

@media (max-width: 980px){
  .hp-telia-grid{
    grid-template-columns: 1fr;
  }
  .hp-telia-gallery{
    flex-direction:column;
  }
  .hp-telia-thumbs{
    width: 100%;
    flex-direction:row;
    overflow:auto;
  }
  .hp-telia-thumb{
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
  }
  .hp-sidebar{ width: 100%; }
  .hp-builder-workspace{ flex-direction:column; }
  .hp-preview-area{ height: 620px; }
}

/* =========================================================
   MISSION CONTROL: SHOP & BUILDER
   (Required for Step 9 Production Readiness)
   ========================================================= */

/* Shop: Empty State (No products found) */
.holiest-shop-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--holiest-muted, #7a7b80);
    background: var(--holiest-card-bg, #ffffff);
    border: 1px dashed var(--holiest-border-subtle, #e2e2e2);
    border-radius: 4px;
    margin: 2rem 0;
}

/* Shop: Image Placeholder (When no image exists) */
.holiest-product-img-empty {
    width: 100%;
    height: 200px; /* Adjust based on your card layout */
    background-color: #f0f0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b0b5;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Shop: Product Status Indicators */
.hp-status-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #e0e0e0;
    color: #555;
}
.hp-status-pill.is-active {
    background: #d4edda;
    color: #155724;
}

/* Builder: Iframe Preview Wrapper */
.hp-builder-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px); /* Fill remaining screen */
    background: #fff;
    border: 1px solid #ddd;
}

.hp-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.hp-builder-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.hp-sidebar {
    width: 350px;
    overflow-y: auto;
    border-right: 1px solid #eee;
    padding: 1rem;
    background: #fff;
}

.hp-preview {
    flex: 1;
    background: #eef1f5;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-preview iframe {
    width: 100%;
    height: 100%;
    max-width: 1200px; /* Simulate desktop */
    border: none;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* =========================================================
   MISSION CONTROL: KPI DASHBOARD (Previously provided)
   ========================================================= */

.holiest-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.holiest-kpi-card {
    background: var(--holiest-card-bg, #ffffff);
    padding: 1.5rem;
    border: 1px solid var(--holiest-border-subtle, #e2e2e2);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.holiest-kpi-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--holiest-muted, #7a7b80);
    margin-bottom: 0.5rem;
}

.holiest-kpi-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--holiest-text, #232326);
    line-height: 1.1;
}

.holiest-kpi-value[data-status="good"] { color: #27ae60; }
.holiest-kpi-value[data-status="warn"] { color: #e67e22; }
.holiest-kpi-value[data-status="bad"]  { color: #c0392b; }
/* -----------------------------------------------------------------------------
 * Product Builder (Mission Control) – dynamic fields styling
 * ---------------------------------------------------------------------------*/
.builder-row{display:flex;gap:10px;align-items:center;margin:8px 0;}
.builder-row--2{flex-wrap:wrap;}
.builder-input,.builder-textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(0,0,0,0.20);color:inherit;font:inherit;outline:none;}
.builder-textarea{resize:vertical;min-height:90px;}
.builder-btn{border-radius:10px;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.06);color:inherit;padding:10px 12px;cursor:pointer;font:inherit;white-space:nowrap;}
.builder-btn--ghost{background:transparent;}
.builder-btn:hover{background:rgba(255,255,255,0.10);}

.hp-specs-group{padding:12px;border:1px solid rgba(255,255,255,0.10);border-radius:14px;margin:10px 0;background:rgba(255,255,255,0.04);}
.hp-specs-group-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px;}
.hp-specs-group-actions{display:flex;gap:8px;align-items:center;}
.hp-specs-rows{display:flex;flex-direction:column;gap:8px;}
.hp-specs-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;}

/* -----------------------------------------------------------------------------
 * Product Builder (Mission Control) – dynamic fields styling
 * (Keeps existing typography by inheriting fonts)
 * ---------------------------------------------------------------------------*/
.builder-row{display:flex;gap:10px;align-items:center;margin:8px 0;}
.builder-row--2{flex-wrap:wrap;}
.builder-input,.builder-textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:inherit;font:inherit;}
.builder-textarea{min-height:90px;resize:vertical;}
.builder-input::placeholder,.builder-textarea::placeholder{color:rgba(255,255,255,.55);}
.builder-btn{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;}
.builder-btn--ghost{background:transparent;}
.builder-btn:active{transform:translateY(1px);}

.hp-specs-group{border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px;margin:10px 0;background:rgba(255,255,255,.03);}
.hp-specs-group-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px;}
.hp-specs-group-actions{display:flex;gap:8px;}
.hp-specs-rows{display:flex;flex-direction:column;gap:8px;}
.hp-specs-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;}

.holiest-link-danger{color:#ff7b7b;}


/* Shop filter icons as images */
.holiest-filter-icon img{width:22px;height:22px;display:block;object-fit:contain;opacity:.85;}
.holiest-filter-link.is-active .holiest-filter-icon img{opacity:1;}


/* =========================
   Cart row (shop checkout + booking summary)
========================= */

.hp-cart-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.hp-cart-row:last-child{border-bottom:0;}

.hp-cart-row__title{flex:1 1 auto;font-weight:600;line-height:1.2;}
.hp-cart-row__unit{width:76px;text-align:right;color:rgba(0,0,0,.6);font-size:.95em;white-space:nowrap;}
.hp-cart-row__qty{display:flex;align-items:center;gap:6px;}
.hp-cart-qty{min-width:22px;text-align:center;font-weight:600;}

.hp-cart-qty-btn,
.hp-cart-remove{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.95);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  user-select:none;
}

.hp-cart-qty-btn:active,
.hp-cart-remove:active{transform:translateY(1px);}

.hp-cart-remove{margin-left:4px;}

.holiest-booking-cart-box{display:none;}

.holiest-summary-line--service{display:flex;align-items:center;gap:10px;}
.holiest-summary-line--service > span[data-summary="type"]{flex:1 1 auto;}
.holiest-summary-actions{margin-left:auto;display:flex;gap:10px;align-items:center;}

.holiest-link-btn{
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
  font:inherit;
}

.holiest-icon-btn{
  width:30px;
  height:30px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* =========================
   Payment summary (Step 7)
========================= */
.holiest-pay-summary{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
}
.holiest-pay-box{
  border:1px solid rgba(26,143,74,.75);
  border-radius:18px;
  padding:14px 14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 55px rgba(19,111,57,0.18);
}
.holiest-pay-box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.holiest-pay-box-title{
  margin:0;
  font-size:1.05rem;
  letter-spacing:.2px;
}
.holiest-pay-box-actions{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.holiest-pay-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
  border-top:1px solid rgba(0,0,0,.06);
}
.holiest-pay-row:first-of-type{border-top:0;}
.holiest-pay-label{
  color:var(--holiest-muted);
  font-size:.95rem;
}
.holiest-pay-value{
  font-weight:600;
  text-align:right;
}
.holiest-pay-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.75);
  font-weight:700;
  margin-bottom:14px;
}

/* Make cart rows more compact inside payment summary */
.js-pay-shop-box .hp-cart-row{padding:8px 0;}
.js-pay-shop-box .hp-cart-row__unit{width:64px;}

/* Service replace view: stronger selected state */
#holiestServiceActionsModal .holiest-service-actions-view[data-view="replace"] .holiest-choice.is-selected{
  border-width:2px;
  box-shadow:0 22px 70px rgba(19,111,57,0.22);
  background:rgba(209, 249, 219, 0.30);
}



/* --- MODERN "Jätka broneeringut" floating button (FAB) --- */
.holiest-fab{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    width: 86px;
    height: 86px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.holiest-fab-btn{
    width: 62px;
    height: 62px;
    border-radius: 999px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.14);
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 35%, rgba(0,0,0,0.18) 100%),
        linear-gradient(90deg,
            var(--holiest-bronze-satin-1) 0%,
            var(--holiest-bronze-satin-2) 18%,
            var(--holiest-bronze-satin-3) 50%,
            var(--holiest-bronze-satin-4) 78%,
            var(--holiest-bronze-satin-5) 100%
        );
    color: #fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 18px 50px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -14px 26px rgba(0,0,0,0.18);
    overflow:hidden;
    position:relative;
    z-index: 2;
}

.holiest-fab-btn:hover{ transform: translateY(-2px) scale(1.02); }

/* keep DOM bits but don’t show the old marquee */
.holiest-fab-marquee{ display:none !important; }

.holiest-fab-icon{
    width: 24px;
    height: 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.holiest-fab-spinner{
    position:absolute;
    inset: -12px;
    z-index: 1;
    animation: spinArrows 6s infinite ease-in-out;
    pointer-events:none;
}

.holiest-fab-arrows{ width:100%; height:100%; display:block; }
.holiest-fab-arrows path{ stroke: #1a8f4a !important; stroke-width: 2 !important; }

.holiest-fab-label{
    position:absolute;
    inset: -18px;
    z-index: 1;
    pointer-events:none;
    animation: spinText 12s linear infinite;
}
.holiest-fab-label svg{ width:100%; height:100%; }
.holiest-fab-label text{
    fill: rgba(0,0,0,0.72);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

@media (max-width: 520px){
    .holiest-fab{ right: 14px; bottom: 14px; width: 82px; height: 82px; }
    .holiest-fab-btn{ width: 58px; height: 58px; }
}
/* Mini modal actions – consistent stacked buttons */
.holiest-mini-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}
.holiest-mini-actions .holiest-btn{
    width: 100%;
}

/* =========================
   FAB v4: circular resume button (mobile-first)
   - round button
   - two curved arrows around
   - ring text hint
========================= */
#holiestBookingFAB.holiest-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 92px;
  height: 92px;
  z-index: 10000;
}
#holiestBookingFAB .holiest-fab-btn{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background-image: linear-gradient(135deg,
    var(--holiest-bronze-satin-1) 0%,
    var(--holiest-bronze-satin-2) 26%,
    var(--holiest-bronze-satin-3) 50%,
    var(--holiest-bronze-satin-4) 74%,
    var(--holiest-bronze-satin-5) 100%
  );
  box-shadow:
    0 10px 25px rgba(0,0,0,0.18),
    0 0 0 8px rgba(26,143,74,0.10),
    0 0 28px rgba(26,143,74,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
#holiestBookingFAB .holiest-fab-btn:active{ transform: translate(-50%, -50%) scale(0.98); }

/* Hide marquee (old wide version) */
#holiestBookingFAB .holiest-fab-marquee{ display: none !important; }

/* Show ring label + spinner */
#holiestBookingFAB .holiest-fab-label,
#holiestBookingFAB .holiest-fab-spinner{ display: block !important; }

#holiestBookingFAB .holiest-fab-label{
  position: absolute;
  inset: -14px;
  pointer-events: none;
  animation: holiestFabSpin 14s linear infinite;
}
#holiestBookingFAB .holiest-fab-label svg{ width: 100%; height: 100%; }
#holiestBookingFAB .holiest-fab-label text{ fill: rgba(15,16,18,0.62); font-weight: 700; letter-spacing: 2px; }

#holiestBookingFAB .holiest-fab-spinner{
  position: absolute;
  inset: -6px;
  pointer-events: none;
  animation: holiestFabSpin 6s linear infinite;
}
#holiestBookingFAB .holiest-fab-spinner svg{ width: 100%; height: 100%; }
#holiestBookingFAB .holiest-fab-arrows path{ stroke: #1a8f4a !important; stroke-width: 2 !important; }

/* Center icon */
#holiestBookingFAB .holiest-fab-icon{ width: 26px; height: 26px; }
#holiestBookingFAB .holiest-fab-icon path{ stroke: rgba(255,255,255,0.92); }

@keyframes holiestFabSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

@media (max-width: 520px){
  #holiestBookingFAB.holiest-fab{ right: 14px; bottom: 14px; width: 88px; height: 88px; }
  #holiestBookingFAB .holiest-fab-btn{ width: 62px; height: 62px; }
}

/* -------------------------------------------------------------------------
   Mission Control – Emailing + Contacts (Brevo-like layout)
------------------------------------------------------------------------- */

.hp-emailing-layout,
.hp-contacts-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
}

@media (max-width: 980px) {
  .hp-emailing-layout,
  .hp-contacts-layout {
    grid-template-columns: 1fr;
  }
}

.hp-emailing-nav,
.hp-contacts-nav {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 16px;
  padding: 12px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.hp-emailing-nav-item a,
.hp-contacts-nav-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid transparent;
}

.hp-emailing-nav-item.is-active a,
.hp-contacts-nav-item.is-active a {
  border-color: rgba(0,255,170,0.25);
  box-shadow: 0 0 0 1px rgba(0,255,170,0.08), 0 0 18px rgba(0,255,170,0.12);
}

.hp-emailing-nav-divider,
.hp-contacts-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0;
}

.hp-emailing-main,
.hp-contacts-main {
  min-width: 0;
}

.hp-emailing-header,
.hp-contacts-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.hp-emailing-safe-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(0,0,0,0.2);
}

.hp-emailing-safe-mode-text {
  font-size: 13px;
  opacity: 0.9;
}

.hp-emailing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.hp-emailing-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 16px;
  padding: 14px;
}

.hp-emailing-card h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
}

.hp-emailing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.hp-emailing-form label {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin: 12px 0 6px;
}

.hp-emailing-form input[type="text"],
.hp-emailing-form input[type="number"],
.hp-emailing-form input[type="email"],
.hp-emailing-form textarea,
.hp-emailing-form select,
.hp-contacts-form input[type="text"],
.hp-contacts-form input[type="number"],
.hp-contacts-form textarea,
.hp-contacts-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  color: inherit;
}

.hp-emailing-form textarea,
.hp-contacts-form textarea {
  min-height: 140px;
  resize: vertical;
}

.hp-contacts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}

.hp-contacts-table {
  width: 100%;
  border-collapse: collapse;
}

.hp-contacts-table th,
.hp-contacts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}

.hp-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
}

.hp-pill--green {
  border-color: rgba(0,255,170,0.18);
  box-shadow: 0 0 14px rgba(0,255,170,0.08);
}