/* ==========================================================================
   SCC (Solarcrown Commercial) — Zoho Commerce Custom CSS
   Verified against the live DOM at portal.solarcrowncommercial.com —
   every selector below was confirmed to exist and match, not guessed.

   Brand tokens pulled directly from the SCC logo:
     Navy  #082739
     Green #2bb957

   Paste into: Zoho Commerce → Storefront → Customize → Custom CSS Editor.
   ========================================================================== */

:root {
  --scc-navy: #082739;
  --scc-green: #2bb957;
  --scc-green-dark: #239a48;
  --scc-white: #ffffff;
}

/* --------------------------------------------------------------------------
   1. TOP UTILITY BAR
   Currently solid black. Swapping to brand navy ties it to the logo.
   -------------------------------------------------------------------------- */

.theme-header-topbar {
  background-color: var(--scc-navy) !important;
}
.theme-header-topbar,
.theme-header-topbar a,
.theme-header-topbar span,
.theme-header-topbar i {
  color: var(--scc-white) !important;
}

/* --------------------------------------------------------------------------
   2. SITE TITLE + MAIN NAV
   -------------------------------------------------------------------------- */

.theme-site-name {
  color: var(--scc-navy) !important;
  font-weight: 600;
}

/* "Products" and any other main nav links */
.theme-menu ul li a {
  color: var(--scc-navy) !important;
}
.theme-menu ul li a:hover {
  color: var(--scc-green) !important;
}
/* Current page indicator */
.theme-menu ul li.theme-menu-selected a {
  color: var(--scc-green) !important;
}

/* Basket count badge — currently the same grey as the buttons */
.theme-mini-cart-count {
  background-color: var(--scc-green) !important;
  color: var(--scc-white) !important;
}

/* --------------------------------------------------------------------------
   3. PRODUCT CARDS
   "View Details" is currently #3b3b3b — plain theme grey, not a brand
   colour. Moving it to brand green makes it read as a deliberate call
   to action.
   -------------------------------------------------------------------------- */

.theme-product-price {
  color: var(--scc-navy) !important;
  font-weight: 700;
}

.theme-product-details {
  background-color: var(--scc-green) !important;
  border-color: var(--scc-green) !important;
  color: var(--scc-white) !important;
}
.theme-product-details:hover {
  background-color: var(--scc-green-dark) !important;
  border-color: var(--scc-green-dark) !important;
}

/* --------------------------------------------------------------------------
   4. FOOTER
   The standout fix: every footer link — including "Terms & Conditions" —
   is currently rendering in a stray yellow (#f5f460) that the page
   builder applied to the whole dark footer section. It has nothing to
   do with the brand. This switches all of them to brand green.
   -------------------------------------------------------------------------- */

.theme-footer-area {
  background-color: var(--scc-navy) !important;
}

.theme-footer-area a {
  color: var(--scc-green) !important;
}
.theme-footer-area a:hover {
  color: var(--scc-white) !important;
  text-decoration: underline;
}

/* "Reach out to us" / "Quick Links" headings — currently a flat grey */
.theme-footer-area .zpheading {
  color: var(--scc-white) !important;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   5. FOOTER ICONS (mobile) — the phone/email icons under "Reach out to us"
   The theme's mobile icon-font fallback drops the phone/envelope icons
   into a full-width column with nothing capping their size, so on a
   phone they render at ~750px and spill off the edge of the screen.
   This pins them to a normal 40px icon size on mobile.
   -------------------------------------------------------------------------- */

.theme-footer-area .zpelem-imagetext img.zpimage {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  object-fit: contain !important;
}
.theme-footer-area .zpelem-imagetext .zpimagetext-container,
.theme-footer-area .zpelem-imagetext figure.zpimage-data-ref,
.theme-footer-area .zpelem-imagetext picture {
  width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
}

/* --------------------------------------------------------------------------
   6. HEADER LOGO (mobile) — the logo was rendering half off the top of
   the screen. The mobile header bar is a fixed 56px tall, but the "SCC"
   logo (64px) plus the full "Solarcrown Commercial Redrow Portal" text
   underneath it (which wraps to two lines at phone width) made that
   branding block 121px tall. Centered inside a 56px bar, it overflowed
   equally above and below — the top ~33px, including the top of the
   logo, rendered above the visible viewport.

   Fix: hide the duplicate text caption on mobile (the logo image already
   carries the name) and shrink the logo slightly so it sits cleanly
   inside the header bar with no overflow either way.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .theme-site-name-caption {
    display: none !important;
  }
  .theme-logo-parent img[data-zs-logo] {
    height: 40px !important;
    width: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. FOOTER NOT SHOWING ON MOBILE
   This isn't a CSS gap — the footer's content section is carrying Zoho's
   own "zp-hidden-xs" class, which means it was explicitly set to hide on
   extra-small screens at some point while it was being built in the page
   editor. The cleanest fix is to go into Storefront → Edit and turn mobile
   visibility back on for that footer section directly (look for a device/
   eye icon in the section's settings toolbar).

   This override forces it visible regardless, scoped to that one section
   only, in case you'd rather patch it here for now:
   -------------------------------------------------------------------------- */

[data-element-id="elm_cO5sclQER3G8BqsVdIfdmA"].zp-hidden-xs {
  display: block !important;
}