/* ═══════════════════════════════════════
   VELAR WIDGETS — Base Styles
   Provides layout defaults only.
   All visual styles controllable via Elementor.
   ═══════════════════════════════════════ */

/* Global mobile overflow fix — prevent horizontal wobble */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
    }
    .elementor { overflow-x: hidden !important; }
}

/* ── Reviews (vr-) ── */
.vr-wrap { width:100%; }
.vr-header { margin-bottom:16px; }
.vr-label {
    display:block;
    font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
    color:#C8C994; margin-bottom:8px;
}
.vr-heading {
    font-family:'Playfair Display',serif; font-size:36px; font-style:italic;
    color:#272822; margin:0;
}
.vr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vr-card {
    display:flex; flex-direction:column; background:#fff;
    border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:32px;
    transition:box-shadow .3s, transform .3s;
}
.vr-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.08); }
.vr-card--featured { border-color:#C8C994; }
.vr-stars { color:#D4A847; font-size:16px; margin-bottom:16px; letter-spacing:2px; }
.vr-text { font-style:italic; line-height:1.7; flex:1; margin:0 0 24px; color:#555; }
.vr-author { display:flex; align-items:center; gap:12px; margin-top:auto; }
.vr-avatar {
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%;
    background:#272822; color:#fff; font-size:13px; font-weight:600;
    flex-shrink:0; overflow:hidden;
}
.vr-avatar--img { padding:0; }
.vr-avatar--img img { width:100%; height:100%; object-fit:cover; }
.vr-author-info { display:flex; flex-direction:column; gap:2px; }
.vr-name { font-weight:600; font-size:14px; color:#272822; }
.vr-product { font-size:12px; color:#C8C994; }

/* ── Benefits Grid (vb-) ── */
.vb-wrap { width:100%; }
.vb-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.vb-item {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:32px 20px; transition:transform .3s;
}
.vb-item:hover { transform:translateY(-4px); }
.vb-icon {
    display:inline-flex; align-items:center; justify-content:center;
    font-size:28px; padding:16px; border:1px solid rgba(0,0,0,0.1);
    border-radius:12px; margin-bottom:16px; color:#6B7256;
    transition:background .3s, color .3s;
}
.vb-item:hover .vb-icon { background:rgba(107,114,86,0.08); }
.vb-title {
    font-family:'Playfair Display',serif; font-size:18px; font-weight:600;
    color:#272822; margin:0 0 8px;
}
.vb-desc { font-size:14px; line-height:1.6; color:#777; margin:0; }
.vb-cta {
    background:#272822; border-radius:24px 24px 0 0;
    padding:64px 24px 80px; text-align:center; margin-top:64px;
}
.vb-cta-heading {
    font-family:'Playfair Display',serif; font-size:40px; font-style:italic;
    color:#fff; margin:0 0 16px;
}
.vb-cta-desc { font-size:16px; color:rgba(255,255,255,0.55); max-width:480px; margin:0 auto 32px; }
.vb-cta-btn {
    display:inline-block; background:#C8C994; color:#272822;
    padding:16px 48px; border-radius:50px;
    font-weight:600; font-size:14px; letter-spacing:1px; text-transform:uppercase;
    text-decoration:none; transition:background .3s, transform .2s;
}
.vb-cta-btn:hover { background:#b5b87a; transform:translateY(-2px); }

/* ── Brand Story (vs-) ── */
.vs-wrap { width:100%; }
.vs-grid { display:flex; align-items:stretch; gap:0; }
.vs-grid--reverse { flex-direction:row-reverse; }
.vs-image-col { flex:0 0 50%; max-width:50%; }
.vs-img { width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; }
.vs-content-col {
    flex:1; display:flex; flex-direction:column; justify-content:center;
    padding:0 0 0 48px;
}
.vs-grid--reverse .vs-content-col { padding:0 48px 0 0; }
.vs-label {
    display:block; font-size:12px; font-weight:600; letter-spacing:2px;
    text-transform:uppercase; color:#C8C994; margin-bottom:8px;
}
.vs-heading {
    font-family:'Playfair Display',serif; font-size:36px; font-style:italic;
    color:#272822; margin:0;
}
.vs-divider { width:60px; height:3px; background:#272822; margin:24px 0; }
.vs-text { font-size:16px; line-height:1.7; color:#555; margin:0 0 20px; }
.vs-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:#272822; color:#fff; padding:16px 40px; border-radius:50px;
    font-weight:600; font-size:14px; letter-spacing:1px; text-transform:uppercase;
    text-decoration:none; transition:background .3s, transform .2s; margin-top:24px;
}
.vs-btn:hover { background:#3a3b30; transform:translateY(-2px); color:#fff; }
.vs-btn svg { width:16px; height:16px; }
.vs-btn--ghost {
    background:transparent !important; border:none !important; padding:0 !important;
    color:#272822 !important; font-size:15px; font-weight:400;
    letter-spacing:0.5px; text-transform:none; border-radius:0 !important;
    gap:16px; box-shadow:none !important;
}
.vs-btn--ghost:hover {
    background:transparent !important; transform:none !important;
    opacity:0.7; box-shadow:none !important;
}
.vs-btn--ghost svg { width:32px; height:16px; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.vs-btn--ghost:hover svg { transform:translateX(8px); }

/* ── Value Props (vp-) ── */
.vp-wrap { width:100%; }
.vp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.vp-badge {
    display:flex; align-items:center; gap:16px;
    background:#F6F6EA; border-radius:12px; padding:24px;
    text-decoration:none; transition:transform .3s, box-shadow .3s;
}
.vp-badge--top { flex-direction:column; text-align:center; }
.vp-badge:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.vp-icon { font-size:24px; color:#6B7256; flex-shrink:0; }
.vp-icon svg { width:24px; height:24px; }
.vp-info { display:flex; flex-direction:column; gap:2px; }
.vp-title { font-weight:600; font-size:15px; color:#272822; }
.vp-sub { font-size:13px; color:#777; }

/* ── CTA Banner (vc-) ── */
.vc-wrap {
    background:#272822; padding:80px 40px; width:100%;
}
.vc-label {
    display:block; font-size:12px; font-weight:600; letter-spacing:2px;
    text-transform:uppercase; color:#d8d9b2; margin-bottom:12px;
}
.vc-heading {
    font-family:'Playfair Display',serif; font-size:40px; font-style:italic;
    color:#fff; margin:0 0 8px;
}
.vc-divider { width:60px; height:3px; background:#C8C994; }
.vc-desc { font-size:16px; color:rgba(255,255,255,0.55); max-width:480px; margin-bottom:32px; }
.vc-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:#C8C994; color:#272822; padding:16px 48px; border-radius:50px;
    font-weight:600; font-size:14px; letter-spacing:1px; text-transform:uppercase;
    text-decoration:none; transition:background .3s, transform .2s;
}
.vc-btn:hover { background:#b5b87a; transform:translateY(-2px); }
.vc-btn-icon { display:inline-flex; }
.vc-btn-icon svg { width:14px; height:14px; }

/* ── Instagram Feed (vi-) ── */
.vi-wrap { background:#1c1c1c; width:100%; }
.vi-header { margin-bottom:16px; }
.vi-hicon {
    display:block; font-size:28px; color:rgba(255,255,255,0.6); margin-bottom:12px;
}
.vi-hicon svg { width:28px; height:28px; }
.vi-heading {
    font-family:'Playfair Display',serif; font-size:36px; font-style:italic;
    color:#fff; margin:0 0 12px;
}
.vi-subtitle { font-size:15px; color:rgba(255,255,255,0.45); max-width:420px; margin-bottom:48px; }
.vi-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.vi-item {
    display:flex; align-items:center; justify-content:center;
    height:200px; border-radius:12px; overflow:hidden;
    transition:opacity .3s, transform .3s; cursor:pointer; text-decoration:none;
}
.vi-item--placeholder { background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.1); }
.vi-placeholder-icon { font-size:32px; color:rgba(255,255,255,0.15); }
.vi-placeholder-icon svg { width:32px; height:32px; }
.vi-item--image img { width:100%; height:100%; object-fit:cover; }
.vi-item:hover { opacity:0.8; transform:scale(1.03); }

/* ── Responsive ── */
@media (max-width:1024px) {
    .vr-grid { grid-template-columns:repeat(2,1fr); }
    .vb-grid { grid-template-columns:repeat(2,1fr); }
    .vp-grid { grid-template-columns:repeat(2,1fr); }
    .vi-grid { grid-template-columns:repeat(3,1fr); }
    .vs-grid, .vs-grid--reverse { flex-direction:column; }
    .vs-image-col { flex:0 0 100%; max-width:100%; }
    .vs-content-col, .vs-grid--reverse .vs-content-col { padding:32px 0 0; }
}
@media (max-width:767px) {
    /* Reviews — horizontal scroll on mobile */
    .vr-wrap { padding: 48px 16px !important; }
    .vr-grid {
        grid-template-columns: 1fr;
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 8px;
    }
    .vr-grid::-webkit-scrollbar { display: none; }
    .vr-card {
        min-width: 280px;
        max-width: 85vw;
        scroll-snap-align: start;
        flex-shrink: 0;
        padding: 24px;
    }
    .vr-heading { font-size: 28px; }
    .vr-text { font-size: 14px; margin-bottom: 16px; }

    /* Benefits — 2 columns on mobile */
    .vb-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px; }
    .vb-item { padding: 20px 12px; }
    .vb-title { font-size: 15px; }
    .vb-desc { font-size: 12px; line-height: 1.5; }
    .vb-icon { padding: 12px; font-size: 22px; }
    .vb-icon svg { width: 22px; height: 22px; }

    /* CTA banner */
    .vb-cta { padding: 48px 20px 56px; margin-top: 40px; }
    .vb-cta-heading { font-size: 26px; }
    .vb-cta-desc { font-size: 14px; margin-bottom: 24px; }
    .vb-cta-btn { padding: 14px 36px; font-size: 12px; }

    /* Value props — 2 columns */
    .vp-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px; }
    .vp-badge { padding: 16px; gap: 10px; flex-direction: column; text-align: center; }
    .vp-title { font-size: 13px; }
    .vp-sub { font-size: 11px; }

    /* Brand story */
    .vs-wrap { padding: 48px 16px !important; }
    .vs-grid, .vs-grid--reverse { flex-direction: column !important; gap: 24px; }
    .vs-image-col { flex: 0 0 100% !important; max-width: 100% !important; }
    .vs-img { border-radius: 12px; max-height: 300px; }
    .vs-content-col,
    .vs-grid--reverse .vs-content-col { padding: 0 !important; }
    .vs-heading { font-size: 28px; }
    .vs-text { font-size: 14px; }
    .vs-btn { padding: 12px 28px; font-size: 12px; margin-top: 16px; }

    /* Instagram feed */
    .vi-wrap { padding: 48px 16px !important; }
    .vi-grid { grid-template-columns: repeat(3,1fr) !important; gap: 8px; }
    .vi-item { height: 120px; border-radius: 8px; }
    .vi-heading { font-size: 26px; }
    .vi-subtitle { font-size: 13px; margin-bottom: 24px; }

    /* CTA banner in general */
    .vc-wrap { padding: 48px 20px !important; }
    .vc-heading { font-size: 28px; }
    .vc-desc { font-size: 14px; }
    .vc-btn { padding: 14px 36px; font-size: 12px; }

    /* Ghost buttons mobile */
    .vs-btn--ghost { font-size: 13px; gap: 12px; }
    .vs-btn--ghost svg { width: 24px; height: 12px; }
}

@media (max-width:420px) {
    .vr-card { min-width: 260px; max-width: 90vw; }
    .vb-grid { gap: 12px; }
    .vb-item { padding: 16px 8px; }
    .vb-title { font-size: 13px; }
    .vi-grid { grid-template-columns: repeat(2,1fr) !important; }
    .vi-item { height: 100px; }
}