/*
Theme Name: Guitars.LK
Theme URI: https://guitars.lk
Description: Modern WooCommerce theme for Guitars.LK - Music Instrument Store (Brand New & Used)
Author: Guitars.LK
Author URI: https://guitars.lk
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guitarslk
Tags: white, purple, music, woocommerce, modern
*/

/* ============================================
   GUITARS.LK - CUSTOM THEME
   Color Palette:
   --purple-dark:   #3C3489 (primary, menus, buttons)
   --purple-mid:    #534AB7 (hover states)
   --purple-light:  #7F77DD (accents)
   --purple-pale:   #EEEDFE (backgrounds, highlights)
   --white:         #FFFFFF (main background)
   --gray-light:    #F8F8F8 (sections)
   --gray-mid:      #888780 (body text)
   --gold:          #BA7517 (used/sale badge)
   --gold-light:    #FAEEDA (used badge bg)
   --teal:          #0F6E56 (brand new badge)
   --teal-light:    #E1F5EE (brand new badge bg)
============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600&display=swap');

/* ---- ROOT VARIABLES ---- */
:root {
  --clr-purple-dark:  #3C3489;
  --clr-purple-mid:   #534AB7;
  --clr-purple-light: #7F77DD;
  --clr-purple-pale:  #EEEDFE;
  --clr-purple-softer:#CECBF6;
  --clr-white:        #FFFFFF;
  --clr-gray-bg:      #F8F7FC;
  --clr-gray-light:   #F1EFE8;
  --clr-gray-mid:     #5F5E5A;
  --clr-gray-text:    #444441;
  --clr-gold:         #BA7517;
  --clr-gold-light:   #FAEEDA;
  --clr-teal:         #0F6E56;
  --clr-teal-light:   #E1F5EE;
  --clr-red:          #A32D2D;
  --clr-red-light:    #FCEBEB;
  --font-heading:     'Montserrat', sans-serif;
  --font-body:        'Open Sans', sans-serif;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --shadow-soft:      0 2px 16px rgba(83, 74, 183, 0.08);
  --shadow-card:      0 4px 24px rgba(83, 74, 183, 0.12);
  --transition:       all 0.25s ease;
}

/* ---- GLOBAL RESET ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background-color: var(--clr-white);
  color: var(--clr-gray-text);
  margin: 0;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--clr-purple-dark);
  font-weight: 700;
  line-height: 1.25;
}

a { color: var(--clr-purple-mid); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--clr-purple-dark); }

img { max-width: 100%; height: auto; }

/* ============================================
   HEADER
============================================ */
.site-header,
.storefront-handheld-footer-bar {
  background-color: var(--clr-white) !important;
  border-bottom: 2px solid var(--clr-purple-pale) !important;
  box-shadow: 0 2px 12px rgba(60, 52, 137, 0.08);
}

/* Site logo text */
.site-title a,
.site-title {
  font-family: var(--font-heading) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--clr-purple-dark) !important;
  text-decoration: none !important;
  letter-spacing: -0.5px;
}

.site-title a span {
  color: var(--clr-purple-light) !important;
}

.site-description {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--clr-gray-mid) !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ============================================
   NAVIGATION
============================================ */
.main-navigation,
.storefront-primary-navigation {
  background-color: var(--clr-purple-dark) !important;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.main-navigation ul li a {
  display: block;
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--clr-white) !important;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
}

.main-navigation ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--clr-purple-softer);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.main-navigation ul li a:hover::after,
.main-navigation ul li.current-menu-item > a::after {
  transform: scaleX(1);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--clr-purple-softer) !important;
  background-color: rgba(255,255,255,0.08) !important;
}

/* Dropdown */
.main-navigation ul ul {
  position: absolute;
  z-index: 1000;
  background-color: var(--clr-purple-dark) !important;
  min-width: 220px;
  border-top: 3px solid var(--clr-purple-light);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-card);
  display: none;
}

.main-navigation ul li:hover > ul { display: block; }

.main-navigation ul ul li a {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
}

