/*
 * AnaVanila Custom Theme — OpenCart 4 Basic Theme Override
 * Drop into: public_html/catalog/view/theme/basic/stylesheet/anavanila-custom.css
 * Load after the default stylesheet (see installation instructions)
 *
 * Palette
 *   --av-cream  #F5EDD8  page background
 *   --av-ink    #3A4F5C  navbar, headings, dark text
 *   --av-sage   #8FA68C  accents, category labels, dividers
 *   --av-rose   #C97A68  primary buttons, prices, CTA
 *   --av-gold   #C9A96E  hover states, star ratings, highlights
 *   --av-linen  #EDE3CC  card backgrounds, borders
 *   --av-white  #FDFAF4  hero & content surface
 *   --av-muted  #7A6F65  secondary text
 */

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

/* ─── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
  --av-cream:  #F5EDD8;
  --av-ink:    #3A4F5C;
  --av-sage:   #8FA68C;
  --av-rose:   #C97A68;
  --av-gold:   #C9A96E;
  --av-linen:  #EDE3CC;
  --av-white:  #FDFAF4;
  --av-muted:  #7A6F65;
  --av-text:   #2E3D44;
}

/* ─── Bootstrap 5 variable overrides ──────────────────────────────────────────
   Bootstrap 5.3 components read colour via var(--bs-*) internally (buttons,
   bg-primary, links, focus rings, badges, form validation, etc). Redeclaring
   these at :root means every Bootstrap component that consumes them follows
   our palette automatically, instead of chasing each component class one by
   one. This is the fix for the blue (#229ac8) still showing through.
─────────────────────────────────────────────────────────────────────────── */
:root, [data-bs-theme="light"] {
  --bs-primary: var(--av-ink);
  --bs-primary-rgb: 58, 79, 92;
  --bs-secondary: var(--av-sage);
  --bs-secondary-rgb: 143, 166, 140;
  --bs-warning: var(--av-rose);
  --bs-warning-rgb: 201, 122, 104;
  --bs-success: var(--av-sage);
  --bs-success-rgb: 143, 166, 140;
  --bs-info: var(--av-gold);
  --bs-info-rgb: 201, 169, 110;
  --bs-light: var(--av-cream);
  --bs-light-rgb: 245, 237, 216;
  --bs-dark: var(--av-ink);
  --bs-dark-rgb: 58, 79, 92;

  --bs-link-color: var(--av-ink);
  --bs-link-color-rgb: 58, 79, 92;
  --bs-link-hover-color: var(--av-rose);
  --bs-link-hover-color-rgb: 201, 122, 104;

  --bs-body-color: var(--av-text);
  --bs-body-bg: var(--av-cream);
  --bs-emphasis-color: var(--av-ink);

  --bs-border-color: var(--av-linen);
  --bs-focus-ring-color: rgba(201, 122, 104, 0.25);

  --bs-primary-text-emphasis: var(--av-ink);
  --bs-primary-bg-subtle: var(--av-linen);
  --bs-primary-border-subtle: var(--av-sage);
}

/* btn-primary / bg-primary / border-primary utility classes resolve through
   the rgb vars above on Bootstrap 5.3, but pin the literal classes too in
   case any compiled CSS bakes the old hex in directly. */
.bg-primary {
  background-color: var(--av-ink) !important;
}

.btn-primary {
  --bs-btn-bg: var(--av-rose);
  --bs-btn-border-color: var(--av-rose);
  --bs-btn-hover-bg: var(--av-gold);
  --bs-btn-hover-border-color: var(--av-gold);
  --bs-btn-active-bg: var(--av-gold);
  --bs-btn-active-border-color: var(--av-gold);
  --bs-btn-color: var(--av-white);
  --bs-btn-hover-color: var(--av-white);
}

.text-primary {
  color: var(--av-ink) !important;
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Lato', sans-serif;
  background-color: var(--av-cream);
  color: var(--av-text);
}

a {
  color: var(--av-ink);
}

a:hover {
  color: var(--av-rose);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--av-ink);
  font-weight: 500;
}

/* ─── Top bar (#top — currency, account, wishlist, cart links) ───────────────── */
#top {
  background-color: var(--av-ink) !important;
  border-bottom: none !important;
}

#top .nav > li > a,
#top a {
  color: rgba(245, 237, 216, 0.7) !important;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
}

#top .nav > li > a:hover,
#top a:hover {
  color: var(--av-gold) !important;
  background: transparent !important;
}

