/*
 * DESIGN EXPERIMENT — temporary file.
 * To fully revert: delete this file and remove the <css> line from
 * app/design/frontend/Hoeks/BGreenTheme/Magento_Theme/layout/default.xml
 */

/* ─── Change 2: Color tokens ───────────────────────────────────────────── */
:root {
    --color-brand:       #556b3a;
    --color-brand-dark:  #3f5128;
    --color-accent:      #e8d9be;
    --color-ink:         #1c1c18;
    --color-muted:       #777268;
    --color-bg-cream:    #f6f1e6;
    --color-border-soft: #e6e0d0;
}

/* ─── Gallery page buttons pill shape ──────────────────────────────────── */
.page-cms .pagebuilder-button-primary {
    border-radius: 999px;
}

/* ─── Change 3: Button pill shape ──────────────────────────────────────── */
/* Font intentionally unchanged per project requirement */
.btn-primary {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 13px 28px;
    background-color: var(--color-brand) !important;
}
.btn-primary:hover {
    background-color: var(--color-brand-dark) !important;
    color: #fff !important;
}

/* ─── Change 4: Eyebrow label pattern ──────────────────────────────────── */
/* Font intentionally unchanged per project requirement */
.eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted, #777268);
    display: block;
    margin-bottom: 12px;
}

/* ─── Change 5: Product card hover lift ────────────────────────────────── */
.product-item .product-image-wrapper {
    transition: transform 0.2s ease;
}
.product-item:hover .product-image-wrapper {
    transform: translateY(-3px);
}
.product-item .quick-add-btn {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
}
.product-item:hover .quick-add-btn {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Change 6: Blog/CMS image zoom on hover ───────────────────────────── */
.blog-item .blog-image,
.post-image {
    overflow: hidden;
}
.blog-item .blog-image img,
.post-image img {
    transition: transform 0.5s ease;
}
.blog-item:hover .blog-image img,
.post-image:hover img {
    transform: scale(1.04);
}

/* ─── Change 7: Italic accent words in headings ────────────────────────── */
.italic-accent {
    font-style: italic;
    color: var(--color-brand, #556b3a);
}
.on-dark .italic-accent {
    color: var(--color-accent, #e8d9be);
}