/* ============================================
   HERO BANNER (for homepage)
============================================ */
.hero-banner {
  background: linear-gradient(135deg, var(--clr-purple-dark) 0%, var(--clr-purple-mid) 50%, var(--clr-purple-light) 100%);
  color: white;
  padding: 80px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: rgba(255,255,255,0.04);
  transform: rotate(-15deg);
}

.hero-banner h1 {
  color: white;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.hero-banner p {
  font-size: 1.15rem;
  opacity: 0.88;
  margin-bottom: 32px;
}

.hero-banner .btn-hero {
  display: inline-block;
  background: white;
  color: var(--clr-purple-dark);
  padding: 14px 36px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
  margin: 0 8px 8px;
}

.hero-banner .btn-hero:hover {
  background: var(--clr-purple-pale);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.hero-banner .btn-hero.outline {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.6);
}

.hero-banner .btn-hero.outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
}

/* ============================================
   CONDITION BADGES (Brand New / Used)
============================================ */
.badge-new,
.badge-used,
.badge-sale-custom {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
  vertical-align: middle;
}

.badge-new {
  background: var(--clr-teal-light);
  color: var(--clr-teal);
  border: 1px solid rgba(15, 110, 86, 0.2);
}

.badge-used {
  background: var(--clr-gold-light);
  color: var(--clr-gold);
  border: 1px solid rgba(186, 117, 23, 0.2);
}

.badge-sale-custom {
  background: var(--clr-red-light);
  color: var(--clr-red);
  border: 1px solid rgba(163, 45, 45, 0.2);
}

/* WooCommerce sale badge */
.woocommerce span.onsale {
  background-color: var(--clr-red) !important;
  color: white !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  min-width: 46px;
  min-height: 46px;
  line-height: 46px;
}

/* ============================================
   PRODUCT CARDS
============================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-purple-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: none;
  padding: 0 !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  border-color: var(--clr-purple-softer);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-purple-dark);
  padding: 12px 16px 4px;
  margin: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: var(--clr-purple-mid) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0 16px 8px;
}

.woocommerce ul.products li.product .price del {
  color: var(--clr-gray-mid) !important;
  font-size: 0.85rem;
  font-weight: 400;
}

.woocommerce ul.products li.product img {
  border-radius: 0;
  object-fit: cover;
  width: 100%;
  aspect-ratio: 4/3;
}

/* Product card add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  display: block !important;
  background-color: var(--clr-purple-dark) !important;
  color: white !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  margin: 8px 12px 12px !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  transition: var(--transition) !important;
  text-align: center !important;
  cursor: pointer !important;
  width: calc(100% - 24px) !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
  background-color: var(--clr-purple-mid) !important;
  transform: none !important;
  box-shadow: 0 4px 12px rgba(83, 74, 183, 0.35) !important;
}

/* ============================================
   BUTTONS (Global)
============================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.button,
input[type="submit"],
button[type="submit"] {
  background-color: var(--clr-purple-dark) !important;
  color: white !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--clr-purple-mid) !important;
  box-shadow: 0 4px 16px rgba(83, 74, 183, 0.4) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--clr-purple-mid) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--clr-purple-dark) !important;
}

/* Outline button */
.btn-outline {
  background: transparent !important;
  color: var(--clr-purple-dark) !important;
  border: 2px solid var(--clr-purple-dark) !important;
}

.btn-outline:hover {
  background: var(--clr-purple-pale) !important;
  box-shadow: none !important;
}

/* ============================================
   SINGLE PRODUCT PAGE
============================================ */
.single-product .product_title {
  font-size: 1.8rem;
  color: var(--clr-purple-dark);
}

.single-product .price {
  color: var(--clr-purple-mid) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
}

.single-product .woocommerce-product-gallery__image img {
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--clr-purple-pale);
}

.single-product .product_meta {
  border-top: 1px solid var(--clr-purple-pale);
  padding-top: 16px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--clr-gray-mid);
}

.single-product .product_meta span a {
  color: var(--clr-purple-mid);
  font-weight: 600;
}