#top .dropdown-menu {
  background-color: var(--av-ink) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-top: 2px solid var(--av-gold) !important;
}

#top .dropdown-menu li a {
  color: rgba(245, 237, 216, 0.8) !important;
}

#top .dropdown-menu li a:hover {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--av-gold) !important;
}

/* ─── Logo row (#header) ────────────────────────────────────────────────────── */
#header {
  background-color: var(--av-white) !important;
  position: relative;
}

/* Logo / store name */
#header .navbar-brand,
#logo a,
#logo img {
  font-family: 'Playfair Display', serif;
  color: var(--av-ink) !important;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Cart button in header */
#cart > button {
  background-color: var(--av-rose) !important;
  border: none !important;
  border-radius: 50px !important;
  color: var(--av-white) !important;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 20px !important;
  transition: background-color 0.2s;
}

#cart > button:hover {
  background-color: var(--av-gold) !important;
  color: var(--av-white) !important;
}

#cart .dropdown-menu {
  background-color: var(--av-white) !important;
  border: 1px solid var(--av-linen) !important;
  border-top: 2px solid var(--av-rose) !important;
  border-radius: 0 0 8px 8px !important;
}

/* Search bar */
#search input {
  border: 1.5px solid var(--av-linen);
  border-right: none;
  border-radius: 50px 0 0 50px;
  background-color: var(--av-white);
  color: var(--av-text);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  padding: 9px 16px;
}

#search input:focus {
  border-color: var(--av-sage);
  outline: none;
  box-shadow: none;
}

#search .btn {
  background-color: var(--av-rose) !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  color: var(--av-white) !important;
  transition: background-color 0.2s;
}

#search .btn:hover {
  background-color: var(--av-gold) !important;
}

/* ─── Tricolour stripe — above the category nav bar ─────────────────────────── */
/* The nav is inside .container so we use a box-shadow trick on <main> instead */
main {
  border-top: 4px solid transparent;
  background-image: linear-gradient(var(--av-cream), var(--av-cream)),
                    linear-gradient(90deg, var(--av-sage) 0%, var(--av-gold) 50%, var(--av-rose) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ─── Category / horizontal nav menu — Bootstrap 5 (bg-primary class) ───────── */
/* The nav sits inside .container — we target the nav directly */
nav#menu.navbar,
nav#menu.bg-primary {
  background-color: var(--av-ink) !important;
  background-image: none !important;
  border-bottom: 3px solid var(--av-rose) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Nav links — Bootstrap 5 uses .nav-link not .navbar-nav > li > a */
nav#menu .nav-link,
nav#menu .navbar-nav .nav-link,
nav#menu .dropdown-item {
  color: rgba(245, 237, 216, 0.85) !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

nav#menu .nav-link:hover,
nav#menu .nav-link:focus,
nav#menu .navbar-nav .nav-item.show > .nav-link {
  color: var(--av-gold) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Dropdown menus */
nav#menu .dropdown-menu {
  background-color: var(--av-ink) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top: 2px solid var(--av-gold) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

nav#menu .dropdown-menu .dropdown-item {
  color: rgba(245, 237, 216, 0.8) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  padding: 8px 18px !important;
  background: transparent !important;
}

nav#menu .dropdown-menu .dropdown-item:hover,
nav#menu .dropdown-menu .dropdown-item:focus {
  color: var(--av-gold) !important;
  background-color: rgba(255,255,255,0.08) !important;
}

nav#menu .dropdown-divider {
  border-color: rgba(255,255,255,0.1) !important;
}

/* ─── Page background & layout ───────────────────────────────────────────────── */
#content,
.container-fluid,
.container {
  background-color: transparent;
}

/* Content area surface */
#content > .container,
#content > .container-fluid {
  background-color: var(--av-white);
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 28px 24px;
}

/* ─── Product cards ──────────────────────────────────────────────────────────── */
.product-thumb {
  background-color: var(--av-white);
  border: 1px solid var(--av-linen);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.2s;
}

.product-thumb:hover {
  box-shadow: 0 8px 24px rgba(58, 79, 92, 0.10);
  transform: translateY(-2px);
}

.product-thumb .image {
  border-bottom: 1px solid var(--av-linen);
  background-color: var(--av-cream);
}

.product-thumb .caption {
  padding: 14px 16px 16px;
}

.product-thumb .caption h4 {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--av-ink);
  line-height: 1.35;
  margin-bottom: 8px;
}

.product-thumb .caption h4 a {
  color: var(--av-ink);
  text-decoration: none;
}

