/* V277: isolated product information layer. Does not change carousel or radial wheel. */
.hugs-product-info{position:absolute;left:3.2%;top:calc(9.5% - 63px);width:min(24.3vw,400px);z-index:18;display:flex;flex-direction:column;gap:7px;color:#fff;font-family:Arial,sans-serif;pointer-events:none}
.hugs-product-info[hidden]{display:none!important}
.hugs-info-div{box-sizing:border-box;animation:hugsInfoEnter .65s ease-out both}
.hugs-info-size{text-align:center;font-size:14px;letter-spacing:1px;color:#f5e4db}
.hugs-info-material{height:106px;border-radius:9px;background-size:cover;background-position:center;background-color:transparent}
/* V286: V284 panel restored; SVG is an ordinary decorative image, NOT a mask. */
.hugs-info-description{background:rgba(238,212,200,.28);border-radius:10px;min-height:200px;overflow:hidden;scrollbar-width:thin;position:relative;isolation:isolate}
.hugs-info-description::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("../svg/HUGS_POP_info_BKG_01.svg");background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.15}
.hugs-info-description > *{position:relative;z-index:1}
.hugs-info-name{text-align:center;font-weight:300;font-size:29px;letter-spacing:2px;margin:10px 0 0;padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.65)}
.hugs-info-text{padding:12px 18px 9px;font-size:17px;line-height:1.82;letter-spacing:.5px}
.hugs-info-text p{margin:0 0 15px;animation:none}
.hugs-info-price{border-radius:9px;background:rgba(238,212,200,.28);font-weight:200;text-align:center;font-size:56px;letter-spacing:4px;padding:5px}
.hugs-info-brand{text-align:center;color:#ead7cd;letter-spacing:1px;font-size:14px}
@keyframes hugsInfoEnter{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes hugsInfoTextEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.hugs-product-info{width:32vw;left:2%;top:calc(10% - 40px)}.hugs-info-description{min-height:200px}.hugs-info-text{font-size:12px}.hugs-info-name{font-size:22px}.hugs-info-price{font-size:40px}}
@media(max-width:600px){.hugs-product-info{display:none!important}}

/* V290: Typography only. Fonts are defined in css/style.css. */
.hugs-info-description{font-family:"Manrope",sans-serif}
.hugs-info-price{font-family:"Vonique 64",sans-serif;font-weight:400;font-style:normal}

/* V293: DIV #4 uses the server-hosted Vonique 64 Regular font. */
.hugs-product-info .hugs-info-price{font-family:"Vonique 64",sans-serif;font-weight:400;font-synthesis:none}

/* BUILD V298 — anchored capsule; no horizontal translate or margin animation. */
.hugs-3d-toggle{position:relative;align-self:flex-start;display:block;box-sizing:border-box;margin-top:27px;width:52px;height:21px;border:0;border-radius:999px;background:transparent;color:#807779;cursor:pointer;overflow:visible;white-space:nowrap;padding:0;font:400 14px "Manrope",Arial,sans-serif;pointer-events:auto;animation:none;transition:width .55s cubic-bezier(.22,1,.36,1)}
.hugs-3d-toggle::before{content:"";position:absolute;inset:0;border-radius:999px;background:#bbc3d9;pointer-events:none;transition:left .7s cubic-bezier(.22,1,.36,1)}
.hugs-3d-toggle-info{position:absolute;left:9px;top:50%;transform:translateY(-50%);pointer-events:none;line-height:1;z-index:1}
.hugs-3d-short{display:block;opacity:1;transition:opacity .2s ease}
.hugs-3d-long{position:absolute;left:0;top:0;opacity:0;transition:opacity .25s ease;pointer-events:none}
.hugs-3d-toggle-action{position:absolute;right:9px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1}
.hugs-3d-toggle:hover:not(.is-3d),.hugs-3d-toggle:focus-visible:not(.is-3d){width:100%}
.hugs-3d-toggle:hover:not(.is-3d) .hugs-3d-short,.hugs-3d-toggle:focus-visible:not(.is-3d) .hugs-3d-short{opacity:0}
.hugs-3d-toggle:hover:not(.is-3d) .hugs-3d-long,.hugs-3d-toggle:focus-visible:not(.is-3d) .hugs-3d-long{opacity:1}
.hugs-3d-toggle:hover:not(.is-3d) .hugs-3d-toggle-action,.hugs-3d-toggle:focus-visible:not(.is-3d) .hugs-3d-toggle-action{opacity:1;transition-delay:.18s}
/* After click the right edge stays fixed. Only the left boundary retracts. */
.hugs-3d-toggle.is-3d{width:100%}
.hugs-3d-toggle.is-3d::before{left:calc(100% - 76px)}
.hugs-3d-toggle.is-3d .hugs-3d-toggle-info{opacity:0;transition:opacity .2s ease}
.hugs-3d-toggle.is-3d .hugs-3d-toggle-action{opacity:1}
.hugs-info-text{transition:opacity .9s ease,visibility .9s ease}
.hugs-product-info.hugs-3d-mode .hugs-info-text{opacity:0;visibility:hidden}
@media(max-width:900px){.hugs-3d-toggle{margin-top:15px}}

/* BUILD V299: clear all DIV #3 foreground content in 3D mode; preserve panel and SVG. */
.hugs-info-description .hugs-info-name{transition:opacity .9s ease,visibility .9s ease}
.hugs-product-info.hugs-3d-mode .hugs-info-description .hugs-info-name{opacity:0;visibility:hidden}

/* BUILD V303: mannequin viewer only within DIV #3; original SVG remains untouched. */
.hugs-mannequin-viewer{position:absolute!important;inset:0;z-index:2!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s ease,visibility .9s ease;overflow:hidden}
.hugs-product-info.hugs-3d-mode .hugs-mannequin-viewer{opacity:1;visibility:visible;pointer-events:auto;transition-delay:.35s}
.hugs-mannequin-stage{position:absolute;inset:0;touch-action:pan-y;cursor:grab}
.hugs-mannequin-stage:active{cursor:grabbing}
.hugs-mannequin-stage canvas{display:block;width:100%;height:100%}
.hugs-mannequin-controls{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.hugs-mannequin-controls button{border:1px solid rgba(255,255,255,.6);border-radius:20px;background:#bbc3d9;color:#514e56;padding:5px 10px;font:12px Manrope,Arial,sans-serif;cursor:pointer}
.hugs-mannequin-controls button.is-selected{background:#fff;color:#333}
.hugs-mannequin-status{position:absolute;top:45%;left:5%;width:90%;text-align:center;font:12px Manrope,Arial,sans-serif;color:white;pointer-events:none}
.hugs-product-info.hugs-3d-mode .hugs-info-description{min-height:430px}

/* V312: never allow the overview renderer to obscure the SVG with an opaque fill. */
.hugs-mannequin-viewer,.hugs-mannequin-stage,.hugs-mannequin-stage canvas{background:transparent!important;background-color:transparent!important}
.hugs-mannequin-stage canvas{max-width:100%;max-height:100%}