/*
 Theme Name:   KRS B2B
 Theme URI:    https://krsopticsmount.com
 Description:  Child theme for KRS — global B2B manufacturer of optics mounts, camera brackets and display stands. Built on top of Storefront (WooCommerce). Implements the Meta/CAPI + WhatsApp + YouTube/TikTok integrations delivered by the KRS Integrations plugin. COMPLIANCE: copy avoids any weapon / tactical wording.
 Author:       KRS Optics Mount
 Author URI:   https://krsopticsmount.com
 Template:     storefront
 Version:      1.0.0
 License:      GPL-2.0-or-later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  alumistand
 Tags:         e-commerce, b2b, woocommerce, lightweight, responsive
*/

/* ============================================================
 * AlumiStand brand overrides
 * The plugin and theme share these CSS variables so the whole
 * site (incl. WooCommerce pages) renders in the AlumiStand palette.
 * ============================================================ */

:root {
  --alumi-green:      #1f8a5b;   /* primary industrial green */
  --alumi-green-dark: #16633f;
  --alumi-navy:       #0c241a;   /* deep ink */
  --alumi-blue:       #1f8a5b;   /* alias kept for legacy */
  --alumi-ink:        #16241d;
  --alumi-muted:      #5c6b63;
  --alumi-line:       #e3ebe6;
  --alumi-bg:         #f6f9f7;
  --alumi-wa:         #25d366;   /* WhatsApp green */
  --alumi-radius:     14px;
  --alumi-shadow:     0 10px 30px rgba(12, 36, 26, 0.08);
}

/* Make the Storefront base inherit AlumiStand colours */
.site-header,
.main-navigation,
.storefront-primary-navigation,
.woocommerce-active .site-header {
  background: var(--alumi-navy) !important;
}
.site-header .site-branding .site-title,
.site-header .site-title a,
.main-navigation ul li a,
.storefront-primary-navigation a {
  color: #fff !important;
}
.main-navigation ul li a:hover { color: var(--alumi-green) !important; }

a, .woocommerce a.button, .button {
  color: var(--alumi-green);
}
.woocommerce a.button.alt,
.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.checkout-button {
  background: var(--alumi-green);
  border-color: var(--alumi-green);
  color: #fff;
}
.woocommerce a.button.alt:hover,
.button.alt:hover {
  background: var(--alumi-green-dark);
  border-color: var(--alumi-green-dark);
}

/* Generic helpers reused across page templates */
.alumi-wrap { max-width: 1180px; margin: 0 auto; padding: 48px 20px; }
.alumi-section { padding: 56px 0; }
.alumi-grid { display: grid; gap: 24px; }
.alumi-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.alumi-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.alumi-card {
  background: #fff; border: 1px solid var(--alumi-line);
  border-radius: var(--alumi-radius); padding: 24px;
  box-shadow: var(--alumi-shadow);
}
.alumi-card h3 { margin-top: 0; color: var(--alumi-navy); }
.alumi-btn {
  display: inline-block; background: var(--alumi-green); color: #fff;
  padding: 12px 22px; border-radius: 10px; text-decoration: none; font-weight: 600;
}
.alumi-btn:hover { background: var(--alumi-green-dark); color: #fff; }
.alumi-btn.ghost { background: transparent; color: var(--alumi-green); border: 1px solid var(--alumi-green); }

/* MOQ tiered pricing table (also injected by the plugin shortcode) */
.moq-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.moq-table th, .moq-table td { border: 1px solid var(--alumi-line); padding: 10px 12px; text-align: left; }
.moq-table th { background: var(--alumi-navy); color: #fff; }
.moq-table td.price { color: var(--alumi-green); font-weight: 600; }

/* Social matrix / footer */
.alumi-social a { display: inline-flex; align-items: center; gap: 8px; color: #fff; margin-right: 18px; text-decoration: none; }
.alumi-social a:hover { color: var(--alumi-green); }
.alumi-social svg { width: 22px; height: 22px; fill: currentColor; }

/* Floating WhatsApp button (mirrors the static prototype) */
#waFloat {
  position: fixed; right: 22px; bottom: 22px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--alumi-wa); color: #fff; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  text-decoration: none; transition: transform .15s ease;
}
#waFloat:hover { transform: scale(1.06); }
#waFloat svg { width: 30px; height: 30px; fill: #fff; }

/* Instagram wall / YouTube cards (video page) */
.ig-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ig-wall a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--alumi-line); }
.ig-wall a img { width: 100%; height: 100%; object-fit: cover; }
.yt-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.yt-card { background: #fff; border: 1px solid var(--alumi-line); border-radius: var(--alumi-radius); overflow: hidden; box-shadow: var(--alumi-shadow); }
.yt-card a { display: block; aspect-ratio: 16/9; position: relative; background: #000; }
.yt-card a img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; background: rgba(255,255,255,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.yt-play svg { width: 26px; height: 26px; fill: var(--alumi-green); margin-left: 4px; }
.yt-card .yt-meta { padding: 14px 16px; }
.yt-card .yt-meta h4 { margin: 0 0 4px; font-size: 15px; color: var(--alumi-navy); }
.yt-card .yt-meta span { color: var(--alumi-muted); font-size: 13px; }

/* OEM / shipping / payment boxes */
.oem-list, .pay-wrap, .info-box { display: grid; gap: 18px; }
.oem-list { grid-template-columns: repeat(2, 1fr); }
.steps { display: flex; flex-wrap: wrap; gap: 16px; counter-reset: step; }
.steps .step { flex: 1 1 200px; background: #fff; border: 1px solid var(--alumi-line); border-radius: var(--alumi-radius); padding: 22px; position: relative; }
.steps .step::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; background: var(--alumi-green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pay-opt { border: 1px solid var(--alumi-line); border-radius: var(--alumi-radius); padding: 22px; }
.pay-opt h3 { margin-top: 0; color: var(--alumi-navy); }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { background: #fff; border: 1px solid var(--alumi-line); border-radius: var(--alumi-radius); overflow: hidden; box-shadow: var(--alumi-shadow); }
.blog-card .b-cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--alumi-green), var(--alumi-navy)); }
.blog-card .b-body { padding: 16px 18px; }

/* Responsive */
@media (max-width: 900px) {
  .alumi-grid.cols-3, .alumi-grid.cols-2, .yt-row, .oem-list, .blog-grid { grid-template-columns: 1fr 1fr; }
  .ig-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .alumi-grid.cols-3, .alumi-grid.cols-2, .yt-row, .oem-list, .blog-grid { grid-template-columns: 1fr; }
  .ig-wall { grid-template-columns: repeat(2, 1fr); }
}