/*
assets/css/app.v2.css

Purpose: Foundation stylesheet for incremental UI modernisation (v2).
- EMPTY placeholder: no visual rules yet.
- Safe to remove: removing this file and its <link> will immediately revert any future UI experiments.
- No production logic or layout changes are present here.

Add CSS rules here only when you are ready to ship non-breaking, additive styles.
*/

/* ==========================
	App V2 — Subtle visual refresh
	- All rules additive and conservative
	- Safe to remove entirely to rollback
	- Avoids !important; scoped to common layout selectors
	========================== */
/* Theme tokens (tweakable without touching templates) */
:root {
  --v2-bg: #f6f7f9; /* page background when used */
  --v2-surface: #ffffff; /* card surface */
  --v2-muted: #6b7280; /* subtle text */
  --v2-muted: #4b5563; /* improved contrast (slightly darker) */
  --v2-accent: #ff9f37; /* brand accent */
  --v2-border: #e6e9ef; /* soft border */
  --v2-radius: 10px;
  --v2-gap-xs: 8px;
  --v2-gap-sm: 12px;
  --v2-gap-md: 20px;
  --v2-gap-lg: 32px;
  --v2-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* --------------------------
	Global spacing and rhythm
	-------------------------- */
html,
body {
  line-height: 1.45;
}
body {
  background-color: var(--v2-bg);
}

/* Give main content a little breathing room on wide viewports */
.content.container {
  padding-top: var(--v2-gap-md);
  padding-bottom: var(--v2-gap-lg);
}

/* Section boxes (existing `.box-wrapper`, `.product-promo-wrapper`) */
.box-wrapper,
.product-promo-wrapper,
.blog-wrapper,
.discussion-wrapper {
  background: transparent; /* keep existing look but prepare for subtle carding inside */
  margin-bottom: var(--v2-gap-md);
}

/* Box title spacing and hierarchy */
.box-title {
  margin-bottom: var(--v2-gap-sm);
}
.box-title h2 {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  line-height: 1.2;
}
.box-title h2 a {
  color: #111827;
  text-decoration: none;
}

/* --------------------------
	Card styling — product list items
	-------------------------- */
/* Target product list items conservatively */
.product-list > li {
  box-sizing: border-box;
  background: transparent;
  padding: 0; /* inner card padding applied to child elements to avoid layout shift */
}

/* Many product items render an inner wrapper; target common pattern by selecting first child element */
.product-list > li > * {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow);
  padding: var(--v2-gap-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
  display: flex;
  flex-direction: column;
  min-height: 180px; /* reduced baseline for tighter cards */
}

/* Hover lift (subtle) */
.product-list > li > *:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* Image area: ensure contained and centered if markup uses <img> inside */
.product-list img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* Product title and price within cards — conservative selectors */
.product-list .product-title,
.product-list .title,
.product-title {
  font-size: 0.98rem;
  line-height: 1.2;
  margin: 6px 0;
  color: #111827;
}
.product-list .product-price,
.product-price {
  color: var(--v2-accent);
  font-weight: 700;
  margin-top: auto;
}

/* Load-more card (keeps CTA visible) */
.product-list .load-more a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--v2-border);
  color: #111827;
  text-decoration: none;
}
.product-list .load-more a:hover {
  background: #fafafa;
}

/* --------------------------
	Generic card helpers for other boxes
	-------------------------- */
.box-wrapper > .box-title + .product-list,
.product-promo-wrapper .product-list,
.blog-wrapper {
  padding-top: 8px;
}

.product-promo-wrapper .head-promo,
.box-wrapper .head-promo {
  background: transparent;
  border-radius: var(--v2-radius);
}

/* --------------------------
	Typography improvements
	-------------------------- */
/* Tweak body copy and small text */
body {
  font-size: 15px;
  color: #222;
}
p,
li {
  font-size: inherit;
}
small,
.text-small {
  color: var(--v2-muted);
}

/* Clear hierarchy for headings */
h1 {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
}
h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
h3 {
  font-size: 1.05rem;
}

/* Improve spacing around lists in footer/sections */
.footer-section ul.footer-menu li,
.footer-section ul.footer-list li {
  line-height: 1.5;
}

/* --------------------------
	Buttons & Links (conservative)
	-------------------------- */
/* Primary-ish links used in CTAs: `.box-title a`, `.load-more a` (no new classes required) */
a {
  color: #0b66c3;
}
a:hover {
  text-decoration: underline;
}

.box-title a,
.load-more a {
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 160ms ease, transform 160ms ease;
}
.box-title a:hover,
.load-more a:hover {
  transform: translateY(-2px);
}

/* Buttons that appear as inputs or search CTAs (if present) */
button,
input[type="submit"],
.search-cta {
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid var(--v2-border);
  background: var(--v2-accent);
  color: #fff;
  cursor: pointer;
}
button:hover,
input[type="submit"]:hover,
.search-cta:hover {
  filter: brightness(0.98);
}

/* --------------------------
	Background & visual noise reduction
	-------------------------- */
/* Soften heavy borders, keep surfaces white */
.content.container,
.container {
  background: transparent;
}
.box-wrapper,
.product-promo-wrapper {
  background: transparent;
}

/* Footer surfaces (less dense) */
footer {
  background: transparent;
}

/* --------------------------
	Accessibility / small tweaks
	-------------------------- */
/* Ensure focus outlines remain visible for keyboard users */
a:focus,
button:focus,
input:focus {
  outline: 3px solid rgba(51, 102, 204, 0.15);
  outline-offset: 2px;
}

/* =========================
   Step 1.1 — Hover safety
   Disable hover lift on touch devices
   ========================= */
@media (hover: hover) {
  .product-list > li > *:hover {
    transform: translateY(-6px);
  }
}

/* =========================
   Step 1.2 — Card height refinement
   Desktop only to avoid mobile gaps
   ========================= */
