/* Anderson corporate-gifting palette — loaded AFTER style.css.
   Hex values are eyedropper estimates from the mockup — confirm with the designer before sign-off. */
body.theme-color-38 {
    --theme-color: #8b6f47;        /* primary bronze — buttons, accents */
    --theme-color-dark: #6d5636;   /* hover */
    --theme-color-light: #f0e6d8;  /* icon circle fill */
    --hero-bg: #f5f0e8;            /* hero cream */
    --process-bg: #8a8a8a;         /* branding-process grey */
    --text-dark: #2b2b2b;
}

/* ---------- Hero ---------- */
.anderson-hero {
    background: var(--hero-bg);
    padding: 80px 0;
}
.anderson-hero .hero-heading { font-size: 42px; line-height: 1.2; color: var(--text-dark); font-weight: 700; }
.anderson-hero .hero-accent  { color: var(--theme-color); font-size: 15px; margin: 18px 0 12px; }
.anderson-hero .hero-desc    { max-width: 460px; color: #555; }
.anderson-hero .hero-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 991px) {
    .anderson-hero { padding: 48px 0; text-align: center; }
    .anderson-hero .hero-heading { font-size: 30px; }
    .anderson-hero .hero-desc { margin-inline: auto; }
    .anderson-hero .hero-actions { justify-content: center; }
}

/* ---------- Featured Collections ---------- */
.collection-card { position: relative; overflow: hidden; border-radius: 6px; }
.collection-card img { width: 100%; height: 320px; object-fit: cover; display: block; }
.collection-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end; padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent 60%);
    color: #fff;
}
.collection-overlay h3 { color: #fff; margin-bottom: 12px; font-size: 20px; }

/* ---------- Browse Categories ---------- */
.anderson-category-card {
    display: block; text-align: center; padding: 24px 12px;
    border: 1px solid #eee; border-radius: 6px; transition: box-shadow .2s;
}
.anderson-category-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.anderson-category-card img { width: 56px; height: 56px; margin: 0 auto 14px; display: block; }
.anderson-category-card h4 { font-size: 15px; color: var(--text-dark); margin: 0; }
.category-4 .slick-slide > div { padding: 0 10px; }
.category-4 .slick-prev, .category-4 .slick-next {
    width: 36px; height: 36px;
}

/* ---------- Trusted by Leading Brands ---------- */
/* Theme's .logo-block img has no width cap, so full-size logo files
   overflow slick's calculated slide width and overlap neighbors. */
.slide-8 .logo-block { display: flex; align-items: center; justify-content: center; height: 60px; }
.slide-8 .logo-block img { max-width: 100%; max-height: 60px; width: auto; height: auto; }

/* ---------- Testimonials ---------- */
/* Theme's ".testimonial .testimonial-slider .media img" rule (130x130,
   circular, bordered) targets the avatar photo but also matches these
   star icons since they share the same .media ancestor — this selector
   is one class deeper so it wins without !important. */
.testimonial .testimonial-slider .media .testimonial-rating { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.testimonial .testimonial-slider .media .testimonial-rating img {
    width: 14px; height: 14px; border: none; border-radius: 0; padding: 0; margin: 0;
}

/* ---------- Product grid cards (shop, search, related products) ---------- */
/* Theme's ".img-wrapper img{width:100%}" leaves height to the image's own
   aspect ratio. Demo product crops aren't uniform (portrait bottle vs.
   square mug etc.), so cards ended up wildly different heights and
   images overflowed into neighboring rows. */
.basic-product .img-wrapper img { height: 280px; object-fit: cover; object-position: center; }

/* ---------- Custom Branding Process ---------- */
.branding-process { background: var(--process-bg); padding: 60px 0; }
.process-card { background: #fff; border-radius: 6px; padding: 40px 30px; max-width: 900px; margin: 0 auto; }
.process-row { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-bottom: 30px; }
.process-row:last-child { margin-bottom: 0; }
.process-node { flex: 0 0 auto; width: 120px; text-align: center; }
.process-icon {
    width: 64px; height: 64px; margin: 0 auto 12px;
    border-radius: 50%; background: var(--theme-color-light);
    display: flex; align-items: center; justify-content: center;
}
.process-icon img { width: 32px; height: 32px; }
.process-node span { font-size: 13px; line-height: 1.4; color: var(--text-dark); }
.process-arrow { flex: 0 0 auto; padding-top: 24px; opacity: .5; }

@media (max-width: 767px) {
    .process-row { flex-wrap: wrap; gap: 20px; }
    .process-arrow { display: none; }
    .process-node { width: 45%; }
}
@media (max-width: 575px) {
    .process-node { width: 100%; }
}

/* ---------- Bottom CTA Bar ---------- */
.anderson-cta {
    position: relative;
    background: url('../images/anderson/cta/background.jpg') center/cover no-repeat;
    padding: 60px 0;
    color: #fff;
    border-radius: 6px;
    overflow: hidden;
}
.anderson-cta::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(0, 0, 0, .55);
}
.anderson-cta > .container { position: relative; z-index: 1; }
.anderson-cta h2 { color: #fff; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cta-actions .btn img { width: 18px; margin-right: 8px; vertical-align: middle; }

@media (max-width: 991px) {
    .anderson-cta { text-align: center; }
    .cta-actions { justify-content: center; margin-top: 24px; }
}
@media (max-width: 575px) {
    .cta-actions .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
}