/*
 * HomeCom × EasyOrders — storefront CSS overrides
 * Version 1.1 | Uses the current HomeCom storefront class names
 * Uploading this asset does not automatically activate it.
 */

/*
  BRAND PALETTE — edit these values to change CTA buttons, links and accents.
  --hc-action      Main CTA / primary controls
  --hc-action-hover CTA hover state
  --hc-link         Text links
  --hc-accent       Sale badges / secondary accents
  --hc-focus        Keyboard focus ring
*/
:root {
  --hc-ink: #2B2B26;
  --hc-cream: #F7F5EF;
  --hc-white: #FFFFFF;
  --hc-sage-900: #31402C;
  --hc-sage-700: #4C6444;
  --hc-sage-500: #6B8557;
  --hc-sage-100: #E7ECE1;
  --hc-clay: #B5714A;
  --hc-clay-dark: #96592F;
  --hc-gold: #C9A24B;
  --hc-line: #E4E0D6;
  --hc-muted: #68685F;

  --hc-action: var(--hc-sage-700);
  --hc-action-hover: var(--hc-sage-900);
  --hc-link: var(--hc-clay-dark);
  --hc-accent: var(--hc-clay);
  --hc-focus: var(--hc-gold);
  --hc-radius-sm: 8px;
  --hc-radius-md: 14px;
  --hc-radius-lg: 20px;
  --hc-shadow-card: 0 6px 18px rgba(49, 64, 44, .09);
}

/* Keep EasyOrders' configured fonts. No additional Google Fonts request. */
.ab-announce,
#eo-header,
.eo-home-section,
.ab-marquee-section,
.ab-categories,
.ab-plist,
.ab-footer,
.ab-mobile-bottom-nav {
  color: var(--hc-ink);
}

/* Announcement bar */
.ab-announce {
  background-color: var(--hc-action);
  color: var(--hc-white);
  border: 0;
  font-size: 14px;
  font-weight: 600;
}

.ab-ann-slide {
  line-height: 1.5;
}

/* Header and navigation */
#eo-header.ab-header {
  background-color: rgba(247, 245, 239, .98);
  border-bottom: 1px solid var(--hc-line);
  box-shadow: 0 2px 8px rgba(43, 43, 38, .04);
}

#eo-header .ab-header-inner {
  min-height: 72px;
}

#eo-header .ab-logo img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
}

#eo-header .ab-nav-category-link,
#eo-header .ab-nav-more-trigger {
  color: var(--hc-sage-900);
  font-weight: 700;
  transition: color .16s ease;
}

#eo-header .ab-nav-category-link:hover,
#eo-header .ab-nav-more-trigger:hover {
  color: var(--hc-link);
}

#eo-header .ab-icon-btn {
  color: var(--hc-sage-900);
  transition: color .16s ease;
}

#eo-header .ab-icon-btn:hover {
  color: var(--hc-link);
}

#eo-header .ab-wishlist-count,
#eo-header .ab-cart-count,
#eo-header .ab-compare-count {
  background-color: var(--hc-accent);
  color: var(--hc-white);
  border: 2px solid var(--hc-cream);
  font-weight: 700;
}

#eo-header .ab-hamburger {
  color: var(--hc-sage-900);
}

/* Hero / Runway Hero blocks */
.eo-home-section.rnw-hero {
  --rnw-accent: var(--hc-action) !important;
  --rnw-b-rad: 10px !important;
  margin-top: 10px;
  margin-bottom: 20px;
}

.eo-home-section.rnw-hero .rnw-hero__inner {
  max-width: min(46rem, 100%);
}

.eo-home-section.rnw-hero .rnw-hero__title,
.eo-home-section.rnw-hero .rnw-hero__lede,
.eo-home-section.rnw-hero .rnw-hero__kicker {
  letter-spacing: 0;
  text-wrap: pretty;
}

.eo-home-section.rnw-hero .rnw-hero__title {
  font-weight: 900;
  line-height: 1.2;
}

.eo-home-section.rnw-hero .rnw-hero__lede {
  font-weight: 500;
  line-height: 1.65;
}

.eo-home-section.rnw-hero .rnw-btn {
  background-color: var(--hc-action);
  border: 1px solid var(--hc-action);
  border-radius: 10px;
  color: var(--hc-white);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 24px;
  transition: background-color .16s ease, border-color .16s ease;
}