.product-thumb .caption h4 a:hover {
  color: var(--av-rose);
}

/* Price */
.product-thumb .price {
  color: var(--av-rose);
  font-size: 15px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
}

.product-thumb .price-old {
  color: var(--av-muted);
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
}

.product-thumb .price-new {
  color: var(--av-rose);
}

.product-thumb .price-tax {
  font-size: 11px;
  color: var(--av-muted);
  font-weight: 400;
}

/* Star ratings */
.product-thumb .rating .fa-star,
.product-thumb .rating .fas,
.product-thumb .rating .far {
  color: var(--av-gold);
}

/* Category label above product title (if used) */
.product-thumb .caption .text-muted {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--av-sage) !important;
  font-weight: 700;
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
/* Primary — rose pill */
.btn-primary,
.btn-primary:focus {
  background-color: var(--av-rose);
  border-color: var(--av-rose);
  color: var(--av-white);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 9px 24px;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--av-gold);
  border-color: var(--av-gold);
  color: var(--av-white);
}

/* Secondary / default */
.btn-default {
  background-color: transparent;
  border: 1.5px solid var(--av-ink);
  color: var(--av-ink);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 9px 24px;
  transition: background-color 0.2s, color 0.2s;
}

.btn-default:hover,
.btn-default:active {
  background-color: var(--av-ink);
  color: var(--av-cream);
  border-color: var(--av-ink);
}

/* Warning (Add to Cart) — treat same as primary */
.btn-warning,
.btn-warning:focus {
  background-color: var(--av-rose);
  border-color: var(--av-rose);
  color: var(--av-white);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 9px 24px;
  transition: background-color 0.2s;
}

.btn-warning:hover,
.btn-warning:active {
  background-color: var(--av-gold);
  border-color: var(--av-gold);
  color: var(--av-white);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────────── */
#content .breadcrumb,
ul.breadcrumb {
  background-color: transparent;
  border: none;
  padding: 8px 0;
  margin-bottom: 16px;
  font-size: 12px;
}

#content .breadcrumb li a,
ul.breadcrumb li a {
  color: var(--av-sage);
  font-weight: 700;
  letter-spacing: 0.04em;
}

#content .breadcrumb li a:hover,
ul.breadcrumb li a:hover {
  color: var(--av-rose);
}

#content .breadcrumb > li + li::before,
ul.breadcrumb > li + li::before {
  color: var(--av-muted);
}

/* ─── Product page ───────────────────────────────────────────────────────────── */
#product .price {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: var(--av-rose);
  font-weight: 500;
}

#product h1,
h1.product-name {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--av-ink);
  line-height: 1.25;
}

#product .rating .fa-star,
#product .rating .fas {
  color: var(--av-gold);
}

/* Product tabs */
#product .nav-tabs {
  border-bottom: 2px solid var(--av-linen);
}

#product .nav-tabs > li > a {
  color: var(--av-muted);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  padding: 12px 20px;
}

#product .nav-tabs > li.active > a,
#product .nav-tabs > li > a:hover {
  color: var(--av-ink);
  background: transparent;
  border-bottom-color: var(--av-rose);
  border-top: none;
  border-left: none;
  border-right: none;
}

/* ─── Category page heading ──────────────────────────────────────────────────── */
h1, h2.category-title {
  font-family: 'Playfair Display', serif;
  color: var(--av-ink);
}

/* Section / column heading above product grid */
.col-sm-12 > h2,
#content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--av-ink);
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--av-linen);
}

/* ─── Sidebar / filter ───────────────────────────────────────────────────────── */
#column-left .list-group-item,
#column-right .list-group-item {
  background-color: var(--av-white);
  border-color: var(--av-linen);
  color: var(--av-text);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
}

#column-left .list-group-item:hover,
#column-right .list-group-item:hover {
  background-color: var(--av-cream);
  color: var(--av-rose);
}

#column-left .list-group-item.active,
#column-right .list-group-item.active {
  background-color: var(--av-rose);
  border-color: var(--av-rose);
  color: var(--av-white);
}

/* Sidebar headings */
#column-left h3,
#column-right h3 {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--av-sage);
  margin-bottom: 12px;
}

/* ─── Forms ──────────────────────────────────────────────────────────────────── */
.form-control {
  border: 1.5px solid var(--av-linen);
  border-radius: 6px;
  background-color: var(--av-white);
  color: var(--av-text);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  padding: 9px 14px;
  height: auto;
  transition: border-color 0.2s;
}

