@charset "UTF-8";

.page-social-design .commerce-page{--commerce-ink:#29231f;--commerce-muted:#746963;--commerce-line:#e1d7cf}
.page-social-design .commerce-hero.commerce-hero-showcase{min-height:530px;padding:12px 0 48px}
.page-social-design .commerce-hero-showcase:before{inset:0 -6%;background:radial-gradient(ellipse at 50% 49%,#eadfd4c4,transparent 69%)}

.social-design-hero{position:relative;isolation:isolate;width:min(100%,710px);height:500px;margin:auto;overflow:hidden}
.social-design-hero-orbit{position:absolute;inset:8% 3%;border:1px solid #c8b5a679;border-radius:50%;transform:rotate(-17deg)}
.social-design-hero-orbit:before,.social-design-hero-orbit:after{content:"";position:absolute;border:1px solid #c8b5a655;border-radius:50%}
.social-design-hero-orbit:before{inset:11% -3%;transform:rotate(24deg)}
.social-design-hero-orbit:after{inset:24% -8%;transform:rotate(-20deg)}
.social-feed-board{position:absolute;z-index:1;left:5%;top:7%;width:76%;height:84%;display:flex;flex-direction:column;overflow:hidden;border:7px solid #fcfaf6;border-radius:6px;background:#fcfaf6;box-shadow:0 31px 54px -24px #4a30299c;transform:rotate(-3deg);animation:social-feed-float 9s ease-in-out infinite alternate}
.social-feed-profile{display:flex;align-items:center;gap:9px;flex:none;height:48px;padding:3px 9px;color:#2c241f}
.social-feed-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#a86043;color:#fff;font-size:16px;font-family:Georgia,serif;font-weight:700}
.social-feed-profile>div{display:flex;flex-direction:column;gap:2px}.social-feed-profile strong{font-size:9px;letter-spacing:.08em}.social-feed-profile small{font-size:6px;font-weight:800;letter-spacing:.14em;color:#9a7968}
.social-feed-more{margin-left:auto;font-size:18px;line-height:1;color:#a78673}
.social-feed-stories{display:flex;align-items:center;gap:20px;flex:none;height:60px;padding:4px 13px 9px;border-bottom:1px solid #ebdfd4}
.social-feed-stories span{display:flex;align-items:center;gap:5px;color:#795f51;font-size:7px;font-weight:850;letter-spacing:.06em}
.social-feed-stories i{display:grid;place-items:center;width:31px;height:31px;border:1px solid #b88973;border-radius:50%;background:#f6ebe1;color:#b0775d;font-size:8px;font-style:normal}
.social-feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;flex:1;min-height:0;padding-top:4px}
.social-feed-tile{position:relative;min-width:0;min-height:0;overflow:hidden}
.social-feed-tile img{display:block;width:100%;height:100%}
.social-feed-tile-product,.social-feed-tile-origin{background:#e7d4bd}
.social-feed-tile-product img,.social-feed-tile-origin img{object-fit:contain;object-position:center;transform:scale(1.13)}
.social-feed-tile-yaban{background:#d9d0c5}.social-feed-tile-yaban img{transform:scale(1.21)}
.social-feed-tile-product>span,.social-feed-tile-origin>span{position:absolute;left:10px;bottom:9px;color:#473329;font-size:7px;font-weight:900;letter-spacing:.12em}
.social-feed-tile-type{display:flex;flex-direction:column;justify-content:space-between;padding:15px 13px;background:#bb8464;color:#fff8ef}
.social-feed-tile-type>span,.social-feed-tile-quote>span{font-size:7px;font-weight:850;letter-spacing:.13em}
.social-feed-tile-type strong{font-size:clamp(18px,2vw,29px);line-height:.98;letter-spacing:-.065em}
.social-feed-tile-type i{width:30px;height:2px;background:currentColor}
.social-feed-tile-photo img{object-fit:cover;object-position:50% 38%}
.social-feed-tile-photo:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#211811c9)}
.social-feed-tile-photo>span{position:absolute;z-index:1;left:9px;bottom:10px;color:#fff;font-size:7px;font-weight:900;letter-spacing:.1em}
.social-feed-tile-quote{display:flex;flex-direction:column;justify-content:space-between;padding:16px 13px;background:#2c2926;color:#f4e5d4}
.social-feed-tile-quote strong{margin:auto 0;font-family:Georgia,serif;font-size:clamp(19px,2vw,28px);font-weight:400;line-height:1.06;letter-spacing:-.04em}
.social-story-frame{position:absolute;z-index:2;right:1%;top:16%;width:29%;height:75%;overflow:hidden;border:6px solid #fdfaf6;border-radius:21px;background:#201a17;box-shadow:0 31px 53px -20px #33201db5;transform:rotate(6deg);animation:social-story-float 8s ease-in-out infinite alternate}
.social-story-frame>img,.social-story-shade{position:absolute;inset:0;width:100%;height:100%}.social-story-frame>img{object-fit:cover;object-position:52% center}
.social-story-shade{background:linear-gradient(180deg,#1a1514a8,transparent 30%,#1b1615e0)}
.social-story-progress,.social-design-story-bars{position:absolute;z-index:1;top:12px;left:10px;right:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.social-story-progress i,.social-design-story-bars i{height:2px;border-radius:4px;background:#ffffffa3}.social-story-progress i:first-child,.social-design-story-bars i:first-child{background:#fff}
.social-story-label,.social-story-frame>strong,.social-story-frame>small{position:absolute;z-index:1;left:11%;color:#fff}
.social-story-label{top:8%;font-size:7px;font-weight:850;letter-spacing:.1em}.social-story-frame>strong{bottom:18%;font-size:clamp(25px,3vw,39px);line-height:.94;letter-spacing:-.07em}.social-story-frame>small{bottom:8%;padding:8px 10px;background:#efe0cf;color:#3d2b25;font-size:7px;font-weight:900;letter-spacing:.06em}
.social-hero-caption{position:absolute;left:7%;bottom:3%;display:flex;align-items:center;gap:10px;color:#8c6b59;font-size:8px;font-weight:900;letter-spacing:.16em}.social-hero-caption i{width:4px;height:4px;border-radius:50%;background:#ac876e}

.social-design-gallery{background:#eee9e3}.social-design-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.social-design-gallery-card{display:flex;flex-direction:column;min-width:0;min-height:520px;margin:0;padding:25px 27px 29px;overflow:hidden;border-radius:9px}
.social-design-gallery-feed{border:1px solid #dcd0c5;background:#faf6ef;color:#382e29}.social-design-gallery-story{background:#2d2926;color:#faf1e8}
.social-design-gallery-art{position:relative;display:grid;place-items:center;flex:1;min-height:322px}
.social-design-gallery-index,.social-design-gallery-format{position:absolute;z-index:2;font-size:9px;font-weight:900;letter-spacing:.14em;opacity:.7}.social-design-gallery-index{top:0;left:0}.social-design-gallery-format{right:0;bottom:0}
.social-design-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:94%;margin-top:17px;box-shadow:0 20px 35px -18px #412d2591;transform:rotate(-2deg)}
.social-design-post{position:relative;aspect-ratio:1;overflow:hidden}
.social-design-post img{width:100%;height:100%;display:block}.social-design-post-product{background:#e4d0b6}.social-design-post-product img{object-fit:contain;transform:scale(1.18)}
.social-design-post-product>span,.social-design-post-photo>span{position:absolute;left:8px;bottom:8px;font-size:7px;font-weight:900;letter-spacing:.08em}.social-design-post-product>span{color:#473329}
.social-design-post-type{display:flex;flex-direction:column;justify-content:space-between;padding:11px;background:#b77f60;color:#fff9f2}.social-design-post-type>span{font-size:6px;font-weight:850;letter-spacing:.08em}.social-design-post-type strong{font-size:clamp(15px,1.6vw,24px);line-height:1;letter-spacing:-.06em}.social-design-post-type i{width:22px;height:2px;background:currentColor}
.social-design-post-photo img{object-fit:cover;object-position:50% 35%}.social-design-post-photo:after{content:"";position:absolute;inset:57% 0 0;background:linear-gradient(transparent,#1c1511bc)}.social-design-post-photo>span{z-index:1;color:#fff}
.social-design-story-preview{position:relative;width:43%;height:280px;margin-top:22px;overflow:hidden;border:6px solid #fbf6ee;border-radius:19px;background:#1d1917;box-shadow:0 25px 42px -15px #100a08bd;transform:rotate(4deg)}
.social-design-story-preview>img,.social-design-story-shade{position:absolute;inset:0;width:100%;height:100%}.social-design-story-preview>img{object-fit:cover;object-position:center}.social-design-story-shade{background:linear-gradient(180deg,#171311af,transparent 35%,#1b1514e8)}
.social-design-story-preview>span,.social-design-story-preview>strong,.social-design-story-preview>small{position:absolute;z-index:1;left:11%;color:#fff}.social-design-story-preview>span{top:9%;font-size:6px;font-weight:850;letter-spacing:.08em}.social-design-story-preview>strong{bottom:21%;font-size:clamp(22px,2.6vw,34px);line-height:.94;letter-spacing:-.07em}.social-design-story-preview>small{bottom:9%;padding:7px 9px;background:#f0e0cf;color:#3b2922;font-size:6px;font-weight:900;letter-spacing:.08em}
.social-design-gallery-card figcaption{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid currentColor}.social-design-gallery-card figcaption span{font-size:9px;font-weight:900;letter-spacing:.14em;opacity:.7}.social-design-gallery-card figcaption strong{font-size:clamp(25px,2.3vw,37px);line-height:1.12;letter-spacing:-.055em}.social-design-gallery-card figcaption small{font-size:13px;line-height:1.55;opacity:.8}
.social-design-gallery-foot{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:23px;color:#6e625d;font-size:12px;line-height:1.55}.social-design-gallery-foot>span{max-width:650px}.social-design-gallery-foot a{color:#513b30;text-decoration:underline;text-underline-offset:3px}.social-design-gallery-foot>a{display:inline-flex;align-items:center;gap:15px;flex-shrink:0;padding-bottom:6px;border-bottom:1px solid #9f8170;text-decoration:none;font-weight:850}

@keyframes social-feed-float{to{transform:translateY(-5px) rotate(-2deg)}}
@keyframes social-story-float{to{transform:translateY(5px) rotate(4deg)}}
@media(max-width:1000px){.page-social-design .commerce-hero.commerce-hero-showcase{min-height:450px}.social-design-hero{height:425px}.social-design-gallery-card{padding:21px}}
@media(max-width:760px){.page-social-design .commerce-hero.commerce-hero-showcase{min-height:435px;padding:10px 0 38px}.social-design-hero{height:410px;max-width:590px}.social-design-gallery-grid{grid-template-columns:1fr;gap:12px}.social-design-gallery-card{min-height:450px}.social-design-gallery-art{min-height:280px}.social-design-gallery-foot{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.page-social-design .commerce-hero.commerce-hero-showcase{min-height:320px;padding:4px 0 28px}.social-design-hero{height:310px}.social-feed-board{left:3%;top:8%;width:81%;height:82%;border-width:4px}.social-feed-profile{height:31px;padding:2px 5px;gap:4px}.social-feed-avatar{width:19px;height:19px;font-size:10px}.social-feed-profile strong{font-size:5px}.social-feed-profile small{font-size:4px}.social-feed-more{font-size:10px}.social-feed-stories{height:37px;gap:5px;padding:2px 5px 4px}.social-feed-stories span{gap:2px;font-size:4px}.social-feed-stories i{width:19px;height:19px;font-size:5px}.social-feed-grid{gap:2px;padding-top:2px}.social-feed-tile-product>span,.social-feed-tile-origin>span,.social-feed-tile-photo>span{left:4px;bottom:5px;font-size:4px}.social-feed-tile-type,.social-feed-tile-quote{padding:7px}.social-feed-tile-type>span,.social-feed-tile-quote>span{font-size:4px}.social-feed-tile-type strong,.social-feed-tile-quote strong{font-size:15px}.social-feed-tile-type i{width:18px;height:1px}.social-story-frame{right:0;top:18%;width:32%;height:73%;border-width:4px;border-radius:12px}.social-story-progress{top:7px;left:6px;right:6px}.social-story-label{top:8%;font-size:4px}.social-story-frame>strong{font-size:19px}.social-story-frame>small{padding:5px;font-size:4px}.social-hero-caption{left:3%;bottom:3%;gap:5px;font-size:5px}.social-design-gallery-card{min-height:420px;padding:20px}.social-design-gallery-art{min-height:250px}.social-design-posts{width:98%;gap:2px}.social-design-post-type{padding:6px}.social-design-post-type>span{font-size:4px}.social-design-post-type strong{font-size:14px}.social-design-post-product>span,.social-design-post-photo>span{font-size:4px;left:4px;bottom:4px}.social-design-story-preview{height:230px;width:47%}.social-design-gallery-card figcaption strong{font-size:28px}}
@media(max-width:360px){.page-social-design .commerce-hero.commerce-hero-showcase{min-height:290px}.social-design-hero{height:278px}.social-feed-stories span:last-child{display:none}.social-design-gallery-card{min-height:390px}.social-design-gallery-art{min-height:225px}.social-design-story-preview{height:205px}}
@media(prefers-reduced-motion:reduce){.social-feed-board,.social-story-frame{animation:none}}