@media (min-width: 1024px) {
  .product-list > li > * {
    min-height: 200px;
  }
}
/* End of app.v2.css */

/* ==========================
   Step 2.1 — Header layout & spacing (CSS only)
   - Desktop-first flex layout for header
   - Conservative spacing tweaks for header-nav, logo, search and cart
   - Responsive fallback: stack naturally on small viewports
   - Additive and reversible: remove this block to rollback
   ========================== */

/* Top utility nav (small links) */
header .header-nav {
  padding: 6px 0;
  font-size: 0.95rem;
}
header .header-nav .container ul {
  margin: 0;
  padding: 0;
}
header .header-nav .container ul li {
  display: inline-block;
  margin-right: 14px;
}

/* Main header section spacing */
header .header-section {
  padding: 14px 0;
}
header .header-section .container {
  align-items: center;
}

/* Desktop layout: logo | search (flex) | cart */
@media (min-width: 900px) {
  header .header-section .container {
    display: flex;
    gap: var(--v2-gap-md);
  }

  /* Logo left, keep natural size, allow some breathing room */
  header .header-logo {
    flex: 0 0 auto;
    margin-right: 6px;
  }
  header .header-logo img {
    max-height: 56px;
    height: auto;
    width: auto;
    display: block;
  }

  /* Make search the flexible primary element */
  header form#header-search-form {
    flex: 1 1 640px;
    min-width: 320px;
  }
  header .header-search {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  header .header-search input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 8px;
  }

  /* Cart/account group on the right; keep compact */
  header .header-cart {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  header .header-cart a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
  }
  header .header-cart mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
  }
}

/* Mobile fallback: stack elements for natural flow, ensure search stays prominent */
@media (max-width: 899px) {
  header .header-section .container {
    display: block;
  }
  header .header-logo {
    margin-bottom: 8px;
  }
  header form#header-search-form {
    margin-bottom: 8px;
  }
  header .header-cart {
    display: flex;
    gap: 8px;
  }
  header .header-cart a {
    padding: 8px;
  }
}

/* End Step 2.1 */

/* ==========================
   Step 2.2 — Search UX enhancement (CSS only)
   - Improves affordance and focus state for header search
   - Additive: removing this block fully reverts UX changes
   - No layout changes, avoids CLS
   ========================== */

/* Container visual: subtle surface to make search read as a distinct control */
header form#header-search-form .header-search {
  background: rgba(255, 255, 255, 0.95); /* slight contrast from page bg */
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px; /* inner padding around input + button */
  transition: box-shadow 150ms ease, border-color 150ms ease,
    background-color 150ms ease;
}

/* Input: comfortable height, padding, and typing comfort */
header .header-search input[type="text"] {
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.3;
  border: none; /* visual border handled on container */
  background: transparent;
  color: #111827;
  width: 100%;
  box-sizing: border-box;
}

/* Placeholder contrast improvement */
header .header-search input[type="text"]::placeholder {
  color: #9aa0a6;
}

/* Button: ensure icon is centered and accessible */
header .header-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: var(--v2-accent);
  color: #fff;
  cursor: pointer;
}

/* Hover/focus affordances (subtle) */
header form#header-search-form:focus-within .header-search {
  border-color: var(--v2-accent);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

/* Preserve keyboard-visible outline for accessibility */
header .header-search input:focus {
  outline: none;
}
header .header-search input:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.06);
  outline-offset: 2px;
}

/* Keep transitions short and subtle */
header .header-search button,
header form#header-search-form .header-search {
  transition-duration: 140ms;
}

/* Ensure mobile sizing remains comfortable */
@media (max-width: 899px) {
  header .header-search input[type="text"] {
    padding: 12px;
  }
  header .header-search button {
    padding: 10px;
  }
}

/* =========================
   Step 2.2a — Remove inner input border
   Scope: header search only
   Reason: avoid double border (input + container)
   Safe override, reversible
   ========================= */

header form#header-search-form .header-search input[type="text"] {
  border: none;
  box-shadow: none;
  background: transparent;
}
/* End Step 2.2 */

/* ==========================
   Step 2.3 — Cart & Account grouping (additive, safe)
   - Visually groups cart as primary action and account links as secondary
   - CSS-only, conservative selectors, reversible by removing this block
   - No markup changes required
   ========================== */

/* Cart cluster: make the cart area visually scannable and accessible */
header .header-cart {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--v2-shadow);
}

/* Individual cart action anchors keep compact visual rhythm */
header .header-cart a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  color: #111827;
  text-decoration: none;
}
header .header-cart a:hover {
  background: #fafafa;
}

/* Cart badge (item count) — high contrast, accessible */
header .header-cart mark {
  background: var(--v2-accent);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

/* Account cluster (top utility nav) — visually grouped but secondary */
header .header-nav .container ul li a[href*="loginout.php"],
header .header-nav .container ul li a[href*="daftar.php"],
header .header-nav .container ul li .logged-toggle {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 140ms ease, border-color 140ms ease;
}
header .header-nav .container ul li a[href*="loginout.php"]:hover,
header .header-nav .container ul li a[href*="daftar.php"]:hover,
header .header-nav .container ul li .logged-toggle:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--v2-border);
}

/* Logged-nav (existing dropdown) visual polish: subtle surface and shadow */
.logged-nav {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  border-radius: 8px;
}

/* Accessibility: ensure focus styles remain visible */
header .header-cart a:focus,
header .header-nav a:focus,
.logged-toggle:focus {
  outline: 3px solid rgba(17, 24, 39, 0.06);
  outline-offset: 2px;
}

/* Mobile: ensure clusters remain compact and readable */
@media (max-width: 899px) {
  header .header-cart {
    padding: 8px;
    border-radius: 10px;
  }
  header .header-nav .container ul li a[href*="loginout.php"],
  header .header-nav .container ul li a[href*="daftar.php"] {
    padding: 6px;
  }
}