/* Tabs */
.woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--clr-purple-pale) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px;
}

.woocommerce-tabs ul.tabs li a {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--clr-gray-mid) !important;
  padding: 12px 20px !important;
}

.woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--clr-purple-mid) !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--clr-purple-dark) !important;
}

/* ============================================
   CART & CHECKOUT
============================================ */
.woocommerce-cart table.cart th,
.woocommerce-checkout table.shop_table th {
  background: var(--clr-purple-pale) !important;
  color: var(--clr-purple-dark) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 12px 16px !important;
  border: none !important;
}

.woocommerce-cart table.cart td,
.woocommerce-checkout table.shop_table td {
  border-color: var(--clr-purple-pale) !important;
  padding: 16px !important;
  vertical-align: middle !important;
}

.woocommerce-cart table.cart tbody tr:hover td {
  background: rgba(238, 237, 254, 0.4);
}

.cart_totals,
.woocommerce-checkout #payment {
  background: var(--clr-gray-bg) !important;
  border: 1.5px solid var(--clr-purple-pale) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
}

/* Coupon input */
.woocommerce .coupon input.input-text {
  border: 1.5px solid var(--clr-purple-pale) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
}

.woocommerce .coupon input.input-text:focus {
  border-color: var(--clr-purple-mid) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.12) !important;
}

/* ============================================
   FORMS (Checkout, Account, etc.)
============================================ */
.woocommerce form .form-row label,
form label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--clr-gray-text);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  border: 1.5px solid var(--clr-purple-pale) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  width: 100%;
  transition: var(--transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--clr-purple-mid) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.12) !important;
}

/* ============================================
   SIDEBAR WIDGETS
============================================ */
.widget-area .widget {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-purple-pale);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.widget-area .widget_title,
.widget-area h2.widget-title,
.widget-area .widgettitle {
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--clr-purple-dark) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--clr-purple-pale) !important;
}

/* Price filter widget */
.widget_price_filter .ui-slider-range {
  background: var(--clr-purple-mid) !important;
}

.widget_price_filter .ui-slider-handle {
  background: var(--clr-purple-dark) !important;
  border-color: var(--clr-purple-dark) !important;
}

.widget_price_filter .price_slider_amount .button {
  background: var(--clr-purple-dark) !important;
  font-size: 0.78rem !important;
  padding: 8px 16px !important;
}

/* Product categories widget */
.widget_product_categories ul li a {
  color: var(--clr-gray-text);
  font-size: 0.88rem;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget_product_categories ul li a:hover {
  color: var(--clr-purple-mid);
  padding-left: 6px;
}

/* ============================================
   CATEGORY BANNERS (homepage-style sections)
============================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 40px 24px;
  background: var(--clr-gray-bg);
}

.category-card {
  background: white;
  border: 1.5px solid var(--clr-purple-pale);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  display: block;
}

.category-card:hover {
  border-color: var(--clr-purple-mid);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.category-card .cat-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}

.category-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-purple-dark);
  margin: 0 0 6px;
}

.category-card span {
  font-size: 0.8rem;
  color: var(--clr-gray-mid);
}

/* ============================================
   CONDITION FILTER BAR
============================================ */
.condition-filter {
  display: flex;
  gap: 10px;
  padding: 20px 24px;
  background: white;
  border-bottom: 1px solid var(--clr-purple-pale);
  flex-wrap: wrap;
  align-items: center;
}

.condition-filter-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--clr-gray-mid);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-right: 4px;
}

.condition-btn {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1.5px solid var(--clr-purple-pale);
  color: var(--clr-gray-text);
  background: white;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.condition-btn:hover,
.condition-btn.active {
  background: var(--clr-purple-dark);
  color: white;
  border-color: var(--clr-purple-dark);
}

.condition-btn.all.active { background: var(--clr-purple-dark); }
.condition-btn.new.active { background: var(--clr-teal); border-color: var(--clr-teal); }
.condition-btn.used.active { background: var(--clr-gold); border-color: var(--clr-gold); }

/* ============================================
   BREADCRUMBS
============================================ */
.woocommerce .woocommerce-breadcrumb,
.breadcrumbs {
  font-size: 0.8rem;
  color: var(--clr-gray-mid);
  padding: 12px 0;
  background: transparent;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--clr-purple-mid);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--clr-purple-dark);
}

