/* Bloom Beauty UK - Custom Theme Styles */
/* Hummingbird 2.0 Theme Customisation */

/* ============================================
   Google Fonts - Playfair Display & Lato
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap');

/* ============================================
   CSS Custom Properties (Brand Colours)
   ============================================ */
:root {
  --bloom-primary: #7C9A6E;
  --bloom-primary-dark: #5e7a52;
  --bloom-primary-light: #9ab88e;
  --bloom-secondary: #F5F0E8;
  --bloom-accent: #C4A265;
  --bloom-accent-dark: #a88845;
  --bloom-text: #2C2C2C;
  --bloom-bg: #F5F8F3;
  --bloom-white: #FFFFFF;
  --bloom-border: #e0d8cc;
}

/* ============================================
   Global Typography
   ============================================ */
body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--bloom-text) !important;
  background-color: var(--bloom-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  color: var(--bloom-text) !important;
}

/* ============================================
   Top Bar / Announcement Bar
   ============================================ */
.header__top-bar,
#header .header-top {
  background-color: var(--bloom-primary) !important;
  color: var(--bloom-white) !important;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.header__top-bar a,
#header .header-top a {
  color: var(--bloom-white) !important;
}

/* ============================================
   Header / Navigation
   ============================================ */
.header,
#header {
  background-color: var(--bloom-white) !important;
  border-bottom: 1px solid var(--bloom-border) !important;
}

#header .header-nav {
  background-color: var(--bloom-white) !important;
}

.header__nav,
.main-menu,
#_desktop_top_menu .top-menu > li > a {
  font-family: 'Lato', sans-serif !important;
  font-weight: 600 !important;
  color: var(--bloom-text) !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
}

#_desktop_top_menu .top-menu > li > a:hover,
.main-menu a:hover {
  color: var(--bloom-primary) !important;
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary,
.btn-primary:focus,
button.btn-primary {
  background-color: var(--bloom-primary) !important;
  border-color: var(--bloom-primary) !important;
  color: var(--bloom-white) !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  text-transform: none !important;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--bloom-primary-dark) !important;
  border-color: var(--bloom-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 154, 110, 0.3);
}

.btn-secondary,
.btn-outline-primary {
  border-color: var(--bloom-primary) !important;
  color: var(--bloom-primary) !important;
  background-color: transparent !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: var(--bloom-primary) !important;
  color: var(--bloom-white) !important;
}

/* ============================================
   Product Cards
   ============================================ */
.product-miniature,
.product-card {
  background-color: var(--bloom-white) !important;
  border: 1px solid var(--bloom-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-miniature:hover,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.product-miniature .product-title a,
.product-card .product-title a {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  color: var(--bloom-text) !important;
  font-size: 1rem;
}

.product-miniature .product-title a:hover,
.product-card .product-title a:hover {
  color: var(--bloom-primary) !important;
}

.product-miniature .product-price-and-shipping .price,
.product-card .price,
.current-price .price {
  color: var(--bloom-primary) !important;
  font-weight: 700 !important;
  font-family: 'Lato', sans-serif !important;
}

/* ============================================
   Product Page
   ============================================ */
.product-prices .current-price span {
  color: var(--bloom-primary) !important;
  font-size: 1.5rem;
  font-weight: 700;
}

.product-add-to-cart .add-to-cart,
.product-add-to-cart .btn-primary {
  background-color: var(--bloom-primary) !important;
  border-color: var(--bloom-primary) !important;
  padding: 12px 28px !important;
  font-size: 1rem !important;
}

.product-add-to-cart .add-to-cart:hover,
.product-add-to-cart .btn-primary:hover {
  background-color: var(--bloom-primary-dark) !important;
}

.product-tabs .nav-link.active,
.product-tabs .nav-link:hover {
  color: var(--bloom-primary) !important;
  border-bottom-color: var(--bloom-primary) !important;
}

/* ============================================
   Category Pages
   ============================================ */
.category-header h1,
.page-heading {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  color: var(--bloom-text) !important;
}

/* ============================================
   Footer
   ============================================ */
#footer,
.footer {
  background-color: var(--bloom-text) !important;
  color: var(--bloom-secondary) !important;
}

#footer h4,
.footer h4,
#footer .footer-title,
.footer .footer-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--bloom-white) !important;
  font-weight: 600 !important;
}

