/*=================================================
  KR Info Solutions — product / brand pages stylesheet
  Shared by ALL pages in products/  (one template = one file)

  Loaded AFTER css/style.css, which supplies the shared design
  tokens, reset, container, header, nav, footer and buttons.
  This file holds only what is specific to the product pages.
  Prefix: .prod-

  Every value below was read off the live theme stylesheet
  (webteck/assets/css/style.css) and the live Elementor page CSS
  (post-6924 Ubiquiti, post-5064 Mikrotik, post-6578 Grandstream,
  post-6717 Mimosa, post-6406 Cambium) — not estimated.
  All five page CSS files are byte-identical apart from the card
  colour overrides noted under "Product grid section" below.

  Live markup that these rules reproduce:
    .service-box3                     -> .prod-card
    .service-box3_content             -> .prod-card_content
    .service-box3_icon                -> .prod-card_icon
    .box-title.title-selector         -> .prod-card .box-title
    .service-box3_text.desc-selector  -> .prod-card_text
    .line-btn                         -> (removed, see "Card link" below)
=================================================*/

/* NOTE: as on services.html and our-community.html, the theme's empty
   `.breadcumb-wrapper` band above the hero is omitted per the client's
   standing decision (2026-07-27). The hero starts under the header. */

/* ---------- Page hero ----------
   Live container (e.g. post-6924 .elementor-element-0199155):
   min-height 400px / 300px @1024 / 280px @767, bg2.png bottom-center
   cover, #000 overlay at 0.5, heading Roboto 60px/600 white centred
   (40px @767), breadcrumb text white with an orange chevron.
   Identical treatment to .svc-hero / .oc-hero. */
.prod-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 0;
  background-image: url("../assets/images/bg2.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.prod-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--black-color);
  opacity: 0.5;
}
.prod-hero .container { position: relative; z-index: 2; }
.prod-hero-title {
  font-family: var(--body-font);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white-color);
  text-align: center;
  margin: 0 0 10px 0;
}
.prod-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.prod-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--white-color);
}
.prod-breadcrumb a { color: var(--white-color); }
.prod-breadcrumb a:hover { color: var(--accent-orange); }
.prod-breadcrumb .sep {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent-orange);
}

/* ---------- Product grid section ----------
   Live pads this container 120px top and bottom (80px @1024). Per the
   client's inner-page rhythm decision (2026-07-27) every content section
   on an inner page uses --inner-section-space instead, so the gap matches
   services.html and our-community.html.
   APPROVED DEVIATION — do not restore 120px during the pixel pass. */
/* Breathing room above and below the grid (client, 2026-07-28).
   A single --inner-section-space per side left only 40px between the hero
   banner and the first card, and the same 40px between the last card and
   the dark footer band — half the 80px this build puts between any two
   sections. The product pages are a single section sandwiched between two
   full-bleed blocks, so neither neighbour contributes the other 40px the
   rhythm assumes. Doubling the token on both sides restores that 80px, and
   keeps it tracking the token if the rhythm is ever retuned. */
.prod-sec { padding: calc(var(--inner-section-space) * 2) 0; }

/* Live sets --content-width:1404px on this container at >=768px — WIDER
   than the site's usual 1140px .container — with the widget inside padded
   0 12px (36px @1024, 12px @767). Reproduced here rather than reusing
   .container, which would narrow the grid by 264px. */
/* Side gutter. Live only ever sets 12px here (36px in Elementor's tablet
   range), which leaves the grid all but touching the window edge on any
   laptop between 1025px and ~1420px — narrower breathing room than the
   tablet layout gets, which reads as a bug. Widened to a real gutter at
   the client's request (2026-07-28).
   The gutter is ADDED to max-width rather than eaten out of it (box-sizing
   is border-box site-wide), so the grid still measures exactly 1404px on a
   wide screen — matching live — instead of the 1380px it was getting. */
.prod-container {
  --prod-gutter: 40px;
  width: 100%;
  max-width: calc(1404px + var(--prod-gutter) * 2);
  margin: 0 auto;
  padding-left: var(--prod-gutter);
  padding-right: var(--prod-gutter);
}

/* Live grid is `row gy-4 justify-content-between align-items-center` with
   `col-md-6 col-xl-3` columns: 4 across >=1200, 2 across 768-1199, 1 below.
   gy-4 is a 24px vertical gutter; the columns' 12px padding against the
   row's -12px margin gives the same 24px horizontally.

   ⚠ APPROVED DEVIATION FROM LIVE — uniform card size (client, 2026-07-28).
   Live uses `align-items-center`, so cards are NOT stretched: each keeps
   its natural height and is centred in its row, which leaves the grid
   visibly ragged because the descriptions differ in length. The client
   asked for every card to be the same height and width, so:
     - `align-items: stretch` equalises cards within a row, and
     - `grid-auto-rows: 1fr` equalises every row against the tallest card,
       making all cards on the page identical.
   Do not restore `align-items: center` during the pixel-comparison pass. */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  grid-auto-rows: 1fr;
  gap: 24px;
  /* Card ink colours come from the Elementor page CSS, which scopes them
     onto the card as --title-color / --body-color overrides:
       .title-selector { --title-color:#283187 }
       .desc-selector  { --body-color:#000000 }
     Mikrotik (post-5064) carries NO such override, so that page keeps the
     theme defaults — see .prod-grid--theme-ink below. */
  --prod-title-ink: #283187;
  --prod-desc-ink: #000000;
}
/* Mikrotik only: no colour override on live, so titles fall back to the
   theme's --title-color (#141D38) and text to --body-color (#737887). */