/* ============================================
   FLASH MESSAGES / NOTICES
============================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-md) !important;
  border-top: none !important;
  padding: 14px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
}

.woocommerce-message {
  background: var(--clr-teal-light) !important;
  color: var(--clr-teal) !important;
  border-left: 4px solid var(--clr-teal) !important;
}

.woocommerce-info {
  background: var(--clr-purple-pale) !important;
  color: var(--clr-purple-dark) !important;
  border-left: 4px solid var(--clr-purple-mid) !important;
}

.woocommerce-error {
  background: var(--clr-red-light) !important;
  color: var(--clr-red) !important;
  border-left: 4px solid var(--clr-red) !important;
}

/* ============================================
   FOOTER
============================================ */
.site-footer {
  background: var(--clr-purple-dark) !important;
  color: rgba(255,255,255,0.8) !important;
  border-top: none !important;
}

.site-footer a {
  color: var(--clr-purple-softer) !important;
}

.site-footer a:hover {
  color: white !important;
}

.site-footer .widget-title,
.site-footer h2 {
  color: white !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

.site-info {
  background: #26215C !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.8rem !important;
  text-align: center;
  padding: 16px;
}

.site-info a {
  color: var(--clr-purple-softer) !important;
}

/* ============================================
   STARS / RATINGS
============================================ */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--clr-gold) !important;
}

/* ============================================
   PAGINATION
============================================ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-color: var(--clr-purple-pale) !important;
  color: var(--clr-purple-dark) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--clr-purple-dark) !important;
  color: white !important;
  border-color: var(--clr-purple-dark) !important;
}

/* ============================================
   MINI CART (header cart icon)
============================================ */
.cart-contents {
  color: var(--clr-purple-dark) !important;
  font-weight: 600;
}

.cart-contents .amount {
  color: var(--clr-purple-mid) !important;
}

.storefront-handheld-footer-bar .cart .count {
  background: var(--clr-purple-dark) !important;
  color: white !important;
}

/* ============================================
   WISHLIST / COMPARE BUTTONS
============================================ */
.yith-wcwl-add-button a,
.compare-button a {
  color: var(--clr-purple-mid) !important;
  border: 1.5px solid var(--clr-purple-pale) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
}

.yith-wcwl-add-button a:hover,
.compare-button a:hover {
  background: var(--clr-purple-pale) !important;
  border-color: var(--clr-purple-mid) !important;
}

/* ============================================
   HOMEPAGE FEATURED SECTION
============================================ */
.featured-section {
  background: var(--clr-gray-bg);
  padding: 60px 24px;
  text-align: center;
}

.featured-section h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.featured-section .section-sub {
  color: var(--clr-gray-mid);
  font-size: 0.95rem;
  margin-bottom: 36px;
}

/* Section divider pill */
.section-label {
  display: inline-block;
  background: var(--clr-purple-pale);
  color: var(--clr-purple-dark);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 14px;
}

/* ============================================
   TRUST BADGES BAR
============================================ */
.trust-bar {
  background: var(--clr-purple-pale);
  border-top: 1px solid var(--clr-purple-softer);
  border-bottom: 1px solid var(--clr-purple-softer);
  padding: 18px 24px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-purple-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trust-item .trust-icon {
  font-size: 1.3rem;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 768px) {
  .hero-banner h1 { font-size: 2rem; }
  .hero-banner { padding: 50px 20px; }
  .trust-bar { gap: 20px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 24px 16px; }
  .condition-filter { padding: 14px 16px; }

  .main-navigation ul {
    flex-direction: column;
  }

  .main-navigation ul li a {
    padding: 12px 16px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .site-title a { font-size: 1.4rem !important; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-banner .btn-hero { width: 100%; margin: 6px 0; }
}