/* =====================================================================
   GreenHaven Premium — component styles
   Consumes the design tokens declared in style.css (:root vars).
   Organised: layout · buttons · sections · widgets · header/footer · woo.
   ===================================================================== */

/* ---------- Layout ---------- */
.ghp-section {
    max-width: var(--gh-container);
    margin-inline: auto;
    padding: var(--gh-sp-16) var(--gh-sp-6);
}
.ghp-section-head { max-width: 60ch; margin: 0 auto var(--gh-sp-8); text-align: center; }
.ghp-eyebrow {
    display: inline-block;
    font-family: var(--gh-font-body);
    font-size: 0.8rem;
    font-weight: var(--gh-fw-semi);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gh-accent);
    margin-bottom: var(--gh-sp-3);
}
.ghp-eyebrow--light { color: hsl(var(--gh-accent-h) 60% 72%); }
.ghp-section-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 0 0 var(--gh-sp-3); }
.ghp-section-intro { color: var(--gh-fg-soft); font-size: 1.05rem; margin: 0; }

/* ---------- Buttons ---------- */
.ghp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gh-sp-2);
    padding: 14px 28px;
    border-radius: var(--gh-radius-pill);
    font-family: var(--gh-font-body);
    font-weight: var(--gh-fw-semi);
    font-size: 0.95rem;
    line-height: 1;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--gh-transition), background-color var(--gh-transition), color var(--gh-transition);
    text-decoration: none;
}
.ghp-btn:hover { transform: translateY(-2px); }
.ghp-btn--primary { background: var(--gh-primary); color: var(--gh-on-primary); }
.ghp-btn--primary:hover { background: var(--gh-primary-hover); color: var(--gh-on-primary); }
.ghp-btn--accent { background: var(--gh-accent); color: #1a1206; }
.ghp-btn--accent:hover { background: var(--gh-accent-hover); }
.ghp-btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.ghp-btn--ghost:hover { background: rgba(255,255,255,0.08); }

/* ---------- Hero ---------- */
.ghp-hero {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--gh-on-primary);
    background-size: cover;
    background-position: center;
    border-radius: 0;
    overflow: hidden;
}
.ghp-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, hsl(var(--gh-primary-h) 40% 8% / 0.85), hsl(var(--gh-primary-h) 40% 8% / 0.15));
}
.ghp-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: var(--gh-container);
    width: 100%;
    margin-inline: auto;
    padding: var(--gh-sp-24) var(--gh-sp-6);
    gap: var(--gh-sp-4);
}
.ghp-hero__title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 16ch; color: #fff; margin: 0; }
.ghp-hero__sub { font-size: 1.15rem; max-width: 46ch; color: hsl(44 30% 92%); margin: 0; }
.ghp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--gh-sp-3); margin-top: var(--gh-sp-4); }

/* ---------- Category grid ---------- */
.ghp-catgrid { display: grid; gap: var(--gh-sp-4); }
.ghp-catcard {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--gh-radius-card);
    overflow: hidden;
    box-shadow: var(--gh-shadow-md);
}
.ghp-catcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.ghp-catcard:hover .ghp-catcard__img { transform: scale(1.05); }
.ghp-catcard::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, hsl(var(--gh-primary-h) 40% 8% / 0.7), transparent 55%);
}
.ghp-catcard__label {
    position: absolute; left: var(--gh-sp-4); bottom: var(--gh-sp-4); z-index: 1;
    color: #fff; font-family: var(--gh-font-head); font-size: 1.35rem; font-weight: var(--gh-fw-semi);
}

/* ---------- Product carousel + cards ---------- */
.ghp-carousel {
    --ghp-per-view: 4;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--ghp-per-view) - 1) * var(--gh-sp-6)) / var(--ghp-per-view));
    gap: var(--gh-sp-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: var(--gh-sp-4);
    scrollbar-width: thin;
}
.ghp-carousel > .ghp-pcard { scroll-snap-align: start; }
.ghp-pcard {
    background: var(--gh-surface);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-card);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow var(--gh-transition), transform var(--gh-transition);
}
.ghp-pcard:hover { box-shadow: var(--gh-shadow-lg); transform: translateY(-3px); }
.ghp-pcard__media { position: relative; display: block; aspect-ratio: 4/5; background: var(--gh-primary-soft); }
.ghp-pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ghp-pcard__badge {
    position: absolute; top: var(--gh-sp-3); left: var(--gh-sp-3); z-index: 1;
    background: var(--gh-sale); color: #fff; font-size: 0.72rem; font-weight: 600;
    padding: 4px 10px; border-radius: var(--gh-radius-pill);
}
.ghp-pcard__body { padding: var(--gh-sp-4); display: flex; flex-direction: column; gap: var(--gh-sp-2); }
.ghp-pcard__title { font-size: 1.05rem; margin: 0; font-family: var(--gh-font-head); }
.ghp-pcard__title a { color: var(--gh-fg); }
.ghp-pcard__price { color: var(--gh-primary); font-weight: 600; font-family: var(--gh-font-body); }
.ghp-pcard__price del { color: var(--gh-muted); font-weight: 400; margin-right: 6px; }
.ghp-carousel__nav, .ghp-testi__nav { display: flex; gap: var(--gh-sp-2); justify-content: center; margin-top: var(--gh-sp-6); }
.ghp-carousel__btn, .ghp-testi__nav button {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid var(--gh-border); background: var(--gh-surface); color: var(--gh-fg);
    font-size: 1.1rem; cursor: pointer; transition: background var(--gh-transition), color var(--gh-transition);
}
.ghp-carousel__btn:hover, .ghp-testi__nav button:hover { background: var(--gh-primary); color: var(--gh-on-primary); border-color: var(--gh-primary); }