.prod-grid--theme-ink {
  --prod-title-ink: var(--title-color);
  --prod-desc-ink: var(--body-color);
}

/* ---------- Centred short grid ----------
   Used by the five grids that hold only 3 cards (the three brand sections
   on fortinet-and-fujikura.html and two category sections on digisol.html).
   In a 4-column grid those 3 cards fill columns 1-3 and leave column 4
   empty, so the row reads as left-aligned under a centred heading.
   Switching to flex lets the row centre while each card keeps EXACTLY the
   width it would have had as one of four columns — `(100% - 3 gaps) / 4` —
   so cards stay the same size as every other page. */
.prod-grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}
.prod-grid--center > .prod-card {
  width: calc((100% - 72px) / 4);
  flex: none;
}

/* ---------- Product card ----------
   Theme: .service-box3 { background:#EFF1F9 (--smoke-color3);
   border-radius:30px; padding:30px } and padding:30px 20px below 1300px. */
.prod-card {
  position: relative;
  background-color: #eff1f9;
  border-radius: 30px;
  padding: 30px;
  /* Fill the grid track so every card is the same height (see .prod-grid). */
  height: 100%;
  display: flex;
}
/* Column layout inside the card: image, title, text, then the link pushed
   to the bottom edge by `margin-top:auto`. Without this the links would
   float at different heights once the cards are equalised. */
.prod-card_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.prod-card_icon {
  margin-bottom: 30px;
  width: 100%;
}
/* The product shots are not one consistent size on live — most are 900x900
   but plenty are wider or taller JPGs, which is the other half of why the
   grid looks ragged. A fixed square box makes every image occupy the same
   area; `contain` scales the product to fit WITHOUT cropping it, so no
   part of a product is ever cut off. */
.prod-card_icon img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: all 0.6s ease-in-out;
}
/* Theme hover. scale(-1) and rotate(180deg) cancel out as an END STATE, but
   the two components interpolate together, so the image flips through zero
   and back — that flip IS the live hover effect. Written exactly as live. */
.prod-card:hover .prod-card_icon img {
  transform: scale(-1) rotate(180deg);
}
/* .box-title base is 24px/1.417/700 with margin-top:-0.32em; .service-box3
   drops the weight to 600, and the size to 20px below 1300px. */
.prod-card .box-title {
  font-size: 24px;
  line-height: 1.417;
  font-weight: 600;
  margin-top: -0.32em;
  color: var(--prod-title-ink);
}
.prod-card .box-title a { color: inherit; }
.prod-card .box-title a:hover { color: var(--theme-color); }
/* No margin overrides here on purpose: live inherits the theme's
   h1-h6 `margin: 0 0 15px 0` and `p { margin: 0 0 18px 0 }`, both of
   which css/style.css already reproduces byte-for-byte. */
.prod-card_text { color: var(--prod-desc-ink); }
/* The description is now the last thing in the card, so drop its trailing
   18px margin — otherwise the gap under the text reads as 48px against the
   30px above the image. */
.prod-card_content > *:last-child { margin-bottom: 0; }

/* ---------- Card link — REMOVED (client, 2026-07-28) ----------
   Live ends every card with a theme `.line-btn`: "DOWNLOAD DATASHEET" or
   "Other Products" plus a Font Awesome arrow (several cards carry only the
   arrow). Every one of those links was dead on live — empty, "#", or a
   datasheet URL that 404s — and the client asked for the link and arrow to
   be dropped from all cards, so the `.prod-btn` markup and its styles are
   gone from all 15 pages.
   ⚠ APPROVED DEVIATION FROM LIVE — do not reinstate during the
   pixel-comparison pass. */

/* =================================================================
   MULTI-SECTION PAGES
   Only two product pages are not a single flat grid:
     digisol.html               (category sub-sections)
     fortinet-and-fujikura.html (four brands + anchors on one page)
   Everything below is used by those two only; the other 13 pages
   never touch it.
   ================================================================= */

/* ---------- Sub-section heading ----------
   Two different widgets produce headings inside these pages:

   a) Elementor `heading` — digisol's "DIGISOL UNMANAGED SWITCH MODEL"
      and "CABLES BOXES": Roboto 34px/600 #0D134F, centred (post-8558).
   b) Theme `webtecksectiontitle` — every other sub-heading on both
      pages. Neither page CSS overrides it, so it renders with the
      shared .sec-title already in style.css; the page CSS only adds
      `.title-area { text-align:center }`. Reused as-is, not restyled. */
.prod-subhead {
  font-family: var(--body-font);
  font-size: 34px;
  font-weight: 600;
  color: #0d134f;
  text-align: center;
  margin: 0 0 30px 0;
}
.prod-sec .title-area { text-align: center; }

