/* ============================================
   Sunnybank UI – Global Component Framework
   Fully Namespaced Under .sb-ui
   Version 1.0
   ============================================ */

.sb-ui {
    --sb-green: #4A6655;
    --sb-green-hover: #688673;
    --sb-pink: #D88A8A;
    --sb-bg-light: #F9F7F2;
    --sb-bg-white: #ffffff;
    --sb-shadow-sm: 0 4px 10px rgba(0,0,0,0.06);
    --sb-shadow-md: 0 10px 25px rgba(0,0,0,0.12);
    --sb-shadow-lg: 0 15px 40px rgba(0,0,0,0.14);
    --sb-font-serif: "Playfair Display", serif;
    --sb-font-script: "Great Vibes", cursive;
    --sb-font-sans: "Lato", sans-serif;
    font-family: var(--sb-font-sans);
}

/* ==========================
   Universal Card Wrapper
   ========================== */
.sb-ui .sb-card {
    background: var(--sb-bg-light);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--sb-shadow-sm);
    transition: 0.3s ease;
}

.sb-ui .sb-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sb-shadow-md);
    background: var(--sb-bg-white);
}

/* ==========================
   Headings
   ========================== */
.sb-ui .sb-title-lg {
    font-family: var(--sb-font-serif);
    font-size: clamp(2.4rem, 6vw, 4rem);
    color: var(--sb-green);
    margin-bottom: 20px;
}

.sb-ui .sb-title-md {
    font-family: var(--sb-font-serif);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--sb-green);
}

.sb-ui .sb-title-sm {
    font-family: var(--sb-font-serif);
    font-size: 1.5rem;
    color: var(--sb-green);
}

/* Script Accent */
.sb-ui .sb-script {
    font-family: var(--sb-font-script);
    font-size: 1.1em;
    color: var(--sb-green);
}

/* ==========================
   Text Styles
   ========================== */
.sb-ui .sb-text {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #555;
}

.sb-ui .sb-text-muted {
    color: #777;
}

.sb-ui .sb-text-accent {
    color: var(--sb-pink);
    font-weight: 600;
}

/* ==========================
   Buttons
   ========================== */
.sb-ui .sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
    cursor: pointer;
}

.sb-ui .sb-btn-primary {
    background: var(--sb-green);
    color: white;
}
.sb-ui .sb-btn-primary:hover {
    background: var(--sb-green-hover);
}

.sb-ui .sb-btn-outline {
    background: transparent;
    border: 2px solid var(--sb-green);
    color: var(--sb-green);
}
.sb-ui .sb-btn-outline:hover {
    background: var(--sb-green);
    color: white;
}

.sb-ui .sb-btn-accent {
    background: var(--sb-pink);
    color: white;
}
.sb-ui .sb-btn-accent:hover {
    background: var(--sb-green);
}

/* ==========================
   Grid System
   ========================== */
.sb-ui .sb-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.sb-ui .sb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.sb-ui .sb-grid-center {
    justify-items: center;
    align-items: center;
}

/* Mobile collapse */
@media(max-width: 868px) {
    .sb-ui .sb-grid-2,
    .sb-ui .sb-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   Circle Image
   ========================== */
.sb-ui .sb-img-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sb-bg-light);
    box-shadow: var(--sb-shadow-sm);
    position: relative;
}

.sb-ui .sb-img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Subtle vignette */
.sb-ui .sb-img-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0) 50%, rgba(255,255,255,0.9) 90%);
}

/* ==========================
   Utility Classes
   ========================== */
.sb-ui .sb-center { text-align: center; }
.sb-ui .sb-mb-20 { margin-bottom:20px; }
.sb-ui .sb-mb-40 { margin-bottom:40px; }
.sb-ui .sb-mt-40 { margin-top:40px; }
.sb-ui .sb-p-20  { padding:20px; }
.sb-ui .sb-p-40  { padding:40px; }

/* 1. Hide the "All Products" category box completely – no gap, no placeholder */
ul.products.columns-4 > li.product-category:first-child {
    display: none !important;
}

/* 2. Hide the copyright line site-wide */
#copyright,
div#copyright,
.copyright,
footer #copyright {
    display: none !important;
}

html {
    margin-top: 0 !important;
}
body {
    margin-top: 0 !important;
}