/* Shared premium cards for category, related and viewed products. */
/* Match WooCommerce column selectors so grid items fill their assigned track.
   Keep this reset inside our archive, related and viewed product sections. */
:is(.woocommerce,.woocommerce-page) :is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products > li.product {
 width:auto;
 float:none;
 clear:none;
 margin:0;
 min-width:0;
}
.nkl-related-products { --shop-green:#00a651; }
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.product { position:relative; isolation:isolate; --nkl-product-wave-opacity:.7; float:none; width:auto; min-width:0; margin:0; padding:0; display:flex; flex-direction:column; height:100%; border:1px solid rgba(0,166,81,.14); border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 10px 28px rgba(0,70,40,.045); transition:transform 300ms ease,border-color 300ms ease,box-shadow 300ms ease; }
/* Two soft waves stay behind the existing content, at the bottom left only.
   Adjust --nkl-product-wave-opacity on the card to change their intensity. */
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.nkl-shop-product::before,
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.nkl-shop-product::after { content:""; position:absolute; z-index:0; pointer-events:none; opacity:var(--nkl-product-wave-opacity); }
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.nkl-shop-product::before { left:-18%; bottom:-12%; width:78%; height:31%; border-radius:0 85% 0 0; transform:rotate(5deg); background:linear-gradient(25deg,rgba(0,166,81,.045),rgba(0,166,81,.018) 58%,rgba(0,166,81,0)); }
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.nkl-shop-product::after { left:-7%; bottom:-16%; width:66%; height:25%; border-radius:0 95% 0 0; transform:rotate(-2deg); background:linear-gradient(20deg,rgba(0,166,81,.03),rgba(0,166,81,0)); }
.nkl-shop-product-media { position:relative; z-index:2; isolation:isolate; margin:12px 12px 0; border-radius:16px; overflow:hidden; }
.nkl-shop-product-image { display:block; aspect-ratio:1; padding:0; --nkl-img-zoom-scale:1.025; }
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.product .nkl-shop-product-image img { width:100%; height:100%; margin:0; object-fit:contain; object-position:center; transition:transform 450ms cubic-bezier(.2,.6,.2,1); }
/* Compact brand corner: diagonal connector and a single soft logo panel. */
/* Corner dimensions and logo box scale together for different brand aspect ratios. */
/* Intrinsic logo proportions determine the corner width; caps keep it compact. */
.nkl-shop-product-brand { --brand-corner-height:58px; --brand-logo-height:44px; --brand-logo-width:116px; --brand-corner-padding:24px; position:absolute; z-index:5; top:0; right:0; display:flex; align-items:center; height:var(--brand-corner-height); width:min(46%,calc(min(var(--brand-logo-width),var(--brand-logo-height) * var(--nkl-brand-ratio,2)) + var(--brand-corner-padding))); padding:6px 8px 8px 16px; pointer-events:none; }
.nkl-shop-brand-connector { position:absolute; z-index:2; top:0; left:0; width:20px; height:100%; transform:skewX(28deg); transform-origin:top left; border-bottom-left-radius:18px; background:#white; }
.nkl-shop-brand-panel { position:absolute; z-index:3; inset:0 0 0 8px; border-radius:0 20px 0 28px; background:white; }
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.product .nkl-shop-product-brand img { position:relative; z-index:7; display:block; min-width:0; width:100%; height:var(--brand-logo-height); aspect-ratio:var(--nkl-brand-ratio,2); max-width:100%; max-height:none; object-fit:contain; margin:0; padding:0; }
:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.product .onsale { top:14px; left:14px; right:auto; min-height:0; min-width:0; border-radius:6px; padding:4px 8px; line-height:1.5; background:var(--shop-green); font-size:11px; }
.nkl-shop-product-body { position:relative; z-index:2; display:flex; flex-direction:column; flex:1; min-width:0; padding:20px 22px 22px; gap:12px; text-align:left; }
.nkl-shop-product-category { display:block; color:var(--shop-green); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.5; }
.nkl-shop-product-category::after { content:""; display:block; width:28px; height:2px; margin-top:10px; background:var(--shop-green); }
.nkl-shop-product h3 { font-size:20px; font-weight:700; line-height:1.4; letter-spacing:-.015em; overflow-wrap:anywhere; }
.nkl-shop-product h3 a { color:#072d52; transition:color 250ms ease; }
.nkl-shop-product h3 a:hover { color:var(--shop-green); }
.nkl-shop-product-excerpt { font-size:14px; color:#7a8380; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
:is(.nkl-shop,.nkl-related-products,.nkl-products) .nkl-shop-product-details { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid #e4ece8; font-size:14px; font-weight:700; line-height:1.5; color:#007f46; }
.nkl-shop-product-arrow { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:50%; background:rgba(0,166,81,.08); color:var(--shop-green); transition:color 250ms ease,background-color 250ms ease; }
.nkl-shop-product-arrow svg { transition:transform 250ms ease; }
@media(hover:hover) {
 :is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.product:hover { border-color:rgba(0,166,81,.25); box-shadow:0 6px 16px rgba(0,0,0,.03),0 22px 44px rgba(0,80,45,.08); transform:translateY(-4px); }
 :is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.product:hover .nkl-img-zoom img { transform:scale(var(--nkl-img-zoom-scale)); }
 .nkl-shop-product-details:hover .nkl-shop-product-arrow { background:var(--shop-green); color:#fff; }
 .nkl-shop-product-details:hover svg { transform:translateX(3px); }
}
@media(max-width:1199px){.nkl-shop-product-brand{--brand-corner-height:54px;--brand-logo-height:40px;--brand-logo-width:108px}}
@media(max-width:600px){.nkl-shop-product-body{padding:18px}.nkl-shop-product h3{font-size:18px}.nkl-shop-product-media{margin:10px 10px 0}.nkl-shop-product-brand{--brand-corner-height:50px;--brand-logo-height:36px;--brand-logo-width:100px;--brand-corner-padding:20px;padding:6px 6px 8px 14px}}
@media(prefers-reduced-motion:reduce){:is(.nkl-shop,.nkl-related-products,.nkl-products) ul.products li.product:hover .nkl-img-zoom img,.nkl-shop-product-details:hover svg{transform:none}.nkl-shop-product,.nkl-shop-product-image img,.nkl-shop-product-arrow,.nkl-shop-product-arrow svg{transition:none!important}}

/* Homepage carousel uses the category card skin while retaining its slide widths. */
#san-pham{--shop-green:#00a651}
#san-pham ul.nkl-product-track{display:flex;gap:16px;list-style:none;margin:0;align-items:stretch}
#san-pham .nkl-product.nkl-shop-product{flex-shrink:0;height:auto;padding:0;border-radius:20px;text-align:left;align-items:stretch}
#san-pham .nkl-shop-product-image{margin:0}
#san-pham .nkl-shop-product-image img{border-radius:0}
#san-pham .nkl-shop-product-details{margin-top:auto}
/* Leave room for carousel shadows instead of clipping them against the viewport. */
#san-pham .nkl-product-viewport{margin-inline:-12px;padding:12px 12px 22px;box-sizing:border-box}
#san-pham .nkl-product.nkl-shop-product{box-shadow:0 5px 14px -7px rgba(0,80,45,.14)}
@media(hover:hover) and (pointer:fine){#san-pham .nkl-product.nkl-shop-product:hover{transform:translateY(-3px);box-shadow:0 9px 18px -9px rgba(0,80,45,.2)}}
@media(prefers-reduced-motion:reduce){#san-pham .nkl-product.nkl-shop-product:hover{transform:none}}