/* ============================================================
   Blossom Buds — additions for CMS features.
   Loaded after the page stylesheets; only introduces new class
   names so the original design stays untouched.
   ============================================================ */

/* ---------- Logo image (optional, uploaded in Settings) ---------- */
.navbar-main .brand-logo { max-height: 50px; width: auto; display: block; }
.footer-main .brand-logo { max-height: 56px; width: auto; display: block; margin-bottom: 6px; }

/* ---------- Home: subcategory slider cards ----------
   On the original site each card grows to the pixel width of its image (the
   400px placeholders made every card 404px wide). Pin that width so uploads of
   any size keep the same look, and never exceed the screen width on phones. */
.subcategory-slide { flex: 0 0 min(404px, 100%); }

/* ---------- Heading highlight on dark/pink backgrounds ---------- */
.hl-white-70 { color: rgba(255,255,255,0.7); }

/* ---------- Generic page hero (gallery & custom pages) ---------- */
.page-hero {
    padding: 50px 0 30px;
    background: linear-gradient(160deg, #f8f5f0 0%, #f0ece4 100%);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(255,107,138,0.04) 0%, transparent 70%);
    border-radius: 50%;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(171,71,188,0.03) 0%, transparent 70%);
    border-radius: 50%;
}
.page-hero .badge {
    display: inline-block;
    background: var(--pink-light);
    color: var(--pink);
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.page-hero h1 {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--dark);
    margin-bottom: 12px;
}
.page-hero h1 span {
    background: linear-gradient(135deg, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-hero p {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 600px;
    line-height: 1.8;
}

/* ---------- Rich text written in the admin editor ---------- */
.content-section { padding: 60px 0; }
.content-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow-soft);
}
.cms-content { color: var(--dark); font-size: 1rem; line-height: 1.8; }
.cms-content > *:last-child { margin-bottom: 0; }
.cms-content h1, .cms-content h2, .cms-content h3,
.cms-content h4, .cms-content h5, .cms-content h6 { font-weight: 800; margin: 1.4em 0 0.6em; }
.cms-content h2 { font-size: 1.8rem; }
.cms-content h3 { font-size: 1.4rem; }
.cms-content > h1:first-child, .cms-content > h2:first-child, .cms-content > h3:first-child { margin-top: 0; }
.cms-content p, .cms-content li { color: var(--gray); }
.cms-content a { color: var(--pink); font-weight: 600; }
.cms-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cms-content ul li::marker, .cms-content ol li::marker { color: var(--pink); }
.cms-content blockquote {
    border-left: 4px solid var(--pink);
    background: var(--pink-light);
    padding: 16px 20px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
}
.cms-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.cms-content table th, .cms-content table td { border: 1px solid rgba(0,0,0,0.06); padding: 10px 14px; }
.cms-content table th { background: var(--pink-light); color: var(--pink); }
.product-info .description > *:last-child { margin-bottom: 0; }

