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