/* Pattern Studio: dimensions from the approved Option 2 LayerDoc. Shared motion and shopping controls stay in site.css / store.js. */
.pattern-studio .hero{grid-template-columns:minmax(0,1fr)!important}.pattern-studio .hero-pattern{grid-area:auto!important;margin:0!important}.pattern-studio .hero-content{min-width:0;width:min(650px,calc(100vw - 44px))!important;max-width:none!important}
.pattern-studio .site-header{height:87px;border:0;margin-inline:5.4vw}.pattern-studio .bag-button{color:var(--red)}
.pattern-studio .hero{display:grid;place-items:center;height:492px;min-height:0;border:0;grid-template-columns:1fr;background:var(--paper)}
.pattern-studio .hero-pattern{position:absolute;inset:0;height:100%;background:url('brand-pattern-tile.svg') repeat;background-size:580px auto;background-position:0 -20px}
.pattern-studio .hero-pattern img{display:none}
.pattern-studio .hero-content{position:relative;grid-area:1/1;width:650px;max-width:calc(100% - 44px);padding:38px 24px 53px;text-align:center;background:#f9f9f6}
.pattern-studio .hero h1{font-size:78px;line-height:1.15;letter-spacing:-.045em;font-weight:700;white-space:nowrap}
.pattern-studio .hero h1::after{content:"";display:block;width:46px;height:5px;background:var(--red);margin:20px auto 25px}
.pattern-studio .hero-content p{white-space:normal;font-size:22px;letter-spacing:.035em;line-height:1.35;margin:0;max-width:none}
.pattern-studio .aromas{padding:40px 4.7vw 46px}.pattern-studio .aroma-grid{gap:4.7vw}.pattern-studio .aroma-card{border:0;padding:0;min-width:0}.pattern-studio .aroma-select{padding-bottom:21px}.pattern-studio .aroma-symbol{width:120px;height:120px;margin:0 auto 22px}.pattern-studio .aroma-name{font-weight:600;font-size:16px;letter-spacing:.04em;gap:15px}.pattern-studio .scent-dot{width:16px;height:16px}.pattern-studio .aroma-detail-toggle{max-width:none;min-height:52px;font-size:14px;padding-inline:4px}.pattern-studio .aroma-detail-toggle>span{text-decoration:none}.pattern-studio .aroma-detail-toggle svg{width:21px;height:21px}.pattern-studio .aroma-detail-toggle[aria-expanded=true] svg{transform:rotate(45deg)}.pattern-studio .aroma-details>div{max-width:none}.pattern-studio .quantity{margin:15px auto 0;width:140px}.pattern-studio .quantity button{width:35px;height:35px}.pattern-studio .quantity output{font-size:19px}.pattern-studio .collection-actions{margin-top:39px}.pattern-studio .collection-actions>.primary{width:222px;min-height:49px;justify-content:center;border-radius:28px;font-size:16px;text-transform:none;letter-spacing:0}.pattern-studio .collection-actions>.primary span{display:none}.pattern-studio .pattern-ribbon{display:none}
@media(max-width:1100px){.pattern-studio .aroma-grid{gap:3vw}.pattern-studio .aroma-symbol{width:100px;height:100px}.pattern-studio .aroma-name{font-size:13px;gap:10px}.pattern-studio .aroma-detail-toggle{font-size:12px}.pattern-studio .quantity{width:120px}}
@media(max-width:760px){.pattern-studio .site-header{height:76px;margin-inline:22px}.pattern-studio .hero{height:390px}.pattern-studio .hero-pattern{background-size:425px auto;background-position:-45px -15px}.pattern-studio .hero-content{padding:30px 13px 34px;max-width:calc(100% - 44px)}.pattern-studio .hero h1{font-size:clamp(39px,11vw,65px);white-space:normal;letter-spacing:-.05em}.pattern-studio .hero h1::after{margin:21px auto;height:4px;width:36px}.pattern-studio .hero-content p{font-size:16px;letter-spacing:.015em;max-width:260px;margin:auto}.pattern-studio .aromas{padding:34px 22px 40px}.pattern-studio .aroma-grid{gap:32px 27px}.pattern-studio .aroma-card:last-child{width:calc(50% - 14px)}.pattern-studio .aroma-symbol{width:95px;height:95px;margin-bottom:22px}.pattern-studio .aroma-name{font-size:13px}.pattern-studio .aroma-detail-toggle{min-height:49px;font-size:11px}.pattern-studio .quantity{width:125px}.pattern-studio .quantity button{width:36px;height:36px}.pattern-studio .collection-actions{margin-top:33px}.pattern-studio .collection-actions>.primary{width:200px}.pattern-studio .motion-toggle{right:-7px}}

/* Keep one fixed center while the artwork scales at responsive breakpoints. */
.pattern-studio .aroma-symbol{--symbol-size:120px;position:relative;display:grid;place-items:center;width:100%;height:120px;margin:0 0 22px;transform-origin:50% 50%}
.pattern-studio .aroma-symbol svg{display:block;width:var(--symbol-size);height:var(--symbol-size);max-width:100%;transform-box:view-box;transform-origin:50% 50%}
.pattern-studio .aroma-name{justify-content:center}
@media(max-width:1100px){.pattern-studio .aroma-symbol{--symbol-size:100px}}
@media(max-width:760px){.pattern-studio .aroma-symbol{--symbol-size:95px}}

/* Icon geometry is centered independently of font baselines. */
.pattern-studio .ui-glyph{display:block;width:18px;height:18px;flex:none}
.pattern-studio .quantity button{padding:0;flex:none;place-items:center}
.pattern-studio .quantity output{line-height:1;min-width:2ch}
.pattern-studio .box-pause,.pattern-studio .dialog-close{padding:0;place-items:center}
.pattern-studio .box-pause .icon-play{display:none}
.pattern-studio .box-pause[aria-pressed=true] .icon-pause{display:none}
.pattern-studio .box-pause[aria-pressed=true] .icon-play{display:block}
.pattern-studio .collection-actions .motion-toggle{top:50%;transform:translateY(-50%)}