/* Product viewer: the pin and its actual NFC card share a fixed-height stage. */
.groovy-home .pin-viewer{height:230px;perspective:1000px;position:relative;padding:8px 0}
.groovy-home .pin-viewer-rotor{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.groovy-home .pin-card.is-card-view .pin-viewer-rotor{transform:rotateY(180deg)}
.groovy-home .pin-viewer-face{position:absolute;inset:0;backface-visibility:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center}
.groovy-home .pin-card .pin-card-img{width:100%;height:100%;background-position:center;overflow:visible}
.groovy-home .pin-card .pin-card-img,.groovy-home .pin-card:nth-child(3n) .pin-card-img{background:none}
.groovy-home .pin-card .pin-card-img>img{padding:12px 14px;max-height:100%;width:100%;height:100%;object-fit:contain}
.groovy-home .pin-viewer-back{transform:rotateY(180deg)}
.groovy-home .pin-nfc-mount{height:var(--nfc-preview-height,200px);width:calc(var(--nfc-preview-height,200px)*2/3);min-width:0;min-height:0;position:relative;transform:rotate(-5deg);border-radius:12px;box-shadow:3px 8px 12px #321b1045;background:#e9d9b7}
.groovy-home .pin-nfc-mount>.pin-nfc-card{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.groovy-home .pin-nfc-mount:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid #fff7df99;background:linear-gradient(115deg,#fff8e133,transparent 35%,#fffbe120 60%,transparent 75%);box-shadow:inset 1px 1px 0 #fff9eabb,inset -1px -1px 0 #321b1040}

.groovy-home .groovy-connected-card>img:first-child{border-radius:14px;outline:1px solid #fff7df90;outline-offset:-2px;box-shadow:1px 2px 0 #d6c9ae,3px 4px 0 #897354}
.groovy-home .pin-card-badge{position:absolute;left:6px;top:0;z-index:4;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:12px 12px 12px 3px;border:1px solid #321b10;background:linear-gradient(130deg,#ffe28b,#ffc53d);box-shadow:0 3px 0 #321b10;font:700 15px/1 'Barlow Condensed',Arial,sans-serif;color:#321b10;letter-spacing:0;transform:rotate(-4deg);pointer-events:none}
.groovy-home .pin-card-badge strong{font:900 22px/1 'Fraunces',Georgia,serif;letter-spacing:-.04em}
.groovy-home .pin-card-badge small{font-size:13px;opacity:.8}

.groovy-home .pin-card-title{margin-top:7px}
.groovy-brand .image-badge{font:700 20px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:0;border:1px solid #321b10;border-radius:15px 15px 15px 4px;padding:8px 14px;background:linear-gradient(130deg,#ffe28b,#ffc53d);box-shadow:0 3px 0 #321b10;color:#321b10;rotate:-4deg}
.groovy-brand .product-num{font:600 17px/1.5 'Barlow Condensed',Arial,sans-serif;letter-spacing:0;text-transform:none;color:#68503e}
.groovy-brand .strip-pin-label{font:700 16px/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:0;color:#321b10;background:#ffcf67;border-radius:20px;padding:5px 10px;display:inline-block;margin-top:10px;box-shadow:0 2px 0 #321b1030}
.groovy-home .pin-card{overflow:visible}
.groovy-home .pin-card>.brand-reflection{z-index:2}
.groovy-home .pin-viewer-controls:has(button:focus-visible){outline:3px solid #28767a;outline-offset:3px}
@media(max-width:650px){.groovy-home .pin-viewer{height:170px}.groovy-home .pin-card .pin-card-img>img{padding:12px 0}.groovy-home .pin-viewer-controls{gap:1px;padding:3px}.groovy-home .pin-viewer-controls button{font-size:16px;padding:7px 5px}.groovy-home .pin-nfc-included{font-size:14px}.groovy-home .pin-card-badge{left:1px;padding:4px 7px;gap:4px}.groovy-home .pin-card-badge strong{font-size:18px}.groovy-home .pin-card-badge small{font-size:11px}.groovy-home .pin-nfc-mount{border-radius:9px}.groovy-home .pin-card-img:hover>img{scale:1}}
@media(max-width:650px){.groovy-home .pin-viewer{--nfc-preview-height:140px}}
@media(max-width:360px){.groovy-home .pin-viewer{height:145px;--nfc-preview-height:118px}.groovy-home .pin-viewer-controls button{font-size:15px;padding:6px 2px}.groovy-home .pin-card-badge{font-size:13px}}
@media(prefers-reduced-motion:reduce){.groovy-home .pin-viewer-rotor{transition:none}}

/* P13 : pin seul / carte seule, rotation déclenchée par une icône. */
.groovy-home .pin-card{position:relative}
.groovy-home .pin-viewer-rotor{transition:transform .95s cubic-bezier(.22,.75,.18,1)}
.groovy-home .pin-viewer-face{transform-style:flat;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.groovy-home .pin-viewer-front{transform:rotateY(0deg)}
.groovy-home .pin-rotate-button{position:absolute;top:16px;right:16px;z-index:5;width:44px;height:44px;display:grid;place-items:center;border:1px solid #321b102d;border-radius:50%;background:#fff9e9ca;color:#68432c;box-shadow:0 2px 5px #321b1010;cursor:pointer;padding:0;transition:background .2s,box-shadow .2s;backdrop-filter:blur(5px)}
.groovy-home .pin-rotate-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.groovy-home .pin-rotate-button:hover{background:#ffe4a2;box-shadow:0 3px 9px #321b1020}
.groovy-home .pin-rotate-button:focus-visible{outline:3px solid #28767a;outline-offset:3px}
.groovy-home .pin-rotate-button:active{background:#ffd471}
@media(max-width:650px){.groovy-home .pin-rotate-button{top:12px;right:10px}}
@media(prefers-reduced-motion:reduce){.groovy-home .pin-viewer-rotor{transition:none}}