/*
Theme Name: TMT Pro Supplies
Theme URI: https://trademarktrading.com
Description: Child theme of Blocksy for the TMT Pro Supplies appliance store. Holds custom styling and small helpers so the parent theme is never edited.
Author: TMT Pro Supplies
Template: blocksy
Version: 1.3.0
Text Domain: trademarktrading
*/

/* ---- Brand tokens (mirrored in Customizer palette) ---- */
:root {
  --tmt-navy: #101C2C;
  --tmt-navy-dark: #0B1420;
  --tmt-blue: #24364B;
  --tmt-charcoal: #2b3340;
  --tmt-accent: #C5A46D;
  --tmt-accent-dark: #B08F55;
  --tmt-light: #F4F2ED;
  --tmt-whatsapp: #25d366;
}

/* ---- Product cards: tidy, retail-style ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  line-height: 1.35;
  min-height: 2.7em;
}
.woocommerce ul.products li.product .price {
  font-weight: 700;
  color: var(--tmt-navy);
}
.woocommerce ul.products li.product .price del {
  opacity: .55;
  font-weight: 400;
}
.woocommerce span.onsale {
  background: var(--tmt-accent);
  color: var(--tmt-navy);
  border-radius: 4px;
  font-weight: 700;
}

/* ---- WhatsApp enquiry button (product page + shortcode) ---- */
.tmt-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.2em;
  border-radius: 6px;
  background: var(--tmt-whatsapp);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.2;
  transition: background .15s ease;
}
.tmt-whatsapp-btn:hover,
.tmt-whatsapp-btn:focus {
  background: #1fb457;
  color: #fff;
}
.tmt-whatsapp-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}
.single-product .tmt-whatsapp-enquiry {
  margin: 1em 0 1.5em;
}
.single-product .tmt-whatsapp-enquiry p.tmt-enquiry-note {
  margin: .5em 0 0;
  font-size: .9em;
  opacity: .75;
}

/* ---- Trust strip used on homepage via pattern/blocks ---- */
.tmt-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.tmt-trust .tmt-trust-item {
  background: var(--tmt-light);
  border-radius: 10px;
  padding: 22px;
}
.tmt-trust .tmt-trust-item h4 {
  margin: 0 0 .35em;
  color: var(--tmt-navy);
}

/* ---- Homepage: hero sits flush under the header ---- */
body.home.page .site-main,
body.home.page article.page {
  --content-spacing: 0px;
}
body.home.page .entry-content > *:last-child {
  margin-bottom: 0;
}

/* ---- Forms placed on dark (navy) sections ---- */
.wp-block-group.has-background[style*="#101C2C"] .wpforms-field-label,
.wp-block-group.has-background[style*="#101C2C"] .wpforms-field-label-inline,
.wp-block-group.has-background[style*="#101C2C"] .wpforms-field-sublabel,
.wp-block-group.has-background[style*="#101C2C"] .wpforms-required-label {
  color: #fff;
}
.wp-block-group.has-background[style*="#101C2C"] .wpforms-submit {
  background: var(--tmt-accent);
  border-color: var(--tmt-accent);
  color: #fff;
}

.wp-block-group.has-background[style*="#101C2C"] .wpforms-container {
  --wpforms-button-background-color: var(--tmt-accent);
  --wpforms-button-background-color-alt: var(--tmt-accent-dark);
  --wpforms-button-border-color: var(--tmt-accent);
  --wpforms-button-text-color: #101C2C;
  --wpforms-label-color: #fff;
  --wpforms-label-sublabel-color: rgba(255, 255, 255, .8);
  --wpforms-label-error-color: #ffb4a0;
}

/* ---- Footer (navy) readability ---- */
.ct-footer [data-row="middle"] {
  --theme-text-color: rgba(255, 255, 255, .82);
  --theme-link-initial-color: rgba(255, 255, 255, .82);
  --theme-link-hover-color: var(--tmt-accent);
  --theme-heading-color: #fff;
}
.ct-footer [data-row="middle"] .widget-title,
.ct-footer [data-row="middle"] h3 {
  color: #fff;
  font-size: 17px;
  margin-bottom: .6em;
}
.ct-footer [data-row="middle"] ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.ct-footer [data-row="middle"] li {
  margin: 0 0 .45em;
}
.ct-footer [data-row="bottom"] {
  --theme-text-color: rgba(255, 255, 255, .65);
  --theme-link-initial-color: rgba(255, 255, 255, .75);
  --theme-link-hover-color: var(--tmt-accent);
}

/* ---- Category cards on the homepage ---- */
.tmt-cat-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.tmt-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(15, 42, 68, .08);
}
.tmt-cat-card h3 a {
  color: var(--tmt-navy);
  text-decoration: none;
}
.tmt-cat-card h3 a:hover {
  color: var(--tmt-accent);
}

/* ---- Buttons: slightly bolder retail feel ---- */
.ct-button,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-weight: 600;
  letter-spacing: .01em;
}

/* ---- Navy & Gold palette: gold buttons read best with navy text ---- */
.ct-button,
.wp-block-button__link.has-background[style*="C5A46D"],
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  color: var(--tmt-navy) !important;
}
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--tmt-accent) !important;
  border-color: var(--tmt-accent) !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--tmt-accent-dark) !important;
}
.tmt-trust .tmt-trust-item {
  border-top: 3px solid var(--tmt-accent);
}