/* Step 2.3a — Normalize legacy cart anchors */
header .header-cart a {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}

header .header-cart {
  white-space: nowrap;
}

header .header-cart a {
  line-height: 1.2;
}

header .header-nav .container ul li + li:before {
  content: "|";
  margin: 0 8px;
  color: #cbd5e1;
}

/* End Step 2.3 */

/* ==========================
   Step 2.5 — Mobile Header Behavior (CSS-only baseline)
   - Make search primary, cart tappable, navigation reachable
   - Conservative, additive, reversible
   - Scoped to max-width:899px (mobile)
   ========================== */

@media (max-width: 899px) {
  /* Use wrapping flex so we can keep logo+cart on first row and search full-width on second row */
  header .header-section .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }

  /* Logo: compact but visible */
  header .header-logo {
    order: 1;
    flex: 0 0 auto;
    margin-right: 6px;
  }
  header .header-logo img {
    max-height: 44px;
    width: auto;
    display: block;
  }

  /* Cart cluster: keep on the first row and tappable */
  header .header-cart {
    order: 1;
    flex: 0 0 auto;
    margin-left: auto; /* push to right if space permits */
  }
  /* Ensure cart anchors meet touch target guidelines */
  header .header-cart a {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Search on its own full-width line to make it primary and easy to tap */
  header form#header-search-form {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  header form#header-search-form .header-search {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* Input: full width, comfortable padding */
  header .header-search input[type="text"] {
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  /* Button: slightly larger tap area */
  header .header-search button {
    padding: 10px 12px;
    border-radius: 8px;
  }

  /* Top utility nav (if visible) should be compact and not push header height too much */
  header .header-nav {
    font-size: 0.92rem;
    padding: 6px 0;
  }
  header .header-nav .container ul li {
    margin-right: 10px;
  }

  /* Defensive: avoid overflow from long account names */
  header .logged-toggle {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 899px) {
  /* Move burger into the top header row */
  header .header-nav {
    order: 1;
    padding: 0;
    background: transparent;
  }

  header .header-nav .menu-toggle,
  header .header-nav .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  header .header-search button {
    background-color: #f5f5f5;
    color: #555;
  }

  header .header-section .container {
    padding: 6px 0;
  }
}

/* End Step 2.5 */

/* ==========================
   Step 2.4 — Sticky header (CSS-only, conservative)
   - Applies `position: sticky` to `.header-section` only
   - Desktop and mobile variants with conservative z-index and visuals
   - Additive and reversible: remove this block to rollback
   - Does NOT change DOM, JS, or modals; avoids overflow:hidden
   ========================== */

/* Base safe defaults: ensure header-section participates in normal flow */
header .header-section {
  /* keep natural flow by default; sticky applied in breakpoints */
  background: rgba(255, 255, 255, 0.98);
}

/* Desktop: sticky header that doesn't consume excessive height */
@media (min-width: 900px) {
  header .header-section {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1020; /* conservative: above content, below heavy modals */
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    backdrop-filter: none; /* avoid GPU cost */
  }

  /* Ensure dropdowns inside header can overflow the sticky parent */
  header .header-section > .container {
    overflow: visible;
  }
}

/* Mobile: optional sticky but minimal visual footprint */
@media (max-width: 899px) {
  header .header-section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1010; /* slightly lower on mobile to avoid overlay conflicts */
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 6px;
    padding-bottom: 6px; /* keep compact */
  }
  header .header-section > .container {
    overflow: visible;
  }
}

/* Safety: ensure sticky parent does not clip absolutely positioned dropdowns */
header .header-section,
header .header-section * {
  -webkit-transform: none;
  transform: none;
}

/* ==========================
   Step 2.4 — Sticky fix (required)
   - Ensure sticky is not blocked by parent overflow/transform
   ========================== */

html,
body {
  overflow-x: hidden; /* allow vertical scroll normally */
}

header,
header *,
.header,
.header * {
  transform: none !important;
}

/* Ensure sticky container is not clipped */
header,
.header,
.header-section {
  overflow: visible !important;
}

/* ==========================
   Sticky unblocker (REQUIRED)
   ========================== */

header,
.header,
.header-section,
header > *,
.header > * {
  overflow: visible !important;
}

/* Critical: sticky must not be inside overflow container */
body {
  overflow-y: auto;
}

/* Kill legacy transforms that break sticky */
header,
header * {
  transform: none !important;
}
/* End Step 2.4 */

/* ==========================
   Step 3.1 — Homepage section hierarchy
   - Desktop-first, additive styles that improve vertical rhythm,
     emphasize the first major content section, and make section
     titles anchor-like and scannable.
   - Safe to remove: delete this entire block to fully rollback.
   - Targets existing containers conservatively: .box-wrapper,
     .product-promo-wrapper, .blog-wrapper, .box-title
   ========================== */

/* Base spacing for homepage sections (generous but consistent) */
.main-wrapper > .box-wrapper,
.main-wrapper > .product-promo-wrapper,
.main-wrapper > .blog-wrapper,
.main-wrapper > .discussion-wrapper {
  margin-top: var(--v2-gap-lg); /* create breathing room between sections */
  margin-bottom: var(--v2-gap-lg);
  padding-top: 8px; /* gentle padding inside section */
  padding-bottom: 8px;
}

/* Slightly tighter spacing when sections are stacked closely */
.main-wrapper > .box-wrapper + .box-wrapper,
.main-wrapper > .product-promo-wrapper + .product-promo-wrapper {
  margin-top: calc(var(--v2-gap-md));
}

/* Emphasize the FIRST major section in the main content area */
/* Apply to whichever wrapper appears first for flexibility */
.main-wrapper > .box-wrapper:first-of-type,
.main-wrapper > .product-promo-wrapper:first-of-type,
.main-wrapper > .blog-wrapper:first-of-type,
.main-wrapper > .discussion-wrapper:first-of-type {
  background: var(--v2-surface); /* neutral white surface */
  border: 1px solid var(--v2-border); /* soft separation from page bg */
  border-radius: calc(var(--v2-radius) + 2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); /* very subtle lift */
  padding: calc(var(--v2-gap-sm) + 6px); /* extra inner breathing room */
  margin-top: calc(var(--v2-gap-lg) - 4px); /* keep overall rhythm aligned */
  margin-bottom: calc(var(--v2-gap-lg) - 4px);
}

/* Make the first section title feel like an anchor */
.main-wrapper > .box-wrapper:first-of-type .box-title h2,
.main-wrapper > .product-promo-wrapper:first-of-type .box-title h2,
.main-wrapper > .blog-wrapper:first-of-type .box-title h2 {
  font-size: 1.28rem; /* slightly larger for prominence */
  line-height: 1.15;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Accent bar next to section titles (subtle, brand-aligned) */
.main-wrapper .box-title h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.25em;
  background: linear-gradient(180deg, var(--v2-accent), rgba(0, 0, 0, 0.06));
  border-radius: 2px;
  transform: translateY(-2px);
  margin-right: 6px;
  opacity: 0.98;
}

/* Make all section titles consistent and scannable */
.box-title h2 {
  font-weight: 700;
  color: #0f1724; /* deep neutral for headings */
  margin: 0;
  padding: 0;
}

/* Subtitles / small descriptors under titles (if present) */
.box-title .desc,
.box-title p {
  color: var(--v2-muted);
  font-size: 0.95rem;
  margin-top: 6px;
}

/* Improve product-list vertical rhythm inside sections */
.product-list {
  display: grid;
  gap: 18px;
} /* grid gap generous on desktop */

/* Responsiveness: reduce spacing on small screens to avoid excessive scrolling */
@media (max-width: 899px) {
  .main-wrapper > .box-wrapper,
  .main-wrapper > .product-promo-wrapper,
  .main-wrapper > .blog-wrapper,
  .main-wrapper > .discussion-wrapper {
    margin-top: var(--v2-gap-md);
    margin-bottom: var(--v2-gap-md);
    padding-top: var(--v2-gap-sm);
    padding-bottom: var(--v2-gap-sm);
  }

  .main-wrapper > .box-wrapper:first-of-type,
  .main-wrapper > .product-promo-wrapper:first-of-type,
  .main-wrapper > .blog-wrapper:first-of-type,
  .main-wrapper > .discussion-wrapper:first-of-type {
    padding: calc(var(--v2-gap-sm) + 4px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
  }

  .product-list {
    gap: 12px;
  }
  .box-title h2 {
    font-size: 1.05rem;
  }
  .main-wrapper .box-title h2::before {
    height: 1.05em;
    width: 3px;
  }
}

/* Accessibility & print: ensure neutral surfaces print cleanly */
@media print {
  .main-wrapper > .box-wrapper:first-of-type,
  .main-wrapper > .product-promo-wrapper:first-of-type {
    background: #fff;
    box-shadow: none;
    border: 1px solid #eee;
  }
}

/* End Step 3.1 */

/* ==========================
   Patch: z-index & stacking fixes
   - Adds conservative z-index tokens for header and overlays
   - Ensures dropdowns and floating panels inside the header stack above content
   - Provides a small utility class for JS-driven overlays/modals
   - Safe and additive: remove this block to rollback
   ========================== */

:root {
  --v2-z-header: 1020; /* used by sticky header */
  --v2-z-overlay: 1100; /* used by dropdowns, modals, and overlays */
}

/* Tie header z-index to a variable so it can be tuned centrally */
header .header-section {
  z-index: var(--v2-z-header);
}

/* Ensure header children that render dropdowns float above page content */
header .header-nav .dropdown,
header .header-nav .subnav,
.header .account-dropdown,
.header .cart-dropdown {
  z-index: var(--v2-z-overlay);
}

header .logged-nav {
  position: relative; /* anchor only */
  z-index: var(--v2-z-overlay);
}

/* Utility: JS can add `.appv2-overlay` to dim or capture clicks for panels */
.appv2-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: calc(var(--v2-z-overlay) - 10);
  pointer-events: auto;
}

/* Ensure dropdowns within sticky header show fully and are not clipped */
header .header-section,
header .header-section > .container {
  overflow: visible !important;
}

/* Defensive: raise stacking for known popup patterns (e.g., quickcart, minicart) */
.minicart,
.quickcart {
  position: relative;
  z-index: calc(var(--v2-z-overlay) + 10);
}

/* Small visual tweak: ensure focusable dropdown items remain on top when focused */
header .logged-nav a:focus,
header .logged-nav a:hover {
  z-index: calc(var(--v2-z-overlay) + 20);
}

/* End patch */

/* ==========================
   Step 3.2 — Category-first card layout
   - Displays category listings as cards (image + title + count/desc)
   - Desktop: responsive grid; Mobile: stacked list
   - Conservative selectors: targets `.category-list`, `.category-card`, `.category-item`
   - Additive and reversible: remove this block to rollback
   ========================== */

.category-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-item {
  list-style: none;
}

.category-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: calc(var(--v2-radius) - 2px);
  box-shadow: var(--v2-shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 140px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.category-card img {
  max-width: 72px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

.category-card .category-title {
  font-weight: 700;
  color: #0f1724;
  font-size: 0.98rem;
  margin: 6px 0 4px 0;
}

.category-card .category-sub {
  color: var(--v2-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  .category-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 899px) {
  .category-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .category-card {
    min-height: 120px;
    padding: 12px;
  }
}
@media (max-width: 599px) {
  .category-list {
    grid-template-columns: 1fr;
  }
  .category-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 64px;
  }
  .category-card img {
    max-width: 48px;
    max-height: 48px;
    margin-bottom: 0;
  }
  .category-card .category-title {
    font-size: 0.95rem;
  }
}

/* Small utility: ensure category anchors do not inherit heavy link styles */
.category-card a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

@media (hover: hover) {
  .category-card:hover {
    transform: translateY(-6px);
  }
}

/* End Step 3.2 */

/* ==========================
   Step 3.3 — Homepage decision clarity
   - Desktop-first: visually demote banner, promote first actionable section
   - CSS-only, additive and reversible (remove this block to revert)
   - Targets: .banner-wrapper, .slider-wrapper, .home-slider, and first .box-wrapper/.product-promo-wrapper
   ========================== */

/* Reduce banner dominance: keep banner visible but visually lighter */
.banner-wrapper,
.slider-wrapper,
.home-slider {
  /* remove heavy shadows and add a subtle separator */
  box-shadow: none !important;
  border-bottom: 1px solid rgba(14, 20, 30, 0.04);
  background-clip: padding-box;
  /* slight desaturation/brightness to reduce visual weight without changing height */
  filter: saturate(0.98) brightness(0.995);
}

/* Avoid altering slider height or internal transforms */
/* .banner-wrapper *,
.slider-wrapper *,
.home-slider * {
  transform: none !important;
} */

/* Promote the first actionable section immediately below banner/slider */
.banner-wrapper + .main-wrapper > .box-wrapper:first-of-type,
.slider-wrapper + .main-wrapper > .box-wrapper:first-of-type,
.home-slider + .main-wrapper > .box-wrapper:first-of-type,
.banner-wrapper + .main-wrapper > .product-promo-wrapper:first-of-type,
.slider-wrapper + .main-wrapper > .product-promo-wrapper:first-of-type {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: calc(var(--v2-radius) + 2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  padding: calc(var(--v2-gap-sm) + 8px);
  /* nudge it visually closer to banner so it reads as the next step */
  margin-top: var(--v2-gap-md);
}

/* Make the first section title read like an action / choice */
.banner-wrapper + .main-wrapper > .box-wrapper:first-of-type .box-title h2,
.slider-wrapper + .main-wrapper > .box-wrapper:first-of-type .box-title h2,
.home-slider + .main-wrapper > .box-wrapper:first-of-type .box-title h2,
.banner-wrapper
  + .main-wrapper
  > .product-promo-wrapper:first-of-type
  .box-title
  h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.98);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 1.32rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

/* Make title accent stronger so it reads as a launchpad for action */
.banner-wrapper
  + .main-wrapper
  > .box-wrapper:first-of-type
  .box-title
  h2::before,
.slider-wrapper
  + .main-wrapper
  > .box-wrapper:first-of-type
  .box-title
  h2::before {
  width: 6px;
  height: 1.25em;
}

/* Clarify intent for product/category lists inside first section */
.banner-wrapper + .main-wrapper > .box-wrapper:first-of-type .product-list,
.slider-wrapper + .main-wrapper > .box-wrapper:first-of-type .product-list,
.banner-wrapper
  + .main-wrapper
  > .product-promo-wrapper:first-of-type
  .product-list {
  margin-top: 12px;
}

/* Preserve small-screen ergonomics: less dramatic visual changes on mobile */
@media (max-width: 899px) {
  .banner-wrapper,
  .slider-wrapper,
  .home-slider {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(14, 20, 30, 0.04);
    filter: none; /* avoid filter cost on mobile */
  }

  .banner-wrapper + .main-wrapper > .box-wrapper:first-of-type,
  .slider-wrapper + .main-wrapper > .box-wrapper:first-of-type,
  .home-slider + .main-wrapper > .box-wrapper:first-of-type,
  .banner-wrapper + .main-wrapper > .product-promo-wrapper:first-of-type {
    padding: calc(var(--v2-gap-sm) + 6px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
    margin-top: calc(var(--v2-gap-sm));
  }

  .banner-wrapper + .main-wrapper > .box-wrapper:first-of-type .box-title h2,
  .slider-wrapper + .main-wrapper > .box-wrapper:first-of-type .box-title h2 {
    font-size: 1.08rem;
    padding: 6px 8px;
    box-shadow: none;
    background: transparent;
  }
}

/* End Step 3.3 */

/* ==========================
   Step 3.4 — Homepage block normalization
   - Normalize section widths, horizontal padding, and vertical rhythm
   - Make first product section after banner use full content width
   - Desktop-first; mobile fallbacks under @media (max-width: 899px)
   - CSS-only, additive and reversible (remove this block to rollback)
   ========================== */

/* Content sizing tokens (tweakable) */
:root {
  --v2-content-max: 1200px; /* consistent max content width */
  --v2-content-pad: 20px; /* horizontal padding inside sections */
}

/* Ensure main wrappers center and honor a consistent max-width */
.main-wrapper,
.main-wrapper > .box-wrapper,
.main-wrapper > .product-promo-wrapper,
.main-wrapper > .blog-wrapper {
  box-sizing: border-box;
}

.main-wrapper > .box-wrapper,
.main-wrapper > .product-promo-wrapper,
.main-wrapper > .blog-wrapper {
  max-width: var(--v2-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--v2-content-pad);
  padding-right: var(--v2-content-pad);
  margin-block-start: var(--v2-gap-lg);
  margin-block-end: var(--v2-gap-lg);
}

/* Consistent vertical rhythm for boxed sections */
.box-wrapper,
.product-promo-wrapper {
  padding-top: calc(var(--v2-gap-sm));
  padding-bottom: calc(var(--v2-gap-sm));
}

/* Normalize product lists into unified responsive grids */
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  align-items: start;
}

/* Product card / item normalization across variants */
.product-list > li,
.product-list .product-item,
.product-list .product-card,
.product-item,
.product-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Ensure inner card elements fill their grid cell and group visually */
.product-list > li > *,
.product-card > * {
  width: 100%;
}

/* Make the first product section after a banner/sliders span full content width and read as a single block */
.banner-wrapper + .main-wrapper > .box-wrapper:first-of-type,
.slider-wrapper + .main-wrapper > .box-wrapper:first-of-type,
.home-slider + .main-wrapper > .box-wrapper:first-of-type,
.banner-wrapper + .main-wrapper > .product-promo-wrapper:first-of-type,
.slider-wrapper + .main-wrapper > .product-promo-wrapper:first-of-type {
  max-width: var(--v2-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--v2-content-pad);
  padding-right: var(--v2-content-pad);
  /* subtle visual unification */
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: calc(var(--v2-radius) + 2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

/* Slightly denser grid for the primary first product section to feel actionable */
.banner-wrapper + .main-wrapper > .box-wrapper:first-of-type .product-list,
.slider-wrapper + .main-wrapper > .box-wrapper:first-of-type .product-list,
.home-slider + .main-wrapper > .box-wrapper:first-of-type .product-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Defensive: if product markup uses inner wrappers (common), ensure those wrappers align */
.banner-wrapper
  + .main-wrapper
  > .box-wrapper:first-of-type
  .product-list
  > li
  > *,
.banner-wrapper
  + .main-wrapper
  > .product-promo-wrapper:first-of-type
  .product-list
  > li
  > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Mobile: stack columns and reduce paddings to keep readability */
@media (max-width: 899px) {
  :root {
    --v2-content-pad: 12px;
  }
  .main-wrapper > .box-wrapper,
  .main-wrapper > .product-promo-wrapper,
  .main-wrapper > .blog-wrapper {
    padding-left: var(--v2-content-pad);
    padding-right: var(--v2-content-pad);
    margin-block-start: var(--v2-gap-md);
    margin-block-end: var(--v2-gap-md);
  }

  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .banner-wrapper + .main-wrapper > .box-wrapper:first-of-type .product-list,
  .slider-wrapper + .main-wrapper > .box-wrapper:first-of-type .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  @media (max-width: 599px) {
    .product-list {
      grid-template-columns: 1fr;
    }
  }
}

/* End Step 3.4 */

/* ==========================
   Step 3.4a — Desktop content column stabilization
   - Prevent inner centering inside sidebar layouts
   - Keep main content aligned as a solid column
   ========================== */

@media (min-width: 900px) {
  /* Assume main layout has sidebar + content */
  .main-wrapper {
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: var(--v2-gap-lg);
    align-items: start;
  }

  /* Prevent content blocks from re-centering inside content column */
  .main-wrapper > .box-wrapper,
  .main-wrapper > .product-promo-wrapper,
  .main-wrapper > .blog-wrapper {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

/* ==========================
   Step 3.5 — Layout stabilization (single-grid rule)
   - Make the outermost `.content` (or `.page-content`) the single grid container
   - Sidebar: fixed width on the left
   - Main: right column, `.main-wrapper` stays block flow (not grid)
   - Desktop-first; mobile (<900px) stacks naturally
   - Safe to remove: delete this block to revert
   ========================== */

@media (min-width: 900px) {
  :root {
    --v2-sidebar-width: 260px; /* tweakable fixed sidebar width */
    --v2-main-gap: var(--v2-gap-lg);
  }

  /* Single outer grid: prefer `.page-content`, fall back to `.content` */
  .page-content,
  .page-home,
  .homepage-content {
    display: grid;
    grid-template-columns: var(--v2-sidebar-width) 1fr;
    gap: var(--v2-main-gap);
    align-items: start;
    grid-auto-flow: row;
  }

  /* Sidebar selectors (conservative): place left column into first grid cell */
  .page-content > .sidebar,
  .page-content > aside,
  .content > .sidebar,
  .content > aside,
  .content > .left-column,
  .content > .left-sidebar,
  .category-sidebar {
    grid-column: 1 / 2;
    width: var(--v2-sidebar-width);
    justify-self: start;
  }

  /* Ensure the main-wrapper sits in the second column and is NOT a grid */
  .page-content > .main-wrapper,
  .content > .main-wrapper,
  .content.container > .main-wrapper {
    grid-column: 2 / -1;
    display: block !important; /* defensive override to prevent nested layout grids */
    width: 100%;
    box-sizing: border-box;
  }

  /* Ensure banner/slider/home-slider live inside the main column and align with main content padding */
  .page-content > .banner-wrapper,
  .page-content > .slider-wrapper,
  .page-content > .home-slider,
  .content > .banner-wrapper,
  .content > .slider-wrapper,
  .content > .home-slider {
    grid-column: 2 / -1;
    width: 100%;
  }

  /* Ensure section blocks inside main-wrapper share the same left edge / padding */
  .main-wrapper > .box-wrapper,
  .main-wrapper > .product-promo-wrapper,
  .main-wrapper > .blog-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--v2-content-pad, 20px);
    padding-right: var(--v2-content-pad, 20px);
    max-width: none; /* avoid conflicting max-widths */
  }

  /* Avoid nested grids controlling overall page columns: revert any accidental display:grid on .main-wrapper */
  .main-wrapper[style*="display: grid"],
  .main-wrapper.grid,
  .main-wrapper {
    /* ensure block flow; last-resort !important to override previous rules */
    display: block !important;
  }
}

.page-content > .banner-wrapper,
.page-content > .slider-wrapper,
.page-content > .home-slider {
  padding-left: var(--v2-content-pad, 20px);
  padding-right: var(--v2-content-pad, 20px);
  box-sizing: border-box;
}

/* Mobile: disable the outer grid so content stacks naturally */
@media (max-width: 899px) {
  .page-content,
  .content,
  .content.container {
    display: block;
  }

  .page-content > .sidebar,
  .content > .sidebar,
  .content > aside,
  .content > .left-column,
  .content > .left-sidebar,
  .category-sidebar {
    width: auto;
  }

  /* Restore normal flow for main-wrapper on mobile */
  .main-wrapper {
    display: block !important;
  }
}

/* End Step 3.5 */

/* ========================================================================
   FINAL — Product List Grid & Card Normalization
   ========================================================================
   Purpose:
   - Remove legacy float/clearfix layouts
   - Lock CSS Grid as the only layout mechanism
   - Normalize product card structure (image, title, price)
   - Hide in-grid load-more tiles
   - Ensure external load-more button renders correctly

   Scope:
   - .product-list (grid container)
   - .product-list > li (grid items)
   - .product-list > li > a.prodclick (card anchors)
   - .load-more-product-list (external CTA)
   ======================================================================== */

/* ===== 1️⃣ GRID CONTAINER — Lock Grid Layout ===== */
.product-list {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, 1fr) !important; /* mobile baseline */
  gap: 18px !important;
  align-items: start !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 0 !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
}

/* Remove legacy clearfix on container */
.product-list::before,
.product-list::after,
.product-list.clearfix::before,
.product-list.clearfix::after {
  content: none;
  display: none;
}

/* ===== 2️⃣ GRID ITEMS — Neutralize Legacy Styles ===== */
.product-list > li {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 20 !important; /* above external CTA */
  list-style: none !important;
  clear: none !important;
}

/* Remove legacy clearfix on items */
.product-list > li::before,
.product-list > li::after {
  content: none;
  display: none;
}

/* ===== 3️⃣ PRODUCT CARD ANCHOR — Flex Column Layout ===== */
.product-list > li > a.prodclick {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: visible !important; /* allow external CTAs if needed */
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 280px !important; /* baseline card height */
  height: auto !important;
  flex: 1 1 auto !important;
}

/* ===== 4️⃣ IMAGE ZONE — Fixed Height, Centered ===== */
.product-list > li > a.prodclick .thumb {
  flex: 0 0 140px !important;
  height: 140px !important;
  max-height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Image constraints — override inline attributes, prevent distortion */
.product-list > li > a.prodclick img,
.product-list > li > a.prodclick .thumb img {
  display: block !important;
  width: auto !important; /* override inline width */
  height: auto !important; /* override inline height */
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important; /* never distort */
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Content area — flex column, fills remaining space */
.product-list > li > a.prodclick > :not(.thumb):not(img) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ===== 5️⃣ TITLE — Clamp to 2 Lines ===== */
.product-list > li > a.prodclick .title,
.product-list > li > a.prodclick .product-title,
.product-list > li > a.prodclick .product-name {
  margin: 10px 12px 6px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: inherit !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: calc(1.3em * 2) !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

/* ===== 6️⃣ PRICE — Pin to Bottom ===== */
.product-list > li > a.prodclick .price,
.product-list > li > a.prodclick .product-price {
  margin-top: auto !important; /* pin to bottom */
  padding: 10px 12px !important;
  font-weight: 700 !important;
  color: var(--v2-accent, #ff6a00) !important;
  display: inline-block !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* ===== 7️⃣ SAFETY GUARDS ===== */
/* Prevent children from breaking layout */
.product-list > li > a.prodclick * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* ===== 8️⃣ RESPONSIVE GRID COLUMNS ===== */
@media (min-width: 600px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 cols: 600–899px */
  }
}

@media (min-width: 900px) {
  .product-list {
    grid-template-columns: repeat(4, 1fr) !important; /* 4 cols: 900–1199px */
  }
}

@media (min-width: 1200px) {
  .product-list {
    grid-template-columns: repeat(5, 1fr) !important; /* 5 cols: ≥1200px */
  }
}

/* ===== 9️⃣ RESPONSIVE CARD HEIGHTS ===== */
@media (min-width: 1200px) {
  .product-list > li > a.prodclick {
    min-height: 320px !important;
  }
  .product-list > li > a.prodclick .thumb {
    flex: 0 0 160px !important;
    height: 160px !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .product-list > li > a.prodclick {
    min-height: 300px !important;
  }
  .product-list > li > a.prodclick .thumb {
    flex: 0 0 140px !important;
    height: 140px !important;
  }
}

@media (max-width: 899px) {
  .product-list > li > a.prodclick {
    min-height: 260px !important;
  }
  .product-list > li > a.prodclick .thumb {
    flex: 0 0 110px !important;
    height: 110px !important;
  }
  .product-list > li > a.prodclick .title,
  .product-list > li > a.prodclick .product-title,
  .product-list > li > a.prodclick .product-name {
    font-size: 13px !important;
  }
}

/* ===== 🔟 HIDE IN-GRID LOAD-MORE TILES ===== */
.product-list > li.load-more,
.product-list > li.sel,
.product-list > li.more,
.product-list > li.view-more {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ===== 1️⃣0️⃣ LEGACY CLEARFIX (Conditional) ===== */
/* Only apply clearfix to lists marked with .legacy-floats class.
   AppV2.legacyFloats.init() detects legacy float layouts and adds this class. */
@supports (display: flow-root) {
  .product-list.legacy-floats {
    display: flow-root !important;
  }
}

/* Fallback clearfix for browsers without flow-root */
.product-list.legacy-floats::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* NOTE: external `.load-more-product-list` styling consolidated later in file */

/* Ensure wrappers don't clip the button */
.product-promo-wrapper,
.product-promo-wrapper .box-wrapper,
.product-promo-wrapper .product-list {
  overflow: visible !important;
  height: auto !important;
}

/* ===== 1️⃣2️⃣ HOVER STATES ===== */
@media (hover: hover) {
  .product-list > li:hover {
    transform: translateY(-4px) !important;
  }
}

.product-list > li {
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

/* ========================================================================
   END FINAL — Product List Grid & Card Normalization
   ======================================================================== */

/* ===== EXTRA: Ensure Selengkapnya appears below all product cards ===== */
/* Hide any in-card CTAs to avoid overlap; keep external .load-more-product-list */
.product-list .selengkapnya,
.product-list a.selengkapnya,
.product-list .btn-more,
.product-list .btn-detail,
.product-list a.more,
.product-list .product-cta,
.product-list .more-btn,
.product-list [class*="selengkap"],
.product-list [class*="more"],
.product-list [class*="btn"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Reserve space under the grid so external CTA cannot overlap cards */
.product-list {
  margin-bottom: 72px !important;
}

/* Ensure external load-more CTA sits below the grid and is visible */
.load-more-product-list {
  position: relative !important;
  z-index: 0 !important; /* behind card visuals */
  margin-top: 48px !important;
  margin-bottom: 24px !important;
  padding-bottom: 8px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  clear: both !important;
}

/* Button styling for external CTA */
.load-more-product-list a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* ==========================
   Step 4 — Visual Polish Only
   ========================== */
/* Purpose: subtle, non-breaking cosmetic improvements only.
   - Allowed: colors, border color/thickness (≤1px), radius ±2px,
     box-shadow, hover/focus micro-interactions, typography weight/spacing,
     button hover/active states, reduced-motion safe transitions.
   - Forbidden: layout/positioning/size changes. Keep conservative.
*/

/* Card surfaces: slightly stronger separation and softer radius */
.product-list > li > * {
  border-color: rgba(14, 20, 30, 0.06); /* subtle, slightly warmer */
  border-width: 1px; /* keep 1px max */
  border-style: solid;
  border-radius: calc(var(--v2-radius) + 2px); /* +2px visual softening */
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04); /* subtle lift */
}

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

/* Title: slightly bolder and tighter tracking for scannability */
.product-list .product-title,
.product-list .title,
.product-list .product-name {
  font-weight: 700;
  letter-spacing: 0.15px;
  color: #0f1724; /* deep neutral for readability */
}

/* Price: maintain accent but make it slightly darker for contrast */
.product-list .product-price,
.product-price {
  color: #ff8a00; /* slightly deeper orange */
}

/* Card anchor focus: visible but subtle */
.product-list > li > a.prodclick:focus {
  outline: 3px solid rgba(11, 102, 195, 0.08);
  outline-offset: 4px;
}

/* CTA hover: gentle background + lift (non-layout) */
.load-more-product-list a:hover,
.load-more-product-list a:active {
  background-color: rgba(11, 102, 195, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 102, 195, 0.06);
}

/* Micro-interactions: subtle transitions, respect reduced-motion */
.product-list > li > *,
.load-more-product-list a,
.product-list > li > a.prodclick {
  transition: box-shadow 180ms ease, transform 180ms ease,
    background-color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .product-list > li > *,
  .load-more-product-list a,
  .product-list > li > a.prodclick {
    transition: none;
    animation: none;
  }
}

/* ===== Typographic refinements: heading weight, letter-spacing, muted contrast ===== */
/* Allowed: slight font-weight normalization and letter-spacing only. Do NOT change font-size or line-height. */
/* :root { */
/* Note: --v2-muted already updated above; these rules are additive for headings only */
/* } */

/* Slight normalize weight and tighten tracking on headings for better scannability */
h1,
h2,
h3,
.box-title h2 {
  font-weight: 700; /* slight normalization */
  letter-spacing: 0.18px; /* subtle micro-tracking */
}

/* Product titles inside lists: slightly bolder and tiny tracking for readability */
.product-list .product-title,
.product-list .title,
.product-list .product-name {
  font-weight: 700; /* align with heading emphasis */
  letter-spacing: 0.12px;
}

/* Muted copy uses the updated `--v2-muted` variable for improved contrast */
small,
.text-small,
.box-title .desc,
.box-title p {
  color: var(--v2-muted) !important;
}

/* ===== Anchor refinements: border tone, hover shadow, and keyboard focus-visible ===== */
/* Conservative visual tweaks only — do NOT change transform, min-height, or grid behavior. */
.product-list > li > a.prodclick {
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    14,
    20,
    30,
    0.04
  ); /* slight refinement to anchor surface edge */
}

.product-list > li > a.prodclick:hover {
  /* Only adjust box-shadow (visual depth). Do not modify translate/transform. */
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.product-list > li > a.prodclick:focus-visible {
  outline: 3px solid rgba(11, 102, 195, 0.12); /* keyboard-visible ring */
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(11, 102, 195, 0.06); /* subtle halo for accessibility */
}

/* ===== CTA Refinements: improve hover contrast, active pressed, and focus-visible ===== */
/* Targets only: .load-more-product-list a, header buttons, and primary action buttons.
   No padding/size/layout changes. Conservative color/shadow/outline only. */

/* Load-more external CTA — stronger hover contrast, pressed inset, accessible focus */
.load-more-product-list a {
  transition: background-color 180ms ease, box-shadow 180ms ease,
    color 160ms ease;
}
.load-more-product-list a:hover {
  background-color: rgba(11, 102, 195, 0.1); /* slightly stronger contrast */
  box-shadow: 0 8px 22px rgba(11, 102, 195, 0.08);
}
.load-more-product-list a:active {
  /* pressed feel without moving layout or changing padding */
  box-shadow: inset 0 3px 10px rgba(11, 102, 195, 0.1);
}
.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-specific buttons — search/cart/menu toggles */
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;
}
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); /* subtle darken for contrast */
}
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 .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 (global) — keep size, improve contrast & pressed state */
button,
input[type="submit"],
.search-cta {
  transition: background-color 140ms ease, box-shadow 140ms ease,
    transform 120ms ease;
}
button:hover,
input[type="submit"]:hover,
.search-cta:hover {
  /* Use slightly darker accent for hover to improve contrast without resizing */
  background-color: #ff8a00; /* slightly deeper orange */
}
button:active,
input[type="submit"]:active,
.search-cta:active {
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.08);
}
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);
}

@media (prefers-reduced-motion: reduce) {
  .load-more-product-list a,
  header .header-search button,
  header .header-cart a,
  button,
  input[type="submit"],
  .search-cta {
    transition: none !important;
  }
}