#footer a,
.footer a {
  color: var(--bloom-secondary) !important;
}

#footer a:hover,
.footer a:hover {
  color: var(--bloom-accent) !important;
}

.footer__copyright,
#footer .footer-container .footer-copyright {
  background-color: #1a1a1a !important;
  color: #999 !important;
}

/* ============================================
   Links
   ============================================ */
a {
  color: var(--bloom-primary);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--bloom-primary-dark);
}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb-item a {
  color: var(--bloom-primary) !important;
}

.breadcrumb-item.active {
  color: var(--bloom-text) !important;
}

/* ============================================
   Forms & Inputs
   ============================================ */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--bloom-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 154, 110, 0.25) !important;
}

/* ============================================
   Newsletter / Email Subscription
   ============================================ */
.block-newsletter .btn,
.email-subscription .btn {
  background-color: var(--bloom-accent) !important;
  border-color: var(--bloom-accent) !important;
  color: var(--bloom-white) !important;
}

.block-newsletter .btn:hover,
.email-subscription .btn:hover {
  background-color: var(--bloom-accent-dark) !important;
}

/* ============================================
   Reassurance Block (Trust Badges)
   ============================================ */
.blockreassurance,
.block-reassurance {
  background-color: var(--bloom-secondary) !important;
}

.blockreassurance .block-icon i,
.blockreassurance .block-icon svg {
  color: var(--bloom-primary) !important;
}

/* ============================================
   Alerts & Badges
   ============================================ */
.badge-primary,
.label-primary {
  background-color: var(--bloom-primary) !important;
}

.badge-secondary,
.discount-badge {
  background-color: var(--bloom-accent) !important;
  color: var(--bloom-white) !important;
}

/* ============================================
   Cart & Checkout
   ============================================ */
.blockcart .header__cart-total,
.cart-products-count {
  background-color: var(--bloom-accent) !important;
  color: var(--bloom-white) !important;
}

/* ============================================
   Pagination
   ============================================ */
.page-item.active .page-link {
  background-color: var(--bloom-primary) !important;
  border-color: var(--bloom-primary) !important;
}

.page-link {
  color: var(--bloom-primary) !important;
}

.page-link:hover {
  color: var(--bloom-primary-dark) !important;
}

/* ============================================
   Image Slider / Hero
   ============================================ */
.carousel .carousel-caption {
  background: rgba(44, 44, 44, 0.6);
  padding: 2rem;
  border-radius: 8px;
}

.carousel .carousel-caption h2,
.carousel .carousel-caption .h2 {
  font-family: 'Playfair Display', serif !important;
  color: var(--bloom-white) !important;
}

/* ============================================
   Custom Homepage Elements
   ============================================ */
.featured-products .products-section-title,
.new-products .products-section-title,
.popular-products .products-section-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--bloom-text) !important;
  text-align: center;
  font-weight: 600;
  margin-bottom: 2rem;
  position: relative;
}

.featured-products .products-section-title::after,
.new-products .products-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--bloom-accent);
  margin: 0.75rem auto 0;
}

/* ============================================
   Custom Text Block Styling
   ============================================ */
.custom-text {
  text-align: center;
  padding: 2rem 0;
}

.custom-text h2 {
  font-family: 'Playfair Display', serif !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bloom-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--bloom-primary-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bloom-primary);
}

/* ============================================
   Selection Colour
   ============================================ */
::selection {
  background-color: var(--bloom-primary-light);
  color: var(--bloom-white);
}