/* ---------- Alerts (shared by contact & product pages) ---------- */
.alert-bb {
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    border: none;
}
.alert-bb.alert-success { background: var(--green-light); color: var(--green-dark); }
.alert-bb.alert-danger { background: #FDE8ED; color: #D96C6C; }

/* ---------- Form validation states ---------- */
.contact-form-wrapper .form-control.is-invalid,
.contact-form-wrapper .form-select.is-invalid,
.modal-enquiry .form-control.is-invalid,
.modal-enquiry .form-select.is-invalid { border-color: #D96C6C; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Extra colour themes for home page category segments ---------- */
.segment-section.purple { background: linear-gradient(160deg, #f7f0fb 0%, #f0e6f5 100%); }
.segment-section.green { background: linear-gradient(160deg, #f0faf1 0%, #e6f4e8 100%); }
.segment-section.orange { background: linear-gradient(160deg, #fdf6ee 0%, #f8ede0 100%); }
.segment-header .segment-icon.purple, .segment-hero .hero-text .eyebrow.purple,
.segment-header h2 .highlight-purple, .segment-hero .hero-text h3 .highlight-purple { color: var(--purple); }
.segment-header .segment-icon.green, .segment-hero .hero-text .eyebrow.green,
.segment-header h2 .highlight-green, .segment-hero .hero-text h3 .highlight-green { color: var(--green); }
.segment-header .segment-icon.orange, .segment-hero .hero-text .eyebrow.orange,
.segment-header h2 .highlight-orange, .segment-hero .hero-text h3 .highlight-orange { color: var(--orange); }
.segment-header .badge.purple { background: var(--purple-light); color: var(--purple-dark); }
.segment-header .badge.green { background: var(--green-light); color: var(--green-dark); }
.segment-header .badge.orange { background: var(--orange-light); color: var(--orange-dark); }
.view-all-btn.purple-btn { border-color: var(--purple); color: var(--purple); }
.view-all-btn.purple-btn:hover { background: var(--purple); color: white; }
.view-all-btn.green-btn { border-color: var(--green); color: var(--green); }
.view-all-btn.green-btn:hover { background: var(--green); color: white; }
.view-all-btn.orange-btn { border-color: var(--orange); color: var(--orange); }
.view-all-btn.orange-btn:hover { background: var(--orange); color: white; }

/* ---------- Product page thumbnails (products with several images) ---------- */
.product-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.product-thumbs .thumb {
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--light-gray);
    padding: 0;
    transition: var(--transition);
}
.product-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumbs .thumb.active, .product-thumbs .thumb:hover { border-color: var(--pink); }

/* ---------- Empty states ---------- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255,255,255,0.85);
    border: 2px dashed var(--pink-light);
    border-radius: var(--radius);
}
.empty-state .icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--pink-light);
    color: var(--pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 16px;
}
.empty-state h4 { font-weight: 800; }
.empty-state p { color: var(--gray); max-width: 420px; margin: 0 auto 20px; }

/* ---------- Gallery ---------- */
.gallery-section { padding: 40px 0 80px; }
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 30px;
}
.gallery-filter .tag {
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--light-gray);
    color: var(--dark);
    border: 2px solid transparent;
    transition: var(--transition);
    text-decoration: none;
}
.gallery-filter .tag:hover { border-color: var(--pink-light); background: var(--pink-light); color: var(--pink); }
.gallery-filter .tag.active { background: var(--pink); color: white; border-color: var(--pink); }
.gallery-grid { columns: 3 280px; column-gap: 20px; }
.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    background: var(--light-gray);
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}
.gallery-item img { width: 100%; display: block; transition: transform 0.7s ease; }
.gallery-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--pink); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    color: white;
    background: linear-gradient(to top, rgba(26,26,46,0.75) 0%, transparent 55%);
    opacity: 0;
    transition: var(--transition);
}
.gallery-item:hover .overlay { opacity: 1; }
.gallery-item .overlay h6 { font-weight: 800; margin: 0; color: white; }
.gallery-item .overlay p { font-size: 0.8rem; margin: 2px 0 0; opacity: 0.85; }
.gallery-item .zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}
.gallery-item:hover .zoom { opacity: 1; }
.lightbox-modal .modal-content { background: transparent; border: none; box-shadow: none; }
.lightbox-modal .modal-body { position: relative; text-align: center; padding: 0; }
.lightbox-modal .lightbox-image { max-width: 100%; max-height: 80vh; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,0.4); }
.lightbox-modal .lightbox-caption { color: white; margin-top: 14px; font-weight: 600; }
.lightbox-modal .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 1.2rem;
    transition: var(--transition);
}
.lightbox-modal .lightbox-nav:hover { background: var(--pink); border-color: var(--pink); }
.lightbox-modal .lightbox-prev { left: -64px; }
.lightbox-modal .lightbox-next { right: -64px; }
.lightbox-modal .btn-close-lightbox {
    position: absolute;
    top: -48px;
    right: 0;
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
}
.lightbox-modal .btn-close-lightbox:hover { background: var(--pink); }
.modal-backdrop.lightbox-backdrop.show { opacity: 0.85; }

/* ---------- 404 page ---------- */
.error-section { padding: 80px 0 100px; text-align: center; }
.error-section .code {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 991px) {
    .page-hero h1 { font-size: 2.6rem; }
    .lightbox-modal .lightbox-prev { left: 8px; }
    .lightbox-modal .lightbox-next { right: 8px; }
}
@media (max-width: 767px) {
    .page-hero h1 { font-size: 2rem; }
    .page-hero p { font-size: 1rem; }
    .content-card { padding: 24px 20px; }
    .product-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
    .page-hero h1 { font-size: 1.6rem; }
    .error-section .code { font-size: 5rem; }
}