.form-control:focus {
  border-color: var(--av-sage);
  box-shadow: 0 0 0 3px rgba(143, 166, 140, 0.18);
  outline: none;
}

.form-group label {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--av-ink);
  letter-spacing: 0.02em;
}

/* ─── Alerts & notices ───────────────────────────────────────────────────────── */
.alert-success {
  background-color: #e8f0e5;
  border-color: var(--av-sage);
  color: #3a5237;
}

.alert-info {
  background-color: #e7eef2;
  border-color: #a0b8c4;
  color: var(--av-ink);
}

.alert-warning {
  background-color: #f5ead8;
  border-color: var(--av-gold);
  color: #6b4e1a;
}

.alert-danger {
  background-color: #f5e0d8;
  border-color: var(--av-rose);
  color: #7a3020;
}

/* ─── Cart dropdown ──────────────────────────────────────────────────────────── */
#cart .dropdown-menu {
  background-color: var(--av-white);
  border: 1px solid var(--av-linen);
  border-top: 2px solid var(--av-rose);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(58, 79, 92, 0.12);
  min-width: 320px;
}

#cart .dropdown-menu li p {
  color: var(--av-muted);
  font-size: 13px;
}

#cart .dropdown-menu li table {
  font-size: 13px;
  color: var(--av-text);
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  background-color: var(--av-white);
  border-color: var(--av-linen);
  color: var(--av-ink);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50px !important;
  margin: 0 3px;
  padding: 6px 14px;
  transition: background-color 0.2s, color 0.2s;
}

.pagination > li > a:hover {
  background-color: var(--av-cream);
  border-color: var(--av-sage);
  color: var(--av-rose);
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--av-rose);
  border-color: var(--av-rose);
  color: var(--av-white);
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
footer {
  background-color: var(--av-ink);
  color: rgba(245, 237, 216, 0.7);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  padding: 36px 0 20px;
}

footer h5,
footer .footer-heading {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--av-gold);
  margin-bottom: 14px;
}

footer a {
  color: rgba(245, 237, 216, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--av-gold);
}

footer li {
  margin-bottom: 7px;
}

/* Footer bottom bar */
footer .footer-bottom,
footer p.text-center {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 24px;
  padding-top: 16px;
  color: rgba(245, 237, 216, 0.4);
  font-size: 11px;
  text-align: center;
}

/* ─── Wavy sage divider (reusable utility) ───────────────────────────────────── */
/* Add class="av-divider-wavy" to any <hr> or <div> for the hand-drawn feel */
.av-divider-wavy {
  border: none;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 18'%3E%3Cpath d='M0,9 C40,2 80,16 120,9 C160,2 200,16 240,9 C280,2 320,16 360,9 C400,2 440,16 480,9 C520,2 560,16 600,9 C640,2 670,14 680,9' fill='none' stroke='%238FA68C' stroke-width='1.5' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 680px 18px;
  margin: 8px 0;
}

/* ─── Homepage featured section heading ──────────────────────────────────────── */
.module-heading,
.carousel-caption h3,
.swiper-slide h3 {
  font-family: 'Playfair Display', serif;
  color: var(--av-ink);
}

/* ─── Badges (sale, new, etc.) ───────────────────────────────────────────────── */
.badge,
.label-sale {
  background-color: var(--av-rose);
  color: var(--av-white);
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 3px 10px;
}

/* ─── Checkout steps ─────────────────────────────────────────────────────────── */
.panel {
  background-color: var(--av-white);
  border: 1px solid var(--av-linen);
  border-radius: 10px;
  box-shadow: none;
}

.panel-heading {
  background-color: var(--av-linen) !important;
  border-bottom: 1px solid #d8ccb4;
  border-radius: 10px 10px 0 0 !important;
  font-family: 'Playfair Display', serif;
  color: var(--av-ink);
  font-size: 16px;
  font-weight: 500;
}

.panel-body {
  padding: 20px 24px;
}

/* ─── Account / login pages ──────────────────────────────────────────────────── */
.well {
  background-color: var(--av-white);
  border: 1px solid var(--av-linen);
  border-radius: 10px;
  box-shadow: none;
}

/* ─── Misc: scrollbar (WebKit) ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: var(--av-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--av-sage);
  border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--av-rose);
}

.product-thumb .button button {
    background-color: var(--av-linen);
    color: var(--av-ink);
}

.form-control:focus {
    border-color: var(--av-sage);
}