/*
 * Austin's Furniture Outlet retailer theme
 * Shared visual polish for active frontend pages.
 */

:root {
  --ivy-ink: #171717;          /* the black in the AFO logo */
  --ivy-black: #000000;
  --ivy-text: #55585C;         /* 7.15:1 on white */
  --ivy-muted: #82898C;
  --ivy-ivory: #FFFFFF;        /* premium white page ground */
  --ivy-cream: #F0FAFC;        /* aqua wash for alternating bands */
  --ivy-bg: #FFFFFF;
  --ivy-bg-secondary: #F0FAFC;
  --ivy-border: #E6EDEF;

  /* Austin's Furniture Outlet brand accent — the aqua from the logo.
     The literal logo aqua (#94DCEB) is only 1.53:1 on white, so it is
     used as a FILL that carries dark ink (11.69:1). Text, links and
     solid buttons use the deep end of the ramp instead. */
  --ivy-aqua: #94DCEB;         /* exact logo aqua — badge/chip fill   */
  --ivy-aqua-tint: #DFF4F9;    /* card + band fill                    */
  --ivy-aqua-wash: #F0FAFC;    /* faintest section wash               */
  --ivy-aqua-line: #A7E2EF;    /* brand hairline / rule               */
  --ivy-gold: #067087;         /* primary accent, 5.71:1 on white     */
  --ivy-gold-dark: #045262;    /* accent hover, 8.79:1                */
  --ivy-red: #067087;          /* legacy alias -> accent              */
  --ivy-red-dark: #045262;
  --ivy-blue: #0793B0;         /* secondary accent, 3.61:1 (AA large) */
  --ivy-blue-dark: #045262;
  --ivy-card: #ffffff;
  --ivy-shadow-sm: 0 8px 22px rgba(15, 15, 15, 0.04);
  --ivy-shadow-md: 0 14px 34px rgba(15, 15, 15, 0.04);
  --ivy-shadow-lg: 0 18px 44px rgba(15, 15, 15, 0.04);
  --ivy-shadow-brand: 0 10px 28px rgba(6, 112, 135, 0.16);

  --brand-primary: var(--ivy-ink);
  --brand-primary-light: #34332f;
  --brand-primary-dark: var(--ivy-black);
  --brand-secondary: var(--ivy-ivory);
  --brand-secondary-light: #ffffff;
  --brand-secondary-dark: var(--ivy-border);
  --brand-accent: var(--ivy-gold);
  --brand-accent-light: var(--ivy-aqua);
  --brand-accent-dark: var(--ivy-gold-dark);
  --brand-aqua: var(--ivy-aqua);
  --global-color: var(--ivy-ink);
  --base: var(--ivy-ink);
}

body {
  color: var(--ivy-text);
  background: var(--ivy-ivory);
}

a {
  color: inherit;
}

a:hover {
  color: var(--ivy-blue);
}