/* ---------- Value props ---------- */
.ghp-vprops-wrap--invert {
    background: var(--gh-primary);
    color: var(--gh-on-primary);
    max-width: none;
}
.ghp-vprops-wrap--invert .ghp-section-title,
.ghp-vprops-wrap--invert .ghp-vprop__title { color: #fff; }
.ghp-vprops-wrap--invert .ghp-vprop__text { color: hsl(44 20% 82%); }
.ghp-vprops-wrap--invert .ghp-vprops { max-width: var(--gh-container); margin-inline: auto; }
.ghp-vprops { display: grid; gap: var(--gh-sp-8); }
.ghp-vprop { text-align: center; }
.ghp-vprop__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; margin-bottom: var(--gh-sp-3);
    border-radius: 50%; background: hsl(var(--gh-accent-h) var(--gh-accent-s) 52% / 0.16);
    color: var(--gh-accent); font-size: 1.5rem;
}
.ghp-vprop__title { font-size: 1.2rem; margin: 0 0 var(--gh-sp-2); }
.ghp-vprop__text { color: var(--gh-fg-soft); font-size: 0.98rem; margin: 0; }

/* ---------- Testimonials ---------- */
.ghp-testi { position: relative; overflow: hidden; }
.ghp-testi__track { display: flex; gap: var(--gh-sp-6); transition: transform 400ms ease; }
.ghp-testi__item {
    flex: 0 0 calc((100% - var(--gh-sp-6) * 2) / 3);
    background: var(--gh-surface); border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-card); padding: var(--gh-sp-8); margin: 0;
    box-shadow: var(--gh-shadow-sm);
}
.ghp-testi__stars { color: var(--gh-accent); letter-spacing: 2px; margin-bottom: var(--gh-sp-3); }
.ghp-testi__quote { font-family: var(--gh-font-head); font-size: 1.25rem; line-height: 1.45; margin: 0 0 var(--gh-sp-6); }
.ghp-testi__by { display: flex; align-items: center; gap: var(--gh-sp-3); font-size: 0.92rem; }
.ghp-testi__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ghp-testi__role { color: var(--gh-muted); }

/* ---------- Editorial split ---------- */
.ghp-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gh-sp-12); align-items: center; }
.ghp-split--reverse .ghp-split__media { order: 2; }
.ghp-split__media img { width: 100%; border-radius: var(--gh-radius-card); box-shadow: var(--gh-shadow-lg); }
.ghp-split__title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: var(--gh-sp-3) 0 var(--gh-sp-4); }
.ghp-split__text { color: var(--gh-fg-soft); font-size: 1.05rem; margin-bottom: var(--gh-sp-6); }

/* ---------- Newsletter ---------- */
.ghp-news-wrap { max-width: none; padding-inline: 0; }
.ghp-news {
    max-width: var(--gh-container); margin-inline: auto;
    background: var(--gh-primary); color: var(--gh-on-primary);
    border-radius: var(--gh-radius-card); padding: var(--gh-sp-16) var(--gh-sp-12);
    display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gh-sp-8); align-items: center;
}
.ghp-news__title { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 0 0 var(--gh-sp-2); }
.ghp-news__text { color: hsl(44 20% 84%); margin: 0; }
.ghp-news__form { display: flex; gap: var(--gh-sp-2); }
.ghp-news__input {
    flex: 1; padding: 14px 18px; border-radius: var(--gh-radius-pill);
    border: 1.5px solid transparent; font-size: 0.95rem; background: #fff; color: var(--gh-fg);
}
.ghp-news__consent { grid-column: 2; color: hsl(44 15% 72%); font-size: 0.82rem; margin: var(--gh-sp-2) 0 0; }