.eo-home-section.rnw-hero .rnw-btn:hover {
  background-color: var(--hc-action-hover);
  border-color: var(--hc-action-hover);
  color: var(--hc-white);
  opacity: 1;
}

/* Promo ticker / scrolling strips */
.ab-marquee-section {
  --mq-bg: var(--hc-sage-700) !important;
  --mq-color: #FFFFFF !important;
  --mq-font-size-dt: 24px !important;
  --mq-font-size-mb: 15px !important;
  --mq-lh-dt: 56px !important;
  --mq-lh-mb: 44px !important;
  --mq-weight: 700 !important;
  --mq-letter-spacing: 0 !important;
  margin-top: 12px;
  margin-bottom: 18px;
}

.ab-marquee-track {
  background-color: var(--hc-sage-700) !important;
}

.ab-marquee-item {
  font-weight: 700;
}

.ab-marquee-item::after {
  color: var(--hc-gold);
  opacity: .9;
}

/* Categories */
.ab-categories {
  padding-top: 40px;
  padding-bottom: 40px;
}

.ab-categories-header {
  margin-bottom: 20px;
}

.ab-categories-title {
  color: var(--hc-sage-900);
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 900;
  line-height: 1.3;
}

.ab-cat-card {
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius-md);
  box-shadow: var(--hc-shadow-card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.ab-cat-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-cat-copy {
  color: var(--hc-white);
}

.ab-cat-label {
  font-weight: 800;
}

/* Product list headings / view-all link */
.ab-plist {
  padding-top: 30px;
  padding-bottom: 34px;
}

.ab-plist-header {
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.ab-plist-title {
  color: var(--hc-sage-900);
  font-size: clamp(22px, 2.5vw, 29px);
  font-weight: 900;
  line-height: 1.35;
}

.ab-plist-viewall-btn {
  color: var(--hc-link);
  font-weight: 800;
  text-decoration: none;
  text-underline-offset: 3px;
}

.ab-plist-viewall-btn:hover {
  color: var(--hc-sage-900);
  text-decoration: underline;
}

/* Product cards */
.ab-plist-card {
  background-color: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius-md);
  box-shadow: 0 3px 12px rgba(43, 43, 38, .04);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.ab-plist-media {
  background-color: var(--hc-sage-100);
  overflow: hidden;
}

.ab-plist-img-primary,
.ab-plist-img-hover {
  object-fit: cover;
}

.ab-plist-info {
  padding: 13px 14px 15px;
  text-align: right;
}

.ab-plist-name {
  color: var(--hc-sage-900);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.ab-plist-price-row {
  align-items: baseline;
  gap: 8px;
}

.ab-plist-price,
.ab-price-sale {
  color: var(--hc-sage-900);
  font-size: 17px;
  font-weight: 900;
}

.ab-price-old {
  color: #89897E;
  font-size: 13px;
  text-decoration: line-through;
}

.ab-plist-badge,
.ab-sale-badge {
  background-color: var(--hc-accent);
  border-radius: 6px;
  color: var(--hc-white);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

/* Product actions: color-only hover to avoid mobile/GPU-heavy movement */
.ab-wishlist-btn,
.ab-quick-view-btn,
.ab-card-cart-btn {
  border: 1px solid var(--hc-line);
  border-radius: 50%;
  background-color: var(--hc-white);
  color: var(--hc-sage-900);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.ab-wishlist-btn:hover,
.ab-quick-view-btn:hover,
.ab-card-cart-btn:hover {
  background-color: var(--hc-action);
  border-color: var(--hc-action);
  color: var(--hc-white);
}

.ab-plist-arrow {
  background-color: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: 50%;
  color: var(--hc-sage-900);
}

.ab-plist-arrow:hover {
  background-color: var(--hc-action);
  border-color: var(--hc-action);
  color: var(--hc-white);
}

/* Footer and newsletter */
.ab-footer {
  background-color: var(--hc-sage-900);
  color: #DCE4D8;
  margin-top: 26px;
}

.ab-footer a {
  color: inherit;
}

.ab-footer-newsletter-title {
  color: var(--hc-white);
  font-size: 22px;
  font-weight: 900;
}

.ab-footer-newsletter-desc,
.ab-footer-social-label {
  color: #DCE4D8;
  line-height: 1.65;
}

.ab-footer-subscribe-bar {
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--hc-radius-sm);
  background-color: rgba(255, 255, 255, .07);
  overflow: hidden;
}

.ab-footer-subscribe-input {
  min-height: 44px;
  background-color: transparent;
  color: var(--hc-white);
}

.ab-footer-subscribe-input::placeholder {
  color: rgba(255, 255, 255, .72);
}

.ab-footer-subscribe-submit {
  background-color: var(--hc-action);
  color: var(--hc-white);
  font-weight: 800;
  transition: background-color .16s ease;
}

.ab-footer-subscribe-submit:hover {
  background-color: var(--hc-action-hover);
}

.ab-footer-social-icons a {
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  transition: background-color .16s ease, border-color .16s ease;
}

.ab-footer-social-icons a:hover {
  background-color: var(--hc-sage-700);
  border-color: var(--hc-sage-500);
}

.ab-footer-payment img {
  max-width: 100%;
  height: auto;
}

/* Mobile bottom navigation */
.ab-mobile-bottom-nav {
  --mob-bottom-bg: var(--hc-white) !important;
  --mob-bottom-text: var(--hc-sage-900) !important;
  --mob-bottom-icon: var(--hc-action) !important;
  border-top: 1px solid var(--hc-line);
  box-shadow: 0 -3px 12px rgba(43, 43, 38, .06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ab-mobile-bottom-link {
  color: var(--hc-sage-900);
}

.ab-mobile-bottom-count {
  background-color: var(--hc-accent);
  color: var(--hc-white);
  font-weight: 700;
}

/* Keyboard accessibility */
#eo-header a:focus-visible,
#eo-header button:focus-visible,
.eo-home-section a:focus-visible,
.ab-categories a:focus-visible,
.ab-plist a:focus-visible,
.ab-plist button:focus-visible,
.ab-footer a:focus-visible,
.ab-footer button:focus-visible,
.ab-footer input:focus-visible,
.ab-mobile-bottom-nav a:focus-visible,
.ab-mobile-bottom-nav button:focus-visible {
  outline: 3px solid var(--hc-focus);
  outline-offset: 3px;
}

/* Hover-only decoration: do not add movement on touch devices. */
@media (hover: hover) and (pointer: fine) {
  .ab-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(49, 64, 44, .13);
  }

  .ab-plist-card:hover {
    border-color: rgba(76, 100, 68, .3);
    box-shadow: var(--hc-shadow-card);
  }
}

/* Responsive layout details; leave EasyOrders' native product carousel intact. */
@media (max-width: 768px) {
  #eo-header .ab-header-inner {
    min-height: 62px;
  }

  #eo-header .ab-logo img {
    max-height: 44px;
  }

  .eo-home-section.rnw-hero {
    margin-top: 0;
    margin-bottom: 14px;
  }

  .eo-home-section.rnw-hero .rnw-hero__inner {
    max-width: 100%;
  }

  .eo-home-section.rnw-hero .rnw-hero__title {
    font-size: clamp(28px, 8vw, 40px);
  }

  .eo-home-section.rnw-hero .rnw-hero__lede {
    font-size: clamp(14px, 4vw, 17px);
  }

  .eo-home-section.rnw-hero .rnw-btn {
    min-height: 44px;
    padding: 11px 21px;
  }

  .ab-categories {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .ab-plist {
    padding-top: 23px;
    padding-bottom: 26px;
  }

  .ab-plist-info {
    padding: 11px 12px 13px;
  }

  .ab-plist-name {
    font-size: 14px;
  }

  .ab-plist-price,
  .ab-price-sale {
    font-size: 16px;
  }

  .ab-footer {
    margin-top: 18px;
  }
}

@media (max-width: 480px) {
  .ab-ann-slide {
    font-size: 12px;
  }

  .ab-categories-title,
  .ab-plist-title {
    font-size: 22px;
  }

  .ab-plist-header {
    margin-bottom: 15px;
  }

  .ab-plist-card {
    border-radius: 11px;
  }

  .ab-plist-badge,
  .ab-sale-badge {
    font-size: 11px;
    padding: 4px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-cat-card,
  .ab-plist-card,
  .ab-wishlist-btn,
  .ab-quick-view-btn,
  .ab-card-cart-btn,
  .ab-icon-btn,
  .rnw-btn {
    transition: none !important;
  }

  .ab-marquee-track {
    animation: none !important;
    transform: translateX(0) !important;
  }

  .eo-hs-anim-in,
  .ab-anim-el,
  .ab-reveal {
    animation: none !important;
  }
}