/*
assets/css/app.v2.polish.css

Purpose: Visual polish layer for Perkakasku.com (B2B + DIY industrial tools)
- Conservative color, border, shadow, and typography refinements only
- Does NOT modify layout, sizing, or positioning
- Audience: industrial, clean, trustworthy (not flashy)

ALLOWED:
- color, background, border-color (≤1px)
- box-shadow (subtle)
- hover / focus states
- typography (font-weight, letter-spacing only)

FORBIDDEN:
- display, grid, flex, width, height, min-height
- position, z-index, media queries
- !important
- Any layout overrides

Safe to remove: unlink this file to revert all visual polish.
*/

/* ===== Product Card Visual Refinements ===== */

/* Card anchor: subtle border tone */
.product-list > li > a.prodclick {
  border-color: rgba(14, 20, 30, 0.04);
}

/* Card anchor hover: deepen shadow slightly (no transform change) */
.product-list > li > a.prodclick:hover {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

/* Card anchor focus-visible: accessible outline + halo */
.product-list > li > a.prodclick:focus-visible {
  outline: 3px solid rgba(11, 102, 195, 0.12);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(11, 102, 195, 0.06);
}

/* Card surfaces: slightly warmer border */
.product-list > li > * {
  border-color: rgba(14, 20, 30, 0.06);
}

/* Image corners: match card softness */
.product-list > li img,
.product-list > li .thumb img {
  border-radius: 6px;
}

/* ===== Typography Refinements ===== */

/* Headings: normalize weight and tighten tracking */
h1,
h2,
h3,
.box-title h2 {
  font-weight: 700;
  letter-spacing: 0.18px;
}

/* Product titles: slightly bolder, micro-tracking */
.product-list .product-title,
.product-list .title,
.product-list .product-name {
  font-weight: 700;
  letter-spacing: 0.15px;
  color: #0f1724;
}

/* Price: slightly deeper orange for contrast */
.product-list .product-price,
.product-price {
  color: #ff8a00;
}

/* Muted text: improved contrast */
small,
.text-small,
.box-title .desc,
.box-title p {
  color: #4b5563;
}

/* ===== CTA & Button Refinements ===== */

/* Load-more external CTA: stronger hover contrast */
.load-more-product-list a:hover {
  background-color: rgba(11, 102, 195, 0.1);
  box-shadow: 0 8px 22px rgba(11, 102, 195, 0.08);
}

/* Load-more CTA active: pressed inset shadow */
.load-more-product-list a:active {
  box-shadow: inset 0 3px 10px rgba(11, 102, 195, 0.1);
}

/* Load-more CTA focus-visible */
.load-more-product-list a:focus-visible {
  outline: 3px solid rgba(11, 102, 195, 0.12);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(11, 102, 195, 0.06);
}

/* Header buttons: subtle hover darken */
header .header-search button:hover,
header .header-cart a:hover,
header .header-nav .menu-toggle:hover,
header .header-nav .navbar-toggle:hover {
  background-color: rgba(15, 23, 42, 0.04);
}

/* Header buttons active: pressed inset */
header .header-search button:active,
header .header-cart a:active,
header .header-nav .menu-toggle:active,
header .header-nav .navbar-toggle:active {
  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* Header buttons focus-visible */
header .header-search button:focus-visible,
header .header-cart a:focus-visible,
header .header-nav .menu-toggle:focus-visible,
header .header-nav .navbar-toggle:focus-visible {
  outline: 3px solid rgba(11, 102, 195, 0.12);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(11, 102, 195, 0.05);
}

/* Primary action buttons: deeper orange hover */
button:hover,
input[type="submit"]:hover,
.search-cta:hover {
  background-color: #ff8a00;
}

/* Primary buttons active: pressed inset */
button:active,
input[type="submit"]:active,
.search-cta:active {
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* Primary buttons focus-visible */
button:focus-visible,
input[type="submit"]:focus-visible,
.search-cta:focus-visible {
  outline: 3px solid rgba(11, 102, 195, 0.12);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(11, 102, 195, 0.05);
}

/* ===== Transitions (conservative, <200ms) ===== */

.load-more-product-list a {
  transition: background-color 180ms ease, box-shadow 180ms ease,
    color 160ms ease;
}

header .header-search button,
header .header-cart a,
header .header-nav .menu-toggle,
header .header-nav .navbar-toggle {
  transition: background-color 140ms ease, box-shadow 140ms ease,
    color 120ms ease;
}

button,
input[type="submit"],
.search-cta {
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.product-list > li > a.prodclick {
  transition: box-shadow 180ms ease, border-color 160ms ease;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .load-more-product-list a,
  header .header-search button,
  header .header-cart a,
  header .header-nav .menu-toggle,
  header .header-nav .navbar-toggle,
  button,
  input[type="submit"],
  .search-cta,
  .product-list > li > a.prodclick {
    transition: none;
  }
}

/* End app.v2.polish.css */

/* ==========================
   Senior UI — Typographic & Color Refinements
   - Conservative: font-weight, letter-spacing, line-height, color, border-color, box-shadow
   - No layout/sizing/positioning or !important
   - Removable: unlink this file to revert
   ========================== */

/* Base readability: slightly more generous line-height for body copy */
body {
  color: #1f2937; /* deep neutral for readability */
  line-height: 1.5; /* gentle vertical rhythm without changing layout */
}

/* Headings: consistent weight and micro-tracking for scanability */
h1,
h2,
h3,
.box-title h2 {
  font-weight: 700;
  letter-spacing: 0.16px;
  line-height: 1.18; /* compact but legible */
}

/* Box titles: keep strong, increase contrast for the label */
.box-title h2 a {
  color: #0f1724;
}
.box-title .desc {
  color: #4b5563; /* slightly darker muted text */
  line-height: 1.45;
}

/* Product titles and short descriptions — improve legibility inside cards */
.product-list .product-title,
.product-list .title,
.product-list .product-name {
  font-weight: 700;
  letter-spacing: 0.12px;
  line-height: 1.28; /* more comfortable within constrained card width */
}

.product-list p,
.product-list .desc,
.product-list .product-desc {
  color: #4b5563;
  line-height: 1.45;
}

/* Subtle surface refinement for boxed sections to improve separation */
.box-wrapper,
.product-promo-wrapper,
.blog-wrapper {
  border-color: rgba(14, 20, 30, 0.04);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
}

/* Muted inline text, links, and helper copy */
small,
.text-small,
.helper,
.meta {
  color: #6b7280; /* balanced muted tone */
}

/* Buttons and CTAs: ensure text contrast and accessible focus */
button,
input[type="submit"],
.search-cta,
.load-more-product-list a {
  color: #0f1724;
}

/* Focus-visible: strong, but soft halo for keyboard users */
a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.search-cta:focus-visible,
.load-more-product-list a:focus-visible,
.product-list > li > a.prodclick:focus-visible {
  outline: 3px solid rgba(11, 102, 195, 0.12);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(11, 102, 195, 0.05);
}

/* Keep hover states subtle and consistent */
a:hover,
button:hover,
input[type="submit"]:hover,
.search-cta:hover {
  color: #0b66c3;
}

/* Respect reduced motion — no changes here, the file already respects it */
@media (prefers-reduced-motion: reduce) {
  /* noop: transitions already removed in this media query in base styles */
}

/* End Senior UI polish */