/* ---------- Services ---------- */
.ghp-services { display: grid; gap: var(--gh-sp-6); }
.ghp-service {
    background: var(--gh-surface); border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-card); padding: var(--gh-sp-8);
    display: flex; flex-direction: column; gap: var(--gh-sp-3);
    transition: box-shadow var(--gh-transition), transform var(--gh-transition);
}
.ghp-service:hover { box-shadow: var(--gh-shadow-md); transform: translateY(-3px); }
.ghp-service__icon {
    width: 54px; height: 54px; border-radius: var(--gh-radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gh-primary-soft); color: var(--gh-primary); font-size: 1.4rem;
}
.ghp-service__title { font-size: 1.3rem; margin: 0; }
.ghp-service__text { color: var(--gh-fg-soft); margin: 0; flex: 1; }
.ghp-service__cta { font-weight: 600; color: var(--gh-accent); margin-top: var(--gh-sp-2); }

/* ---------- Header / top bar (for Elementor-built header, styles the widgets) ---------- */
.ghp-topbar {
    background: var(--gh-primary); color: var(--gh-on-primary);
    font-size: 0.85rem; text-align: center; padding: 8px 16px;
}
.ghp-topbar strong, .ghp-topbar .ghp-topbar__accent { color: var(--gh-accent); }
.ghp-topbar__inner { max-width: var(--gh-container); margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: var(--gh-sp-6); }
.ghp-topbar__meta { display: none; gap: var(--gh-sp-4); }
.ghp-topbar__meta a { color: var(--gh-on-primary); }
@media (min-width: 768px) {
    .ghp-topbar__inner { justify-content: space-between; }
    .ghp-topbar__meta { display: inline-flex; }
}
.ghp-header--sticky { position: sticky; top: 0; z-index: 900; transition: box-shadow var(--gh-transition), background var(--gh-transition); }
.ghp-header--scrolled { box-shadow: var(--gh-shadow-md); background: var(--gh-surface); }
.ghp-cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--gh-accent); color: #1a1206; font-size: 0.72rem; font-weight: 700;
    border-radius: var(--gh-radius-pill);
}
.ghp-whatsapp-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 950;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--gh-shadow-lg);
}

/* ---------- Footer ---------- */
.ghp-footer { background: var(--gh-primary); color: hsl(44 20% 84%); padding: var(--gh-sp-16) var(--gh-sp-6) var(--gh-sp-8); }
.ghp-footer a { color: hsl(44 20% 84%); }
.ghp-footer a:hover { color: var(--gh-accent); }
.ghp-footer__cols { max-width: var(--gh-container); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--gh-sp-8); }
.ghp-footer__title { color: #fff; font-size: 1rem; letter-spacing: 0.04em; margin-bottom: var(--gh-sp-4); }
.ghp-footer__bottom { max-width: var(--gh-container); margin: var(--gh-sp-12) auto 0; padding-top: var(--gh-sp-6); border-top: 1px solid hsl(var(--gh-primary-h) 20% 30%); display: flex; justify-content: space-between; gap: var(--gh-sp-4); flex-wrap: wrap; font-size: 0.85rem; }

/* ---------- WooCommerce polish ---------- */
.ghp-woo-wrap { max-width: var(--gh-container); margin-inline: auto; padding: var(--gh-sp-12) var(--gh-sp-6); }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--gh-surface); border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-card); padding: var(--gh-sp-4); text-align: left;
}
.woocommerce ul.products li.product img { border-radius: var(--gh-radius); }
.woocommerce span.price, .woocommerce div.product p.price { color: var(--gh-primary); font-weight: 600; }
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt {
    background: var(--gh-primary); color: var(--gh-on-primary);
    border-radius: var(--gh-radius-pill); padding: 12px 24px; font-weight: 600;
    border: none; transition: background var(--gh-transition);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover { background: var(--gh-primary-hover); }
.woocommerce .star-rating span { color: var(--gh-accent); }
.woocommerce nav.woocommerce-pagination ul li a { color: var(--gh-primary); }

/* Shop filter sidebar */
.ghp-shop-filters { border: 1px solid var(--gh-border); border-radius: var(--gh-radius-card); padding: var(--gh-sp-6); background: var(--gh-surface); }
.ghp-shop-filters h3 { font-size: 1rem; margin: 0 0 var(--gh-sp-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ghp-footer__cols { grid-template-columns: 1fr 1fr; }
    .ghp-testi__item { flex-basis: calc((100% - var(--gh-sp-6)) / 2); }
}
@media (max-width: 768px) {
    .ghp-split, .ghp-news { grid-template-columns: 1fr; }
    .ghp-split--reverse .ghp-split__media { order: 0; }
    .ghp-news__consent { grid-column: 1; }
    .ghp-section { padding: var(--gh-sp-12) var(--gh-sp-4); }
    .ghp-testi__item { flex-basis: 100%; }
    .ghp-footer__bottom { justify-content: center; text-align: center; }
}
@media (max-width: 375px) {
    .ghp-hero__cta { flex-direction: column; align-items: stretch; }
    .ghp-news__form { flex-direction: column; }
}