/* lp-landing.css - kartu LP Open PO / Close PO (leatique) */
.lp-landing{font-family:'Open Sans',Arial,sans-serif;box-sizing:border-box}
.lp-landing *,.lp-landing *::before,.lp-landing *::after{box-sizing:border-box}
/* netralkan min-height warisan Nicepage + padding section */
.u-section-lp .u-sheet-1{min-height:0!important}
.u-section-lp{padding:54px 0 58px}
.u-section-lp .u-sheet-1{padding-left:20px;padding-right:20px}
/* anti-CLS sebelum data tiba */
#lp-rows{min-height:520px}
#lp-preview{min-height:620px}

/* ---- baris kategori ---- */
.lp-row{position:relative}
.lp-row+.lp-row{margin-top:44px}
.lp-row__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.lp-row__title{margin:0;color:#fff;font-family:Roboto,sans-serif;font-weight:700;font-size:28px;line-height:1.25}
.lp-row__all{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.lp-row__all:hover{color:#fff;border-color:#fff}
.lp-row__all svg{width:8px;height:13px;display:block;color:currentColor}

/* ---- slider ---- */
.lp-slider{position:relative}
.lp-cards{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 16px;scrollbar-width:none}
.lp-cards::-webkit-scrollbar{display:none}
.lp-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#fff;color:#2C6655;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease}
.lp-nav:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 8px 18px rgba(0,0,0,.24)}
.lp-nav--prev{left:-14px}
.lp-nav--next{right:-14px}
.lp-nav svg{width:9px;height:14px;display:block}
.lp-slider--nofit .lp-nav{display:none}

/* ---- kartu produk ---- */
.lp-card{flex:0 0 23.2%;max-width:23.2%;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.08);transition:transform .25s ease,box-shadow .25s ease}
.lp-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.lp-card__media{position:relative;display:block;aspect-ratio:1/1;background:#f4f5f4;overflow:hidden}
.lp-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lp-card:hover .lp-card__media img{transform:scale(1.04)}
.lp-card__body{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;padding:12px 14px 16px}
.lp-card__title{margin:0;font-size:14.5px;line-height:1.4;font-weight:600;color:#222}
.lp-card__title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:inherit;text-decoration:none}
.lp-card__title a:hover{color:#2C6655}
.lp-card__sku{font-size:12px;color:#8a8a8a}
.lp-card__price{margin-top:auto;font-size:15px;font-weight:700;color:#2C6655}
.lp-card__old{margin-right:6px;font-size:12.5px;font-weight:400;color:#9a9a9a;text-decoration:line-through}

/* ---- preview grid + CTA ---- */
.lp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.lp-grid .lp-card{flex:none;max-width:none}
.lp-cta{text-align:center;margin-top:30px}
.lp-landing .lp-cta a{margin-left:auto;margin-right:auto}

/* ---- skeleton shimmer ---- */
.lp-skel{position:relative;overflow:hidden;background:#EEEEEE;border-radius:8px}
.lp-skel::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-120%);animation:lpShimmer 1.4s ease-in-out infinite}
@keyframes lpShimmer{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
.lp-skel-row+.lp-skel-row{margin-top:44px}
.lp-skel-row__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.lp-skel--title{width:220px;max-width:55%;height:24px}
.lp-skel--link{width:90px;height:14px}
.lp-skel--line{display:block;height:11px;border-radius:5px}
.lp-skel--w90{width:90%}
.lp-skel--w60{width:60%}
.lp-skel--w40{width:40%}
.lp-card--skel{pointer-events:none}
.lp-card--skel:hover{transform:none;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.lp-card--skel .lp-card__media{border-radius:0}

/* ---- responsive ---- */
@media (max-width:992px){
  .lp-card{flex-basis:30.6%;max-width:30.6%}
  .lp-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .u-section-lp{padding:38px 0 42px}
  .u-section-lp .u-sheet-1{padding-left:16px;padding-right:16px}
  .lp-row+.lp-row{margin-top:34px}
  .lp-row__title{font-size:22px}
  .lp-cards{gap:12px}
  .lp-card{flex-basis:45.5%;max-width:45.5%}
  .lp-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .lp-nav{display:none}
  #lp-rows{min-height:900px}
  #lp-preview{min-height:1100px}
}