/* ---- Product category pages: photo banner (replaces Blocksy's plain title) ---- */
.tax-product_cat .hero-section,
.tax-product_cat .ct-page-title,
.tax-product_cat .woocommerce-products-header__title,
.tax-product_cat .term-description {
  display: none;
}
.tmt-cat-banner {
  position: relative;
  width: 100vw;
  margin: 0 0 2.5rem calc(50% - 50vw);
  min-height: 300px;
  display: flex;
  align-items: center;
  background: linear-gradient(120deg, var(--tmt-navy) 0%, var(--tmt-blue) 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.tmt-cat-banner.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 28, 44, .92) 0%, rgba(16, 28, 44, .62) 45%, rgba(16, 28, 44, .2) 100%);
}
.tmt-cat-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--tmt-accent);
}
.tmt-cat-banner__inner {
  position: relative;
  width: 100%;
  max-width: var(--theme-container-width, 1290px);
  margin: 0 auto;
  padding: 3.5rem 20px;
}
.tmt-cat-banner__kicker {
  margin: 0 0 .4em;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tmt-accent);
  font-weight: 600;
}
.tmt-cat-banner__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
}
.tmt-cat-banner__desc {
  margin: .8em 0 0;
  max-width: 560px;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .88);
}
.tmt-cat-banner__count {
  margin: .9em 0 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .7);
}
@media (max-width: 689px) {
  .tmt-cat-banner { min-height: 220px; margin-bottom: 1.5rem; }
  .tmt-cat-banner__inner { padding: 2.2rem 16px; }
}

/* ---- Homepage: image category cards ---- */
.tmt-cat-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 1.5rem 0 0;
}
.tmt-cat-cards.tmt-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 999px) { .tmt-cat-cards, .tmt-cat-cards.tmt-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 479px) { .tmt-cat-cards, .tmt-cat-cards.tmt-cols-3 { grid-template-columns: 1fr; } }
.tmt-cat-card-img {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(16, 28, 44, .07);
  text-decoration: none !important;
  color: var(--tmt-navy) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tmt-cat-card-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 28, 44, .14);
}
.tmt-cat-card-img__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: linear-gradient(120deg, var(--tmt-navy), var(--tmt-blue));
  overflow: hidden;
}
.tmt-cat-card-img__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.tmt-cat-card-img:hover .tmt-cat-card-img__media img { transform: scale(1.04); }
.tmt-cat-card-img__body {
  display: block;
  padding: 14px 16px 16px;
  border-top: 3px solid var(--tmt-accent);
}
.tmt-cat-card-img__title {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
}
.tmt-cat-card-img__meta {
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  color: var(--tmt-blue);
  opacity: .8;
}

/* ---- Homepage: photo promo tiles ---- */
.tmt-promo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--tmt-navy), var(--tmt-blue));
  background-size: cover;
  background-position: center;
  text-decoration: none !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(16, 28, 44, .08);
}
.tmt-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 28, 44, .92) 0%, rgba(16, 28, 44, .35) 55%, rgba(16, 28, 44, 0) 100%);
}
.tmt-promo__body {
  position: relative;
  display: block;
  padding: 26px 28px;
}
.tmt-promo__title {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: .3em;
}
.tmt-promo__text {
  display: block;
  font-size: .98rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 1em;
  max-width: 460px;
}
.tmt-promo__btn {
  display: inline-block;
  padding: .6em 1.2em;
  border-radius: 6px;
  background: var(--tmt-accent);
  color: var(--tmt-navy);
  font-weight: 600;
  font-size: .95rem;
}
.tmt-promo:hover .tmt-promo__btn { background: var(--tmt-accent-dark); }
@media (max-width: 689px) { .tmt-promo { min-height: 240px; } }

/* ---- Homepage hero on photo ---- */
.tmt-hero .wp-block-cover__inner-container { position: relative; }
.tmt-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }

/* ---- Section headings: gold underline accent ---- */
.tmt-section-title {
  position: relative;
  padding-bottom: .55em;
}
.tmt-section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--tmt-accent);
  margin: .55em auto 0;
}

/* ---- Homepage: brand pills ---- */
.tmt-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 1.5rem;
}
.tmt-brands a {
  display: inline-block;
  padding: .7em 1.6em;
  border: 1.5px solid rgba(16, 28, 44, .14);
  border-radius: 999px;
  background: #fff;
  color: var(--tmt-navy);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
  text-decoration: none;
  transition: all .15s ease;
}
.tmt-brands a:hover {
  border-color: var(--tmt-accent);
  background: var(--tmt-accent);
  color: var(--tmt-navy);
}

/* ---- Category page: tighten the space under the banner ---- */
.tax-product_cat .site-main > .ct-container,
.tax-product_cat .site-main > .ct-container-full {
  padding-top: 0;
}

/* ---- Homepage: hero flush under the header (Blocksy adds 60px container padding) ---- */
body.home.page .site-main > .ct-container-full,
body.home.page .site-main > .ct-container {
  padding-top: 0;
}