/* Austin's Furniture Outlet brand accent helpers (aqua accent on white) */
.text-primary, .text-red, .accent-red { color: var(--ivy-red) !important; }
.text-blue, .accent-blue { color: var(--ivy-blue) !important; }
.bg-red { background-color: var(--ivy-red) !important; color: #fff !important; }
.bg-blue { background-color: var(--ivy-blue) !important; color: #fff !important; }
.btn-primary, .btn.btn-primary {
  background-color: var(--ivy-red) !important;
  border-color: var(--ivy-red) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background-color: var(--ivy-red-dark) !important;
  border-color: var(--ivy-red-dark) !important;
}
.btn-outline-primary {
  color: var(--ivy-blue) !important;
  border-color: var(--ivy-blue) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover {
  background-color: var(--ivy-blue) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   Premium restraint layer
   Solid aqua fills are reserved for real CTAs. The small eyebrow /
   kicker labels carry the brand in its deep, quiet form -- enough
   colour to read as Austin's Furniture Outlet, restrained enough to
   stay editorial rather than loud.
   #067087 on white = 5.71:1, so these clear AA at any size.
   --------------------------------------------------------------- */
[class*="kicker"],
[class*="eyebrow"],
[class*="__eyebrow"],
.section-title__eyebrow,
.section-subtitle,
.eyebrow {
  color: var(--ivy-gold) !important;
  font-weight: 600 !important;
}
/* Decorative kicker rules/lines follow the accent, kept hairline-soft */
[class*="kicker"]::before,
[class*="kicker"]::after {
  opacity: .55 !important;
}
/* Rating stars stay a warm gold: that is what a star rating means to a
   shopper, and overriding it with the brand aqua would read as decoration
   rather than a score. */
[class*="stars"],
[class*="__stars"],
[class*="rating"] i,
.star-rating {
  color: #C9A24B !important;
}
/* Softer, quieter card elevation site-wide (neutral, premium) */
.product-card,
.product-item,
.promo-card,
.single__blog,
.location-card,
.testimonial-item,
.about-summary {
  box-shadow: 0 10px 30px rgba(15, 15, 15, 0.04) !important;
}

.page-hero,
.clearance-hero,
.brand-hero,
.blog-hero,
.newsletter-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--ivy-cream) 100%) !important;
  color: var(--ivy-ink);
}

.section-title__heading,
.page-hero-title,
.hero-title {
  color: var(--ivy-ink);
  letter-spacing: 0;
}

.section-title__line {
  background: var(--ivy-border) !important;
}

.product-card,
.product-item,
.promo-card,
.single__blog,
.blog_sidebar.card,
.location-card,
.testimonial-item,
.about-summary,
.style-center,
.empty-state {
  border-color: var(--ivy-border) !important;
  background-color: var(--ivy-card) !important;
  box-shadow: var(--ivy-shadow-sm);
}

.section-title__subtitle,
.section-subtitle,
.hero-desc,
.page-hero-description,
.blog-meta,
.product-card__meta,
.breadcrumb__link {
  color: var(--ivy-muted) !important;
}

/* Checkboxes and radios are excluded deliberately. This rule uses the `background`
   SHORTHAND with !important, which resets background-image/-color/-size. Applied to
   a checkbox it wipes out the check mark those controls draw with a background
   image, so no custom checkbox on the site could ever appear ticked. */
.form--control,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: #ffffff !important;
  border-color: var(--ivy-border) !important;
  color: var(--ivy-ink) !important;
}

/* Focus is where the brand aqua earns its keep: it marks the active field
   clearly without the loud fill a solid accent would give. */
.form--control:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--ivy-gold) !important;
  box-shadow: 0 0 0 3px rgba(148, 220, 235, 0.45) !important;
}

/* Keyboard focus ring, brand-tinted and visible on white */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.theme-btn:focus-visible {
  outline: 2px solid var(--ivy-gold) !important;
  outline-offset: 2px !important;
}

.btn,
.theme-btn,
.cmn--btn,
.location-card__button,
.view-compare-btn {
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-card__button,
.view-compare-btn,
.search_inner__button {
  background: var(--ivy-ink) !important;
  border-color: var(--ivy-ink) !important;
  color: #ffffff !important;
}

.location-card__button:hover,
.view-compare-btn:hover,
.search_inner__button:hover {
  background: #2a2a2a !important;
  border-color: #2a2a2a !important;
  color: #ffffff !important;
}

.read-more,
.more-button .read-more,
.promo-type-tag,
.products-count span,
.page-hero-description strong,
.hero-desc strong {
  color: var(--ivy-ink) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--ivy-black) !important;
  border-color: var(--ivy-black) !important;
  color: #ffffff !important;
}

.badge,
.tag,
.status-badge,
.product-badge,
.promo-badge {
  background: var(--ivy-black) !important;
  color: #ffffff !important;
  border-color: var(--ivy-black) !important;
}