/* =====================================================================
   THE GOOD CITIZEN (tgc.) — Brand override for the Amerce template
   Sits ON TOP of the template's styles.css. Changes ONLY colour and
   typography (per brand guidelines). No custom components — every
   section/component on the site is the template's own.
   ---------------------------------------------------------------------
   Palette: Canopy #D8E49E · Beeswax #FAD471 · Clay Pot #E47B48 ·
            Open Water #ACCDF8 · Sky #BEC3FF · Chalk #F8F8F8 · Charcoal #2B2B2B
   Typeface: DM Sans (already bundled with the template)
   ===================================================================== */

:root {
  /* Remap the template's colour variables to the TGC palette */
  --primary: #E47B48;       /* Clay Pot — CTAs / focal points (was template red) */
  --secondary: #A9C36A;     /* deeper Canopy */
  --third: #FAD471;         /* Beeswax */
  --text: #2B2B2B;          /* Charcoal */
  --text-2: #5F6156;
  --text-3: #9A9C92;
  --bg: #F8F8F8;            /* Chalk */
  --bg-2: #F4F1E8;
  --bg-3: #2B2B2B;
  --bg-4: #E47B481A;
  --bg-5: #FBEFE2;
  --bg-6: #2B2B2B;
  --bg-7: #F3EFE3;
  --line: #E7E5DD;
  --yellow: #FAD471;
  --pink: #E47B48;
  --critical: #E4564A;
  --success: #7BA05B;
  --on-surface: #2B2B2B;
  --surface: #F8F8F8;
  --cl-1: #A9C36A;
  --cl-2: #FAD471;
}

/* A couple of places in the template hardcode the old red — nudge them */
[style*="#DC4646"], [style*="#dc4646"] { color: var(--primary) !important; }

/* ---- Typography: DM Sans everywhere, per guidelines (icons excepted) ---- */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, label, button, input, textarea, select, .btn, .tf-btn {
  font-family: "DM Sans", sans-serif;
}
[class*="icon-"], .icon, .icomoon, [class^="icon"] { font-family: "icomoon" !important; }

/* Brand rules: body copy at 0 letter-spacing; italics forbidden */
body, p, li { letter-spacing: 0; }
em, i:not([class*="icon"]) { font-style: normal; }

/* Header logo — TGC PNG lock-up (613x120, ~5.1:1). Preserve aspect on every
   breakpoint: fix the height, let width follow, and lift the template's mobile
   max-width cap so the width is never clipped (which was squashing the logo). */
.logo-site img, .logo-header img, header .logo img, .tf-header .logo-site img {
  height: 32px !important; width: auto !important; max-width: 180px !important;
  object-fit: contain;
}
@media (max-width: 991px) {
  .logo-site img, .tf-header .logo-site img { height: 28px !important; max-width: 160px !important; }
}
.footer .logo img, .footer-logo img { height: 36px !important; width: auto !important; max-width: 200px !important; object-fit: contain; }

/* =====================================================================
   TGC post-launch fixes
   ===================================================================== */

/* Hide currency + language selectors — store is IDR / English only */
.tf-list.list-currenci,
.footer .tf-currencies, .footer .tf-languages,
.footer-bottom .tf-currencies, .footer-bottom .tf-languages,
footer .tf-currencies, footer .tf-languages { display: none !important; }

/* Product card: keep the Add-to-Cart button aligned across a row even when
   the product name wraps to two lines. */
.card-product { display: flex; flex-direction: column; height: 100%; }
.card-product .card-product_info { display: flex; flex-direction: column; flex: 1 1 auto; }
.card-product .card-product_info .name-product {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em; line-height: 1.3;
}
.card-product .card-product_info .price-wrap { margin-top: 4px; }
/* push the add-to-cart button to the bottom of the card */
.card-product .card-product_info .tf-btn,
.card-product .card-product_info .btn-fill { margin-top: auto; }

/* Wishlist heart active state */
.js-wishlist.active, .js-wishlist.active .icon { color: var(--primary) !important; }
.js-wishlist.active .icon-Heart:before { font-weight: 700; }

/* =====================================================================
   TGC post-launch fixes — round 2
   ===================================================================== */

/* Home hero uses a transparent header (header-abs-2) over a dark image. Until
   it becomes sticky (solid white bar on scroll), show the nav, icons and logo
   in white so they're legible; the sticky state keeps the default dark text. */
.tf-header.header-abs-2:not(.header-sticky) .box-nav-menu .item-link,
.tf-header.header-abs-2:not(.header-sticky) .box-nav-menu .item-link .text,
.tf-header.header-abs-2:not(.header-sticky) .nav-icon-item,
.tf-header.header-abs-2:not(.header-sticky) .nav-icon-item .icon {
  color: #fff !important;
}
.tf-header.header-abs-2:not(.header-sticky) .logo-site img {
  filter: brightness(0) invert(1);
}
.tf-header.header-abs-2:not(.header-sticky) .btn-open-menu,
.tf-header.header-abs-2:not(.header-sticky) .btn-open-menu .icon {
  color: #fff !important;
}

/* Catalog pagination: center it (the template utility class needs a flex row) */
.wrapper-shop .wd-full { display: flex; justify-content: center; margin-top: 8px; }

/* Home Instagram/gallery section shouldn't butt against the footer */
.themesFlat { padding-bottom: 80px; }

/* Media Release: article images at a consistent height regardless of source aspect */
.article-blog .blog-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; }
.article-blog .blog-image img { width: 100%; height: 100%; object-fit: cover; }