.product-card{display:grid;grid-template-rows:auto auto 1fr auto;border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;transition:all var(--duration-3) var(--ease-emphasized);box-shadow:0 4px 12px #00000005;position:relative;width:100%;max-width:100%;box-sizing:border-box;content-visibility:auto;contain-intrinsic-size:360px 420px}.product-card.selection-mode{cursor:pointer}.product-card.selection-mode:hover{border-color:var(--primary);box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 10%,transparent)}.product-card.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 3%,var(--surface));box-shadow:0 0 0 2px var(--primary),0 8px 30px color-mix(in srgb,var(--primary) 12%,transparent)}.product-card-selection-checkbox{position:absolute;top:.75rem;right:.75rem;z-index:10;cursor:pointer;display:block}.custom-checkbox{width:24px;height:24px;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--duration-2) var(--ease-spring);box-shadow:var(--shadow-sm);color:#fff}.product-card-selection-checkbox:hover .custom-checkbox{border-color:var(--primary);transform:scale(1.08);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent)}.product-card-selection-checkbox.disabled{cursor:not-allowed;opacity:.5}.product-card-selection-checkbox.disabled:hover .custom-checkbox{transform:none;border-color:var(--border);box-shadow:var(--shadow-sm)}.product-card-selection-checkbox input:checked+.custom-checkbox{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent)}.checkmark{width:14px;height:14px;opacity:0;transform:scale(.5) rotate(-10deg);transition:all var(--duration-2) var(--ease-spring)}.product-card-selection-checkbox input:checked+.custom-checkbox .checkmark{opacity:1;transform:scale(1) rotate(0)}.product-card-selection-checkbox input:focus-visible+.custom-checkbox{outline:2px solid var(--ring);outline-offset:2px}.product-card-action-bar{display:flex;gap:.375rem;padding:.5rem;border-top:1px solid color-mix(in srgb,var(--border) 40%,transparent);background:color-mix(in srgb,var(--card) 40%,transparent);z-index:2;position:relative}.product-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.375rem .5rem;font-size:.75rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-2) var(--ease-standard);min-height:32px;border-width:1px;border-style:solid;letter-spacing:-.01em}.product-action-btn:not(.btn-primary):not(.btn-secondary):not(.btn-outline){background:var(--surface);border-color:color-mix(in srgb,var(--border) 70%,transparent);color:var(--text-secondary)}.product-action-btn:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 4px 8px #00000008}.product-action-btn:not(.btn-primary):not(.btn-secondary):not(.btn-outline):hover:not(:disabled){background:var(--surface);border-color:var(--primary);color:var(--primary)}.product-action-btn:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:var(--ring-offset);box-shadow:0 0 0 calc(var(--ring-width) + var(--ring-offset)) color-mix(in srgb,var(--ring) 20%,transparent);border-color:var(--primary)}.product-action-btn:disabled{opacity:.5;cursor:not-allowed}.product-action-btn svg{flex-shrink:0;width:14px;height:14px}.product-action-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:640px){.product-card-action-bar{padding:var(--spacing-xs);gap:.25rem}.product-action-btn{padding:.375rem;font-size:.75rem;min-height:32px}.product-action-btn span{display:inline}.product-action-btn svg{display:none}}.product-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--primary) 0%,transparent 100%);opacity:0;transition:opacity var(--duration-3) var(--ease-standard);pointer-events:none;z-index:0}@media(hover:hover)and (pointer:fine){.product-card:hover{border-color:color-mix(in srgb,var(--primary) 25%,transparent);box-shadow:0 12px 36px color-mix(in srgb,var(--foreground) 6%,transparent);transform:translateY(-6px)}.product-card:hover:before{opacity:.03}.product-card:hover .pc-image img{transform:scale(1.06)}.product-card:hover .pc-price{color:var(--primary)}}.product-card:active{transform:scale(.985);box-shadow:0 4px 12px #00000005}.pc-image{position:relative;display:flex;align-items:center;justify-content:center;padding:1.25rem;border-bottom:1px solid color-mix(in srgb,var(--border) 35%,transparent);cursor:pointer;overflow:hidden;min-height:120px;text-decoration:none;color:inherit;background:radial-gradient(circle at 50% 50%,var(--editorial-surface-low) 0%,color-mix(in srgb,var(--editorial-surface-high) 50%,transparent) 100%)}.pc-image:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:var(--ring-offset)}@media(min-width:480px){.pc-image{padding:var(--spacing-md);min-height:140px}}@media(min-width:640px){.pc-image{min-height:160px}}.pc-image img{max-width:100%;width:auto;height:120px;object-fit:contain;display:block;transition:transform var(--duration-4) var(--ease-standard),opacity var(--duration-2) var(--ease-standard);position:relative;z-index:1;min-height:120px;background:var(--skeleton-base)}@media(min-width:480px){.pc-image img{height:140px;min-height:140px}}@media(min-width:640px){.pc-image img{height:160px;min-height:160px}}.pc-image img[loading=lazy]{opacity:0;min-height:120px}@media(min-width:480px){.pc-image img[loading=lazy]{min-height:140px}}@media(min-width:640px){.pc-image img[loading=lazy]{min-height:160px}}.pc-image img.loaded{opacity:1;animation:fadeInScale var(--duration-3) var(--ease-standard);background:transparent}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.pc-image-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--skeleton-base);display:flex;align-items:center;justify-content:center;z-index:2;animation:fadeIn var(--duration-2) var(--ease-standard)}.pc-image-skeleton{width:100%;height:100%;background:linear-gradient(90deg,var(--skeleton-base) 0%,var(--skeleton-highlight) 50%,var(--skeleton-base) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;position:relative}.pc-image-skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer-sweep 2s ease-in-out infinite}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes shimmer-sweep{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}.pc-image-placeholder{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);color:var(--muted-foreground);font-size:var(--font-size-sm);background:var(--surface)}@media(min-width:480px){.pc-image-placeholder{height:140px}}@media(min-width:640px){.pc-image-placeholder{height:160px}}.pc-image-placeholder svg{opacity:.4}.pc-image-placeholder span{font-size:var(--font-size-xs)}.pc-discount-badge{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;z-index:10;box-shadow:0 2px 8px #10b9814d;text-transform:uppercase;letter-spacing:.025em;white-space:nowrap;animation:fadeInScale var(--duration-3) var(--ease-standard)}@media(min-width:480px){.pc-discount-badge{top:var(--spacing-sm);right:var(--spacing-sm);font-size:.8125rem;padding:var(--spacing-sm) var(--spacing-md)}}.pc-badge{position:absolute;left:var(--spacing-sm);top:var(--spacing-sm);background:var(--surface);border:1px solid var(--border);color:var(--muted-foreground);padding:var(--spacing-xs) var(--spacing-sm);border-radius:999px;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);white-space:nowrap;max-width:70%;text-overflow:ellipsis;overflow:hidden;z-index:2}.pc-info{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;flex:1;min-width:0;word-wrap:break-word;text-decoration:none;color:inherit}.pc-info:focus-visible{outline:var(--ring-width) solid var(--ring);outline-offset:var(--ring-offset)}@media(min-width:640px){.pc-info{padding:var(--spacing-md)}}.pc-brand{color:var(--muted-foreground);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em}.pc-name{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--foreground);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(min-width:480px){.pc-name{font-size:var(--font-size-base)}}.pc-meta{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;color:var(--muted-foreground);font-size:var(--font-size-xs)}.pc-actions{display:flex;flex-direction:column;align-items:stretch;padding:.85rem 1rem;border-top:1px solid color-mix(in srgb,var(--border) 40%,transparent);gap:.65rem;position:relative;z-index:1;background:transparent;transition:background-color var(--duration-3) ease}@media(min-width:640px){.pc-actions{padding:1rem 1.25rem;gap:.75rem}}.pc-price{font-weight:var(--font-weight-semibold);color:var(--foreground);font-size:1.05rem;transition:var(--transition-base);text-align:left}@media(min-width:480px){.pc-price{font-size:1.15rem}}.pc-price-discounted{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.pc-price-old{text-decoration:line-through;color:var(--text-secondary);opacity:.6;font-size:.875em;font-weight:var(--font-weight-normal)}.pc-price-new{color:var(--primary);font-weight:var(--font-weight-semibold);font-size:1em}.pc-add{padding:.55rem 1rem;transition:var(--transition-base);position:relative;overflow:hidden;min-height:var(--touch-target-min);width:100%;font-size:.875rem;font-weight:600;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:.5rem}@media(min-width:480px){.pc-add{font-size:.9rem;padding:.65rem 1rem}}.pc-add:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:var(--primary);transform:translate(-50%,-50%);transition:width var(--duration-3) var(--ease-standard),height var(--duration-3) var(--ease-standard);opacity:.1;z-index:0}@media(hover:hover)and (pointer:fine){.pc-add:hover:before{width:300px;height:300px}}.pc-add:active{transform:scale(.97)}@media(prefers-reduced-motion:reduce){.product-card,.product-card:before,.product-action-btn,.pc-image img,.pc-actions,.pc-price,.pc-image-skeleton,.pc-image-skeleton:after,.pc-discount-badge{animation:none;transition:none}.product-card:hover,.product-card:active,.product-card:hover .pc-image img,.product-card:hover .pc-price{transform:none}}.pc-variants{padding:var(--spacing-md);border-top:1px solid var(--border)}.pc-variants-summary{cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);text-align:center;font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);transition:var(--transition-base);position:relative;min-height:var(--touch-target-min);width:100%}@media(hover:hover)and (pointer:fine){.pc-variants-summary:hover{background:var(--surface-hover);border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}}.pc-variants-summary:active{transform:translateY(0) scale(.98)}.pc-variants-list{margin-top:var(--spacing-sm);display:grid;gap:var(--spacing-sm);max-height:280px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.pc-variant{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm);flex-wrap:wrap}@media(min-width:480px){.pc-variant{flex-wrap:nowrap}}.pc-variant-info{display:grid;gap:var(--spacing-xs);flex:1;min-width:0}.pc-variant-price{font-weight:var(--font-weight-semibold);color:var(--foreground);font-size:var(--font-size-sm)}.pc-variant-source{font-size:var(--font-size-xs);color:var(--muted-foreground);text-transform:capitalize}.pc-variant-actions{display:flex;gap:var(--spacing-xs);flex-shrink:0}.pc-variant-actions .btn{min-height:var(--touch-target-min);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}