/* Live gives every brand/category block its own container padded
   120px 0 (80px @1024). Same inner-page rhythm decision as .prod-sec
   applies, so these use --inner-section-space too. The first block on a
   page keeps the section's own padding rather than doubling it up. */
.prod-block { padding: var(--inner-section-space) 0 0 0; }
.prod-block:first-child { padding-top: 0; }

/* ---------- Image-box row ----------
   Live: an inner container of --content-width:890px, flex-direction row,
   justify-content space-between, gap 0, min-height 0. Each image-box
   widget is width:40% / max-width:40%. Below 1024 Elementor recentres
   the row (justify-content:center) and the boxes wrap. */
.prod-boxrow {
  display: flex;
  flex-wrap: wrap;
  /* ⚠ APPROVED DEVIATION FROM LIVE — centred, not space-between (client,
     2026-07-28). Live's `justify-content: space-between` pushes the two 40%
     boxes to opposite ends of the 890px row, leaving a 178px void between
     them (218px counting their 20px margins) — the FIBERSOL section reads
     as two disconnected cards. Centring closes it to the 40px their own
     margins provide. Do not restore space-between. */
  justify-content: center;
  /* Same client rule as the card grid: stretch instead of top-aligning so
     paired boxes match in height. Live top-aligns them. */
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 890px;
  margin: 0 auto;
}
/* Kept for clarity in the markup — single-box rows centre via the rule
   above, same as paired ones. */
.prod-boxrow--single { justify-content: center; }

/* .elementor-image-box widget. The widget-container is what carries the
   card look; the 40% width sits on the widget itself.
   NOTE: live authors these boxes with slightly different spacing per
   widget — margin 20px vs 22px 23px 22px 22px, padding 20px 20px 30px 20px
   vs 20px 20px 30px 26px. The differences are 1-6px and invisible; the
   dominant values are used here rather than eight near-identical rules. */
.prod-box {
  width: 40%;
  max-width: 40%;
  flex: none;
}
.prod-box_inner {
  background-color: #eff1f9;
  margin: 20px;
  padding: 20px 20px 30px 20px;
  border-radius: 25px;
  /* Fill the stretched row so both boxes are the same height. */
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}
.prod-box_img {
  width: 100%;
  margin: 0 0 15px 0;
}
/* Same fixed 1:1 box as the product cards, so a logo placeholder and a
   real product photo occupy identical space. `contain` never crops. */
.prod-box_img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 11px;
  transition-duration: 0.3s;
}
.prod-box_title {
  font-family: var(--body-font);
  font-size: 20px;
  font-weight: 500;
  color: var(--title-color);
  margin: 0 0 0 0;
}
.prod-box_title a { color: inherit; }
.prod-box_title a:hover { color: var(--theme-color); }
.prod-box_text {
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 400;
  color: #030303;
  margin: 0;
}

/* ---------- Standalone brand image ----------
   The FORTINET section on fortinet-and-fujikura.html is nothing but an
   Elementor `image` widget under its #forti-net anchor — there are no
   product cards for Fortinet on live. Reproduced as-is. */
.prod-brandimg {
  text-align: center;
}
.prod-brandimg img {
  max-width: 100%;
  height: auto;
}

/* ---------- Responsive ----------
   Breakpoints are the live ones: Bootstrap's xl (1200) and md (768) drive
   the column count; the theme's own 1299px step shrinks the card padding
   and title; Elementor's 1024 / 767 steps drive the hero and the container
   padding. */
@media (max-width: 1299px) {
  .prod-card { padding: 30px 20px; }
  .prod-card .box-title { font-size: 20px; }
}
@media (max-width: 1199px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  /* Match the 2-column card width at this breakpoint. */
  .prod-grid--center > .prod-card { width: calc((100% - 24px) / 2); }
}
@media (max-width: 1024px) {
  .prod-hero { min-height: 300px; }
  /* Elementor's own tablet value. */
  .prod-container { --prod-gutter: 36px; }
  .prod-boxrow { justify-content: center; }
}
@media (max-width: 767px) {
  .prod-hero { min-height: 280px; }
  .prod-hero-title { font-size: 40px; }
  /* Phones keep a gutter too — the cards are capped and centred below, but
     the section headings still need to clear the screen edge. */
  .prod-container { --prod-gutter: 20px; }
  .prod-subhead { font-size: 26px; }
  /* Narrower cards on phones (client, 2026-07-28). The single-column card
     previously ran the full container width — edge to edge on a phone,
     and with the 1:1 image box that made each card very tall. Capping the
     card and centring it in the track pulls the width back without
     touching the container padding, so the hero and headings still line
     up with the rest of the page. */
  .prod-grid { grid-template-columns: 1fr; justify-items: center; }
  .prod-card { width: 100%; max-width: 320px; }
  /* One per row on phones, same cap as the grid cards. */
  .prod-grid--center > .prod-card { width: 100%; }
  /* Same treatment for the image-box cards on digisol / fortinet. */
  .prod-box { width: 100%; max-width: 320px; }
  .prod-box_inner { margin: 20px 0; height: calc(100% - 40px); }
}